1 00:00:00,240 --> 00:00:05,400 Welcome back in this video, we're going to finalize the why, which means we just need to have these 2 00:00:05,400 --> 00:00:12,240 text views here, these four buttons or text use, I'm going to use textbooks, but they will be treated 3 00:00:12,240 --> 00:00:13,680 like buttons, so to speak. 4 00:00:14,010 --> 00:00:15,480 And then we have this submit button. 5 00:00:15,900 --> 00:00:19,050 So let's go ahead and implement the missing pieces. 6 00:00:19,350 --> 00:00:27,210 And therefore I will add a bunch of text use and then I'm going to go over what they do because as I 7 00:00:27,210 --> 00:00:31,380 said, I'm going to use textbooks here and not actual buttons. 8 00:00:31,740 --> 00:00:36,510 So you see, we have this scroll view in which we have a linear layout in which we have a linear layout. 9 00:00:36,510 --> 00:00:38,220 So these are the closing tags, right? 10 00:00:38,220 --> 00:00:43,890 And I want to add the text use underneath this linear layout, which contains the progress bar. 11 00:00:44,190 --> 00:00:49,200 OK, so and what's important, it has to be in the outer parent linear layout. 12 00:00:49,350 --> 00:00:55,140 So this is where I will put my text use and I will need to add the options here. 13 00:00:55,320 --> 00:01:01,080 So I'm going to paste the code here and just give you and run through what's happening here. 14 00:01:01,380 --> 00:01:06,150 So first of all, we need to have this text view with an ID, and I'm going to call this one TBE option 15 00:01:06,150 --> 00:01:06,560 one. 16 00:01:06,570 --> 00:01:09,730 Then I will need another one with option two. 17 00:01:10,290 --> 00:01:14,520 So this one will be option two, then I need another one. 18 00:01:15,120 --> 00:01:16,950 Option three. 19 00:01:18,270 --> 00:01:22,620 And then finally option for OK. 20 00:01:22,620 --> 00:01:24,240 So I have all of these options now. 21 00:01:24,510 --> 00:01:28,710 And now let's run over what is actually happening here. 22 00:01:29,190 --> 00:01:30,240 So first, we have the ID. 23 00:01:30,480 --> 00:01:35,130 Then we say the width should be the entire with that is available for its parent. 24 00:01:35,580 --> 00:01:38,080 Then it's a wrapping the content in terms of height. 25 00:01:38,100 --> 00:01:42,900 There is a little bit of margin towards all directions, so distance towards all directions. 26 00:01:43,260 --> 00:01:47,520 And I'm going to use this background, which will be adorable that we don't have yet, which is why 27 00:01:47,520 --> 00:01:48,330 I get this error. 28 00:01:48,650 --> 00:01:49,530 We're going to create it. 29 00:01:49,530 --> 00:01:55,770 In a second, I centered a text, so I'm using gravity centered here, which means that the text will 30 00:01:55,770 --> 00:01:56,880 now be in the center. 31 00:01:57,480 --> 00:02:03,990 Then I'm adding padding, which creates this distance between the text and the edge, so to speak. 32 00:02:04,770 --> 00:02:09,180 And then we have the text color, which is this light grey, as well as the text size, which is eight. 33 00:02:10,080 --> 00:02:13,080 So now let's create this draw, and therefore you can hover over it. 34 00:02:13,080 --> 00:02:15,870 And by the way, to create that you just need to create. 35 00:02:15,870 --> 00:02:20,820 While in this case, I'm creating it for the background, which means the background property, and 36 00:02:20,820 --> 00:02:24,450 I'm just saying at slash and then whatever name you give it here. 37 00:02:25,050 --> 00:02:30,060 Once you do that, it will turn red and this will be an error, but you can then go ahead and hover 38 00:02:30,060 --> 00:02:34,260 over it and create a drop or resource file, which will have that exact same name. 39 00:02:34,560 --> 00:02:35,670 So let me just do that. 40 00:02:35,970 --> 00:02:37,500 I'm going to leave it as it is. 41 00:02:37,590 --> 00:02:43,760 So this just creates a new resource file for me, and you can then also look at your resources. 42 00:02:43,770 --> 00:02:46,530 It will be under the Troubles folder. 43 00:02:46,530 --> 00:02:49,170 So default option board object x amount. 44 00:02:49,170 --> 00:02:53,640 So this file was just created for me by the IDE, so by Android Studio. 45 00:02:54,090 --> 00:02:57,660 So what is it that I want to do here? 46 00:02:58,050 --> 00:03:01,650 So first of all, I'm going to make it a shape. 47 00:03:03,530 --> 00:03:07,460 So let's change that to shape and inside of this sheep. 48 00:03:07,970 --> 00:03:11,390 I want to define what kind of shape it's actually going to have. 49 00:03:11,390 --> 00:03:16,520 So the property and this has to be here inside the opening bracket. 50 00:03:16,970 --> 00:03:21,560 So here I can define the shape and you see you can select line. 51 00:03:21,590 --> 00:03:22,910 Oval, rectangle and ring. 52 00:03:22,910 --> 00:03:24,350 And I'm going to use a rectangle. 53 00:03:24,680 --> 00:03:26,540 So this will be a rectangular shape. 54 00:03:27,230 --> 00:03:30,350 And then inside of this shape, I want to have a stroke. 55 00:03:30,680 --> 00:03:39,380 OK, so here adding a stroke, which is just going to be a line and two stroke will have a whiff of 56 00:03:39,530 --> 00:03:44,540 one density pixel and it will have a color of. 57 00:03:46,410 --> 00:03:47,590 Let's use E! 58 00:03:47,640 --> 00:03:49,740 Eight, eight, eight. 59 00:03:51,510 --> 00:03:54,570 OK, so this is going to be my stroke, let me close that up. 60 00:03:54,960 --> 00:03:59,760 So this was the stroke, which means the line and now I want to have a background and the background 61 00:03:59,760 --> 00:04:01,410 should be a solid background. 62 00:04:01,740 --> 00:04:05,520 So I'm just going to use the color of white. 63 00:04:05,700 --> 00:04:07,830 OK, so color white. 64 00:04:08,520 --> 00:04:17,269 And then I finally just need to add corners, which will allow me to have this rounded edge. 65 00:04:17,279 --> 00:04:18,600 You see here, it's rounded. 66 00:04:19,720 --> 00:04:26,680 OK, and that's what I want to have here, so corners with a radius of five density 50 pixels, so that's 67 00:04:26,680 --> 00:04:26,830 it. 68 00:04:27,130 --> 00:04:35,020 So once we have that, we go over to our questions activity XML and you see the arrows have disappeared 69 00:04:35,410 --> 00:04:41,560 and we can now check out our design and we will see that it is round it. 70 00:04:41,770 --> 00:04:45,850 We have this grey border as well as a white background. 71 00:04:46,210 --> 00:04:49,240 So let's run this real quick just to see how this is going to look like. 72 00:04:51,580 --> 00:04:58,720 OK, so let's go over to the next screen and we see here that we have our text use slash buttons. 73 00:04:58,870 --> 00:05:03,280 Of course, they're empty because there's nothing in there, but we're going to set that up in this 74 00:05:03,280 --> 00:05:07,060 video also so that at least it will be populated with a question. 75 00:05:07,660 --> 00:05:12,130 OK, so now finally, we just need to add a button underneath all of those text views. 76 00:05:12,460 --> 00:05:14,080 OK, so let's just add this button. 77 00:05:15,910 --> 00:05:18,400 Which is just going to be a default button. 78 00:05:18,460 --> 00:05:19,810 Let me just add it in here. 79 00:05:21,640 --> 00:05:25,930 And it will be inside of the linear layout still and underneath this text, you. 80 00:05:26,320 --> 00:05:31,360 So this button, I'm going to call it button submit will have a whiff of match parent height of rap 81 00:05:31,360 --> 00:05:34,930 content, a margin of 10, so a little distance towards all directions. 82 00:05:35,260 --> 00:05:38,260 And I want to use the primary color. 83 00:05:39,070 --> 00:05:44,530 So let's see how we can get that design color primary. 84 00:05:44,770 --> 00:05:48,250 So this one will be this purple color that we have. 85 00:05:48,250 --> 00:05:52,440 So the naming convention has changed a little bit ever since I created this code. 86 00:05:52,450 --> 00:05:57,490 So you see here, design evolved, Color Primary is working for me, but you can just use any color 87 00:05:57,490 --> 00:05:57,910 you want. 88 00:05:58,330 --> 00:06:02,170 And then as the text, I'm going to set that to submit all in caps. 89 00:06:02,740 --> 00:06:08,470 The text color will be white, as well as the text size at ESP and the textile being bold. 90 00:06:08,770 --> 00:06:14,200 So if we check it out now, we can see that we have this submit button here at the bottom, which will 91 00:06:14,530 --> 00:06:17,260 then generate the button as I want to have it. 92 00:06:17,260 --> 00:06:20,200 So let's look at it once it's created. 93 00:06:21,190 --> 00:06:24,430 So here you see this is going to be the submit button. 94 00:06:25,120 --> 00:06:25,450 All right. 95 00:06:25,450 --> 00:06:31,210 So now let's populate the data, which means populate those text to use so that they are usable and 96 00:06:31,210 --> 00:06:33,400 we are into questions activity there. 97 00:06:33,550 --> 00:06:36,370 That's what we created this XML for. 98 00:06:36,640 --> 00:06:41,190 So we need to set up all of the items that we want to access. 99 00:06:41,200 --> 00:06:47,950 So all of the views, so the text views, the image, view, their progress bar, all of that needs 100 00:06:47,950 --> 00:06:49,330 to be added. 101 00:06:49,600 --> 00:06:49,940 OK. 102 00:06:50,380 --> 00:06:53,570 Therefore, we can use find view by ID for all of them. 103 00:06:53,590 --> 00:06:59,800 This will be a little bit of effort, but that's how it has to be done unless you're using view binding, 104 00:06:59,800 --> 00:07:03,550 which we don't do at this point of the course, but we will be using your binding later on. 105 00:07:06,010 --> 00:07:14,710 So let's set up all of the items that we need so private VAR Progress Bar, which will be of type progress 106 00:07:14,710 --> 00:07:15,010 bar. 107 00:07:15,220 --> 00:07:15,620 OK. 108 00:07:16,000 --> 00:07:17,270 So this will be a Nullarbor. 109 00:07:17,350 --> 00:07:21,460 So I'm going to assign null to it and let's check it out. 110 00:07:21,790 --> 00:07:26,830 Progress Bar has been automatically added for me, so Android widget has been imported with the Progress 111 00:07:26,830 --> 00:07:31,660 Bar, then I'm going to require the text of your progress. 112 00:07:32,260 --> 00:07:38,740 So there's this progress bar, but also this text to you that we used as well. 113 00:07:39,460 --> 00:07:42,480 So it's this little text to you. 114 00:07:42,490 --> 00:07:46,990 I need to access it as well because I want to change the number that is displayed. 115 00:07:47,740 --> 00:07:51,490 So let's import text you see here with all enter. 116 00:07:51,490 --> 00:07:53,080 By the way, I added the text you. 117 00:07:53,740 --> 00:07:57,120 And now we will need to do the same thing for the question. 118 00:07:57,140 --> 00:08:05,170 So private bar TV question, which will be of type, text view, optional as well, or Nullarbor. 119 00:08:05,500 --> 00:08:07,240 And then the image. 120 00:08:07,630 --> 00:08:10,520 So private bar I've image. 121 00:08:10,570 --> 00:08:12,790 So an image view image. 122 00:08:13,240 --> 00:08:16,240 And this was an image view optional. 123 00:08:16,600 --> 00:08:21,280 And I'm going to assign null to it, and we need to import image view for this as well. 124 00:08:21,310 --> 00:08:27,310 So here you see, the import has been done, and now I need to have the four options. 125 00:08:27,370 --> 00:08:29,770 OK, so I'm just going to copy them in here. 126 00:08:29,780 --> 00:08:36,280 You see, it takes you option one, which is of Type X text you Nullarbor and Option two, option three 127 00:08:36,280 --> 00:08:37,000 an option for. 128 00:08:37,929 --> 00:08:45,640 So now inside of the create method, here we can set up all of the user interface items so we can just 129 00:08:46,000 --> 00:08:54,180 say, OK, the progress bar can be found via its ID, so find view by ID, ODOT, ID Progress Bar. 130 00:08:54,190 --> 00:08:57,640 That's how we called it the TV progress. 131 00:08:57,670 --> 00:09:03,580 So the text you progress can also be found by its ID ordered ID that TVE progress. 132 00:09:04,270 --> 00:09:05,100 That's how we call it. 133 00:09:05,110 --> 00:09:09,040 And you can, by the way, if you don't know what that is, you could just hold the control key. 134 00:09:09,040 --> 00:09:15,860 Click into it and you will see that it jumps directly to this element in the code as well. 135 00:09:15,880 --> 00:09:20,320 So here is a TV progress, which is saying zero out of nine. 136 00:09:20,590 --> 00:09:20,980 OK. 137 00:09:21,820 --> 00:09:25,870 And accordingly, we need to do the same thing with the question. 138 00:09:26,170 --> 00:09:33,610 So TBE question is going to be found by its ID, our Dot ID Dot TV on the score question. 139 00:09:33,820 --> 00:09:36,280 So it's super boring, I know, but we have to do it. 140 00:09:41,140 --> 00:09:45,430 And well, yeah, of course, we have to do the same thing with the image view and all of the other 141 00:09:45,430 --> 00:09:52,150 views, so you can just, well, try this by yourself, just post a video and set this up with all of 142 00:09:52,150 --> 00:09:53,020 the items. 143 00:09:53,860 --> 00:09:54,220 All right. 144 00:09:54,430 --> 00:09:58,660 So now let me do that with the TextView options as well here. 145 00:09:59,350 --> 00:10:03,040 Find them by their I.D. And that will be pretty much it. 146 00:10:03,460 --> 00:10:04,890 So now we have this question, right? 147 00:10:04,900 --> 00:10:09,710 And before we use this log entry to see how much we have in terms of questions. 148 00:10:09,730 --> 00:10:18,670 So now let's just go ahead and run through a follow-up, which will then give me the questions. 149 00:10:19,000 --> 00:10:25,750 So I want to have the individual questions, and therefore we'll use this for loop, which will display 150 00:10:26,020 --> 00:10:26,640 the log. 151 00:10:26,650 --> 00:10:33,250 Well, I'm using the Arrow log entry, so I as information I'm going to use Arrow, which will turn 152 00:10:33,250 --> 00:10:33,700 it red. 153 00:10:33,910 --> 00:10:40,660 So just for you to see how it's going to look like, and I'm going to give it the tank of questions, 154 00:10:41,230 --> 00:10:45,550 and then I'm going to call this I thought question or I'm going to use either question. 155 00:10:45,550 --> 00:10:46,870 So what is either question? 156 00:10:47,140 --> 00:10:50,560 So I is going to be the individual question inside of the questions list. 157 00:10:50,560 --> 00:10:54,550 You can, of course, also give it a more descriptive name, something like question. 158 00:10:55,120 --> 00:10:57,090 But then it would look like question that question. 159 00:10:57,100 --> 00:10:58,790 So either way. 160 00:10:58,810 --> 00:11:04,120 So this I is the individual question inside of this questions list because this questions list contains 161 00:11:04,270 --> 00:11:05,640 questions, OK? 162 00:11:06,040 --> 00:11:10,960 And we are getting the individual question of the question. 163 00:11:11,230 --> 00:11:15,490 So the question is the object type or the data class. 164 00:11:15,970 --> 00:11:20,590 And then the question is the actual question with a lower case. 165 00:11:20,600 --> 00:11:24,100 Q is the actual question that we want to display. 166 00:11:24,670 --> 00:11:28,690 So that's what we are going to do with this log entry here. 167 00:11:28,720 --> 00:11:31,750 So for now, let's see if we get that. 168 00:11:32,260 --> 00:11:36,220 So let's start it and the UI will not be updated. 169 00:11:36,220 --> 00:11:39,910 But let's look at the Lock app now and search for questions. 170 00:11:42,800 --> 00:11:48,490 And we will see all of the questions, so what country does this flag belong to? 171 00:11:48,500 --> 00:11:49,820 What country does this flag belong to? 172 00:11:49,850 --> 00:11:57,260 So not very interesting details that we get here, but the good thing is now we can go ahead and use 173 00:11:57,260 --> 00:12:03,560 those questions to set them up, as well as the text you for the question that we are at. 174 00:12:03,980 --> 00:12:11,720 So one question will give us the current question, which will be of type question, and I'm going to 175 00:12:11,720 --> 00:12:13,300 get it for my questions list. 176 00:12:13,310 --> 00:12:18,530 As we know, this questions list contains all of the different questions that we have, and we gathered 177 00:12:18,530 --> 00:12:19,610 from the constants here. 178 00:12:19,760 --> 00:12:26,960 So it's this questions list, right, which is in the list of individual questions, and I can now get 179 00:12:27,770 --> 00:12:35,210 the current position and we get the current position, which will. 180 00:12:43,640 --> 00:12:49,970 And of course, I will need this current position, so let's go ahead and create a variable called current 181 00:12:49,970 --> 00:12:51,770 position, I'm going to set that to one. 182 00:12:52,080 --> 00:12:58,310 It's complaining that it's over, but we're going to overwrite this and I'm going to get that minus 183 00:12:58,310 --> 00:12:58,730 one. 184 00:12:59,150 --> 00:13:00,260 So what does that mean? 185 00:13:00,470 --> 00:13:05,960 Well, we are starting at the position one and then we're going through the individual positions now. 186 00:13:05,960 --> 00:13:11,330 You could, of course, also say start with the current positions zero and then go through the questions 187 00:13:11,330 --> 00:13:13,730 list like so this would work as well. 188 00:13:14,030 --> 00:13:18,650 So now this will give us the individual question that we are currently looking at. 189 00:13:19,100 --> 00:13:26,320 Now the question itself is cool and all we can now use it and we can assign the question to our text 190 00:13:26,330 --> 00:13:27,410 you questions, right? 191 00:13:27,950 --> 00:13:35,210 So here we have the question, but we can also go ahead and first of all, set the progress bar on our 192 00:13:35,210 --> 00:13:36,020 progress. 193 00:13:36,020 --> 00:13:41,600 Bar is another bill, so we need to add the question mark here and we set the progress of the progress 194 00:13:41,600 --> 00:13:44,000 bar to be their current position. 195 00:13:45,180 --> 00:13:49,990 And here you can already see why I would not like to set current position to zero. 196 00:13:50,040 --> 00:14:02,940 But we will change that in a second and then we have the TV progress to display the text of the current 197 00:14:02,940 --> 00:14:03,570 position. 198 00:14:06,020 --> 00:14:11,360 And then a slash sign, so sheer current position. 199 00:14:12,610 --> 00:14:15,880 With a slash and then there. 200 00:14:18,360 --> 00:14:21,750 Progress Bar thought max value. 201 00:14:23,180 --> 00:14:25,760 And the Progress Bar and Nullarbor, so need to add the question mark. 202 00:14:26,510 --> 00:14:31,580 OK, so that's what they want to display here and maybe without empty spaces in between. 203 00:14:32,510 --> 00:14:32,990 All right. 204 00:14:33,260 --> 00:14:34,790 So that's TBE Progress Bar. 205 00:14:34,800 --> 00:14:42,020 Now let's set up the question, and the question itself will be another bill or is in the bill. 206 00:14:42,020 --> 00:14:47,150 So we need to set the test text with a question mark. 207 00:14:47,420 --> 00:14:49,310 So here question that question. 208 00:14:50,480 --> 00:14:52,460 So here we get the actual question. 209 00:14:53,730 --> 00:14:55,420 Of the question object. 210 00:14:56,560 --> 00:14:59,680 So let's test this for now, let's see how this is going to look like. 211 00:15:02,060 --> 00:15:06,200 And we'll see what country does this flag belong to, and we see we are at zero out of nine. 212 00:15:06,650 --> 00:15:10,010 So that's why I'm not happy with using the zero. 213 00:15:10,400 --> 00:15:19,370 And that's why we should use the current position being one and the minus one here, which allows us 214 00:15:19,370 --> 00:15:21,830 to still start a position zero. 215 00:15:21,830 --> 00:15:25,220 So the array list will start at zero. 216 00:15:25,610 --> 00:15:27,830 So right, it's starts counting at zero. 217 00:15:28,400 --> 00:15:33,350 And we want to start with the first question, which is why we need to use current position minus one, 218 00:15:33,350 --> 00:15:38,030 because current position is one and we need to pass zero here as we are starting with the first question. 219 00:15:38,630 --> 00:15:45,470 So now that's the text you that we are setting up for the question, and now we need to set the text 220 00:15:45,470 --> 00:15:48,040 views for all of the options. 221 00:15:48,050 --> 00:15:50,540 So here question that option one. 222 00:15:54,770 --> 00:15:57,020 And of course, I need to add the dots here. 223 00:15:58,460 --> 00:16:02,630 And then we need to do the same thing where the option to. 224 00:16:04,020 --> 00:16:08,550 So text will be question dot option to. 225 00:16:12,070 --> 00:16:12,820 And so forth. 226 00:16:13,270 --> 00:16:20,620 OK, so it's the same with Option three and option four, and you can see now we have all of the questions 227 00:16:20,620 --> 00:16:21,160 ready. 228 00:16:21,190 --> 00:16:28,670 Let's test it and see if we are going to get the actual while the actual options here. 229 00:16:28,690 --> 00:16:33,370 So Argentina, Australia, Armenia, Austria and the submit button. 230 00:16:34,360 --> 00:16:40,060 All right, now, the one thing that is the most interesting one I believe is missing and that is the 231 00:16:40,060 --> 00:16:40,430 image. 232 00:16:40,450 --> 00:16:45,280 So let me add the image here and actually let me add it all the way. 233 00:16:46,740 --> 00:16:55,290 The For Progress Bar, So, Ivy, image thought, set image, and here you are. 234 00:16:55,740 --> 00:17:01,650 You can find different ways of assigning an image and what is it that we have? 235 00:17:01,920 --> 00:17:03,510 So do we have a bitmap? 236 00:17:05,050 --> 00:17:09,099 Have we started a bitmap or have we stored an integer? 237 00:17:09,609 --> 00:17:17,170 Well, we have stored an integer because if we look at our question here, the image is stored as an 238 00:17:17,170 --> 00:17:17,490 entity. 239 00:17:18,109 --> 00:17:26,650 OK, so we can now set the image resource with its ID. And we get it from question dot image. 240 00:17:27,250 --> 00:17:35,110 So we are now accessing this image property of our question object and setting it as the image resource 241 00:17:35,860 --> 00:17:44,620 for our IV image, which is our image view, which internally, if we look at it, here is this image 242 00:17:44,620 --> 00:17:46,540 view, which currently has the German flag in it. 243 00:17:47,050 --> 00:17:52,000 So let's run it again, and let's see if it's going to display it. 244 00:17:52,120 --> 00:17:59,920 And you can see that it shows Argentina, which is exactly correct, because the first question if we 245 00:17:59,920 --> 00:18:03,370 look at our constants was, in fact, the Argentinian flag. 246 00:18:04,210 --> 00:18:06,220 So what country does this flag belong to? 247 00:18:06,250 --> 00:18:08,980 Now we see Argentina, Australia, Armenia and Austria. 248 00:18:09,430 --> 00:18:11,920 And that is our question one. 249 00:18:12,010 --> 00:18:14,710 So you see, this user interface pretty much works already. 250 00:18:14,920 --> 00:18:15,880 We see the question. 251 00:18:16,030 --> 00:18:17,470 We see the progress bar. 252 00:18:17,530 --> 00:18:18,270 We see the text. 253 00:18:18,280 --> 00:18:22,360 You have the progress bar displaying the right values and we see the different options. 254 00:18:22,570 --> 00:18:24,040 Of course, nothing works here. 255 00:18:24,040 --> 00:18:28,240 We can click any of the text views, but that's what we're going to cover later in this section. 256 00:18:28,720 --> 00:18:30,030 So see you in the next video.