Now that the app functionality is working
fine, we will start with the styling.
So all the buttons are doing what they are supposed to
do well, except over the Forgot Password button, which is supposed
to be as an exercise for you to solve.
So now, in the next videos, what we are going to
do, is we are going to work on the styling.
So this is a program we built together this far.
And this is the end stylized product.
So in this video, in this very video, we
are going to work on the Login screen.
In fact, you can resize them like that, to see exactly
how they look in a real phone, because that's more or
less the size of a phone, the size ratio.
So let's close these two interfaces.
And I'll keep, this interface open in here,
[No Audio]
to use it as a reference.
[Author Typing]
So we are not doing any work in the
Python file, just here in the kivy file.
That's about the design, right.
So first thing you want to add is some
padding and some spacing, in this grid layout.
[Author Typing]
15, I'll explain what that means, of course, spacing, 20, 20.
So this grid layout, what it is, is we have
the main grid layout, which is the entire widget.
And then this grid layout has the User
Login label, these two text inputs and this
button, and also an invisible label in here.
So we want to add some padding, which means 15
horizontally, which means the distance of the GridLayout, of
this GridLayout, to the outside borders of the app.
So, you see we have some 15 distance here.
And also there is some distance which you
cannot see, but there is a padding here
vertically, between this Label and the main frame.
So that is padding, the outside space of this GridLayout.
[No Audio]
And then spacing is 20, 20 means, spacing
between the widgets of this GridLayout.
[No Audio]
So spacing is an internal
thing and padding is external.
You can think of it like that.
So 20 pixels between this two and 20 in here
as well, between this text box and this button.
Well, you can see that there's more space actually than
20 pixels, between the button and this text input.
But that is because we have also applied
in this interface, in this end product, I've
also applied some sizing to the button itself.
So there is a padding plus the
reduction in size of the button,
that's why you see more space here.
And so let's keep it like this, save.
And then you need to execute the Python file as always.
And so now we have some padding,
and some spacing, between these widgets.
How about increasing the font size
of User Login, this Label.
[No Audio]
So you need to go to the Label
and set the font_size to 20.
It has to be a string like this, sp.
[No Audio]
So now the font size is bigger.
Now let's work on the size of the Login button.
You see that this looks a bit too wide,
so how about making it a bit shorter?
Well, in kivy there is an attribute called size_hint,
which you can give to a widget, for
example, to a button here, size_hint.
Now, the way kivy works is that by
default, the area is proportionally divided between the
widget, which means that, for example, here we
have the main GridLayout, which takes the
entire space because it's one GridLayout.
So it's like a single child, it will get everything.
Then this grid layout has two children, it has this grid
layout here, and it has this GridLayout in here.
And the area between these two
children, will be equally divided.
So this GridLayout, the second one has two buttons,
the Forgot Password button and the Sign Up button.
Therefore, you can see that, this GridLayout here, has half
of the main GridLayout and the other GridLayout, which
is the first GridLayout, has the other half.
The same happens for the children of
each of these two GridLayout.
So the children of the first GridLayout, the
Label and the TextInputs, each of them will
again, get assigned the space they deserve.
So here we had one Label, two, three,
four, and an invisible Label, so five widgets.
And so every widget will have 20% of this space.
However, there is a size_hint attribute, which I
just introduced to you, which allows you to change
how much a widget gets from its parent.
So size_hint. So let's give a value of 0.3
and 0.5 to the Login button.
What's going to happen is that, the Login button will
be squeezed vertically, you see, because we gave a value
of 0.5, so it has halfed the height, and we
also gave a value of 0.3, to squeeze it horizontally.
But that doesn't work, because there are
no other widgets here on the side.
So either way, the Login button
will get, again, the entire space.
It's not splitting any space with other widgets
in this direction, in the horizontal direction.
To be able to change the button,
what we need to do actually, is to indent this button
and make it, the child of a RelativeLayout widget.
If you save that and execute, now, you'll see that
the button has changed position, so it actually has 0.3.
So 30% of this horizontal space, as you can
see, it's one third, of this horizontal space and
also 0.5, 50 percent of the height.
But if you make this 0.5 less than that, if
you make it 0.1, for example, you're not going to
get a button with a very, very small height, because
there's a Label there, which has a fixed size.
And so the minimum you can get is,
the height of the Label for the button.
Now, how can we put this button in the center?
We need to use a pos_hint, which gets
a dictionary, center_x 0.5 and center_y 0.6.
I experimented with some different values, and this
is what I found to be best.
However, not yet, because these guys here,
these buttons are taking too much space.
So what we can do is, we go to the GridLayout,
that has those buttons, this one here, and we say
size_hint 0.2, 0.2, save that and see what happens.
Hmm, so it's looking much better.
So size_hint is quite magical because, it
allows you to make the sizes relative.
You don't want to set a fixed size
because, there are different sizes in mobile devices
and it's better to keep everything relatively sized.
So what I just did here is, I
gave this GridLayout a 20% space.
So 20% here and this here is
80% for the other GridLayout.
[No Audio]
So the button was squeezing because, it tried to
do its best using these values that I gave
in here for the button, this Login button.
But it couldn't do it because, this
GridLayout was taking too much space.
Therefore 20% is good. And if you like
now, you can give some padding of 10
and 10 and spacing of 10 and 0.
[No Audio]
This was the old one, this is the new one.
[No Audio]
So not bad.
[No Audio]
I just gave some spacing between the buttons
and some padding relative to the outside.
So the horizontal space, this one and the
vertical spacing, vertical and there are no other
buttons vertical on top of these.
So this doesn't make much sense.
So 0 is just fine.
And let me close that.
And lastly, let's make those
two buttons look like links.
So these are the Forgot Password and Sign Up.
Let's change their background_color, which is currently
gray to an RGB and opacity format.
So alpha for opacity and it takes
a value from 0 to 1.
So it decimal values, you can put 0.1 and
so on, and I'll put 1, 1, 1 and 0.
0 means the background_color is completely transparent.
I'll save that and execute.
You can see now that Forgot Password? is, like that.
However, when I click the button, it doesn't seem
to be doing anything, like the Sign Up button.
So what we can do is, play
around with the opacity of the text.
Let's put it a value of 1, if
self.state is normal else 0.5.
So that's a nice magic that, I'll explain you how it works.
You see now, that when I click the
button, I understand that I'm clicking the button.
So what's happening is that, the opacity is
one, if the state of self, self refers
to the current widget, which is button.
So remember, root referred to the rule which
would be like a Login screen in here,
but self referred to this very button.
And if you want to access a property of
the GridLayout, you could do parent like that.
So that self.parent, would be pointing to
the parent of button, which is grid layout.
Well, we don't need that right now, so,
so otherwise, if the state is not normal, like this
is the normal state of a button, it's not pressed.
There are other states, like pressed,
released, but this state is normal.
And otherwise, if the state is not normal, such
as this state here, I've pressed the button.
In that case, we want to give
a value of 0.5 to opacity.
So this entire thing here is python code.
Everything actually on the right side of these attributes
here, here, there, everything there is python code.
And lastly, let's change the color of the button.
[No Audio]
You can use the color attribute for that.
Let's do 0.1. So that means 10% of red, 70% of green, and
1, and 100% of blue with a transparency of 1.
So not transparent, save that.
And I'm going to copy these three attributes,
[No Audio]
and give them to the other button as well, to
the Sign Up button, save the file, execute.
And yeah, this is what I meant to do.
So Sign Up, Forgot Password?, I press it.
I go to the other page, to the Sign Up page.
[No Audio]
So again, this is the interface we
have, this far for the Login.
One last thing I'd like to add is that, currently
when we enter a Username, the Password is visible.
We want to show stars instead of that.
So go to the TextInput, for the password and
access the password attribute, and set it to True.
So when you set that attribute to True,
[No Audio]
what happens is that, the TextInput is treated as
Password input, so it doesn't show the Password.
And thanks for following this video,a
and we'll go and stylize the other pages
of the app in the next videos, see you.