1 00:00:01,100 --> 00:00:05,550 Welcome back in the last video, we ended up with this result that we have right here. 2 00:00:05,570 --> 00:00:10,550 And as you might recall, this is what we want to get, so we need to change the size of the image. 3 00:00:10,550 --> 00:00:12,830 We want to get this circle around it. 4 00:00:12,830 --> 00:00:18,650 And then you can also see that here at the bottom, we have a couple of different details that we want 5 00:00:18,650 --> 00:00:19,460 to display as well. 6 00:00:19,820 --> 00:00:21,680 So let's implement all of that. 7 00:00:22,100 --> 00:00:27,680 And first of all, we're going to look at modifiers because I want to modify this image here. 8 00:00:28,040 --> 00:00:28,510 All right. 9 00:00:28,520 --> 00:00:30,350 Let's go over to our project. 10 00:00:30,650 --> 00:00:37,400 And therefore, if we look at our image and that is the profile page key file, if you recall and we 11 00:00:37,400 --> 00:00:45,560 had this image, which is this composable that we're using, so we are setting the painter property, 12 00:00:45,560 --> 00:00:47,840 we assenting, setting the content description. 13 00:00:48,170 --> 00:00:50,660 But then there is also something called modifier. 14 00:00:50,900 --> 00:00:56,930 OK, so let's add the modifier in here modifier. 15 00:00:57,350 --> 00:00:59,360 And it's like this modifier. 16 00:01:00,400 --> 00:01:08,950 And we need to use the modifier clause here, and there are a couple of settings that we can set a bunch 17 00:01:08,950 --> 00:01:10,810 of functions that we can use. 18 00:01:11,110 --> 00:01:16,450 For example, we can set the size and you can see we can either set the size with density pixels, the 19 00:01:16,450 --> 00:01:18,910 width and height within city pixels and so forth. 20 00:01:18,940 --> 00:01:20,200 So there are different options. 21 00:01:20,590 --> 00:01:26,560 What I'm going to do is I'm going to set this to have a size of 100 dpi. 22 00:01:27,070 --> 00:01:36,460 Therefore, I need to import the DPI as well as modifier namespaces, and I'm going to use the Compose 23 00:01:36,470 --> 00:01:38,110 UI option here. 24 00:01:38,770 --> 00:01:40,960 And then let's import size as well. 25 00:01:41,470 --> 00:01:41,830 OK. 26 00:01:41,860 --> 00:01:44,660 Now you can see we foundation layout size. 27 00:01:44,680 --> 00:01:52,060 We have the UI modifier as well as unit DPI adds to our namespace upthere. 28 00:01:52,750 --> 00:01:56,740 So now this modifier can have multiple settings, so I have set the size. 29 00:01:57,610 --> 00:02:01,360 I can also clip it at the same time so I can clip the shape. 30 00:02:01,360 --> 00:02:03,130 92 pass in a shape. 31 00:02:03,460 --> 00:02:05,320 So let's import clip here. 32 00:02:05,530 --> 00:02:09,520 And then there is this shape called Circle Shape. 33 00:02:09,910 --> 00:02:15,640 So this one right here, which is also inside of Android X compose foundation shape. 34 00:02:16,240 --> 00:02:23,830 OK, so now the image will get a circle shape will have a size of 100 density pixels, and I would like 35 00:02:23,830 --> 00:02:28,630 to also add a little red circle around that, as you can see here. 36 00:02:28,630 --> 00:02:32,270 So we have this little red circle around the Huskey before we do that. 37 00:02:32,290 --> 00:02:38,830 Let's quickly look at what we get at this point because the image should already be changed quite significantly 38 00:02:38,830 --> 00:02:39,190 here. 39 00:02:39,340 --> 00:02:43,510 I can see that the image is now circled, so to speak. 40 00:02:43,510 --> 00:02:46,210 Right now, we need to still make a couple of changes. 41 00:02:46,220 --> 00:02:50,530 So first of all, I'm going to add a border here. 42 00:02:50,920 --> 00:02:57,280 OK, so this is the red border that I want to have, and it's going to have a with of two density pixels. 43 00:02:57,700 --> 00:03:06,070 And therefore we need to import border once again and then use to dot deep to get the two density pixels. 44 00:03:06,730 --> 00:03:09,910 And then I think it makes sense to put this in the second line. 45 00:03:09,910 --> 00:03:11,110 So it's a little more readable. 46 00:03:11,410 --> 00:03:17,290 So we have the width, then we're going to set the color and I want the color to be red so we can just 47 00:03:17,290 --> 00:03:18,400 use color dot. 48 00:03:18,670 --> 00:03:22,830 And then the different colors are available or made available to us. 49 00:03:22,840 --> 00:03:24,730 And I'm just going to use red here. 50 00:03:25,930 --> 00:03:34,930 And finally, I'm going to set the shape to be a circle shape, so this should be using a circle shape 51 00:03:34,930 --> 00:03:35,440 as well. 52 00:03:35,980 --> 00:03:38,800 So the border itself should also be a circle shape. 53 00:03:38,830 --> 00:03:41,530 So here we just clipped it, so we cut it, so to speak. 54 00:03:41,860 --> 00:03:46,330 And here we are, adding the border with a particular shape. 55 00:03:46,660 --> 00:03:53,620 So if we run this, we will see that now our husky has a red circle around it. 56 00:03:53,620 --> 00:03:55,890 So this image, even though it's quite small. 57 00:03:55,900 --> 00:04:02,560 So you could, of course, if you wanted to change that to 200 dpi to make this image a little bigger 58 00:04:02,560 --> 00:04:02,830 there. 59 00:04:04,960 --> 00:04:10,480 Though now this image is almost taking the desired shape, but there is still one more fix as the left 60 00:04:10,480 --> 00:04:16,000 and right parts of the images, if you look at it, are not fitted in so they're not fitted in properly 61 00:04:16,000 --> 00:04:21,070 and change that would need to add a content scale property to the image. 62 00:04:21,579 --> 00:04:23,560 OK, so there is this additional property. 63 00:04:23,560 --> 00:04:28,690 You see, we had the painter with the content description the modifier, but then there is another one 64 00:04:29,080 --> 00:04:32,620 and the one, and I put that correctly in here. 65 00:04:32,980 --> 00:04:33,610 Like So? 66 00:04:35,300 --> 00:04:39,470 Actually, we can put the comma directly after the last statement. 67 00:04:40,460 --> 00:04:46,160 And now we can add the content scale property. 68 00:04:46,520 --> 00:04:48,830 OK, I'm going to set that to content scale. 69 00:04:49,960 --> 00:04:56,110 Dot Krupp, you see there is this you I lay out QuantumScape from you, I compose. 70 00:04:56,890 --> 00:05:01,450 So again, another composed item. 71 00:05:02,340 --> 00:05:03,000 The Sun here. 72 00:05:03,690 --> 00:05:08,880 OK, now we should crop it properly, so the image will now be cropped in. 73 00:05:09,270 --> 00:05:14,340 You see, now we see our beautiful little husky with the red circle around him. 74 00:05:16,060 --> 00:05:21,430 So I would like to align this image as well, because currently it's aligned towards the top left corner, 75 00:05:21,430 --> 00:05:23,800 but I would like to align it towards the center. 76 00:05:24,340 --> 00:05:31,480 And in order to do that, I can align the entire column because if you recall, this is inside of a 77 00:05:31,480 --> 00:05:31,930 column. 78 00:05:32,500 --> 00:05:37,210 So this entire thing, our entire code here is inside of the column. 79 00:05:37,450 --> 00:05:44,110 But how do I now go ahead and add properties to the column because there are no brackets around the 80 00:05:44,110 --> 00:05:46,780 column while the curly wants, but not the circle ones? 81 00:05:47,110 --> 00:05:52,500 So we can change that by adding circle brackets here and we'll still work the same. 82 00:05:52,510 --> 00:05:56,950 So now we can just go ahead and add the properties that we want to change for our column. 83 00:05:57,550 --> 00:06:00,940 And the one that I want to change is going to be the horizontal alignment. 84 00:06:01,360 --> 00:06:06,490 So I'm going to set the alignment to be centered horizontally. 85 00:06:07,060 --> 00:06:09,820 So that's going to be one of the settings that I'm going to use. 86 00:06:10,120 --> 00:06:17,020 But then I'm going to set another one for my column, and that will be that the modifier will make sure 87 00:06:17,020 --> 00:06:21,760 that we are filling the maximum size, which means we're going to take the space that is available for 88 00:06:21,760 --> 00:06:24,670 us and not just as it's currently. 89 00:06:24,880 --> 00:06:33,720 So fill max size and here this will now fill the entire available size for the screen. 90 00:06:33,730 --> 00:06:39,790 So basically it's going to say OK for this dog, take the entire width that you have available and then 91 00:06:40,420 --> 00:06:44,230 centered the dog in the middle or put the dog into the center. 92 00:06:44,860 --> 00:06:47,380 OK, so we are talking about columns here, right? 93 00:06:47,380 --> 00:06:48,250 So a column. 94 00:06:48,820 --> 00:06:55,120 Well, we have one column so far and we're going to see how we can later on use rows as well. 95 00:06:55,120 --> 00:06:58,810 But currently we have one column where items are put on top of each other. 96 00:06:59,440 --> 00:07:03,850 So now if you run this again, we should see that the dog is now centered. 97 00:07:04,330 --> 00:07:09,370 So we achieved this by aligning it towards the center and making sure that we are taking the entire 98 00:07:09,370 --> 00:07:10,540 with available. 99 00:07:12,150 --> 00:07:17,190 OK, so I just talked about rows and columns, right, because this is inside of column, but now let's 100 00:07:17,190 --> 00:07:25,230 look at rows specifically so we can go ahead and put multiple columns into a row, and this will make 101 00:07:25,230 --> 00:07:28,560 sense specifically if we want to achieve this behavior. 102 00:07:28,740 --> 00:07:34,920 So you see, we have column one, column two and column three, so we have three columns here, whereas 103 00:07:34,920 --> 00:07:36,750 this is in row one. 104 00:07:36,760 --> 00:07:39,960 So there's 150000 row one and followers is in row two. 105 00:07:40,260 --> 00:07:44,130 And this year as well, row one is 100 and following is enrolled too. 106 00:07:44,580 --> 00:07:50,610 So if you want to achieve that, we need to use rows with columns. 107 00:07:53,080 --> 00:07:59,050 So let's put it underneath our image, because it's still inside of that one column, so we just have 108 00:07:59,050 --> 00:08:02,230 one column the entire width of the screen, so to speak. 109 00:08:02,680 --> 00:08:04,950 And now we can create a row in it. 110 00:08:04,960 --> 00:08:08,080 So there is this row composable need to import that as well. 111 00:08:08,770 --> 00:08:14,290 It's this role here and now we can go ahead and add columns in there once again. 112 00:08:15,190 --> 00:08:19,780 And these columns, they will align towards the center as well. 113 00:08:19,780 --> 00:08:25,510 So I'm going to use the same setting that I had here with horizontal alignment like so. 114 00:08:26,320 --> 00:08:26,740 OK. 115 00:08:26,950 --> 00:08:30,760 So let me copy it from here. 116 00:08:31,030 --> 00:08:32,950 Copy paste in there. 117 00:08:34,299 --> 00:08:39,940 OK, so now this column will be a line towards the center and in there I would like to have a tax property 118 00:08:40,539 --> 00:08:44,800 which has the value for the text of one hundred and fifty, for example. 119 00:08:45,190 --> 00:08:50,640 And you see, if you look at it, the font here is bold. 120 00:08:50,740 --> 00:08:51,940 So the font weight is bold. 121 00:08:52,240 --> 00:08:55,090 This is thick here, and this one is not bold. 122 00:08:55,090 --> 00:08:57,750 So followers is not bold, but the 150 bold. 123 00:08:58,090 --> 00:08:59,770 So how can we make it bold? 124 00:09:00,040 --> 00:09:02,260 Well, we looked at properties before, right? 125 00:09:02,260 --> 00:09:06,520 So there is this font weight property and we can just go ahead and use font weight. 126 00:09:07,000 --> 00:09:07,960 The bold for this. 127 00:09:09,230 --> 00:09:11,360 OK, so now this will make the text bold. 128 00:09:11,780 --> 00:09:19,130 And now we will have another text in here and this will be our followers, so they're just going to 129 00:09:19,130 --> 00:09:20,210 say followers like you. 130 00:09:20,210 --> 00:09:26,280 So in here and now, I'm not very happy with the positioning of this one. 131 00:09:26,360 --> 00:09:27,470 So this should be better. 132 00:09:27,830 --> 00:09:32,840 And now what we want to have is multiple columns inside of this row. 133 00:09:32,990 --> 00:09:37,010 And now if we check this out, we need to run, so we need to rebuild. 134 00:09:37,040 --> 00:09:41,990 Unfortunately, we cannot just apply the changes with a hot restart and we'll see. 135 00:09:41,990 --> 00:09:45,950 This is what we get so 150 followers than Siberian Husky Germany. 136 00:09:46,220 --> 00:09:49,130 And I think actually this role should be underneath the text. 137 00:09:49,130 --> 00:09:49,790 So let's see. 138 00:09:50,120 --> 00:09:50,540 Yes. 139 00:09:50,810 --> 00:09:57,650 So let's just drag this roll from here underneath the two texts that we had that will do the trick, 140 00:09:57,650 --> 00:09:58,160 basically. 141 00:09:58,180 --> 00:09:58,950 That's pretty cool. 142 00:09:58,970 --> 00:10:00,380 So let's rerun this. 143 00:10:01,220 --> 00:10:04,970 And there we see Siberian Husky Germany and 150 followers. 144 00:10:05,390 --> 00:10:08,120 So this is the second row that we created so far. 145 00:10:08,150 --> 00:10:11,900 This doesn't really make sense unless we have multiple columns, obviously. 146 00:10:12,230 --> 00:10:14,540 So let's go ahead and create multiple columns. 147 00:10:14,540 --> 00:10:20,540 Therefore, I'm just going to copy and paste this year and we'll make a couple of changes to it. 148 00:10:20,840 --> 00:10:23,840 So this one was 100, for example. 149 00:10:24,800 --> 00:10:30,920 And it was following not for the worse, and this one was posts. 150 00:10:31,020 --> 00:10:33,440 OK, so how many posts does our dog show have? 151 00:10:33,890 --> 00:10:34,190 Yes. 152 00:10:34,190 --> 00:10:34,580 30. 153 00:10:34,910 --> 00:10:36,290 So let's rerun this. 154 00:10:37,600 --> 00:10:41,540 Well, you see, we get the error here, so if you get this error, this probably has to do with you 155 00:10:41,580 --> 00:10:47,320 not rerunning it properly, but doing the hot refresh and you see that we have our followers following 156 00:10:47,320 --> 00:10:52,180 and posts, but they are pretty close together, very narrow. 157 00:10:52,510 --> 00:10:57,730 So if you want to have a little bit of a distance, what you would do is you would say that this role 158 00:10:58,090 --> 00:11:01,270 where they are in should take the entire available space. 159 00:11:01,840 --> 00:11:02,970 So let's do that. 160 00:11:03,010 --> 00:11:05,680 Let's add a property to our role. 161 00:11:06,920 --> 00:11:12,980 Year where we can say that it should take the entire available with. 162 00:11:13,100 --> 00:11:20,940 So it should be aligned where the arrangement is spaced evenly, so they are apart from each other evenly. 163 00:11:21,530 --> 00:11:27,260 Therefore, we can use the horizontal arrangement so horizontal. 164 00:11:27,620 --> 00:11:29,960 And actually, it's not very happy with my role here. 165 00:11:30,590 --> 00:11:38,840 Let me put it like this horizontal arrangement where the arrangement is spaced evenly so you can try 166 00:11:38,840 --> 00:11:42,890 the different settings and see how it will affect your application. 167 00:11:43,430 --> 00:11:45,380 And then I'm going to add a modifier here. 168 00:11:45,830 --> 00:11:53,780 So modifier, which will make sure that I'm filling the maximum with so the entire available with and 169 00:11:53,780 --> 00:11:56,340 here not makes them size, but with. 170 00:11:57,800 --> 00:12:03,080 OK, so the role shouldn't take the entire space towards the bottom as well, but only towards the right 171 00:12:03,080 --> 00:12:03,950 and left hand side. 172 00:12:04,550 --> 00:12:04,940 OK. 173 00:12:05,150 --> 00:12:07,220 So that's why we use it with it, not size. 174 00:12:07,610 --> 00:12:10,580 So let's run this and see how this is going to pan out. 175 00:12:10,590 --> 00:12:15,440 And you see now they are evenly distanced to each other. 176 00:12:16,130 --> 00:12:21,230 So now if you want to have a little bit of a distance towards the top here as well, you can add a little 177 00:12:21,230 --> 00:12:22,100 bit of padding. 178 00:12:22,460 --> 00:12:26,750 So you can just do that with your modifier property. 179 00:12:26,750 --> 00:12:33,580 So you see we are changing the modifier and you can just add settings by using the dots here. 180 00:12:33,590 --> 00:12:41,690 So dots and then, for example, adding padding of, let's say, 16 density pixels, which is the default 181 00:12:41,770 --> 00:12:45,020 padding setting that you would use in an Android application. 182 00:12:45,590 --> 00:12:53,780 So let's run this and see that we are we have a little bit of distance and this looks a lot more evenly 183 00:12:53,780 --> 00:12:56,720 spent and it's a good start. 184 00:12:59,690 --> 00:13:06,340 Now, seeing how our code is here, we are basically copy and paste in court all the time, right? 185 00:13:06,350 --> 00:13:11,730 So we have this column that we have two texts in there, the same story here, the same story here. 186 00:13:11,930 --> 00:13:14,500 So we are copy and paste in court. 187 00:13:14,510 --> 00:13:20,120 If you are a copy and paste code than you maybe should, consider putting it into a separate function. 188 00:13:20,390 --> 00:13:22,820 So let's go ahead and do just that. 189 00:13:23,030 --> 00:13:27,950 So therefore, I'm going to create this function called profile stats because we just have this. 190 00:13:29,260 --> 00:13:39,520 Fun profile stats that will hold this statistics or the values of our items, so you see what is important. 191 00:13:39,970 --> 00:13:43,180 OK, so what could we extract from each of those columns? 192 00:13:43,210 --> 00:13:50,620 Well, what we just need to modify is basically those two texts, so the amount of followers or following 193 00:13:50,620 --> 00:13:54,340 or posts, so it's account of value, a number, so to speak. 194 00:13:54,550 --> 00:13:59,170 And then the actual title of the text. 195 00:13:59,620 --> 00:14:02,440 OK, so let's just extract exactly that. 196 00:14:02,740 --> 00:14:07,600 So here I'm going to get the count, which is of type string and then I'm going to get the title, which 197 00:14:07,600 --> 00:14:09,160 is also going to be of type string. 198 00:14:09,880 --> 00:14:12,240 So how can we now position it in there? 199 00:14:12,250 --> 00:14:18,220 Actually, we can just copy or cut this column out there and then replace the settings. 200 00:14:18,490 --> 00:14:23,380 So here this will obviously be the count and this will be the title. 201 00:14:24,580 --> 00:14:26,270 So everything else can stay the same. 202 00:14:26,290 --> 00:14:28,090 Now we do have a little problem. 203 00:14:28,090 --> 00:14:29,350 You see, we get an error here. 204 00:14:29,980 --> 00:14:31,360 Do you recall why this could be? 205 00:14:32,710 --> 00:14:38,560 Well, it's because we don't have this at composable annotation, so let's add the notation, and this 206 00:14:38,560 --> 00:14:39,520 will fix the problem. 207 00:14:39,730 --> 00:14:44,210 So now we can use the profile stats in here multiple times. 208 00:14:44,230 --> 00:14:52,540 So let's just call this method three times once with the count and followers, and this is obviously 209 00:14:52,540 --> 00:14:55,660 going to be a string as well as this one here as well. 210 00:14:56,320 --> 00:15:00,220 Then once again with and I think was one of 50, right? 211 00:15:00,850 --> 00:15:04,180 Then once again with the 100 and following. 212 00:15:06,470 --> 00:15:13,580 And make this a string, and then finally, we had posts, I think it was 30, so count of 30. 213 00:15:13,940 --> 00:15:15,950 And the title was posts. 214 00:15:17,320 --> 00:15:21,550 All right, and then we can get rid of those columns, and now we just made our code a little cleaner 215 00:15:21,550 --> 00:15:28,870 because we extracted all of these composable or just this column, including the two text composable 216 00:15:28,900 --> 00:15:32,140 into a method or a function that we can now reuse. 217 00:15:32,470 --> 00:15:37,300 So let's run this real quick to see if our application still works, and you see it still works flawlessly. 218 00:15:39,330 --> 00:15:44,250 OK, so now if we look at this UI, you see only the two buttons are still missing. 219 00:15:45,180 --> 00:15:50,040 And that is something that we're going to implement in the next video because I think otherwise this 220 00:15:50,040 --> 00:15:51,210 video would be too long. 221 00:15:51,340 --> 00:15:52,140 So see you there.