1
00:00:00,650 --> 00:00:03,076
Now that the app functionality is working

2
00:00:03,077 --> 00:00:05,786
fine, we will start with the styling.

3
00:00:05,787 --> 00:00:08,948
So all the buttons are doing what they are supposed to

4
00:00:08,949 --> 00:00:12,916
do well, except over the Forgot Password button, which is supposed

5
00:00:12,917 --> 00:00:15,130
to be as an exercise for you to solve.

6
00:00:15,131 --> 00:00:17,604
So now, in the next videos, what we are going to

7
00:00:17,605 --> 00:00:20,750
do, is we are going to work on the styling.

8
00:00:21,730 --> 00:00:25,724
So this is a program we built together this far.

9
00:00:25,725 --> 00:00:28,972
And this is the end stylized product.

10
00:00:28,973 --> 00:00:31,388
So in this video, in this very video, we

11
00:00:31,389 --> 00:00:33,800
are going to work on the Login screen.

12
00:00:34,490 --> 00:00:38,828
In fact, you can resize them like that, to see exactly

13
00:00:38,829 --> 00:00:42,528
how they look in a real phone, because that's more or

14
00:00:42,529 --> 00:00:47,014
less the size of a phone, the size ratio.

15
00:00:47,015 --> 00:00:51,514
So let's close these two interfaces.

16
00:00:51,515 --> 00:00:55,100
And I'll keep, this interface open in here,

17
00:00:55,113 --> 00:00:58,366
[No Audio]

18
00:00:58,367 --> 00:01:00,350
to use it as a reference.

19
00:01:00,366 --> 00:01:04,633
[Author Typing]

20
00:01:04,633 --> 00:01:06,936
So we are not doing any work in the

21
00:01:06,937 --> 00:01:10,142
Python file, just here in the kivy file.

22
00:01:10,143 --> 00:01:12,456
That's about the design, right.

23
00:01:12,457 --> 00:01:15,692
So first thing you want to add is some

24
00:01:15,693 --> 00:01:20,230
padding and some spacing, in this grid layout.

25
00:01:20,233 --> 00:01:22,730
[Author Typing]

26
00:01:22,731 --> 00:01:28,940
15, I'll explain what that means, of course, spacing, 20, 20.

27
00:01:29,950 --> 00:01:33,728
So this grid layout, what it is, is we have

28
00:01:33,729 --> 00:01:36,278
the main grid layout, which is the entire widget.

29
00:01:36,279 --> 00:01:39,638
And then this grid layout has the User

30
00:01:39,639 --> 00:01:42,852
Login label, these two text inputs and this

31
00:01:42,853 --> 00:01:47,044
button, and also an invisible label in here.

32
00:01:47,045 --> 00:01:51,172
So we want to add some padding, which means 15

33
00:01:51,173 --> 00:01:55,272
horizontally, which means the distance of the GridLayout, of

34
00:01:55,273 --> 00:01:59,460
this GridLayout, to the outside borders of the app.

35
00:02:00,230 --> 00:02:04,712
So, you see we have some 15 distance here.

36
00:02:04,713 --> 00:02:07,628
And also there is some distance which you

37
00:02:07,629 --> 00:02:10,876
cannot see, but there is a padding here

38
00:02:10,877 --> 00:02:15,190
vertically, between this Label and the main frame.

39
00:02:16,010 --> 00:02:20,570
So that is padding, the outside space of this GridLayout.

40
00:02:20,570 --> 00:02:31,566
[No Audio]

41
00:02:31,566 --> 00:02:36,080
And then spacing is 20, 20 means, spacing

42
00:02:36,081 --> 00:02:39,060
between the widgets of this GridLayout.

43
00:02:39,066 --> 00:02:43,400
[No Audio]

44
00:02:43,410 --> 00:02:45,582
So spacing is an internal

45
00:02:45,583 --> 00:02:47,470
thing and padding is external.

46
00:02:47,471 --> 00:02:48,936
You can think of it like that.

47
00:02:48,937 --> 00:02:52,152
So 20 pixels between this two and 20 in here

48
00:02:52,153 --> 00:02:55,112
as well, between this text box and this button.

49
00:02:55,113 --> 00:02:57,932
Well, you can see that there's more space actually than

50
00:02:57,933 --> 00:03:01,666
20 pixels, between the button and this text input.

51
00:03:01,667 --> 00:03:04,786
But that is because we have also applied

52
00:03:04,787 --> 00:03:07,874
in this interface, in this end product, I've

53
00:03:07,875 --> 00:03:10,896
also applied some sizing to the button itself.

54
00:03:10,897 --> 00:03:13,136
So there is a padding plus the

55
00:03:13,137 --> 00:03:14,736
reduction in size of the button,

56
00:03:14,737 --> 00:03:17,616
that's why you see more space here.

57
00:03:17,617 --> 00:03:20,448
And so let's keep it like this, save.

58
00:03:20,449 --> 00:03:23,810
And then you need to execute the Python file as always.

59
00:03:23,811 --> 00:03:25,978
And so now we have some padding,

60
00:03:25,979 --> 00:03:29,370
and some spacing, between these widgets.

61
00:03:29,371 --> 00:03:31,540
How about increasing the font size

62
00:03:31,541 --> 00:03:35,010
of User Login, this Label.

63
00:03:35,010 --> 00:03:37,033
[No Audio]

64
00:03:37,033 --> 00:03:38,926
So you need to go to the Label

65
00:03:38,927 --> 00:03:44,300
and set the font_size to 20.

66
00:03:44,301 --> 00:03:47,080
It has to be a string like this, sp.

67
00:03:47,080 --> 00:03:52,000
[No Audio]

68
00:03:52,010 --> 00:03:54,674
So now the font size is bigger.

69
00:03:54,675 --> 00:03:58,384
Now let's work on the size of the Login button.

70
00:03:58,385 --> 00:04:01,526
You see that this looks a bit too wide,

71
00:04:01,527 --> 00:04:04,750
so how about making it a bit shorter?

72
00:04:04,751 --> 00:04:10,633
Well, in kivy there is an attribute called size_hint,

73
00:04:10,634 --> 00:04:13,028
which you can give to a widget, for

74
00:04:13,029 --> 00:04:19,410
example, to a button here, size_hint.

75
00:04:19,411 --> 00:04:22,532
Now, the way kivy works is that by

76
00:04:22,533 --> 00:04:27,428
default, the area is proportionally divided between the

77
00:04:27,429 --> 00:04:30,408
widget, which means that, for example, here we

78
00:04:30,409 --> 00:04:33,144
have the main GridLayout, which takes the

79
00:04:33,145 --> 00:04:37,110
entire space because it's one GridLayout.

80
00:04:37,930 --> 00:04:41,050
So it's like a single child, it will get everything.

81
00:04:41,051 --> 00:04:44,818
Then this grid layout has two children, it has this grid

82
00:04:44,819 --> 00:04:47,936
layout here, and it has this GridLayout in here.

83
00:04:47,937 --> 00:04:49,712
And the area between these two

84
00:04:49,713 --> 00:04:52,910
children, will be equally divided.

85
00:04:52,911 --> 00:04:57,094
So this GridLayout, the second one has two buttons,

86
00:04:57,095 --> 00:05:00,148
the Forgot Password button and the Sign Up button.

87
00:05:00,149 --> 00:05:04,500
Therefore, you can see that, this GridLayout here, has half

88
00:05:04,501 --> 00:05:10,228
of the main GridLayout and the other GridLayout, which

89
00:05:10,229 --> 00:05:12,500
is the first GridLayout, has the other half.

90
00:05:13,270 --> 00:05:16,200
The same happens for the children of

91
00:05:16,201 --> 00:05:19,278
each of these two GridLayout.

92
00:05:19,279 --> 00:05:23,432
So the children of the first GridLayout, the

93
00:05:23,433 --> 00:05:26,940
Label and the TextInputs, each of them will

94
00:05:26,941 --> 00:05:30,610
again, get assigned the space they deserve.

95
00:05:30,611 --> 00:05:34,268
So here we had one Label, two, three,

96
00:05:34,269 --> 00:05:37,878
four, and an invisible Label, so five widgets.

97
00:05:37,879 --> 00:05:42,220
And so every widget will have 20% of this space.

98
00:05:42,910 --> 00:05:47,168
However, there is a size_hint attribute, which I

99
00:05:47,169 --> 00:05:51,220
just introduced to you, which allows you to change

100
00:05:51,221 --> 00:05:55,348
how much a widget gets from its parent.

101
00:05:55,349 --> 00:05:59,316
So size_hint. So let's give a value of 0.3

102
00:05:59,317 --> 00:06:03,430
and 0.5 to the Login button.

103
00:06:03,431 --> 00:06:06,568
What's going to happen is that, the Login button will

104
00:06:06,569 --> 00:06:11,912
be squeezed vertically, you see, because we gave a value

105
00:06:11,913 --> 00:06:16,988
of 0.5, so it has halfed the height, and we

106
00:06:16,989 --> 00:06:21,474
also gave a value of 0.3, to squeeze it horizontally.

107
00:06:21,475 --> 00:06:24,188
But that doesn't work, because there are

108
00:06:24,189 --> 00:06:26,940
no other widgets here on the side.

109
00:06:27,710 --> 00:06:29,536
So either way, the Login button

110
00:06:29,537 --> 00:06:32,240
will get, again, the entire space.

111
00:06:32,241 --> 00:06:35,302
It's not splitting any space with other widgets

112
00:06:35,303 --> 00:06:37,733
in this direction, in the horizontal direction.

113
00:06:38,833 --> 00:06:41,284
To be able to change the button,

114
00:06:41,285 --> 00:06:46,880
what we need to do actually, is to indent this button

115
00:06:47,490 --> 00:06:54,370
and make it, the child of a RelativeLayout widget.

116
00:06:55,110 --> 00:07:00,152
If you save that and execute, now, you'll see that

117
00:07:00,153 --> 00:07:06,796
the button has changed position, so it actually has 0.3.

118
00:07:06,797 --> 00:07:10,508
So 30% of this horizontal space, as you can

119
00:07:10,509 --> 00:07:15,228
see, it's one third, of this horizontal space and

120
00:07:15,229 --> 00:07:18,066
also 0.5, 50 percent of the height.

121
00:07:18,067 --> 00:07:22,272
But if you make this 0.5 less than that, if

122
00:07:22,273 --> 00:07:25,088
you make it 0.1, for example, you're not going to

123
00:07:25,089 --> 00:07:28,560
get a button with a very, very small height, because

124
00:07:28,561 --> 00:07:31,552
there's a Label there, which has a fixed size.

125
00:07:31,553 --> 00:07:33,764
And so the minimum you can get is,

126
00:07:33,765 --> 00:07:36,100
the height of the Label for the button.

127
00:07:36,101 --> 00:07:39,140
Now, how can we put this button in the center?

128
00:07:39,141 --> 00:07:44,216
We need to use a pos_hint, which gets

129
00:07:44,217 --> 00:07:57,468
a dictionary, center_x 0.5 and center_y 0.6.

130
00:07:57,469 --> 00:08:00,668
I experimented with some different values, and this

131
00:08:00,669 --> 00:08:03,164
is what I found to be best.

132
00:08:03,165 --> 00:08:07,868
However, not yet, because these guys here,

133
00:08:07,869 --> 00:08:10,592
these buttons are taking too much space.

134
00:08:10,593 --> 00:08:13,599
So what we can do is, we go to the GridLayout,

135
00:08:13,600 --> 00:08:17,936
that has those buttons, this one here, and we say

136
00:08:17,937 --> 00:08:25,840
size_hint 0.2, 0.2, save that and see what happens.

137
00:08:26,566 --> 00:08:30,166
Hmm, so it's looking much better.

138
00:08:31,750 --> 00:08:35,751
So size_hint is quite magical because, it

139
00:08:35,752 --> 00:08:38,846
allows you to make the sizes relative.

140
00:08:38,847 --> 00:08:41,080
You don't want to set a fixed size

141
00:08:41,081 --> 00:08:45,682
because, there are different sizes in mobile devices

142
00:08:45,683 --> 00:08:50,274
and it's better to keep everything relatively sized.

143
00:08:50,275 --> 00:08:52,172
So what I just did here is, I

144
00:08:52,173 --> 00:08:57,872
gave this GridLayout a 20% space.

145
00:08:57,873 --> 00:09:00,800
So 20% here and this here is

146
00:09:00,801 --> 00:09:03,690
80% for the other GridLayout.

147
00:09:03,700 --> 00:09:05,950
[No Audio]

148
00:09:05,951 --> 00:09:09,248
So the button was squeezing because, it tried to

149
00:09:09,249 --> 00:09:12,596
do its best using these values that I gave

150
00:09:12,597 --> 00:09:15,476
in here for the button, this Login button.

151
00:09:15,477 --> 00:09:17,332
But it couldn't do it because, this

152
00:09:17,333 --> 00:09:19,700
GridLayout was taking too much space.

153
00:09:19,701 --> 00:09:22,792
Therefore 20% is good. And if you like

154
00:09:22,793 --> 00:09:27,416
now, you can give some padding of 10

155
00:09:27,417 --> 00:09:32,100
and 10 and spacing of 10 and 0.

156
00:09:32,101 --> 00:09:34,810
[No Audio]

157
00:09:34,811 --> 00:09:38,280
This was the old one, this is the new one.

158
00:09:38,280 --> 00:09:41,370
[No Audio]

159
00:09:41,371 --> 00:09:42,760
So not bad.

160
00:09:42,766 --> 00:09:46,100
[No Audio]

161
00:09:46,100 --> 00:09:48,950
I just gave some spacing between the buttons

162
00:09:48,951 --> 00:09:51,792
and some padding relative to the outside.

163
00:09:51,793 --> 00:09:54,528
So the horizontal space, this one and the

164
00:09:54,529 --> 00:09:57,856
vertical spacing, vertical and there are no other

165
00:09:57,857 --> 00:10:00,132
buttons vertical on top of these.

166
00:10:00,133 --> 00:10:01,780
So this doesn't make much sense.

167
00:10:01,781 --> 00:10:03,412
So 0 is just fine.

168
00:10:03,413 --> 00:10:05,440
And let me close that.

169
00:10:06,130 --> 00:10:08,052
And lastly, let's make those

170
00:10:08,053 --> 00:10:10,990
two buttons look like links.

171
00:10:12,766 --> 00:10:17,288
So these are the Forgot Password and Sign Up.

172
00:10:17,289 --> 00:10:21,448
Let's change their background_color, which is currently

173
00:10:21,449 --> 00:10:26,818
gray to an RGB and opacity format.

174
00:10:26,819 --> 00:10:29,660
So alpha for opacity and it takes

175
00:10:29,661 --> 00:10:31,628
a value from 0 to 1.

176
00:10:31,629 --> 00:10:35,228
So it decimal values, you can put 0.1 and

177
00:10:35,229 --> 00:10:40,272
so on, and I'll put 1, 1, 1 and 0.

178
00:10:40,273 --> 00:10:43,770
0 means the background_color is completely transparent.

179
00:10:44,750 --> 00:10:47,302
I'll save that and execute.

180
00:10:47,303 --> 00:10:51,040
You can see now that Forgot Password? is, like that.

181
00:10:51,810 --> 00:10:54,954
However, when I click the button, it doesn't seem

182
00:10:54,955 --> 00:10:58,516
to be doing anything, like the Sign Up button.

183
00:10:58,517 --> 00:11:02,552
So what we can do is, play

184
00:11:02,553 --> 00:11:05,272
around with the opacity of the text.

185
00:11:05,273 --> 00:11:08,728
Let's put it a value of 1, if

186
00:11:08,729 --> 00:11:17,200
self.state is normal else 0.5.

187
00:11:17,201 --> 00:11:21,480
So that's a nice magic that, I'll explain you how it works.

188
00:11:22,410 --> 00:11:24,268
You see now, that when I click the

189
00:11:24,269 --> 00:11:27,180
button, I understand that I'm clicking the button.

190
00:11:28,510 --> 00:11:31,872
So what's happening is that, the opacity is

191
00:11:31,873 --> 00:11:36,326
one, if the state of self, self refers

192
00:11:36,327 --> 00:11:38,780
to the current widget, which is button.

193
00:11:39,790 --> 00:11:43,252
So remember, root referred to the rule which

194
00:11:43,253 --> 00:11:45,284
would be like a Login screen in here,

195
00:11:45,285 --> 00:11:48,836
but self referred to this very button.

196
00:11:48,837 --> 00:11:51,316
And if you want to access a property of

197
00:11:51,317 --> 00:11:56,324
the GridLayout, you could do parent like that.

198
00:11:56,325 --> 00:12:00,008
So that self.parent, would be pointing to

199
00:12:00,009 --> 00:12:03,214
the parent of button, which is grid layout.

200
00:12:03,215 --> 00:12:05,500
Well, we don't need that right now, so,

201
00:12:06,890 --> 00:12:11,468
so otherwise, if the state is not normal, like this

202
00:12:11,469 --> 00:12:14,034
is the normal state of a button, it's not pressed.

203
00:12:14,035 --> 00:12:16,514
There are other states, like pressed,

204
00:12:16,515 --> 00:12:19,942
released, but this state is normal.

205
00:12:19,943 --> 00:12:23,232
And otherwise, if the state is not normal, such

206
00:12:23,233 --> 00:12:25,680
as this state here, I've pressed the button.

207
00:12:25,681 --> 00:12:27,152
In that case, we want to give

208
00:12:27,153 --> 00:12:31,650
a value of 0.5 to opacity.

209
00:12:31,651 --> 00:12:35,330
So this entire thing here is python code.

210
00:12:35,331 --> 00:12:40,030
Everything actually on the right side of these attributes

211
00:12:41,350 --> 00:12:47,860
here, here, there, everything there is python code.

212
00:12:49,190 --> 00:12:52,699
And lastly, let's change the color of the button.

213
00:12:52,700 --> 00:12:55,290
[No Audio]

214
00:12:55,291 --> 00:12:58,170
You can use the color attribute for that.

215
00:12:58,171 --> 00:13:04,860
Let's do 0.1. So that means 10% of red, 70% of green, and

216
00:13:04,861 --> 00:13:10,288
1, and 100% of blue with a transparency of 1.

217
00:13:10,289 --> 00:13:13,200
So not transparent, save that.

218
00:13:13,201 --> 00:13:15,633
And I'm going to copy these three attributes,

219
00:13:15,634 --> 00:13:19,400
[No Audio]

220
00:13:19,401 --> 00:13:21,508
and give them to the other button as well, to

221
00:13:21,509 --> 00:13:24,750
the Sign Up button, save the file, execute.

222
00:13:25,890 --> 00:13:28,500
And yeah, this is what I meant to do.

223
00:13:28,501 --> 00:13:31,412
So Sign Up, Forgot Password?, I press it.

224
00:13:31,413 --> 00:13:35,300
I go to the other page, to the Sign Up page.

225
00:13:35,301 --> 00:13:38,800
[No Audio]

226
00:13:38,800 --> 00:13:40,968
So again, this is the interface we

227
00:13:40,969 --> 00:13:43,214
have, this far for the Login.

228
00:13:43,215 --> 00:13:46,268
One last thing I'd like to add is that, currently

229
00:13:46,269 --> 00:13:49,410
when we enter a Username, the Password is visible.

230
00:13:49,411 --> 00:13:51,804
We want to show stars instead of that.

231
00:13:51,805 --> 00:13:57,376
So go to the TextInput, for the password and

232
00:13:57,377 --> 00:14:00,192
access the password attribute, and set it to True.

233
00:14:00,193 --> 00:14:02,933
So when you set that attribute to True,

234
00:14:02,934 --> 00:14:06,737
[No Audio]

235
00:14:06,738 --> 00:14:10,624
what happens is that, the TextInput is treated as

236
00:14:10,625 --> 00:14:13,942
Password input, so it doesn't show the Password.

237
00:14:13,943 --> 00:14:16,032
And thanks for following this video,a

238
00:14:16,033 --> 00:14:19,382
and we'll go and stylize the other pages

239
00:14:19,383 --> 00:14:22,199
of the app in the next videos, see you.