1
00:00:00,180 --> 00:00:06,540
Welcome back in this video, we are going to look at how to make this entire thing, the content be

2
00:00:06,540 --> 00:00:07,740
inside of a cart.

3
00:00:08,220 --> 00:00:13,020
So if you look at this, you can see that there is a little bit of an elevation here with the shadow.

4
00:00:13,200 --> 00:00:15,710
So this is called a card.

5
00:00:15,720 --> 00:00:18,540
So all of the other content is inside of this cart.

6
00:00:19,230 --> 00:00:22,680
So let's go ahead and add that to our project.

7
00:00:22,980 --> 00:00:28,680
And therefore we need to understand where all of our content is and it's inside of this profile page.

8
00:00:28,890 --> 00:00:35,190
So basically, what we want to do is we want to put everything that is inside of this column into the

9
00:00:35,280 --> 00:00:35,790
cart.

10
00:00:36,090 --> 00:00:41,700
So let's go ahead and cut it out and create this cart and then put it into the cart.

11
00:00:42,210 --> 00:00:46,740
So I just pasted it back in there and now everything is inside of my cart.

12
00:00:47,380 --> 00:00:51,720
Now I can style the card so I can add a couple of properties to it.

13
00:00:51,960 --> 00:00:59,100
For example, the elevation I already talked about it being this little shadow creating effect, so

14
00:00:59,100 --> 00:00:59,610
to speak.

15
00:01:00,180 --> 00:01:00,570
OK.

16
00:01:00,870 --> 00:01:04,260
So it's elevated above whatever is underneath it.

17
00:01:04,680 --> 00:01:10,020
And here I'm just going to use six density pixels that should be a fine enough value.

18
00:01:10,320 --> 00:01:13,980
And then I'm going to set to modify a property with a couple of settings.

19
00:01:14,280 --> 00:01:21,750
So first of all, I want to fill the max size and then I want to make sure that the padding is good.

20
00:01:21,840 --> 00:01:25,830
So here padding should be, let's say, towards the top.

21
00:01:25,830 --> 00:01:34,830
I want to have 100 density pixels, then towards the bottom, also 100 density pixels and towards the

22
00:01:34,830 --> 00:01:35,850
left and right.

23
00:01:35,880 --> 00:01:40,230
I would like to have 16 dpi, so start and end.

24
00:01:40,380 --> 00:01:44,280
So start is a left and right is end.

25
00:01:44,730 --> 00:01:51,030
OK, so now I will have a padding towards the top to bottom, the left and the right.

26
00:01:51,540 --> 00:01:53,040
So right and left.

27
00:01:53,520 --> 00:01:59,100
So let's run this and see our application still works and we could see now we have this little.

28
00:02:01,200 --> 00:02:06,360
Cart that I was talking about, but our content isn't positioned very nicely.

29
00:02:06,570 --> 00:02:07,290
As of now.

30
00:02:07,710 --> 00:02:09,600
So we need to make a couple of changes.

31
00:02:10,139 --> 00:02:15,390
But before that, I would like to make sure that it's rounded, even though you see it is round that

32
00:02:15,390 --> 00:02:16,200
by default.

33
00:02:16,470 --> 00:02:23,430
But if you were to make the shape round that yourself and you wanted to define the border manually,

34
00:02:23,940 --> 00:02:28,620
you would go ahead and you will use the border method here where you can use different overloads.

35
00:02:28,620 --> 00:02:33,720
You see here the border stroke overload with the shape or the one with the brush and shape, or the

36
00:02:33,720 --> 00:02:36,240
one with the width and color and shape.

37
00:02:36,240 --> 00:02:41,190
So I'm going to use this one where I need to define the width in density pixels.

38
00:02:41,400 --> 00:02:46,020
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.

39
00:02:46,230 --> 00:02:48,960
And here you could go ahead and use any color you want.

40
00:02:49,260 --> 00:02:54,030
So let's make it very obvious and use a black color for the border.

41
00:02:54,240 --> 00:03:01,860
And then let's use the shape of rounded corner shape, where you then need to define what the size should

42
00:03:01,860 --> 00:03:02,130
be.

43
00:03:02,400 --> 00:03:07,950
And I'm going to use 30 percent for the corner to be rounded, so.

44
00:03:09,170 --> 00:03:10,370
Let's check this out.

45
00:03:11,030 --> 00:03:11,900
It's a rerun this.

46
00:03:14,090 --> 00:03:19,970
And we see this is what we get, so we get this round the corner shape with 30 percent and then this

47
00:03:20,570 --> 00:03:21,140
black.

48
00:03:22,500 --> 00:03:23,820
Border as well.

49
00:03:24,540 --> 00:03:26,280
So this is just black here.

50
00:03:26,610 --> 00:03:28,860
You can, of course, use whites here as well.

51
00:03:30,180 --> 00:03:32,160
And I mean, we are real quick.

52
00:03:32,320 --> 00:03:35,790
We see that now we don't see it, but it's going to be inside of it.

53
00:03:35,790 --> 00:03:38,940
So that's the invisible border that we're going to use for now.

54
00:03:39,280 --> 00:03:47,220
And if we test our application and we turn the emulator around, even though in my case, the actual

55
00:03:47,220 --> 00:03:49,740
emulator is not turning, but you see that the.

56
00:03:50,900 --> 00:03:58,190
Application itself and the Android OS torrent, you can see that now suddenly all of the content that

57
00:03:58,430 --> 00:04:03,260
is disappearing, so we can only see the image, we don't see much of the rest of the content.

58
00:04:03,680 --> 00:04:05,660
So that's something that I would like to fix, though.

59
00:04:08,450 --> 00:04:15,410
And therefore, I need to add something called vertical scrolling, and I'm going to add add on the

60
00:04:15,410 --> 00:04:19,700
column level, so I want the column to be scrollable.

61
00:04:19,700 --> 00:04:23,780
The card itself doesn't have to be scrollable on the entire page, doesn't have to be scrollable, but

62
00:04:23,780 --> 00:04:24,920
the column itself.

63
00:04:25,430 --> 00:04:27,950
This one here should be scrollable.

64
00:04:28,430 --> 00:04:37,850
Therefore, we can add the modifier to it and that would be the modifier vertical state.

65
00:04:37,910 --> 00:04:44,360
So here modifier dot vertical, I think logical scroll was the vertical scroll.

66
00:04:44,390 --> 00:04:46,280
There we are went.

67
00:04:47,000 --> 00:04:50,090
There are different scroll states that you can now pass.

68
00:04:50,470 --> 00:04:55,220
OK, and the one that I'm going to pass is the Remember scroll state.

69
00:04:55,730 --> 00:05:00,950
OK, so this will make sure that it remembers to scroll state that we had and the need to add the comma

70
00:05:01,220 --> 00:05:03,560
here for this to still work.

71
00:05:05,720 --> 00:05:11,600
Now, obviously, this modifier here won't work anymore because we're not filling the max size anymore.

72
00:05:12,080 --> 00:05:15,750
And then I would also like to add a vertical arrangement for this column.

73
00:05:15,770 --> 00:05:21,560
So here, vertical arrangement and this will use this arrangement, that center.

74
00:05:21,740 --> 00:05:26,300
So I want to center my entire content of the column.

75
00:05:26,630 --> 00:05:33,890
Now you could go ahead and add comments here to indicate what this entire column is going to be about.

76
00:05:34,160 --> 00:05:49,990
So this will be the content of our cards, including dog image followers or description followers.

77
00:05:50,450 --> 00:05:51,200
Etsy.

78
00:05:52,850 --> 00:05:59,360
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

79
00:05:59,360 --> 00:06:02,330
inside of this little cart.

80
00:06:02,990 --> 00:06:08,540
Unfortunately, you can see that there is always this distance 100 density pixels, which makes sense

81
00:06:08,540 --> 00:06:11,540
if we rotate for the phone the other way around.

82
00:06:12,290 --> 00:06:14,180
So let me see there.

83
00:06:14,180 --> 00:06:15,950
It makes sense to have this distance.

84
00:06:15,950 --> 00:06:23,660
But in the other view, it doesn't make sense of here, like having this huge padding towards the top

85
00:06:24,680 --> 00:06:25,490
is too much.

86
00:06:26,360 --> 00:06:32,300
You can also fix this by making sure that the application is not going to allow to rotate.

87
00:06:32,300 --> 00:06:34,070
That's also fine in many cases.

88
00:06:34,070 --> 00:06:41,090
So sometimes you don't even want to be while to allow the user to rotate the phone or to use your application

89
00:06:41,090 --> 00:06:43,610
in rotated version and so forth.

90
00:06:43,970 --> 00:06:46,940
So Instagram, for example, doesn't allow that either.

91
00:06:47,990 --> 00:06:48,350
All right.

92
00:06:48,470 --> 00:06:54,980
So that's it for this video and the next one, we're going to look at constraint layouts in jetpack

93
00:06:54,980 --> 00:06:55,550
compose.