1
00:00:00,630 --> 00:00:05,480
Now that the app functionality is working fine, we will start with the styling.

2
00:00:05,880 --> 00:00:09,120
So all the buttons are doing what they are supposed to do.

3
00:00:09,390 --> 00:00:14,940
Well, except over the forgot password button, which is supposed to be as an exercise for you to solve.

4
00:00:15,150 --> 00:00:20,700
So now in the next videos, wars you are going through is we are going to work on the styling.

5
00:00:21,940 --> 00:00:25,000
So this is the program with built together

6
00:00:25,030 --> 00:00:28,450
this far and this is the end stylized product.

7
00:00:29,110 --> 00:00:33,760
So in this video, in this very video, we are going to work on the logging screen.

8
00:00:34,600 --> 00:00:41,770
In fact, you can resize them like that to see exactly how they will look in a real phone, because

9
00:00:41,770 --> 00:00:43,390
that's more or less the size

10
00:00:44,890 --> 00:00:46,840
of a phone, the size the ratio.

11
00:00:47,080 --> 00:00:54,910
So let's close these two interfaces and I'll keep this interface open in here

12
00:00:58,660 --> 00:01:00,130
to use it as a reference.

13
00:01:04,850 --> 00:01:09,250
So we are not doing any work in the Python file just here

14
00:01:09,320 --> 00:01:10,010
in the kivy file.

15
00:01:10,060 --> 00:01:12,390
That's about the design, right.

16
00:01:12,490 --> 00:01:20,030
So first thing you want to add is some padding and some spacing in this grid layout.

17
00:01:22,880 --> 00:01:23,440
Fifteen.

18
00:01:23,810 --> 00:01:25,400
I'll explain what that means.

19
00:01:25,490 --> 00:01:26,420
Of course.

20
00:01:26,870 --> 00:01:27,440
Spacing.

21
00:01:27,690 --> 00:01:28,130
Twenty.

22
00:01:28,360 --> 00:01:28,750
Twenty.

23
00:01:30,110 --> 00:01:34,450
So this grid lay out what it is, is we have the main grid layout

24
00:01:34,610 --> 00:01:36,030
which is the entire widget.

25
00:01:36,380 --> 00:01:40,530
And then the this grid lay out has the user log in label,

26
00:01:40,760 --> 00:01:42,050
these two text inputs,

27
00:01:42,440 --> 00:01:43,310
and this button.

28
00:01:44,450 --> 00:01:46,520
And also an invisible label in here.

29
00:01:47,150 --> 00:01:53,810
So we want to add some padding, which means fifteen horizontally, which means the distance of the

30
00:01:53,810 --> 00:01:59,180
grid layout of this grid layout to the outside borders of the app.

31
00:02:00,290 --> 00:02:04,370
So you see we have some 15 distance here.

32
00:02:04,790 --> 00:02:12,350
And also there is some distance which you cannot see, but there is a padding here vertically between

33
00:02:12,350 --> 00:02:14,910
this label and the main frame.

34
00:02:16,230 --> 00:02:20,180
So that is padding the outside space of this grid layout.

35
00:02:31,810 --> 00:02:38,530
Spacing is, 20-20 means spacing between the widgets of this grid layout.

36
00:02:43,640 --> 00:02:47,280
So spacing is an internal thing and padding is external.

37
00:02:47,550 --> 00:02:48,810
You can think of it like that.

38
00:02:49,020 --> 00:02:52,590
So 20 pixels between these two and 20 in here as well.

39
00:02:53,000 --> 00:02:58,680
Between this textbooks, this button, well, you can see that there's more space actually than 20 pixels

40
00:02:58,950 --> 00:03:01,160
between the button and this text input.

41
00:03:01,650 --> 00:03:07,070
But that is because we have also applied this interface in this end product.

42
00:03:07,620 --> 00:03:10,680
I have also applied some sizing to the button itself.

43
00:03:11,010 --> 00:03:14,670
So there is the padding plus the reduction in size of the button.

44
00:03:14,700 --> 00:03:17,160
That's why you see more space here.

45
00:03:17,940 --> 00:03:20,310
So that's keep it like this, save.

46
00:03:20,740 --> 00:03:23,280
Then you need to execute the python file as always.

47
00:03:24,070 --> 00:03:29,220
And so now we have some padding and some spacing between these widgets.

48
00:03:29,370 --> 00:03:33,300
How about increasing the font size of user login?

49
00:03:33,990 --> 00:03:34,680
This label.

50
00:03:37,240 --> 00:03:44,070
So you need to go to the label and set the font size to 20.

51
00:03:44,200 --> 00:03:47,070
It has to be a string like this sp.

52
00:03:52,180 --> 00:03:54,410
So now the font size is bigger.

53
00:03:54,680 --> 00:03:58,220
Now let's work on the size of the Login button.

54
00:03:58,430 --> 00:04:01,220
You see that this looks a bit too wide.

55
00:04:01,710 --> 00:04:03,860
So how about making it a bit shorter?

56
00:04:04,850 --> 00:04:06,230
Well, in kivy

57
00:04:07,570 --> 00:04:14,260
there is an attribute called size hint, which you can give to a widget, for example, to a button

58
00:04:14,260 --> 00:04:14,620
here.

59
00:04:16,510 --> 00:04:27,220
Size_hint. Now of the way kivy works is that by default, the area is proportionally divided between

60
00:04:27,220 --> 00:04:33,550
the widgets, which means that, for example, here we have the main grid layout, which takes the entire

61
00:04:33,550 --> 00:04:36,940
space because it's one grid lay out.

62
00:04:38,140 --> 00:04:39,370
So it's like a single child.

63
00:04:39,430 --> 00:04:40,600
It will get everything.

64
00:04:41,140 --> 00:04:43,570
Then this grid layout has two children.

65
00:04:43,990 --> 00:04:47,500
It has this grid layout here and it has this grid layout in here.

66
00:04:48,070 --> 00:04:52,330
And the area between these two children will be equally divided.

67
00:04:52,870 --> 00:04:59,170
And so this grid layout, the second one has two buttons, the forgot password button and the sigin up

68
00:04:59,170 --> 00:04:59,600
button.

69
00:05:00,250 --> 00:05:07,630
Therefore, you can see that this grid layout here has half of the main grid layout.

70
00:05:08,650 --> 00:05:12,280
And the other grid layout, which is the first grade level, has the other half.

71
00:05:13,470 --> 00:05:18,810
The same happens for the children of each of these two grid layouts.

72
00:05:19,340 --> 00:05:25,260
So the children of the first grid layout the label and the text inputs.

73
00:05:25,980 --> 00:05:30,420
Each of them will again get assigned the space they deserve.

74
00:05:30,690 --> 00:05:36,240
So here we had one label, two, three, four, and an invisible label.

75
00:05:36,300 --> 00:05:37,770
So five widgets.

76
00:05:37,800 --> 00:05:42,130
And so every widget we have 20 percent of this space.

77
00:05:43,080 --> 00:05:50,450
However, there is a size hint attribute which I just introduced to you, which you which allows it

78
00:05:50,450 --> 00:05:54,930
to change how much a widget gets from its parent.

79
00:05:55,300 --> 00:05:55,850
So

80
00:05:55,880 --> 00:05:56,560
size_hint.

81
00:05:56,790 --> 00:06:02,780
So let's give a value of 0.3 and 0.5 to the Login button.

82
00:06:03,480 --> 00:06:09,390
What's going to happen is that the logging button will be squeezed vertically, you see.

83
00:06:10,470 --> 00:06:13,140
Because we gave a value of 0.5.

84
00:06:14,250 --> 00:06:16,010
So it's it has half the height.

85
00:06:16,620 --> 00:06:21,120
And we also gave a value of 0.3 to squeezes horizontally.

86
00:06:21,630 --> 00:06:26,720
But that doesn't work because there are no other widgets here on the sides.

87
00:06:27,950 --> 00:06:32,030
So either way, the login button will get again the entire space.

88
00:06:32,390 --> 00:06:37,370
It's not splitting any space with other widgets in this direction, in the horizontal direction.

89
00:06:39,240 --> 00:06:40,850
To be able to change the bottom.

90
00:06:41,310 --> 00:06:53,580
What we need to do, actually, is to indent this bottom and make it the child of a relatively all two

91
00:06:53,580 --> 00:06:54,060
widget.

92
00:06:55,290 --> 00:07:02,520
If you save that and execute now, you'll see that the button has changed position.

93
00:07:02,790 --> 00:07:06,690
So it actually has 0.3,

94
00:07:06,960 --> 00:07:10,020
So 30 percent of this horizontal space.

95
00:07:10,050 --> 00:07:14,760
As you can see, it's One-Third of this horizontal space.

96
00:07:15,330 --> 00:07:17,820
And also 0.5, 50 percent of the height.

97
00:07:18,030 --> 00:07:24,000
But if you make this zero point five less than that, if you make it to zero point one, for example,

98
00:07:24,270 --> 00:07:30,300
you're not going to get a bottom with a very, very small hide because there's a label there which has

99
00:07:30,390 --> 00:07:31,320
a fixed size.

100
00:07:31,710 --> 00:07:35,700
And so the minimum you can get is the height of the label for the button.

101
00:07:36,240 --> 00:07:38,820
Now, how can we put this button in the center?

102
00:07:39,210 --> 00:07:40,800
We need to use a pause_hint.

103
00:07:41,490 --> 00:07:57,210
Which gets a dictionary {'center_x': 0.5,  'center_y': 0.6}.

104
00:07:57,600 --> 00:08:03,400
I experimented with some different values and this is what I found to be best, however

105
00:08:03,780 --> 00:08:10,140
not yet, because these guys here, these buttons are taking too much space.

106
00:08:10,800 --> 00:08:15,960
So what we can do is we go to the GridLayout that has those buttons.

107
00:08:16,560 --> 00:08:24,450
This one here and we say size:hint: 0.2, 0.2, save that.

108
00:08:24,570 --> 00:08:25,740
And see what happens.

109
00:08:27,420 --> 00:08:29,910
So it's looking much better.

110
00:08:32,130 --> 00:08:38,650
So size_hint is quite magical because it allows you to make the size is relative.

111
00:08:38,980 --> 00:08:46,960
You don't want to set a fixed size because there are different sizes in mobile devices and it's better

112
00:08:46,960 --> 00:08:50,020
to keep everything relatively sized.

113
00:08:50,380 --> 00:08:59,470
So what I just did here is I gave this great lay out a 20 percent space, so 20 percent here.

114
00:08:59,590 --> 00:09:03,510
And this here is 80 percent for the other GridLayout.

115
00:09:06,140 --> 00:09:13,040
So the button was squeezing because it's tried to do its best using these values that they gave in here

116
00:09:13,430 --> 00:09:18,740
for the button, this logging button, but it couldn't do it because this grid layout was taking too

117
00:09:18,740 --> 00:09:19,430
much space.

118
00:09:19,740 --> 00:09:21,110
Therefore, 20 percent is good.

119
00:09:22,040 --> 00:09:31,860
And if you're like now, you can give some padding of 10 and 10 and spacing of 10 and zero.

120
00:09:35,030 --> 00:09:35,870
This is the old one.

121
00:09:37,030 --> 00:09:37,840
This is a new on.

122
00:09:41,630 --> 00:09:42,530
So not bad.

123
00:09:46,270 --> 00:09:51,640
I just gave some spacing between the buttons and some padding relative to the outside.

124
00:09:51,940 --> 00:09:56,650
So the horizontal space is one and the vertical spacing vertical.

125
00:09:56,860 --> 00:10:01,630
And there are no other buttons vertical on top of this, so this doesn't make much sense.

126
00:10:01,870 --> 00:10:03,070
So zero is just fine.

127
00:10:03,460 --> 00:10:05,170
And let me close that.

128
00:10:06,370 --> 00:10:10,660
And lastly, let's make those two buttons look like links.

129
00:10:12,980 --> 00:10:16,760
So these are the forgot password and sign up.

130
00:10:17,330 --> 00:10:26,600
Let's change the background color, which is currently gray to an hour RGB. and opacity format.

131
00:10:26,900 --> 00:10:31,430
So Alpha four opacity and it takes a value from zero to one.

132
00:10:31,730 --> 00:10:35,540
So decimal values, you can put 0.1 and so on.

133
00:10:36,260 --> 00:10:43,400
And I'll put 1, 1, 1, and zero. Zero means the background color is completely transparent.

134
00:10:45,230 --> 00:10:47,050
Save that and execute.

135
00:10:47,450 --> 00:10:50,660
You can see now that forgot password is like that.

136
00:10:51,950 --> 00:10:58,130
However, when I click the button, it doesn't seem to be doing anything like the sign-up button.

137
00:10:58,580 --> 00:11:00,470
So what we can do is.

138
00:11:02,150 --> 00:11:04,890
Play around with the opacity of the text.

139
00:11:05,460 --> 00:11:09,090
Let's put it a value of one, if self.state

140
00:11:09,120 --> 00:11:16,890
is normal else 0.5.

141
00:11:17,850 --> 00:11:19,190
So that's a nice magic.

142
00:11:19,890 --> 00:11:21,150
I'll explain you how it works.

143
00:11:22,650 --> 00:11:26,820
You see, you know that when I click the button, I understand that I'm clicking the button.

144
00:11:28,650 --> 00:11:32,140
So what's happening is that the opacity is one.

145
00:11:32,520 --> 00:11:38,610
In the state of self, self refers to the current widget, which is button.

146
00:11:39,950 --> 00:11:46,490
So remember, root referred to the rule, which would be like login screen in here, but self referred

147
00:11:46,490 --> 00:11:48,680
to this very button.

148
00:11:48,950 --> 00:11:55,760
And if you want to access a property of the grid layout, you could do parent like that.

149
00:11:56,420 --> 00:12:02,780
So that self.parent would be pointing to the parent of button which is GridLayout.

150
00:12:03,440 --> 00:12:04,760
Well, we don't need that right now.

151
00:12:04,790 --> 00:12:05,000
So.

152
00:12:07,080 --> 00:12:13,770
So otherwise, if the state is not normal like this is a normal state of a button, it's not pressed.

153
00:12:14,070 --> 00:12:19,830
There are other states like pressed, released, but this state is normal.

154
00:12:19,920 --> 00:12:25,590
And if that's otherwise, if the state is not normal, such as this state here, I've praised the button

155
00:12:25,770 --> 00:12:26,340
in that case.

156
00:12:26,370 --> 00:12:31,050
We want to give a value of zero point five to opacity.

157
00:12:31,830 --> 00:12:34,710
So this entire thing here is python code.

158
00:12:35,400 --> 00:12:38,300
Everything actually on the right side

159
00:12:38,430 --> 00:12:41,790
of these attributes here.

160
00:12:42,930 --> 00:12:43,410
Here.

161
00:12:44,310 --> 00:12:44,730
There.

162
00:12:45,690 --> 00:12:47,580
Everything there is python code.

163
00:12:49,470 --> 00:12:52,410
And lastly, let's change the color of the button.

164
00:12:55,420 --> 00:12:57,310
You can use the color attribute for that.

165
00:12:58,200 --> 00:13:00,330
Let's do zero point one.

166
00:13:00,640 --> 00:13:02,860
So that means 10 percent of red.

167
00:13:03,250 --> 00:13:10,120
70 percent of green and 100 percent of blue with the transparency of one.

168
00:13:10,360 --> 00:13:11,890
So not transparent.

169
00:13:12,490 --> 00:13:13,030
Save that.

170
00:13:13,240 --> 00:13:15,400
And I'm going to copy these three attributes

171
00:13:19,360 --> 00:13:21,310
and give them to the other button as well.

172
00:13:21,340 --> 00:13:22,260
To the sign up button.

173
00:13:22,600 --> 00:13:23,500
Save the file.

174
00:13:23,740 --> 00:13:24,580
Execute.

175
00:13:26,030 --> 00:13:28,310
And, you know, this is what I meant to do.

176
00:13:28,520 --> 00:13:29,240
So sign up.

177
00:13:29,310 --> 00:13:30,140
Forgot password.

178
00:13:30,570 --> 00:13:31,290
I pressed it.

179
00:13:31,430 --> 00:13:34,970
I go to the other page, to the sign up page.

180
00:13:39,020 --> 00:13:42,880
So, again, this is the interface, we have this for the login screen.

181
00:13:43,250 --> 00:13:49,190
One last thing I'd like to add is that currently when we enter a username, the password is visible.

182
00:13:49,430 --> 00:13:51,560
We want to show stars instead of that.

183
00:13:51,860 --> 00:13:59,920
So go to the text input for the passwords and access the password attribute and set it to true.

184
00:14:00,320 --> 00:14:02,480
So when you set that attributed to true,

185
00:14:07,110 --> 00:14:13,590
what happens is that the text input is treated as password input so it doesn't show the password.

186
00:14:13,950 --> 00:14:20,610
And thanks for following this video and we'll go and stylize the other pages of the app in the next videos.

187
00:14:20,690 --> 00:14:21,840
See you!