Welcome back.
The goal of this video is probably the next one as well is going to be this a little draw that we want
to implement.
So this is a drawn menu and you can see there are a bunch of options, even though they might not be
looking exactly the same as with the real Gmail app.
It's really just about the idea that we are trying to implement you.
So you see we have an icon where the text we have titles and then you at the top, we have this Gmail
title, and that's pretty much what we're going to build.
You can see we can scroll in here because there are more options than we can see on one screen size,
so to speak.
So let's go ahead and build that.
Even though this might take more than just one video because it's quite a bit that we need to build
here.
All right.
So we need to start with something called the scaffold state, because the draw menu is connected to
the scaffold, we need to use the scaffold state to open or close it.
So in the home app bar.
Composable, we create a scaffold state.
So let's add that here, Scaffold State, which will be of Typekit scaffold state.
And then in the I can button on click method.
So here we have this icon.
And then here in the home app bar, we have this role where we had our icon.
But I want to replace this with an actual icon button.
So what I'm going to do is I'm going to add an icon button here, which will internally have an icon
as the content of it.
So here we can add an icon click event.
And here we can use the icon has the content of our icon button like so.
And then once we click on the icon button, we will need to use that scaffold state that we just set
up and we're going to use a cowritten here.
So scope, launch and scope is something we will need to get in the home app bar as well.
So we need to know in which scope we are at.
And this will be of type call routine scope.
OK, now we can use that scope to launch something.
And what I'm going to launch is the scaffold state that draw state, that open.
So you see that this scaffold state has this open state.
Now let me make sure that I have launch important and then open will work because we need to know whether
there's a draw here is open or not.
OK.
Based on that, the state will change, so this will be the draw state.
Now, obviously, when creating the home app bar in our main activity, we don't pass any of these details.
So our home app bar isn't very happy here.
We're not passing any states.
So we need to create those states.
Let's go ahead and set up a vault scaffold state, which will be using the remember, as we have seen
before, with Buy Remember, right?
So here we need to call something or use something called Remember Scaffold State.
And the same goes for the quality and scope.
We need to set that up as well.
So here, call routine scope will be our remember call routine scope.
So we just really need to make sure that we are using this.
Remember key word as we are working with states.
OK.
And at this point, we can now pass to remember scaffold state as well as the call routine.
So while the scaffold stayed here, as well as this call in scope, like so and then for this scaffold.
I'm going to add something called a draw content, so draw content, which will be the content of our
draw and at the beginning.
This will be empty, so we don't have any draw content.
We're going to later on create the draw content.
Okay.
So all of those items that we have in here, you see a bunch of items that we want to display inside
of this drawer.
So we need to defined as grow our content.
And that is something we can pass to our scaffold.
So you can see the scaffold here has a drawer.
Well, a bunch of drawer options.
You see drawer gesture tables or shape drawer elevation and so forth.
And we are now preparing to draw our content, which we are going to then later on over, right?
OK.
So what is going on here?
So here we are creating a remember type for each of the values so that during recomposition to compose
the balls, using them will still have access to them.
Then we call the draw a contour with an empty lambda since we have not prepared the item yet.
Now, if we run the application, you will see that nothing happens.
And why is that?
Well, we create the scaffold state, but the scaffold does not know about it yet.
To make it aware of the state, we assign the scaffold state attribute.
So the scaffold?
It doesn't have the scaffold state yet.
So here, scaffold state will be the scaffold state, which is this state from here.
And of course, we need to add a comma here for it to be passed.
So we passed the scaffold state within the scaffold.
And now when we run the application once again, we see our draw.
You see, there is nothing in there, obviously, because we didn't add any content, as you see here.
But at least a draw already works.
All right, so now let's take care of the draw menu and to draw menu items that we want to assign.
Therefore, let's go ahead and also create a new component here because I think it makes sense to separate
our different components that we have.
So I'm going to call this one Gmail draw menu.
Let's go ahead and create a new Kotlin file, which will be a file, not a class.
And I'm going to call this one Gmail draw menu like so.
Now, instead of this Gina draw menu, let's go ahead for now.
Just create a function called Gmail Draw Menu, which currently is only going to have a text.
So let's just add a text where we well, we need to import text here.
Then the text will say something like Gmail, and we'll have a color of, let's say, red.
So color will be colored dot red.
Now, this text also needs to have a modifier.
Here, which will be the modifier padding.
Well, it doesn't need to have it, but I'm going to add it here, which will have a padding of 20 towards
the left.
So vertical tent city pixels as well as towards the top, also 20 density pixels.
So what is going on, we need to import up here, we need to import colour here as well, though here
at this point, we will need to import color and used to you.
I compose one.
And for the text, it's obvious needs to have the text property like so.
I just realized I didn't give it the proper name.
Jim, Abderrahmane, you should probably be better, not mind you, but me.
And then this text has a text property, a color, a modifier.
And let's also agree font size to it.
Let's make it larger than the rest.
Let's say 20 density pixels.
And this has to.
Be separated.
Come up.
And another entry, which will be the font weight, which I'm going to make bold.
So font weight bolt this one here.
And for this text to work, obviously our Gmail draw menu needs to be a composable.
So let's add the add composable here at the top.
And let's put this text into a column, so I'm going to surrounded by a column.
And then whenever we are working with text, we should use ASPs instead of DPS for font sizes, which
is why I had this little error here.
So it's always good that my idea lets me know about this.
All right.
So now let's use this Gmail draw menu as the draw content for our home app bar.
So we had to draw content, I think, up here in our main activity, that's where it was.
So let's use our Gmail draw menu in here.
Let's import it.
Which is, does G.M. draw menu inside of our components namespace, so we have our own namespace now
where we have our drawn menu?
So let's go ahead and try this.
And we see that G.M. pops up, so now we have the first bit of content, it's inbred.
It's a little bigger.
It has a tsp size, has a little bit of distance towards top and towards the left hand side, as you
see here.
Pretty much.
OK.
And now, if you recall, we had so much data in there in our other example, right, so, so many different
information pieces of information.
So we need to have a class that will allow us to store all of this data.
And I'm just going to use a sealed class for this.
All right.
So let's go ahead and create a new.
File inside of our Gmail clone package.
So this one will be, in fact, a class.
So let me use the clause here, and this will be the draw menu data.
Now this drawing menu data, I'm going to seal it.
I'm going to make it a sealed class.
And a school class represents a restricted class hierarchy that provide more control over inheritance,
so all direct subclasses of a seal class are known at compile time.
So no other subclasses may appear after a module with the settled class as compiled.
So that's really the idea behind me sealing this class.
So each item, as you see here, has an icon as well as a text here.
And then I have a little divider and I need to know whether it's a header or not.
So is it a divider?
Which is this divider here?
Is it a header, which is this header all labels or header all Google apps, for example?
So I need to have these details.
If that's the case, we know, OK, we need to treat them differently.
Otherwise, they are all twisted.
Like this icon with a name?
OK, so let's define this in our draw menu data.
Therefore, I'm going to create those properties I can, which will be an image vector.
No.
So we need to import a major vector here, then the title, which will just be a string multiple.
I a divider.
So is divider.
Which will just be a Boolean.
And by default, it will be set default as well as is it a header, which will also be a Boolean, which
is going to be false by default as well?
So each icon will have an image factor, which will be just an icon.
It will have a title and it will know whether it's divided or is a header so this can be null.
The image of actor in the title can be not because if it's a divider that we don't need to have an image
vector and we don't need to have a title.
And if it is not a divider and that is a header, then we need to have the title.
But no icon, as you see here.
OK, so this is a.
Header, which has no icon assigned to it.
So now we can just go ahead and create a bunch of objects off draw menu data.
So I'm just going to paste them in here and go over them.
You can just create your very own wants and call them however you want.
I'm just going to simplify this because I don't want for you to be looking at me building all of this
stuff.
So let's import.
I consider OK.
And now for us to be able to use all of those other icons that we don't have yet, we need to add a
dependency.
So let's go ahead to our build.gradle once again and make sure that we add another dependency here at
the bottom.
I'm going to just add it up here.
So this is the compose material material icons extended with the compose version, which is this variable
here that exists for this bill.
But Gradle file, so we'll sync it again for this to be available after it's linked.
Let's go to our draw menu data, and you will see that the icons are all available now, so no more
errors.
Icons are with us.
So we created a bunch of objects, right?
But these objects are not used, as you can see, because they are gray.
So in order to now use them, we need to create a menu list.
Which means we need to go our over to our G-mail, draw our menu and create a list with all of those
objects that we just created.
So.
Up here at the top of the class, we can just start right here, say all menu list, which will be a
list of.
And then we add all of the items.
So draw menu data dot divider.
Well, actually, I think we don't have the divider yet, all in boxes, for example, then the primary
and so forth.
So here you can set it up so that you get this result that you have here.
So we have a divider, all in boxes divider.
So let's set up the dividers as well, by the way.
So I see that we now can use to all in boxes, we can use the primary and so forth.
So here we have the contact setting help, but we didn't have a divider at this point.
So let's add dividers here as well.
Therefore, I will create another object called divider, which will also be of type drawer menu data.
But this time we're just setting that is divider boolean to true.
OK, and then we need to have the header one at her one which will also be of type draw menu data,
which will be having the is header set to true and then the title said to all labels.
So this will be this part here.
You see all labels right here and now we need to create another one, which will be called Google apps,
as we see down here.
This is another header.
So I'm just going to copy this called this one header too, and this one will be called Google apps.
OK, now we can go ahead and create the list in our draw menu.
G.M. draw menu as we want it, so you can, of course, use the same structure as I have, but you can
also just go ahead and build them in the order that you prefer.
So I'm just going to paste it in here and show you real quick.
So this is how it's gonna look divider, all inboxes divider, primary social promotion, header one
starred, snoozed, important and so forth, so you can pause the video and follow along if you want
to have the same exact order of items inside of your list.
So the order in which you add them to this list of they will also appear in your drawer.
OK, so I think this video is long enough, so let's have a break here and finish our application in
the next.