All right, welcome back.
And the last year, we finished by creating this big menu list of the raw menu data, which is in the
end, just the vector for the image as well as the title or whether it's the divider and the header.
And now let's go ahead and style every single item that we want.
So we have the list of items and we know the data already.
So this is the data.
Right now, we just need to bring it into the format that we want.
And what is the format?
Well, it's an icon with the text.
So that's pretty much what we want to achieve, right?
And I'm going to put that into a roll.
So let's go ahead and create a new function inside of our Gmail drawer menu, which will be another
composable.
So I'm going to create it here at composable.
Which will be the function male draw item, and it will require an item which will be of type drawer
where menu data.
So this will be the individual item, so we need to get the data.
And now we're going to use that data to display it, and I'm going to use a row here.
I need to import role from compose you, I, and this role has the modifier of filling the entire.
With so I'm going to use Phil Max with I'm going to define the height as being 50 density pixels.
And the padding to be 16 density pixels towards the top.
So this is just something that I'm defining, you can use different values if you want to make sure
that your application is going to look differently.
So this is just the definition of the role.
Now we need to add the body.
So what do we want to have in the body?
Well, first of all, we want to have an image, right?
And this image is going to what we need to import image here for this to work.
Let's make sure that this.
Is going to be the Android X composed UI, and here I'm going to define an image vector, which will
come from Item Dot icon.
So what does item that icon?
Well, it's this image vector type, which is a Nullarbor, which is why we need to add the double exclamation
mark here.
So we are force on wrapping it, so to speak, because otherwise it could be well.
Otherwise, it would be empty, right?
So we can only do that because we're certain that we are the ones controlling the data.
Otherwise, this could make our application crash so always be careful with double exclamation marks.
And then we need to define a content description, which will be the title of our item.
And this is also inaudible.
So let's for unwrap it.
And then I'm going to add a modifier here to say how big my image should be.
And I'm going to say it should take half of the weight.
So modifier weight zero point five F.
So this is going to be our image, and now we want to have a text in here as well, which will just
use the title as the text, and then I'm going to set the weight to be two.
So I wanted to take the entirety of the available space, so to speak, so modifier thought wait of
2.0.
So what that will do is it will take 80 percent of the available space.
This will take 20 percent of the available space.
So you could have also used different weights here to achieve that same ratio.
But basically we take this ratio plus this ratio and then we have two point five.
So zero point five out of 2.5 is 20 percent and two point zero out of 2.5 is going to be 80 percent.
So this is how our individual item should look like.
OK, so where do we now use this mail draw item?
Well, I would say underneath this while inside of this column because we are using this column with
the text because what we want to have is just items put on top of each other.
That's why we're using this column, right?
Because in one column, everything is on top of each other and we have the text and underneath I would
like to display my menu list.
So for each of those items inside of my menu list, I want to do something with the items.
So for now, or we can just do this, we can use that item that we get what we have inside of our menu
list, which is at the beginning, the first one will be the divider and the all in boxes, then the
divider and so forth.
So we take this item and we pass it to our mail drawer item for every single item inside of that list.
So I used item quite a bit now, and unfortunately, I have to use the word item once again.
So we're passing this item that we get from the menu list as the.
Variable here that we need to pass to our male draw item function.
OK, so if you now want to run this, we will run into an error.
And this is exactly why I told you, it's really important that we have full control over what's up
with our force on wrapping.
So if you look at the arrow that we get, it starts at K860.
So let's jump to this line and you see we are using this image vector item icon, exclamation mark,
exclamation mark.
Bam, we cause an error.
When do we cause an error?
Well, if we look at our draw menu data we have at the very bottom, we have our divider objects, right?
So the divider to header one at the head or two, those don't have the icon that we want to have.
So what we can do for now in order to test this is to get rid of dividers.
And of headers, so divider, then header one, and I think we had those two dividers, so let's run
it again and see if our application still crashes and you see this time it doesn't crash.
So let's click on it and we see that, well, we cannot scroll and we don't have the dividers anymore
and we don't have the titles anymore.
But at least we can see the data, which is great.
OK, so we fixed that.
But now let's also make sure that our application is going to run with headers and with dividers.
Therefore, we need to define how every single item needs to be treated, so needs to be treated differently,
depending on what type of data it is.
So if it is a header, then it needs to be treated differently.
So what we have here is what should happen in the health case, so to speak.
So let's have a look at this.
So we get our item and we check when the item is a divider.
Then let's make sure that this is going to be of type divider where we can now pass a modifier as well.
And the modifier will have a little bit of padding.
So I'm going to say that I want to have a bottom padding of 16 deep, for example, as well as a top
heading.
Or actually, we had 20 padding each time, right, so let's use this here as well.
And the top heading of 20 deep.
OK.
This is when we have a divider.
If the item is a header, so is Harry's is true, then we want to display a text which will just take
the title.
And then I'm going to use a couple of settings, so I'm going to make sure that the font weight is going
to be light as well as.
The padding exists, so I'm going to add a little bit of padding.
So this one will be toe dip.
And.
This year as well, 20 deep.
OK, so this will be my text and.
I believe I have one closing bracket too many.
And then in the else case.
So if it is neither a divider nor a header.
So in this case, that's when we want to.
Use this mail draw item.
Method.
This one here where we had a row with an image and they text.
So let's run it again and see if we can now see the dividers, so we see divider divider and we see
the all labels.
So this is a light font, so font weight light.
This is this all labels that you see here.
This is the modifier of having more padding towards the left hand side, the top and the bottom of 20
deep.
And yeah, that's pretty much what we have.
And that's what we wanted as well.
So the divider, which is also a composable.
OK.
Now I want to be able to scroll and what is this that I want to be able to scroll?
Well, let's look at our Gmail drawer menu.
It could well very well be our column, right, because we want to be able to scroll inside of the column.
So let's check out if our modifier has something with scroll.
And you see, there is scrollable, there is vertical scroll, horizontal scroll.
So let's use vertical scroll here.
But then vertical scroll, if you look at it, needs to get a state.
So here state scroll state.
So we need to create something that is going to be a scroll state.
So our Gmail draw menu will need to get this information.
So let's add the scroll state in here once we call the Gmail draw menu.
So once we create a object of the G.M. draw menu, we need to get the state.
But the UI itself doesn't control the states or menu will not control the state.
So where would be a good spot to control the state?
Well, it's going to be our main activity because the main activity, that's where we have control over
this.
So we had our main activity and in our main activity, we have our Gmail app and our Gmail app is taking
care of all of the states.
So we have the scaffold state the whole routine scope and now let's go ahead and create the scroll state
here as well.
Scroll state, which will be a remember scroll state.
And we need to import that as well.
OK, so now whenever we are creating this Gmail draw menu or we're using this Gmail draw menu, which
is a composable, we need to pass something to it.
What is it that we need to pass?
We need to pass to scroll state.
And luckily, we just have created exactly that.
So let's pass that scroll state in here to our Gmail draw menu up here, which will now use this scroll
state for our modifier vertical.
Scroll for the column.
And now let's test it again to see if we can now scroll in our application so we see we can, in fact,
scroll now.
OK.
And I believe that concludes our application, so we pretty much have what we wanted.
We have all inboxes here at the top with a bit of padding, the divider.
All of our items that we wanted to have.
And yeah, that's pretty much how we can create a drawer menu in Scotland with jetpack compose.
OK, so I hope you enjoyed this video in the next one, we are going to take care of the bottom navigation
bar.
So see you there.