Welcome back in this video, we are going to look at how to make this entire thing, the content be
inside of a cart.
So if you look at this, you can see that there is a little bit of an elevation here with the shadow.
So this is called a card.
So all of the other content is inside of this cart.
So let's go ahead and add that to our project.
And therefore we need to understand where all of our content is and it's inside of this profile page.
So basically, what we want to do is we want to put everything that is inside of this column into the
cart.
So let's go ahead and cut it out and create this cart and then put it into the cart.
So I just pasted it back in there and now everything is inside of my cart.
Now I can style the card so I can add a couple of properties to it.
For example, the elevation I already talked about it being this little shadow creating effect, so
to speak.
OK.
So it's elevated above whatever is underneath it.
And here I'm just going to use six density pixels that should be a fine enough value.
And then I'm going to set to modify a property with a couple of settings.
So first of all, I want to fill the max size and then I want to make sure that the padding is good.
So here padding should be, let's say, towards the top.
I want to have 100 density pixels, then towards the bottom, also 100 density pixels and towards the
left and right.
I would like to have 16 dpi, so start and end.
So start is a left and right is end.
OK, so now I will have a padding towards the top to bottom, the left and the right.
So right and left.
So let's run this and see our application still works and we could see now we have this little.
Cart that I was talking about, but our content isn't positioned very nicely.
As of now.
So we need to make a couple of changes.
But before that, I would like to make sure that it's rounded, even though you see it is round that
by default.
But if you were to make the shape round that yourself and you wanted to define the border manually,
you would go ahead and you will use the border method here where you can use different overloads.
You see here the border stroke overload with the shape or the one with the brush and shape, or the
one with the width and color and shape.
So I'm going to use this one where I need to define the width in density pixels.
So I'm going to say I want to have a border of two density pixels and I don't want to have a color.
And here you could go ahead and use any color you want.
So let's make it very obvious and use a black color for the border.
And then let's use the shape of rounded corner shape, where you then need to define what the size should
be.
And I'm going to use 30 percent for the corner to be rounded, so.
Let's check this out.
It's a rerun this.
And we see this is what we get, so we get this round the corner shape with 30 percent and then this
black.
Border as well.
So this is just black here.
You can, of course, use whites here as well.
And I mean, we are real quick.
We see that now we don't see it, but it's going to be inside of it.
So that's the invisible border that we're going to use for now.
And if we test our application and we turn the emulator around, even though in my case, the actual
emulator is not turning, but you see that the.
Application itself and the Android OS torrent, you can see that now suddenly all of the content that
is disappearing, so we can only see the image, we don't see much of the rest of the content.
So that's something that I would like to fix, though.
And therefore, I need to add something called vertical scrolling, and I'm going to add add on the
column level, so I want the column to be scrollable.
The card itself doesn't have to be scrollable on the entire page, doesn't have to be scrollable, but
the column itself.
This one here should be scrollable.
Therefore, we can add the modifier to it and that would be the modifier vertical state.
So here modifier dot vertical, I think logical scroll was the vertical scroll.
There we are went.
There are different scroll states that you can now pass.
OK, and the one that I'm going to pass is the Remember scroll state.
OK, so this will make sure that it remembers to scroll state that we had and the need to add the comma
here for this to still work.
Now, obviously, this modifier here won't work anymore because we're not filling the max size anymore.
And then I would also like to add a vertical arrangement for this column.
So here, vertical arrangement and this will use this arrangement, that center.
So I want to center my entire content of the column.
Now you could go ahead and add comments here to indicate what this entire column is going to be about.
So this will be the content of our cards, including dog image followers or description followers.
Etsy.
OK, so now let's run this again and see how this is going to fare for us and we see now we can scroll
inside of this little cart.
Unfortunately, you can see that there is always this distance 100 density pixels, which makes sense
if we rotate for the phone the other way around.
So let me see there.
It makes sense to have this distance.
But in the other view, it doesn't make sense of here, like having this huge padding towards the top
is too much.
You can also fix this by making sure that the application is not going to allow to rotate.
That's also fine in many cases.
So sometimes you don't even want to be while to allow the user to rotate the phone or to use your application
in rotated version and so forth.
So Instagram, for example, doesn't allow that either.
All right.
So that's it for this video and the next one, we're going to look at constraint layouts in jetpack
compose.