1
00:00:00,500 --> 00:00:03,540
Hi, I'm very excited to show you now how to

2
00:00:03,541 --> 00:00:07,332
stylize the main page of the app, which is the

3
00:00:07,333 --> 00:00:10,036
page where the user will spend most of the time.

4
00:00:10,037 --> 00:00:12,250
So the page where they get, to these quotes.

5
00:00:12,251 --> 00:00:15,316
And here on the left, is what we have

6
00:00:15,317 --> 00:00:18,228
this far, how our main page looks like.

7
00:00:18,229 --> 00:00:21,588
So that is the LoginScreenSuccess page.

8
00:00:21,589 --> 00:00:23,060
That's how we called it.

9
00:00:23,061 --> 00:00:25,292
And this is how the page will

10
00:00:25,293 --> 00:00:28,076
look like, after this couple of videos.

11
00:00:28,077 --> 00:00:30,492
So first what we are going to do is, first

12
00:00:30,493 --> 00:00:33,650
we are going to add some padding and some spacing

13
00:00:33,651 --> 00:00:36,396
to have these buttons separated from each other.

14
00:00:36,397 --> 00:00:37,628
So that's the first thing.

15
00:00:37,629 --> 00:00:40,112
Then the second thing is, we are going to make

16
00:00:40,113 --> 00:00:44,480
this big button look like this fancy button here, which

17
00:00:44,481 --> 00:00:47,600
changes color when we hover the mouse, when we place

18
00:00:47,601 --> 00:00:49,632
the mouse on top of the button.

19
00:00:49,633 --> 00:00:55,230
And then we are also going to, add some scrolling

20
00:00:55,890 --> 00:00:59,204
to this label here area here, so that the entire

21
00:00:59,205 --> 00:01:01,898
text is shown in a small area and the user

22
00:01:01,899 --> 00:01:04,580
is able to scroll and see the entire text.

23
00:01:04,581 --> 00:01:07,998
So let's go ahead and work on some padding and spacing,

24
00:01:07,999 --> 00:01:11,000
and then on the button. Before we begin,

25
00:01:11,001 --> 00:01:13,048
I would like you to go to the

26
00:01:13,049 --> 00:01:18,306
resources and download the hoverable.py file.

27
00:01:18,307 --> 00:01:20,908
The logout_hover.png file and

28
00:01:20,909 --> 00:01:23,522
the logout_nothover.png file.

29
00:01:23,523 --> 00:01:26,860
I'll explain in just a bit, what they are.

30
00:01:26,861 --> 00:01:31,633
So the padding now, LoginScreenSuccess.

31
00:01:33,310 --> 00:01:36,176
Let's add a padding of 30, 30.

32
00:01:36,177 --> 00:01:40,676
And spacing of 30, 30 as well.

33
00:01:40,677 --> 00:01:41,920
See what we get.

34
00:01:41,933 --> 00:01:44,690
[No Audio]

35
00:01:44,691 --> 00:01:46,580
Oh yeah, looks better.

36
00:01:46,581 --> 00:01:51,044
So now the button, the kivy library does not

37
00:01:51,045 --> 00:01:56,408
natively have an object to implement hover behaviors, so

38
00:01:56,409 --> 00:01:59,534
that something changes when you hover the mouse.

39
00:01:59,535 --> 00:02:02,264
Or there's not an easy way to do so.

40
00:02:02,265 --> 00:02:08,892
But, someone developed a very small sub module called

41
00:02:08,893 --> 00:02:12,556
hoverable, and you can get that file and put

42
00:02:12,557 --> 00:02:15,922
it in the same directory with your main.py

43
00:02:15,923 --> 00:02:19,030
file, so they are in the same folder.

44
00:02:19,770 --> 00:02:21,794
And then what you do is, you don't

45
00:02:21,795 --> 00:02:24,326
have to change the hoverable.py file.

46
00:02:24,327 --> 00:02:26,060
So I'm just going to close it.

47
00:02:26,910 --> 00:02:30,436
And then what we can do is, we import

48
00:02:30,437 --> 00:02:38,720
from hoverable, we import the HoverBehavior object.

49
00:02:39,970 --> 00:02:42,532
So that is a class, the class

50
00:02:42,533 --> 00:02:46,190
HoverBehavior, inside the hoverable.py file.

51
00:02:46,191 --> 00:02:48,088
So that's what we're going to use.

52
00:02:48,089 --> 00:02:50,870
And the way we are going to use that,

53
00:02:50,871 --> 00:02:56,428
is, let's go down here and I'm going to

54
00:02:56,429 --> 00:03:01,324
create a class and call it ImageButton.

55
00:03:01,325 --> 00:03:03,900
So this will be a special button.

56
00:03:03,901 --> 00:03:07,458
It's not going to be a simple button anymore,

57
00:03:07,459 --> 00:03:09,820
but it's going to be an ImageButton.

58
00:03:10,350 --> 00:03:14,736
And this ImageButton is going to inherit from, the

59
00:03:14,737 --> 00:03:19,872
HoverBehavior class, and a couple of other classes as

60
00:03:19,873 --> 00:03:24,852
well, which I'm going to import in here.

61
00:03:24,853 --> 00:03:26,442
So the way we are going to implement

62
00:03:26,443 --> 00:03:29,290
this button, is by having two different images.

63
00:03:29,291 --> 00:03:31,706
I created these images in PowerPoint.

64
00:03:31,707 --> 00:03:33,160
You can easily create them.

65
00:03:33,161 --> 00:03:36,808
You have these symbols and you add some

66
00:03:36,809 --> 00:03:40,430
text, and then make the background transparent.

67
00:03:40,431 --> 00:03:43,288
And so you have one blue and one red.

68
00:03:43,289 --> 00:03:46,056
So the two different states, you want the

69
00:03:46,057 --> 00:03:48,900
button to have, it's a PNG image.

70
00:03:49,530 --> 00:03:53,548
And so the idea is that, this button will

71
00:03:53,549 --> 00:03:55,490
not have text, it will have an image.

72
00:03:55,491 --> 00:04:05,733
Therefore we need to import from kivy.uix.image import Image.

73
00:04:05,833 --> 00:04:12,500
And lastly, from kivy.uix.behaviors, import

74
00:04:13,933 --> 00:04:16,964
ButtonBehavior and that's it.

75
00:04:16,965 --> 00:04:20,899
So now we get Image and ButtonBehavior and we

76
00:04:20,900 --> 00:04:25,166
place them as parents of the Image button

77
00:04:25,167 --> 00:04:28,066
[Author Typing]

78
00:04:28,067 --> 00:04:32,648
object. And all we need to do is here is just pass.

79
00:04:32,649 --> 00:04:36,012
So it's just a class that gets together

80
00:04:36,013 --> 00:04:39,788
these three objects. To make a class,

81
00:04:39,789 --> 00:04:42,156
so the ImageButton class that has

82
00:04:42,157 --> 00:04:46,170
attributes, that behaves, like these three objects.

83
00:04:46,171 --> 00:04:49,712
So what we do then is, we go to

84
00:04:49,713 --> 00:04:54,192
the ImageButton and I place it wrong here, sorry.

85
00:04:54,193 --> 00:04:56,704
So this should be here actually ImageButton,

86
00:04:56,705 --> 00:04:59,260
we are talking about the Logout button, not

87
00:04:59,790 --> 00:05:02,052
the in light and me button.

88
00:05:02,053 --> 00:05:05,210
And we don't need that Logout text anymore.

89
00:05:05,211 --> 00:05:09,988
So we don't need this Logout text, because we are

90
00:05:09,989 --> 00:05:13,140
using our own image which has the text inside.

91
00:05:13,140 --> 00:05:15,030
[No Audio]

92
00:05:15,031 --> 00:05:18,030
So remove that on_press root.log_out.

93
00:05:18,031 --> 00:05:19,256
Yes, that's correct.

94
00:05:19,257 --> 00:05:24,072
And source of this image button, it's going

95
00:05:24,073 --> 00:05:33,690
to be logout_hover if self.hovered

96
00:05:33,691 --> 00:05:40,720
else logout_nothover.png, of course.

97
00:05:40,721 --> 00:05:44,650
So that is the path of the image.

98
00:05:44,666 --> 00:05:48,190
[No Audio]

99
00:05:48,191 --> 00:05:51,956
So hover this self.hovered here what it is,

100
00:05:51,957 --> 00:05:56,516
is, this attribute of the HoverBehavior class.

101
00:05:56,517 --> 00:05:59,316
So it's a BooleanProperty, it

102
00:05:59,317 --> 00:06:01,710
could be either True or False.

103
00:06:02,633 --> 00:06:06,488
So this is python code, I told you that everything on the

104
00:06:06,489 --> 00:06:11,224
right of these, attributes is Python code.

105
00:06:11,225 --> 00:06:13,214
So we are going to set a source,

106
00:06:13,215 --> 00:06:17,596
the logout_hover image, for this ImageButton.

107
00:06:17,597 --> 00:06:20,524
If this is True, it's if hovered is True.

108
00:06:20,525 --> 00:06:24,514
So the hoverable.py file, is detecting

109
00:06:24,515 --> 00:06:27,564
if a mouse is over that button.

110
00:06:27,565 --> 00:06:30,342
Otherwise we put logout_nothover.

111
00:06:30,343 --> 00:06:32,544
So that's, that path there.

112
00:06:32,545 --> 00:06:34,766
So let me see what's happening.

113
00:06:34,775 --> 00:06:38,100
[No Audio]

114
00:06:38,100 --> 00:06:41,628
Yeah, so it's working fine, as easy as that.

115
00:06:41,629 --> 00:06:44,096
But the button is obviously taking

116
00:06:44,097 --> 00:06:45,840
too much space in here.

117
00:06:45,841 --> 00:06:51,120
So it's basically taking 1, 2, 3, 4, 5 20%.

118
00:06:51,121 --> 00:06:52,928
So we have five widgets, each of

119
00:06:52,929 --> 00:06:55,700
them is getting 20% of the space.

120
00:06:56,930 --> 00:07:01,280
So let's do some size_hinting then.

121
00:07:01,280 --> 00:07:05,170
[No Audio]

122
00:07:05,171 --> 00:07:12,420
size_hint, I think a good amount would be like, 0.35, 0.35.

123
00:07:14,310 --> 00:07:18,980
So let's see. Yeah, I think this is good.

124
00:07:19,610 --> 00:07:24,028
And now this is in the center, so if you want to put it on

125
00:07:24,029 --> 00:07:27,000
the right, you want to change the position.

126
00:07:28,490 --> 00:07:34,430
And again there's the pos_hint attribute,

127
00:07:34,431 --> 00:07:37,820
which gets a dictionary center_x.

128
00:07:38,430 --> 00:07:44,266
I think a good number will be 0.93 and center_y

129
00:07:44,267 --> 00:07:47,066
[Author Typing]

130
00:07:47,067 --> 00:07:50,500
0.8.

131
00:07:50,501 --> 00:07:53,652
Now if we try this, see what we

132
00:07:53,653 --> 00:07:59,688
have, nothing will happen,because the button when

133
00:07:59,689 --> 00:08:03,608
we use this pos_hinting, the widget has

134
00:08:03,609 --> 00:08:10,094
to be inside another widget called RelativeLayout.

135
00:08:10,095 --> 00:08:12,076
If you save the kivy file now, and

136
00:08:12,077 --> 00:08:15,466
execute the file, that will do the magic.

137
00:08:15,930 --> 00:08:18,732
If I press the button, it will not work.

138
00:08:18,733 --> 00:08:24,016
And the reason why that doesn't work is, hidden here in

139
00:08:24,017 --> 00:08:29,312
how we order these parents of this ImageButton class.

140
00:08:29,313 --> 00:08:32,720
The ButtonBehavior should be the first one, because that

141
00:08:32,721 --> 00:08:36,966
order may hide the methods of that ButtonBehavior.

142
00:08:36,967 --> 00:08:38,539
Now let me try again.

143
00:08:38,539 --> 00:08:41,309
[No Audio]

144
00:08:41,310 --> 00:08:43,340
Logout, so now it works.

145
00:08:44,750 --> 00:08:47,533
Login again, and

146
00:08:47,534 --> 00:08:49,933
[No Audio]

147
00:08:49,934 --> 00:08:53,422
this is about this ImageButton implementation.

148
00:08:53,423 --> 00:08:55,560
And in the next lecture, let's go ahead and

149
00:08:55,561 --> 00:08:59,966
implement this scroll view here of the Label, see you.

150
00:08:59,967 --> 00:09:01,200
[No Audio]