Welcome back in the last video, we ended up with this result that we have right here.
And as you might recall, this is what we want to get, so we need to change the size of the image.
We want to get this circle around it.
And then you can also see that here at the bottom, we have a couple of different details that we want
to display as well.
So let's implement all of that.
And first of all, we're going to look at modifiers because I want to modify this image here.
All right.
Let's go over to our project.
And therefore, if we look at our image and that is the profile page key file, if you recall and we
had this image, which is this composable that we're using, so we are setting the painter property,
we assenting, setting the content description.
But then there is also something called modifier.
OK, so let's add the modifier in here modifier.
And it's like this modifier.
And we need to use the modifier clause here, and there are a couple of settings that we can set a bunch
of functions that we can use.
For example, we can set the size and you can see we can either set the size with density pixels, the
width and height within city pixels and so forth.
So there are different options.
What I'm going to do is I'm going to set this to have a size of 100 dpi.
Therefore, I need to import the DPI as well as modifier namespaces, and I'm going to use the Compose
UI option here.
And then let's import size as well.
OK.
Now you can see we foundation layout size.
We have the UI modifier as well as unit DPI adds to our namespace upthere.
So now this modifier can have multiple settings, so I have set the size.
I can also clip it at the same time so I can clip the shape.
92 pass in a shape.
So let's import clip here.
And then there is this shape called Circle Shape.
So this one right here, which is also inside of Android X compose foundation shape.
OK, so now the image will get a circle shape will have a size of 100 density pixels, and I would like
to also add a little red circle around that, as you can see here.
So we have this little red circle around the Huskey before we do that.
Let's quickly look at what we get at this point because the image should already be changed quite significantly
here.
I can see that the image is now circled, so to speak.
Right now, we need to still make a couple of changes.
So first of all, I'm going to add a border here.
OK, so this is the red border that I want to have, and it's going to have a with of two density pixels.
And therefore we need to import border once again and then use to dot deep to get the two density pixels.
And then I think it makes sense to put this in the second line.
So it's a little more readable.
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
use color dot.
And then the different colors are available or made available to us.
And I'm just going to use red here.
And finally, I'm going to set the shape to be a circle shape, so this should be using a circle shape
as well.
So the border itself should also be a circle shape.
So here we just clipped it, so we cut it, so to speak.
And here we are, adding the border with a particular shape.
So if we run this, we will see that now our husky has a red circle around it.
So this image, even though it's quite small.
So you could, of course, if you wanted to change that to 200 dpi to make this image a little bigger
there.
Though now this image is almost taking the desired shape, but there is still one more fix as the left
and right parts of the images, if you look at it, are not fitted in so they're not fitted in properly
and change that would need to add a content scale property to the image.
OK, so there is this additional property.
You see, we had the painter with the content description the modifier, but then there is another one
and the one, and I put that correctly in here.
Like So?
Actually, we can put the comma directly after the last statement.
And now we can add the content scale property.
OK, I'm going to set that to content scale.
Dot Krupp, you see there is this you I lay out QuantumScape from you, I compose.
So again, another composed item.
The Sun here.
OK, now we should crop it properly, so the image will now be cropped in.
You see, now we see our beautiful little husky with the red circle around him.
So I would like to align this image as well, because currently it's aligned towards the top left corner,
but I would like to align it towards the center.
And in order to do that, I can align the entire column because if you recall, this is inside of a
column.
So this entire thing, our entire code here is inside of the column.
But how do I now go ahead and add properties to the column because there are no brackets around the
column while the curly wants, but not the circle ones?
So we can change that by adding circle brackets here and we'll still work the same.
So now we can just go ahead and add the properties that we want to change for our column.
And the one that I want to change is going to be the horizontal alignment.
So I'm going to set the alignment to be centered horizontally.
So that's going to be one of the settings that I'm going to use.
But then I'm going to set another one for my column, and that will be that the modifier will make sure
that we are filling the maximum size, which means we're going to take the space that is available for
us and not just as it's currently.
So fill max size and here this will now fill the entire available size for the screen.
So basically it's going to say OK for this dog, take the entire width that you have available and then
centered the dog in the middle or put the dog into the center.
OK, so we are talking about columns here, right?
So a column.
Well, we have one column so far and we're going to see how we can later on use rows as well.
But currently we have one column where items are put on top of each other.
So now if you run this again, we should see that the dog is now centered.
So we achieved this by aligning it towards the center and making sure that we are taking the entire
with available.
OK, so I just talked about rows and columns, right, because this is inside of column, but now let's
look at rows specifically so we can go ahead and put multiple columns into a row, and this will make
sense specifically if we want to achieve this behavior.
So you see, we have column one, column two and column three, so we have three columns here, whereas
this is in row one.
So there's 150000 row one and followers is in row two.
And this year as well, row one is 100 and following is enrolled too.
So if you want to achieve that, we need to use rows with columns.
So let's put it underneath our image, because it's still inside of that one column, so we just have
one column the entire width of the screen, so to speak.
And now we can create a row in it.
So there is this row composable need to import that as well.
It's this role here and now we can go ahead and add columns in there once again.
And these columns, they will align towards the center as well.
So I'm going to use the same setting that I had here with horizontal alignment like so.
OK.
So let me copy it from here.
Copy paste in there.
OK, so now this column will be a line towards the center and in there I would like to have a tax property
which has the value for the text of one hundred and fifty, for example.
And you see, if you look at it, the font here is bold.
So the font weight is bold.
This is thick here, and this one is not bold.
So followers is not bold, but the 150 bold.
So how can we make it bold?
Well, we looked at properties before, right?
So there is this font weight property and we can just go ahead and use font weight.
The bold for this.
OK, so now this will make the text bold.
And now we will have another text in here and this will be our followers, so they're just going to
say followers like you.
So in here and now, I'm not very happy with the positioning of this one.
So this should be better.
And now what we want to have is multiple columns inside of this row.
And now if we check this out, we need to run, so we need to rebuild.
Unfortunately, we cannot just apply the changes with a hot restart and we'll see.
This is what we get so 150 followers than Siberian Husky Germany.
And I think actually this role should be underneath the text.
So let's see.
Yes.
So let's just drag this roll from here underneath the two texts that we had that will do the trick,
basically.
That's pretty cool.
So let's rerun this.
And there we see Siberian Husky Germany and 150 followers.
So this is the second row that we created so far.
This doesn't really make sense unless we have multiple columns, obviously.
So let's go ahead and create multiple columns.
Therefore, I'm just going to copy and paste this year and we'll make a couple of changes to it.
So this one was 100, for example.
And it was following not for the worse, and this one was posts.
OK, so how many posts does our dog show have?
Yes.
30.
So let's rerun this.
Well, you see, we get the error here, so if you get this error, this probably has to do with you
not rerunning it properly, but doing the hot refresh and you see that we have our followers following
and posts, but they are pretty close together, very narrow.
So if you want to have a little bit of a distance, what you would do is you would say that this role
where they are in should take the entire available space.
So let's do that.
Let's add a property to our role.
Year where we can say that it should take the entire available with.
So it should be aligned where the arrangement is spaced evenly, so they are apart from each other evenly.
Therefore, we can use the horizontal arrangement so horizontal.
And actually, it's not very happy with my role here.
Let me put it like this horizontal arrangement where the arrangement is spaced evenly so you can try
the different settings and see how it will affect your application.
And then I'm going to add a modifier here.
So modifier, which will make sure that I'm filling the maximum with so the entire available with and
here not makes them size, but with.
OK, so the role shouldn't take the entire space towards the bottom as well, but only towards the right
and left hand side.
OK.
So that's why we use it with it, not size.
So let's run this and see how this is going to pan out.
And you see now they are evenly distanced to each other.
So now if you want to have a little bit of a distance towards the top here as well, you can add a little
bit of padding.
So you can just do that with your modifier property.
So you see we are changing the modifier and you can just add settings by using the dots here.
So dots and then, for example, adding padding of, let's say, 16 density pixels, which is the default
padding setting that you would use in an Android application.
So let's run this and see that we are we have a little bit of distance and this looks a lot more evenly
spent and it's a good start.
Now, seeing how our code is here, we are basically copy and paste in court all the time, right?
So we have this column that we have two texts in there, the same story here, the same story here.
So we are copy and paste in court.
If you are a copy and paste code than you maybe should, consider putting it into a separate function.
So let's go ahead and do just that.
So therefore, I'm going to create this function called profile stats because we just have this.
Fun profile stats that will hold this statistics or the values of our items, so you see what is important.
OK, so what could we extract from each of those columns?
Well, what we just need to modify is basically those two texts, so the amount of followers or following
or posts, so it's account of value, a number, so to speak.
And then the actual title of the text.
OK, so let's just extract exactly that.
So here I'm going to get the count, which is of type string and then I'm going to get the title, which
is also going to be of type string.
So how can we now position it in there?
Actually, we can just copy or cut this column out there and then replace the settings.
So here this will obviously be the count and this will be the title.
So everything else can stay the same.
Now we do have a little problem.
You see, we get an error here.
Do you recall why this could be?
Well, it's because we don't have this at composable annotation, so let's add the notation, and this
will fix the problem.
So now we can use the profile stats in here multiple times.
So let's just call this method three times once with the count and followers, and this is obviously
going to be a string as well as this one here as well.
Then once again with and I think was one of 50, right?
Then once again with the 100 and following.
And make this a string, and then finally, we had posts, I think it was 30, so count of 30.
And the title was posts.
All right, and then we can get rid of those columns, and now we just made our code a little cleaner
because we extracted all of these composable or just this column, including the two text composable
into a method or a function that we can now reuse.
So let's run this real quick to see if our application still works, and you see it still works flawlessly.
OK, so now if we look at this UI, you see only the two buttons are still missing.
And that is something that we're going to implement in the next video because I think otherwise this
video would be too long.
So see you there.