1 00:00:00,540 --> 00:00:00,740 Hi. 2 00:00:00,990 --> 00:00:07,890 I'm very excited to show you now how to stylize the main page of the app, which is a page where the 3 00:00:07,890 --> 00:00:09,900 user will spend most of the time. 4 00:00:10,080 --> 00:00:11,800 So the page where they get these quotes. 5 00:00:12,270 --> 00:00:17,880 And here on the left is what we have this far, how our main page looks like. 6 00:00:18,270 --> 00:00:21,390 So that is the log in screen success page. 7 00:00:21,660 --> 00:00:22,800 That's how we called it. 8 00:00:23,100 --> 00:00:27,840 And this is how the page will look like after this couple of videos. 9 00:00:28,170 --> 00:00:34,080 So first what we're going to do is first we are going to add some padding and some spacing to have 10 00:00:34,080 --> 00:00:36,270 these buttons separated from each other. 11 00:00:36,420 --> 00:00:42,510 So that's the first thing, the second thing is we are going to make this big button look like this 12 00:00:42,510 --> 00:00:48,900 fancy button here, which changes color when we hover the mouse, when we plant the mouse on top of 13 00:00:48,900 --> 00:00:49,350 the button. 14 00:00:49,620 --> 00:00:54,930 And then we are also going to add some scrolling. 15 00:00:56,050 --> 00:00:57,850 To this label here area here. 16 00:00:58,090 --> 00:01:01,150 So that the entire text is shown in a small area. 17 00:01:01,360 --> 00:01:04,270 And the user is able to scroll and see the entire text. 18 00:01:04,720 --> 00:01:07,990 So let's go ahead and work on some padding and spacing. 19 00:01:08,090 --> 00:01:15,850 Then on the button. Before we begin, I'd like you to go to the resources and download the hoverable.py 20 00:01:15,850 --> 00:01:23,020 file, the logout_hover.png file and the logout_nothover.png file. 21 00:01:23,710 --> 00:01:25,510 I'll explain in just a bit 22 00:01:25,870 --> 00:01:26,290 what they are. 23 00:01:26,980 --> 00:01:28,180 So the padding now. 24 00:01:29,830 --> 00:01:31,540 LoginScreenSuccess. 25 00:01:33,490 --> 00:01:40,270 Let's add a padding of 30, 30 and a spacing of 30, 30 as well. 26 00:01:40,720 --> 00:01:41,610 See what we get. 27 00:01:45,000 --> 00:01:46,140 Yeah, looks better. 28 00:01:46,770 --> 00:01:47,970 So now the button. 29 00:01:49,020 --> 00:01:55,560 The kivy library does not natively have an object to implement hover behaviors. 30 00:01:56,160 --> 00:02:01,710 So that's something changes when you hover the mouse or there's not an easy way to do so. 31 00:02:02,300 --> 00:02:09,460 But someone developed a very small sub-module called hoverable. 32 00:02:09,660 --> 00:02:16,200 And you can get that file and put it in the same directory with your main.py file. 33 00:02:17,040 --> 00:02:18,660 So they are in the same folder. 34 00:02:20,030 --> 00:02:23,290 And then what you do is you don't have to change 35 00:02:23,340 --> 00:02:24,000 the hoverable.py file. 36 00:02:24,410 --> 00:02:25,570 So I'm just going to close it. 37 00:02:27,110 --> 00:02:36,990 And then what we can do is we import from hoverale, we import the Hoverbehavior 38 00:02:38,140 --> 00:02:38,680 object. 39 00:02:40,140 --> 00:02:41,520 So that is a class. 40 00:02:42,000 --> 00:02:44,430 The class HoverBehavior inside the hoverable.py 41 00:02:44,490 --> 00:02:45,530 file. 42 00:02:46,320 --> 00:02:47,880 So that's what we are going to use. 43 00:02:48,180 --> 00:02:51,450 And the way we are going to use that is. 44 00:02:52,990 --> 00:03:00,960 Let's go down here and I'm going to create a class and call it ImageButton. 45 00:03:01,420 --> 00:03:03,610 So this will be a special bottom. 46 00:03:04,030 --> 00:03:09,640 It's not going to be a simple button anymore, but it's going to be an image button. 47 00:03:10,540 --> 00:03:19,210 And this image button is going to inherit from the hover behavior class and and a couple of other classes 48 00:03:19,600 --> 00:03:24,580 as well, which I'm going to import in here. 49 00:03:24,940 --> 00:03:29,140 So the way we are going to implement this button is by having two different images. 50 00:03:29,290 --> 00:03:31,690 I created these images in power points. 51 00:03:31,720 --> 00:03:32,920 You can easily carry them. 52 00:03:33,190 --> 00:03:34,330 You have these symbols. 53 00:03:35,980 --> 00:03:40,060 And you had some texts and then make that background transparence. 54 00:03:40,480 --> 00:03:43,060 And so you have one blue and one red. 55 00:03:43,360 --> 00:03:48,650 So the two different states you want the bottom to have, it's a Panji image. 56 00:03:49,750 --> 00:03:54,180 And so the idea is that these BOTTEN will not have text. 57 00:03:54,220 --> 00:03:55,330 It will have an image. 58 00:03:55,500 --> 00:04:05,530 Therefore, we need to import from Cuvee dot UI X dot image, import image. 59 00:04:05,980 --> 00:04:11,100 And lastly, from Cuvee dot u by X behaviors. 60 00:04:11,400 --> 00:04:15,110 Import Botten behavior. 61 00:04:16,120 --> 00:04:16,750 And that's it. 62 00:04:16,990 --> 00:04:24,460 So now we get image and bottom behavior and we place them as parents of the image. 63 00:04:24,490 --> 00:04:24,940 Bottom. 64 00:04:28,420 --> 00:04:32,440 Object and all they need to do his area is just pass. 65 00:04:32,680 --> 00:04:37,400 So it's just a class that gets together, these three objects. 66 00:04:38,540 --> 00:04:45,470 To make a glass, so the image bottom class that has attributes that behaves like these three objects. 67 00:04:46,400 --> 00:04:53,210 So what do we do then is we go to the image bottom and I place places wrong here. 68 00:04:53,240 --> 00:04:53,540 Sorry. 69 00:04:54,380 --> 00:04:55,740 So this should be here, actually. 70 00:04:55,770 --> 00:04:56,490 Image button. 71 00:04:56,810 --> 00:04:58,100 We are talking about the logo. 72 00:04:58,160 --> 00:05:01,460 Bottom note of the enlighten me button. 73 00:05:02,240 --> 00:05:04,940 And we don't need that logo to text anymore. 74 00:05:05,210 --> 00:05:13,010 So we don't need this logo text because we are using our own image, which has the text inside. 75 00:05:15,260 --> 00:05:17,870 So any move that's on press room does look out. 76 00:05:18,000 --> 00:05:18,980 Yes, that's correct. 77 00:05:19,360 --> 00:05:19,610 And. 78 00:05:20,860 --> 00:05:23,330 Source of this image, Butson. 79 00:05:23,590 --> 00:05:33,670 It's going to be logout over if self overt else. 80 00:05:36,570 --> 00:05:37,210 Look out. 81 00:05:37,780 --> 00:05:40,000 Not hover below that PMG. 82 00:05:40,060 --> 00:05:40,540 Of course. 83 00:05:40,700 --> 00:05:44,290 So now that is the path of the image. 84 00:05:48,270 --> 00:05:56,370 So whole virts, this self Horvat here, what it is, is this AVC Bews over the hover behavior class. 85 00:05:56,670 --> 00:05:58,170 So it's a ball in property. 86 00:05:58,920 --> 00:06:01,440 It could be either true or false. 87 00:06:03,030 --> 00:06:04,470 So this is Python codes. 88 00:06:04,590 --> 00:06:08,040 I told you that everything on the right of these. 89 00:06:09,550 --> 00:06:10,990 Attributes is python codes. 90 00:06:11,290 --> 00:06:17,280 So we are going to set Aso's the low Gault's hover image for this image button. 91 00:06:17,680 --> 00:06:20,380 If this is true, if Horvat is true. 92 00:06:20,470 --> 00:06:27,450 So the hoverboard dots by file is detecting if a mouse is over that button. 93 00:06:27,580 --> 00:06:29,240 Otherwise, it puts logout. 94 00:06:29,350 --> 00:06:29,950 Not Hoeber. 95 00:06:30,430 --> 00:06:31,960 So that's that path there. 96 00:06:32,710 --> 00:06:34,510 So let me see what's happening. 97 00:06:38,370 --> 00:06:45,330 Yeah, so it's working fine as easy as that, but the bottom is obviously taking too much space in here. 98 00:06:45,990 --> 00:06:51,110 So it's basically taking one, two, three, four, five, 20 percent. 99 00:06:51,150 --> 00:06:53,070 So we have five widgets, each of them. 100 00:06:53,100 --> 00:06:55,230 It's getting 20 percent of the space. 101 00:06:57,010 --> 00:07:01,000 So let's do some SISE hinting then. 102 00:07:05,040 --> 00:07:06,040 So since. 103 00:07:07,340 --> 00:07:12,200 I think a good amount would be like zero point thirty five zero point thirty five. 104 00:07:14,450 --> 00:07:15,430 So let's see. 105 00:07:17,240 --> 00:07:18,520 Yeah, I think this is good. 106 00:07:19,770 --> 00:07:27,140 I know this is in the center, so if you want to put it on the rights, you want to change the position. 107 00:07:28,650 --> 00:07:39,390 And again, there's that position, Hinde Attribute, which gets a dictionary Center X, I think a good 108 00:07:39,390 --> 00:07:44,090 number of B points nine three and sensor Y. 109 00:07:47,430 --> 00:07:50,340 Zero point eight. 110 00:07:50,640 --> 00:07:52,080 Now, if we try this. 111 00:07:52,140 --> 00:07:54,030 See what we have. 112 00:07:54,930 --> 00:07:56,130 Nothing will happen. 113 00:07:58,360 --> 00:08:05,920 Because the BOTTEN, when we use this position, hinting the wege it has to be inside another Wege, 114 00:08:05,920 --> 00:08:09,730 it's called relative lay out. 115 00:08:10,300 --> 00:08:15,140 If you save the Kivi file now and execute the file, that will do the magic. 116 00:08:16,120 --> 00:08:18,460 If I press the button, it could not work. 117 00:08:18,850 --> 00:08:28,660 And the reason why that doesn't work is hidden here in how we order these parents or this image button 118 00:08:28,690 --> 00:08:29,050 class. 119 00:08:29,410 --> 00:08:31,780 The bottom behavior should be the first one. 120 00:08:31,960 --> 00:08:35,380 Because that order may hide the methods. 121 00:08:35,440 --> 00:08:36,850 All of that button behavior. 122 00:08:36,960 --> 00:08:38,260 Now, let me try again. 123 00:08:41,420 --> 00:08:41,890 Look out. 124 00:08:42,150 --> 00:08:43,020 So now it works. 125 00:08:44,930 --> 00:08:47,330 Logan again and. 126 00:08:50,350 --> 00:08:53,140 This is about this image BOTTEN implementation. 127 00:08:53,520 --> 00:08:58,840 And in the next election, let's go ahead and implement this Kraul view here of the label. 128 00:08:59,330 --> 00:08:59,640 See you.