Hi, I'm very excited to show you now how to
stylize the main page of the app, which is the
page where the user will spend most of the time.
So the page where they get, to these quotes.
And here on the left, is what we have
this far, how our main page looks like.
So that is the LoginScreenSuccess page.
That's how we called it.
And this is how the page will
look like, after this couple of videos.
So first what we are going to do is, first
we are going to add some padding and some spacing
to have these buttons separated from each other.
So that's the first thing.
Then the second thing is, we are going to make
this big button look like this fancy button here, which
changes color when we hover the mouse, when we place
the mouse on top of the button.
And then we are also going to, add some scrolling
to this label here area here, so that the entire
text is shown in a small area and the user
is able to scroll and see the entire text.
So let's go ahead and work on some padding and spacing,
and then on the button. Before we begin,
I would like you to go to the
resources and download the hoverable.py file.
The logout_hover.png file and
the logout_nothover.png file.
I'll explain in just a bit, what they are.
So the padding now, LoginScreenSuccess.
Let's add a padding of 30, 30.
And spacing of 30, 30 as well.
See what we get.
[No Audio]
Oh yeah, looks better.
So now the button, the kivy library does not
natively have an object to implement hover behaviors, so
that something changes when you hover the mouse.
Or there's not an easy way to do so.
But, someone developed a very small sub module called
hoverable, and you can get that file and put
it in the same directory with your main.py
file, so they are in the same folder.
And then what you do is, you don't
have to change the hoverable.py file.
So I'm just going to close it.
And then what we can do is, we import
from hoverable, we import the HoverBehavior object.
So that is a class, the class
HoverBehavior, inside the hoverable.py file.
So that's what we're going to use.
And the way we are going to use that,
is, let's go down here and I'm going to
create a class and call it ImageButton.
So this will be a special button.
It's not going to be a simple button anymore,
but it's going to be an ImageButton.
And this ImageButton is going to inherit from, the
HoverBehavior class, and a couple of other classes as
well, which I'm going to import in here.
So the way we are going to implement
this button, is by having two different images.
I created these images in PowerPoint.
You can easily create them.
You have these symbols and you add some
text, and then make the background transparent.
And so you have one blue and one red.
So the two different states, you want the
button to have, it's a PNG image.
And so the idea is that, this button will
not have text, it will have an image.
Therefore we need to import from kivy.uix.image import Image.
And lastly, from kivy.uix.behaviors, import
ButtonBehavior and that's it.
So now we get Image and ButtonBehavior and we
place them as parents of the Image button
[Author Typing]
object. And all we need to do is here is just pass.
So it's just a class that gets together
these three objects. To make a class,
so the ImageButton class that has
attributes, that behaves, like these three objects.
So what we do then is, we go to
the ImageButton and I place it wrong here, sorry.
So this should be here actually ImageButton,
we are talking about the Logout button, not
the in light and me button.
And we don't need that Logout text anymore.
So we don't need this Logout text, because we are
using our own image which has the text inside.
[No Audio]
So remove that on_press root.log_out.
Yes, that's correct.
And source of this image button, it's going
to be logout_hover if self.hovered
else logout_nothover.png, of course.
So that is the path of the image.
[No Audio]
So hover this self.hovered here what it is,
is, this attribute of the HoverBehavior class.
So it's a BooleanProperty, it
could be either True or False.
So this is python code, I told you that everything on the
right of these, attributes is Python code.
So we are going to set a source,
the logout_hover image, for this ImageButton.
If this is True, it's if hovered is True.
So the hoverable.py file, is detecting
if a mouse is over that button.
Otherwise we put logout_nothover.
So that's, that path there.
So let me see what's happening.
[No Audio]
Yeah, so it's working fine, as easy as that.
But the button is obviously taking
too much space in here.
So it's basically taking 1, 2, 3, 4, 5 20%.
So we have five widgets, each of
them is getting 20% of the space.
So let's do some size_hinting then.
[No Audio]
size_hint, I think a good amount would be like, 0.35, 0.35.
So let's see. Yeah, I think this is good.
And now this is in the center, so if you want to put it on
the right, you want to change the position.
And again there's the pos_hint attribute,
which gets a dictionary center_x.
I think a good number will be 0.93 and center_y
[Author Typing]
0.8.
Now if we try this, see what we
have, nothing will happen,because the button when
we use this pos_hinting, the widget has
to be inside another widget called RelativeLayout.
If you save the kivy file now, and
execute the file, that will do the magic.
If I press the button, it will not work.
And the reason why that doesn't work is, hidden here in
how we order these parents of this ImageButton class.
The ButtonBehavior should be the first one, because that
order may hide the methods of that ButtonBehavior.
Now let me try again.
[No Audio]
Logout, so now it works.
Login again, and
[No Audio]
this is about this ImageButton implementation.
And in the next lecture, let's go ahead and
implement this scroll view here of the Label, see you.
[No Audio]