1 00:00:00,930 --> 00:00:01,589 Welcome back. 2 00:00:01,800 --> 00:00:07,380 And this and the next video, I would like to set up the screen here where we have a text view at the 3 00:00:07,380 --> 00:00:11,430 top than an image view than we have this progress bar with another text you. 4 00:00:11,430 --> 00:00:17,190 So this whole thing has to be a linear layout where items are next to each other. 5 00:00:17,580 --> 00:00:20,730 And then we have four buttons, which are not buttons. 6 00:00:20,730 --> 00:00:26,460 I'm using text use here, which will be treated like buttons in the sense that we can click on them. 7 00:00:26,760 --> 00:00:32,159 So here, for example, you can see then they are selected, and then we have this actual button at 8 00:00:32,159 --> 00:00:32,580 the bottom. 9 00:00:32,580 --> 00:00:39,240 You could see I can scroll here because this entire surrounding view is going to be a scroll view. 10 00:00:39,270 --> 00:00:46,230 OK, so everything that we have inside of the screen is inside of this scroll view so that we can have 11 00:00:46,230 --> 00:00:51,900 as many items as we want, as long as well, we can scroll, that is going to be fine. 12 00:00:52,470 --> 00:00:54,120 So let's go ahead and implement that. 13 00:00:54,330 --> 00:00:56,580 And you can, of course, try to build that by yourself. 14 00:00:56,790 --> 00:01:01,980 I told you the names of everything that you need to use, so you could really just try and build this. 15 00:01:02,280 --> 00:01:07,440 It won't be easy, but if you give it some time, you will be able to build this and this will really 16 00:01:07,440 --> 00:01:12,630 catapult your knowledge of excel and how to create a UI dramatically. 17 00:01:12,900 --> 00:01:14,160 OK, so let's get started. 18 00:01:15,360 --> 00:01:20,070 First of all, this is our activity quiz questions excel file that I want to jump over to. 19 00:01:20,100 --> 00:01:21,060 So this one here? 20 00:01:21,450 --> 00:01:25,000 And as I stated, this will be a scroll view. 21 00:01:25,020 --> 00:01:30,300 OK, so lets you scroll view here and then I want to make sure that my scroll view is going to fill 22 00:01:30,300 --> 00:01:31,350 the entire viewport. 23 00:01:31,500 --> 00:01:35,730 So I will set the property fill viewport true. 24 00:01:36,780 --> 00:01:41,460 OK, so inside of the scroll view, that's where I'm going to have a linear layout, where items are 25 00:01:41,460 --> 00:01:42,780 going to be on top of each other. 26 00:01:42,990 --> 00:01:48,090 So it's basically going to be the same thing as we've seen before, where we just have a linear layout 27 00:01:48,090 --> 00:01:52,230 that then has everything else inside of it. 28 00:01:52,470 --> 00:01:54,360 OK, so this linear layout here. 29 00:01:54,750 --> 00:02:00,060 I'm going to match parent in terms of with so the entire screen with and then it's going to wrap the 30 00:02:00,060 --> 00:02:03,480 content, so it's only going to take as much space as it requires. 31 00:02:03,840 --> 00:02:09,840 On top of that, I want to make sure that everything is centered so the gravity will be towards the 32 00:02:09,840 --> 00:02:12,620 center and the orientation will be vertical. 33 00:02:12,660 --> 00:02:15,450 So items are going to be on top of each other. 34 00:02:15,810 --> 00:02:21,430 And then finally, I will add a little bit of padding on the highest level so that everything is a little 35 00:02:21,450 --> 00:02:27,180 lower, has a little bit of distance to the board or to the edge of the screen. 36 00:02:27,990 --> 00:02:35,280 OK, so inside of here, I will then have a text view and this text view will match apparent in terms 37 00:02:35,280 --> 00:02:37,320 of with and content in terms of height. 38 00:02:37,620 --> 00:02:41,570 And I'm going to give it an idea because I want to be able to access this texture. 39 00:02:41,640 --> 00:02:43,530 So I'm going to call the TV question. 40 00:02:44,400 --> 00:02:47,280 OK, so what else do I want to have for this text you? 41 00:02:47,580 --> 00:02:56,430 Well, a little bit of margin towards all the of 10 density pixels, then it should have the text in 42 00:02:56,430 --> 00:02:57,060 the center. 43 00:02:57,570 --> 00:03:00,090 So I'm going to gravitate to the text to the center. 44 00:03:00,090 --> 00:03:02,970 So if you look at it, the question is in the center, right? 45 00:03:02,970 --> 00:03:05,340 So let's gravitate towards the center. 46 00:03:05,640 --> 00:03:10,680 We, of course, need to override the default text size to twenty two. 47 00:03:10,830 --> 00:03:17,280 For example, you can of course, use your own values here, and the text color will be the grayish 48 00:03:17,280 --> 00:03:18,470 color that we used before. 49 00:03:18,480 --> 00:03:21,500 So six, three, three, a 43. 50 00:03:23,130 --> 00:03:28,450 And finally, for my tools, so only for the designer here, for example. 51 00:03:28,470 --> 00:03:34,860 So you see, there is no text here in the designer, and I'm going to set text for the designer only. 52 00:03:34,860 --> 00:03:38,820 So this text will not appear when we are actually running the application. 53 00:03:39,120 --> 00:03:41,440 This will only appear in my tools. 54 00:03:41,460 --> 00:03:42,720 So here what? 55 00:03:44,640 --> 00:03:48,360 Country, does this flag belong to? 56 00:03:49,650 --> 00:03:51,300 And then that's pretty much it. 57 00:03:51,540 --> 00:03:51,870 OK. 58 00:03:52,140 --> 00:03:56,820 So this is going to be my main text to you, and that's the text that it will display. 59 00:03:56,820 --> 00:03:57,190 So here. 60 00:03:57,210 --> 00:03:59,070 What country does this flag belong to? 61 00:03:59,430 --> 00:04:03,360 And it's centered or gravitated towards the center, which is exactly what I want. 62 00:04:03,360 --> 00:04:08,760 It's on both sides on the linear layout side, as well as on the text that is inside of the text view 63 00:04:08,760 --> 00:04:09,780 itself as well. 64 00:04:10,500 --> 00:04:10,810 OK. 65 00:04:10,860 --> 00:04:12,780 So then we have this image you. 66 00:04:12,810 --> 00:04:13,200 All right. 67 00:04:13,200 --> 00:04:15,300 So how can we create an image for you? 68 00:04:15,330 --> 00:04:18,089 Well, by using the initial you tag here. 69 00:04:18,420 --> 00:04:25,980 So the width will be content, so it only will be as wide as it requires, and the same goes for the 70 00:04:25,980 --> 00:04:26,310 height. 71 00:04:26,460 --> 00:04:30,120 So I need to have an ID here because I need to set the value. 72 00:04:30,120 --> 00:04:34,710 Of course, I'm going to call this ivy on the square image I've standing for image view. 73 00:04:35,520 --> 00:04:39,270 Then I'm going to add a little bit of margin towards the top. 74 00:04:39,660 --> 00:04:43,320 So 16 density pixels always sounds like a good idea. 75 00:04:43,680 --> 00:04:48,330 And then I can well, I will add something called content description. 76 00:04:48,600 --> 00:04:53,700 So this is not something that will be displayed, but for people that cannot see, for example, there's 77 00:04:53,700 --> 00:04:57,390 going to be helpful because it's going to tell them what is the content. 78 00:04:57,390 --> 00:05:00,690 So this will be the image, for example. 79 00:05:00,990 --> 00:05:07,500 OK, so this will be the, well, something that will be read for people that cannot see if they are 80 00:05:07,500 --> 00:05:11,130 using tools that allow them to read items on the screen. 81 00:05:12,060 --> 00:05:17,920 OK, and then finally, I'm going to set an image for the tools only. 82 00:05:17,940 --> 00:05:26,760 So here I'm going to say that by default, I want to use the German flag here, and that is only going 83 00:05:26,760 --> 00:05:28,400 to be for my designer. 84 00:05:28,410 --> 00:05:33,780 So you see here we are using this German flag, but as I said, it's only for the designer. 85 00:05:33,780 --> 00:05:39,140 So if we run this application, we will see that it's still going to be pretty much empty. 86 00:05:39,150 --> 00:05:47,460 So you see, there's nothing in here because all of the details that we have added so far are only in 87 00:05:47,580 --> 00:05:48,000 tools. 88 00:05:48,240 --> 00:05:48,590 OK. 89 00:05:48,630 --> 00:05:51,390 They are empty and empty items so far. 90 00:05:52,080 --> 00:05:52,410 OK. 91 00:05:53,190 --> 00:05:56,640 Then as you see here, we have this progress bar. 92 00:05:56,670 --> 00:05:59,220 OK, so let's go ahead and create a progress bar. 93 00:05:59,820 --> 00:06:04,800 Like so and with I'm going to set that to zero dpi the height. 94 00:06:04,950 --> 00:06:07,140 However, I'm going to wrap its content. 95 00:06:07,530 --> 00:06:15,240 So we saw earlier when we want to put something at zero dpi for any given direction, we need to give 96 00:06:15,240 --> 00:06:19,490 it a weight because otherwise it will not be displaying correctly. 97 00:06:19,500 --> 00:06:28,230 So I'm going to set the weights to one and then I'm going to set the maximum value to four now nine 98 00:06:28,230 --> 00:06:30,960 because with nine questions and the min height. 99 00:06:31,650 --> 00:06:39,210 So I'm going to say, OK, well, you should rep your content, but I want you to be at minimum, 50 100 00:06:39,240 --> 00:06:40,020 density pixels. 101 00:06:40,530 --> 00:06:41,880 And then there are progress. 102 00:06:41,880 --> 00:06:44,820 Property is going to be set to zero. 103 00:06:45,570 --> 00:06:50,130 So this progress bar you could see well has a whiff of zero right now. 104 00:06:50,490 --> 00:06:53,910 And that is because I need to put it into a linear layout. 105 00:06:53,940 --> 00:06:59,880 Let me add another linear layout that will be now surrounding this progress bar because I said, we 106 00:06:59,880 --> 00:07:02,850 have this progress bar and then this little text view here on the side. 107 00:07:03,150 --> 00:07:05,790 So we need to make sure that we use both of them. 108 00:07:06,300 --> 00:07:14,670 So here to with will be much apparent and the height will be rep content, so it should only be as high 109 00:07:14,670 --> 00:07:15,840 as it requires. 110 00:07:16,270 --> 00:07:22,320 OK, so this will be the linear layout with the progress bar now, the linear layout, I want it to 111 00:07:22,320 --> 00:07:25,860 be gravitating towards the center vertically. 112 00:07:26,880 --> 00:07:32,400 OK, and a little bit of margin towards the top is also a good idea here so that it's not going to be. 113 00:07:34,600 --> 00:07:36,820 Too cramped, too close together. 114 00:07:37,090 --> 00:07:40,240 And then the orientation will be horizontal. 115 00:07:40,270 --> 00:07:41,080 Why horizontal? 116 00:07:41,350 --> 00:07:43,810 Well, because items are next to each other. 117 00:07:43,840 --> 00:07:47,050 So usually we use vertical all the time where items are on top of each other. 118 00:07:47,350 --> 00:07:51,550 Now this time, this progress bar and this text to you there next to each other. 119 00:07:51,550 --> 00:07:54,190 So we are using the horizontal key here. 120 00:07:54,880 --> 00:08:01,990 Now I'm going to set a style for this progress bar, and the style that I want to use is going to be 121 00:08:01,990 --> 00:08:05,920 progress bar bar style horizontal. 122 00:08:05,920 --> 00:08:07,900 Well, it seems like it's not existing. 123 00:08:07,900 --> 00:08:12,250 So let me put that in here and show you how it's going to actually look like. 124 00:08:12,490 --> 00:08:17,410 So there's this and there are Android attributes just as progress bar style horizontal. 125 00:08:18,490 --> 00:08:24,310 OK, this attribute, which is a horizontal progress bar style, this is a horizontal progress bar. 126 00:08:24,520 --> 00:08:28,140 So the progress by will not be vertical, but it will be horizontal. 127 00:08:28,150 --> 00:08:30,580 So that's what we are styling here. 128 00:08:30,590 --> 00:08:33,789 We're defining that's how we want it to be. 129 00:08:34,539 --> 00:08:42,740 And then I'm going to use the in there terminate value of false. 130 00:08:42,820 --> 00:08:43,750 So what is this? 131 00:08:43,750 --> 00:08:49,330 Indeterminate allows to enable the indeterminate mode in this mode, the Progress Bar Place an infinite 132 00:08:49,330 --> 00:08:50,290 looping animation. 133 00:08:50,590 --> 00:08:56,950 So I don't want it to constantly animate this progress because we're not downloading anything right? 134 00:08:57,310 --> 00:08:59,110 We're just fixing the progress. 135 00:08:59,140 --> 00:09:02,230 So it's going to be, let's say, at one out of 10 or whatever. 136 00:09:02,860 --> 00:09:03,280 OK. 137 00:09:03,520 --> 00:09:04,180 And we'll see here. 138 00:09:04,180 --> 00:09:05,950 Max is nine and progresses at zero. 139 00:09:05,950 --> 00:09:08,150 So this is how it's going to look like right now. 140 00:09:08,170 --> 00:09:10,990 But what if we change that to, let's say, five? 141 00:09:11,020 --> 00:09:14,020 Then we see, OK, now it's semi done. 142 00:09:14,050 --> 00:09:18,430 So the progress bar is at 50 percent, while five out of nine, not 50 percent, but it's actually something 143 00:09:18,430 --> 00:09:21,250 like 65 percent or so or 56 percent. 144 00:09:21,700 --> 00:09:23,150 So that's a progress bar. 145 00:09:23,170 --> 00:09:26,920 And next to it, I said I would have a text you buy next to it. 146 00:09:27,310 --> 00:09:33,370 I mean, of course, the item that will be right next to it because its orientation is horizontal for 147 00:09:33,370 --> 00:09:35,270 the parent, the linear layout. 148 00:09:35,270 --> 00:09:38,260 So the linear layout that surrounds the elements. 149 00:09:38,830 --> 00:09:44,380 So here that with will be rep content and the height will also be rep content. 150 00:09:45,100 --> 00:09:46,120 Now this text view. 151 00:09:47,210 --> 00:09:49,790 Should be gravitating towards the center as well. 152 00:09:50,540 --> 00:09:56,120 So I want to at least the text of the text, you should be gravitating towards the center. 153 00:09:56,660 --> 00:10:01,910 I will add a little bit of padding so that it's going to be thicker inside. 154 00:10:01,910 --> 00:10:05,750 So you can see here I wanted to be a little bit of space. 155 00:10:05,900 --> 00:10:10,160 You see here, while you can't see it very well because it doesn't have a background color, but there 156 00:10:10,160 --> 00:10:13,730 is some distance inside of it, which is just padding. 157 00:10:14,240 --> 00:10:25,700 And then I will add a text size of 14 Aspie, as well as the text that will be displayed in the tools. 158 00:10:25,700 --> 00:10:29,350 Settings will be zero out of nine, for example. 159 00:10:29,360 --> 00:10:32,870 So let's see how that's going to look like, and we can see that this is it. 160 00:10:33,110 --> 00:10:34,940 I can see out of nine. 161 00:10:35,450 --> 00:10:41,480 OK, now let's give this TextView an idea because we will need to be able to access it later on. 162 00:10:41,840 --> 00:10:48,050 So I'm going to call this one TV progress and accordingly, this progress bar itself will also need 163 00:10:48,050 --> 00:10:49,250 to be able to access it. 164 00:10:49,520 --> 00:10:54,110 So let's give it an idea of progress bar. 165 00:10:55,120 --> 00:10:55,570 Like so. 166 00:10:58,940 --> 00:11:03,920 And I've also seen the Progress Bar has a weight of one, and this text doesn't have a weight at all, 167 00:11:04,220 --> 00:11:09,320 which just means that it's just going to take the rest of available while just going to take as much 168 00:11:09,320 --> 00:11:12,920 space as it needs and the progress bar is going to take the rest of the space. 169 00:11:13,190 --> 00:11:19,640 And you see there is an edge here, and that is because of the padding that I have added on the older 170 00:11:19,640 --> 00:11:20,630 linear layout. 171 00:11:20,750 --> 00:11:23,810 So these 16, as Pete, that we have here. 172 00:11:24,110 --> 00:11:26,480 So if you look at the designer here. 173 00:11:27,670 --> 00:11:31,630 This is the style that we are getting, so here. 174 00:11:32,170 --> 00:11:36,460 What country does this belong to the flag progress bar? 175 00:11:36,590 --> 00:11:36,940 That's it. 176 00:11:37,300 --> 00:11:40,000 So that's it for this video and the next one, we're going to finish the. 177 00:11:40,480 --> 00:11:41,200 So see you there.