1
00:00:00,570 --> 00:00:04,180
Hi, so let's keep working on the main page of our app.

2
00:00:04,181 --> 00:00:08,548
So the user enters some quotes and as you

3
00:00:08,549 --> 00:00:12,430
know, this label here, the display, it's not optimized.

4
00:00:14,290 --> 00:00:16,868
So what we need to do is, as you see, we need

5
00:00:16,869 --> 00:00:22,820
to wrap the text inside the borders of the app, so that

6
00:00:22,821 --> 00:00:26,412
if the device where the app is running is like that, the

7
00:00:26,413 --> 00:00:28,732
text will show normally as it shows right now.

8
00:00:28,733 --> 00:00:30,828
But if the mobile, if the device is

9
00:00:30,829 --> 00:00:34,508
mobile phone, it will look like this.

10
00:00:34,509 --> 00:00:38,176
And so you want to wrap the text inside this area

11
00:00:38,177 --> 00:00:41,850
here, so that the user can see the entire quote.

12
00:00:41,866 --> 00:00:43,800
[No Audio]

13
00:00:43,800 --> 00:00:47,180
So we are in this Login screen success page

14
00:00:47,870 --> 00:00:52,042
and we are talking about the text_size attribute.

15
00:00:52,043 --> 00:00:53,972
So let's change the text_size to

16
00:00:53,973 --> 00:00:58,990
self.width and self.height.

17
00:01:00,050 --> 00:01:02,634
What is self.width and what is self.height?

18
00:01:02,635 --> 00:01:06,106
self.width, self refers to the current widget.

19
00:01:06,107 --> 00:01:08,984
So self is actually the Label and

20
00:01:08,985 --> 00:01:10,558
width, is the width of the Label.

21
00:01:10,559 --> 00:01:12,110
Height is the height of the Label.

22
00:01:12,111 --> 00:01:14,328
So the text will get the width and

23
00:01:14,329 --> 00:01:17,634
the height of the label where it resides,

24
00:01:17,635 --> 00:01:20,630
which means let me save the kivy file.

25
00:01:20,633 --> 00:01:22,810
[No Audio]

26
00:01:22,811 --> 00:01:27,282
So every widget here, has a size and so Label

27
00:01:27,283 --> 00:01:30,976
is one of the five widgets Label, you have Button,

28
00:01:30,977 --> 00:01:34,933
you have TextInput Label and you have this RelativeLayout

29
00:01:34,934 --> 00:01:38,768
and the Label is taking 20% here.

30
00:01:38,769 --> 00:01:41,642
It's invisible, but if it had a background

31
00:01:41,643 --> 00:01:43,908
like this button, it would look like the

32
00:01:43,909 --> 00:01:46,948
TextInput size and this Button size.

33
00:01:46,949 --> 00:01:49,280
So it's somewhere in here.

34
00:01:49,280 --> 00:01:51,330
[No Audio]

35
00:01:51,331 --> 00:01:54,872
So that's the width and that's the

36
00:01:54,873 --> 00:01:57,410
height, more or less of the Label.

37
00:01:59,030 --> 00:02:05,766
So if I, say sad, let's try to get a long quote.

38
00:02:05,767 --> 00:02:07,933
And, so this is what we get now.

39
00:02:08,348 --> 00:02:10,133
So it's looking better.

40
00:02:10,134 --> 00:02:12,170
[No Audio]

41
00:02:12,171 --> 00:02:15,660
If we squeeze, you see the text is

42
00:02:15,661 --> 00:02:19,954
wrapping inside the Label height and Label width.

43
00:02:19,955 --> 00:02:20,876
So you can see that,

44
00:02:20,877 --> 00:02:24,928
now when, I squeeze the window, I resize it.

45
00:02:24,929 --> 00:02:28,656
The Label is dynamically resized and so

46
00:02:28,657 --> 00:02:30,910
is the Button and the TextInput.

47
00:02:32,770 --> 00:02:36,580
And so the text size will also reflect the size

48
00:02:36,581 --> 00:02:39,570
of the Label, as you can see in here.

49
00:02:39,571 --> 00:02:42,052
But this is not yet enough.

50
00:02:42,053 --> 00:02:44,376
So how about giving the text

51
00:02:44,377 --> 00:02:46,850
more area, to stretch vertically.

52
00:02:47,670 --> 00:02:51,266
If you want to do that, you want to set,

53
00:02:51,267 --> 00:02:53,900
[Author Typing]

54
00:02:53,901 --> 00:02:57,628
the text_size height to None. So you

55
00:02:57,629 --> 00:03:00,400
don't want it to be related to the Label.

56
00:03:00,810 --> 00:03:03,766
So if you save that, try the code,

57
00:03:03,767 --> 00:03:12,366
[Author Typing]

58
00:03:12,367 --> 00:03:15,740
you see now the height of the text, is

59
00:03:15,741 --> 00:03:17,426
greater than the height of the Label.

60
00:03:17,427 --> 00:03:19,560
The Label is somewhere here.

61
00:03:20,490 --> 00:03:23,340
So let me resize it again.

62
00:03:23,341 --> 00:03:27,356
So the Label height is this high, so it's somewhere here

63
00:03:27,357 --> 00:03:29,974
and the text height is greater than the Label height.

64
00:03:29,975 --> 00:03:34,992
So this is better, but we can see the text, but obviously the text

65
00:03:34,993 --> 00:03:37,830
is overlying, it's on top of other widgets.

66
00:03:37,831 --> 00:03:40,272
So that's not ideal yet, of course.

67
00:03:40,273 --> 00:03:42,068
So what can we do here?

68
00:03:42,069 --> 00:03:44,932
Well, what I'm thinking is, we need to find

69
00:03:44,933 --> 00:03:49,386
a way to change the height of the Label,

70
00:03:49,387 --> 00:03:51,988
to match the height of the text.

71
00:03:51,989 --> 00:03:54,296
So in this case, that would be like having

72
00:03:54,297 --> 00:03:57,246
more of this black area here of the Label.

73
00:03:57,247 --> 00:03:59,416
So having the Label up to here and

74
00:03:59,417 --> 00:04:03,250
having the other widgets, squeezed above the Label.

75
00:04:04,170 --> 00:04:07,362
So let's change the height of the Label,

76
00:04:07,363 --> 00:04:09,628
to fit the height of the text.

77
00:04:09,629 --> 00:04:11,000
How can we do that?

78
00:04:11,530 --> 00:04:17,133
Well, first of all, we need the label y.

79
00:04:17,870 --> 00:04:20,192
So the height of the label, we need

80
00:04:20,193 --> 00:04:23,984
that to ignore the size_hinting, which means,

81
00:04:23,985 --> 00:04:26,620
let me show you, what that means.

82
00:04:26,633 --> 00:04:32,666
[Author Typing]

83
00:04:32,670 --> 00:04:35,018
Let me try another quote.

84
00:04:35,019 --> 00:04:38,442
So what that means is that, the Label height, it's

85
00:04:38,443 --> 00:04:42,468
not anymore 20% of the GridLayout, but it has

86
00:04:42,469 --> 00:04:45,822
a fixed size of 100 pixels, by default.

87
00:04:45,823 --> 00:04:47,288
So by default, the height of

88
00:04:47,289 --> 00:04:49,890
the label now is 100 pixels.

89
00:04:49,900 --> 00:04:55,720
And, so that's the same as height 100.

90
00:04:55,721 --> 00:04:57,928
If I run this now, we're going to get the

91
00:04:57,929 --> 00:05:01,836
same exact output, but if you change this to 400,

92
00:05:01,837 --> 00:05:04,306
so the height of the Label, this is the height

93
00:05:04,307 --> 00:05:06,972
attribute of the Label, not of the text.

94
00:05:06,973 --> 00:05:08,866
So if you see now,

95
00:05:08,867 --> 00:05:10,766
[No Audio]

96
00:05:10,767 --> 00:05:12,500
the label is quite bigger,

97
00:05:12,501 --> 00:05:16,133
[No Audio]

98
00:05:16,134 --> 00:05:17,370
let's say sad.

99
00:05:18,110 --> 00:05:21,033
So now the text has a lot of space,

100
00:05:21,034 --> 00:05:22,966
[No Audio]

101
00:05:22,967 --> 00:05:26,000
so you squeeze it and you can see the text.

102
00:05:26,530 --> 00:05:28,660
But this is not what we want.

103
00:05:28,661 --> 00:05:33,092
We said we want the height to be dynamic, we want

104
00:05:33,093 --> 00:05:36,084
the height to be reflecting the height of the text.

105
00:05:36,085 --> 00:05:39,352
So that when we have the window stretched like

106
00:05:39,353 --> 00:05:42,600
this, we want these buttons to be down here

107
00:05:42,601 --> 00:05:44,814
and we want the Label to be smaller.

108
00:05:44,815 --> 00:05:49,058
So the way to do that is, instead of having a fixed

109
00:05:49,059 --> 00:05:55,320
size for the height, we want to use self.texture_size.

110
00:05:56,170 --> 00:05:58,482
And we get the second element

111
00:05:58,483 --> 00:06:00,790
of that texture_size tuple.

112
00:06:00,791 --> 00:06:05,686
So texture_size is a tuple, which contains two items.

113
00:06:05,687 --> 00:06:08,832
The first item is the width of the text.

114
00:06:08,833 --> 00:06:10,766
So it's a dynamic value.

115
00:06:10,912 --> 00:06:14,900
It's going to change when you resize the window.

116
00:06:15,354 --> 00:06:17,748
And so the first value is the

117
00:06:17,749 --> 00:06:20,170
width and the second is the height.

118
00:06:20,171 --> 00:06:23,060
So with this index, we access

119
00:06:23,061 --> 00:06:24,586
the second element of the tuple.

120
00:06:24,587 --> 00:06:27,336
If we wanted the first element, we would use zero here.

121
00:06:27,337 --> 00:06:29,486
We want the second, which is the height,

122
00:06:29,487 --> 00:06:30,740
so save that.

123
00:06:30,740 --> 00:06:37,366
[No Audio]

124
00:06:37,366 --> 00:06:39,466
So you see now,

125
00:06:39,467 --> 00:06:41,133
[No Audio]

126
00:06:41,134 --> 00:06:42,733
the Label is dynamic.

127
00:06:43,433 --> 00:06:48,054
So it's changing its size, depending on the size of the text.

128
00:06:48,055 --> 00:06:49,878
And we can see the entire text.

129
00:06:49,879 --> 00:06:52,050
And when we stretch the window like that,

130
00:06:52,900 --> 00:06:56,170
we don't have any excessive blank area here,

131
00:06:56,171 --> 00:06:57,990
which would be the Label body.

132
00:06:58,000 --> 00:07:02,566
[No Audio]

133
00:07:02,580 --> 00:07:05,190
However, this is not ideal, of course.

134
00:07:05,191 --> 00:07:07,942
And there's one more thing left.

135
00:07:07,943 --> 00:07:11,800
What we can do here, what we need to do is,

136
00:07:11,801 --> 00:07:13,533
[No Audio]

137
00:07:13,534 --> 00:07:17,766
to have some space for the ScrollView widget and the Label,

138
00:07:18,566 --> 00:07:20,660
together with its attributes.

139
00:07:21,240 --> 00:07:24,298
I have to indent it with tab, to have

140
00:07:24,299 --> 00:07:26,574
it as a child of the ScrollView.

141
00:07:26,575 --> 00:07:30,628
So, ScrollView now, is at the same level with the other widgets

142
00:07:30,629 --> 00:07:33,370
button TextInput, the other Label and so on.

143
00:07:33,900 --> 00:07:36,533
So save that kivy file now, execute

144
00:07:36,534 --> 00:07:39,599
[No Audio]

145
00:07:40,000 --> 00:07:45,470
happy and, so you can see a scroller there.

146
00:07:45,470 --> 00:07:54,300
[No Audio]

147
00:07:54,301 --> 00:07:58,010
sad, Enlighten me.

148
00:07:58,540 --> 00:08:01,850
So it's working with every kind of text.

149
00:08:01,866 --> 00:08:04,220
[No Audio]

150
00:08:04,221 --> 00:08:07,806
When the text is short, there is no scrolling and

151
00:08:07,807 --> 00:08:11,796
when the text is longer, there is a scrolling automatically,

152
00:08:11,797 --> 00:08:14,670
so you can go to the end of the text.

153
00:08:14,671 --> 00:08:17,278
And so that is how you build a ScrollView,

154
00:08:17,279 --> 00:08:20,166
which has a Label and Label has some text inside.

155
00:08:20,167 --> 00:08:21,484
I hope you enjoyed it and I'll

156
00:08:21,485 --> 00:08:22,466
see you in the next video.