1 00:00:00,680 --> 00:00:08,790 Hi, so let's keep working on the main page of our app so the user enters some quotes and as you know, 2 00:00:09,060 --> 00:00:12,240 this label here, the display, it's not optimized. 3 00:00:14,530 --> 00:00:22,390 So what we need to do is, as you see, we need to wrap the text inside the borders of the app, so 4 00:00:22,410 --> 00:00:28,280 that if the device with the app is running is like that the text will show normally as it shows right now. 5 00:00:28,320 --> 00:00:34,390 But if the mobile, if the device is a mobile phone, it will look like this. 6 00:00:34,720 --> 00:00:41,650 And so you want to wrap the text inside this area here so that the user can see the entire quote. 7 00:00:44,040 --> 00:00:47,010 So we are in this log in screen success page. 8 00:00:48,180 --> 00:00:51,800 And we are talking about the text size attribute. 9 00:00:52,200 --> 00:00:57,240 So let's change the text size to self.width and self. 10 00:00:57,280 --> 00:00:58,860 And seld.height. 11 00:01:00,310 --> 00:01:05,920 What is self.width and what is self.height? In self.width the self refers to the current widget. 12 00:01:06,220 --> 00:01:11,450 So self is actually the label and width is the width of the label and height is the height of the label. 13 00:01:12,240 --> 00:01:17,260 So the text will get the weight and the height of the label where it resides. 14 00:01:17,830 --> 00:01:20,190 Which means, let me save the ivy file. 15 00:01:23,000 --> 00:01:25,940 So every widget here has a size. 16 00:01:26,450 --> 00:01:33,590 So label is one of the five widgets. Label, you have Buttton, you have Text Input Label and you have 17 00:01:33,590 --> 00:01:34,610 this Relative Layout. 18 00:01:34,970 --> 00:01:38,510 And the label is get is taking 20 percent here. 19 00:01:38,990 --> 00:01:39,890 It's invisible. 20 00:01:39,920 --> 00:01:45,080 But if it had a background like this button, it would look like the text input size. 21 00:01:45,380 --> 00:01:46,790 And this button size. 22 00:01:47,090 --> 00:01:48,980 So it's somewhere in here. 23 00:01:51,510 --> 00:01:55,250 So that's the width and that's the height. 24 00:01:55,290 --> 00:01:57,180 More or less of the label. 25 00:02:01,650 --> 00:02:05,660 If I say said, let's try to get a long quote. 26 00:02:06,150 --> 00:02:07,840 So this is what we get now. 27 00:02:08,660 --> 00:02:09,920 So it's looking better. 28 00:02:12,360 --> 00:02:20,420 If we squeeze, you see, the text is wrapping inside the label height and the label width so you can 29 00:02:20,420 --> 00:02:20,750 see that 30 00:02:20,840 --> 00:02:24,600 now when I squeeze the window, I resize it 31 00:02:25,070 --> 00:02:30,530 the label is dynamically resized and so is the button and the text input. 32 00:02:33,100 --> 00:02:37,380 And so the text size, will also reflect the size of the label. 33 00:02:38,010 --> 00:02:38,820 As you can see in here. 34 00:02:39,810 --> 00:02:41,970 But this is not yet enough. 35 00:02:42,240 --> 00:02:46,800 So how about giving the text more area to stretch vertically? 36 00:02:47,880 --> 00:02:51,120 If you want to do that, you want to set. 37 00:02:54,110 --> 00:02:56,590 the text size height to none. 38 00:02:57,340 --> 00:03:00,130 So you don't want it to be related to the label. 39 00:03:01,240 --> 00:03:03,550 If you say that, try the quote. 40 00:03:12,610 --> 00:03:17,260 You see now the height of the text is greater than the height of the label. 41 00:03:17,470 --> 00:03:19,420 The label is somewhere here. 42 00:03:20,590 --> 00:03:23,200 So let me resize it again. 43 00:03:23,440 --> 00:03:25,880 So the label height is this high. 44 00:03:26,320 --> 00:03:27,250 So it's somewhere here. 45 00:03:27,530 --> 00:03:29,800 And the text height is greater than the label height. 46 00:03:30,080 --> 00:03:33,130 So this is better than we can see the text. 47 00:03:33,160 --> 00:03:37,590 But obviously, the text is overlying, it's on top of other widgets. 48 00:03:37,900 --> 00:03:39,940 So that's not ideal yet, of course. 49 00:03:40,420 --> 00:03:41,860 So what can we do here? 50 00:03:42,160 --> 00:03:50,740 Well, what I'm thinking is we need to find a way to change the height of the label to match the height 51 00:03:50,800 --> 00:03:51,580 of the text. 52 00:03:52,240 --> 00:03:57,160 So in this case, that'd be like having more of this black area here of the label. 53 00:03:57,340 --> 00:04:02,920 So having the label up to here and having the other widgets squeezed above the label. 54 00:04:04,370 --> 00:04:09,170 So let's change the height of the label to fit the height of the text. 55 00:04:09,860 --> 00:04:10,670 How can we do that? 56 00:04:11,840 --> 00:04:22,350 Well, first of all, we need the label y so the height of the label, we need that to ignore the size 57 00:04:22,350 --> 00:04:23,780 hinting, which means 58 00:04:24,140 --> 00:04:26,540 let me show you what that means. 59 00:04:32,860 --> 00:04:34,780 Let me try another quote. 60 00:04:35,230 --> 00:04:37,480 So what that means is that the label height 61 00:04:38,170 --> 00:04:39,570 it's not anymore. 62 00:04:39,610 --> 00:04:45,490 20 percent of the grid layout, but it has a fixed size of 100 pixels by default. 63 00:04:46,030 --> 00:04:49,660 So by default, the height of the label now is 100 pixels. 64 00:04:50,050 --> 00:04:55,410 And so that's the same as height 100. 65 00:04:56,020 --> 00:04:59,090 If I runthis now, we're going to give the same exact output. 66 00:04:59,560 --> 00:05:01,590 But if you change these to 400. 67 00:05:02,050 --> 00:05:03,460 So the height of the label. 68 00:05:03,580 --> 00:05:05,500 This is the height attribute of the label. 69 00:05:05,620 --> 00:05:06,880 Not of the text. 70 00:05:07,120 --> 00:05:12,520 So if you see now, the label is quite bigger. 71 00:05:16,350 --> 00:05:16,890 Let's say sad. 72 00:05:18,400 --> 00:05:19,350 So now the text has 73 00:05:19,900 --> 00:05:20,920 a lot of space. 74 00:05:22,930 --> 00:05:25,860 So you squeeze it and you can see the text. 75 00:05:26,700 --> 00:05:28,470 But this is not what we want. 76 00:05:28,500 --> 00:05:31,920 We said we want the height to be dynamic. 77 00:05:32,730 --> 00:05:35,970 We want the height to be reflecting the height of the text. 78 00:05:36,150 --> 00:05:42,480 So that when we have the window stretch like this, we want these buttons to be down here. 79 00:05:42,750 --> 00:05:44,550 And we want the label to be smaller. 80 00:05:44,820 --> 00:05:52,050 So the way to do that is instead of having a fixed size for the height, we want to do 81 00:05:52,090 --> 00:05:55,320 self.texture_size. 82 00:05:56,460 --> 00:06:00,650 And we we get the second element of that texture_size tuple. 83 00:06:00,930 --> 00:06:05,580 So texture_size size is a tuple, which contains two items. 84 00:06:05,790 --> 00:06:08,770 The first item is the width of the text. 85 00:06:09,030 --> 00:06:10,470 So it's a dynamic value. 86 00:06:11,160 --> 00:06:16,910 It's going to change when you resize the window and so the first value 87 00:06:16,940 --> 00:06:18,180 is the width 88 00:06:18,420 --> 00:06:19,680 and the second is the height. 89 00:06:20,340 --> 00:06:24,430 So with this index, we access the second element of the tuple. 90 00:06:24,660 --> 00:06:27,150 If we wanted the first element, we would use zero here. 91 00:06:27,450 --> 00:06:29,100 We want the second, which is the height. 92 00:06:29,670 --> 00:06:30,480 So save that. 93 00:06:37,470 --> 00:06:47,700 So, you know, the label is dynamic, so it's changing its size depending on the size of the text. 94 00:06:48,330 --> 00:06:49,710 And we can see the entire text. 95 00:06:50,130 --> 00:06:56,580 And when we stretch the window like that, we don't have any excessive blank area here, which would 96 00:06:56,580 --> 00:06:57,810 be the label body. 97 00:07:02,740 --> 00:07:04,930 However, this is not ideal, of course. 98 00:07:05,320 --> 00:07:07,840 And there's one more thing left. 99 00:07:08,080 --> 00:07:09,670 What we can do here. 100 00:07:10,780 --> 00:07:19,720 What we need to do is to have some space for this scroll view widget and the label together with its 101 00:07:19,810 --> 00:07:20,560 attributes. 102 00:07:21,500 --> 00:07:26,440 I have to indented with tab to have it as a child of the ScrollView. 103 00:07:26,760 --> 00:07:31,500 So ScrollView now is at the same level with the other widgets, Button, Text, Input. 104 00:07:31,690 --> 00:07:32,980 The other label and so on. 105 00:07:34,150 --> 00:07:34,970 So see that kivy 106 00:07:35,080 --> 00:07:36,430 file now, execute. 107 00:07:40,040 --> 00:07:40,490 Happy. 108 00:07:40,890 --> 00:07:45,100 And so you can see a scroller there. 109 00:07:56,990 --> 00:07:57,600 Enlighten me. Sad. 110 00:07:58,840 --> 00:08:01,750 So it's working with every kind of text. 111 00:08:04,500 --> 00:08:11,430 Whether Texas short, there is no scrolling, and when the text is longer there is scrolling automatically. 112 00:08:12,000 --> 00:08:14,430 So you can go to the ant or the text. 113 00:08:15,000 --> 00:08:19,930 So that is how you build a scroll view, which has a label and the label has some text inside. 114 00:08:20,460 --> 00:08:21,150 I hope you enjoyed it. 115 00:08:21,180 --> 00:08:22,400 And I'll see you in the next video.