Welcome back in this video, we are going to focus on this little beautiful part here at the top, which
is the app bar menu.
OK, so let's go ahead and implement that.
You can see that we have a card and then inside of it, we have a row with a couple of settings.
So let's get started adding all of that and therefore let's go ahead and create a new empty compose
activity.
I'm going to call this project Gmail clone like, so now let's go ahead and set that project up.
So what I will need is going to be a bunch of components, as you might recall.
There are many different parts of such an application of such a complex application, such as Gmail
and as there are many different components which internally have a bunch of different composable.
I would recommend that we create an extra folder, therefore, where we can then store our components.
So I'm going to create a new package called components here.
Components like self and inside of it, I'm going to create my home app bar.
So here create a new Scotland file class and it will not be a class, but just a file.
And I'm going to call this one home app bar like so OK.
Before we go into the home app bar, however, let's go over to our main activity and make sure that
we are not using greeting.
But let me call this one Gmail app.
OK, so this will be the composable name.
I'm not going to pass any variable to it, so let me get rid of this statement here as well.
And it should not display a text, but instead what I want the Gmail app to do.
I wanted to have a scaffold.
All right.
So a scaffold is the layout provides a lot of material design elements like the App Bar.
When you hover over on the parentheses, here we can see what kind of options to scaffold text or when
you hover over the method, you can see there are a bunch of different options.
Some things are defined by them by default, but others we can set ourselves, or we can set all of
them, but some we have to set.
And what I'm going to set here is the top bar.
So I want to create a top bar that I can use as the value and pass it to the scaffold.
And by the way, for scaffold, you will need to make sure that you have the scaffold import.
So Android compose material scaffold.
So now let's go over to our home app bar, where we can now create our home app bar.
So this will be a composable, composable like.
So and I'm going to call this one home app bar.
As we have done before, so this home at Bar will have a box which internally has a cart.
OK, so we have worked with boxes before in our dog example, right in this Instagram dog example where
the box was with the linear layout or constrained layout.
I think it was, yes.
So this is similar, but without the constraint layout.
So let's import box.
You see this one here foundationally our box and then let's import card.
And we have worked with cards before, right?
So they create this elevation effect.
So let's go ahead and create this round the shape that we have here.
So look at it.
You can see this card is rounded as well as it has an elevation which creates this shadow around it.
So let's set those two parameters up.
First of all, the shape should be rounded corner shape to which you can then.
Define the size that you want to have those, so I'm going to say 10 density pixels should be the.
Radius for this corner.
OK, so for this round the corner, and then I'm going to have an elevation as well of, let's say,
six density pixels, I think this should be quite good as they start.
And then let's also make sure that we have a preview here.
So at preview?
But annotation, then another at composable annotation, and then we can go ahead, and I'm going to
call this default preview, which will use the Gmail clone theme with our Gmail app.
So Gmail clone is our application's name, right?
I call the Gmail clone.
So however you called your application, you need to use the name of the application plus theme here
and then inside of the curly brackets you can call your Gmail app, which is going to be this Gmail
app here.
OK.
Therefore, we need to make an import, I believe.
Let me see here.
While that's the main activity we didn't need to import, it worked fine.
OK, and now we have our home at barm with the little box and the card.
So let's add a modifier to this box.
So let's assign a modifier where it's going to have a little bit of padding.
So modifier padding.
Which I'm going to set to 10 density pixels, so I want to have a little bit of padding and we need
to import modifier from composed II as well as padding while we're at it.
OK, now let's add a modifier to our card here as well.
So here modifier modifier, which will define how hide this item should be.
So I'm going to say it should be 50 density pixels, so required height, 50 density pixels.
And then we need to come on here to separate it from the shape setting.
So we're passing multiple arguments to this card here.
OK, and now inside of this card, let's create a row and we've just rows before, right?
So let's import the row, and this row will have a vertical alignment so that it aligns to items centered
vertically.
And then I will also have a modifier for it, which will make sure that it is going to fill the entire
size.
So modifier fill max size and I'm going to add a little bit of padding to it as well of eight density
pixels.
Like so.
And this role must have content, even though the content can be empty, so we need to have the curly
brackets here.
So now we should be able to use this home at Bar in our main activity for the scaffold.
So the top bar will now be our home app bar.
So this only works if we import our home app bar from our own components and at the same time is surrounded
by curly brackets like soap because we need to pass the home app bar.
But we're not creating an object of it so we can use it using this lambda here.
So at this point, if we run our application, we can't see our cart.
All right.
So it's just this empty cart, which has a height of 50 density pixels, but no content.
OK, that's something we need to change.
So let's give it some content.
And the content that I'm going to add is going to be an icon.
All right.
So icon and it's going to use icons dot default dot menu.
And this one will be called menu.
So let's import icons.
That's important menu, that's important icon.
And here's the one here the one wonder this on the compose UI graphics and what this will do is it will
use this menu icon, which is there by default in Android Studio, which we can use and as the content
description, it will have the text of the menu.
So let's rerun our application real quick, because now we can see this is the menu icon.
So the hamburger menu icon, OK, so that's one part of the row.
The other one will be a little text.
So I'm going to import text here and Android X compose one.
And here, as the text property, I'm just going to say search in email or in emails, something like
this.
And while we're added, let's also add an image.
So here, let's import image the Compose UI version, and let's set the image to be the paint resource
with an I.D..
So now we need to pass in the idea that we want to use.
And the image that I'm going to use is going to be this one, Turrell's thought you this file, and
I'm going to add this on the resource manager and then an image asset or import troubles.
I think this should be good.
And then here I'm going to go to the Strobl folder and import my tutorials image.
You can use any image you want.
OK, so I'm just going to add that to my project.
And now it will be available under the name of tutorials at the idea that our thoughts and then you
see here, we should get to our jobs, right?
But this does not work unless we import are here.
So let's add ah.
By using our import stored resources.
So
like this?
So Gmail clone, ah, this will now give me access to my resources, thought Strobl.
And there I had this image called tutorials, and this image needs additional details like their content
description.
So here, let's just add a content description saying profile.
And now this arrow disappeared, but I'm going to also add some modifier details to it so that we know
how large it is, for example.
So I'm going to set the modifier to have a size or two for this image to have a size of 30 Vancity pixels,
and I'm going to clip it to be in a circular shape.
So here, circle shape, like so now we need to import clip for this to work.
Make sure that you import clip this one here you draw clip and this will now clip our image for us.
And then as the background for it, you can also define a color that you want to use.
OK, so I'm going to say that I want to have a gray background, for example.
Like so?
So here what we're doing is we are setting the size, we're clipping the image and we're adding a gray
background for that image.
So now if you run this again in our emulator, you can see that we get such emails.
And then our little icon with the gray background and our image so that we can actually see it.
If it had a white background, we wouldn't see it properly.
So we see that the items don't align properly.
So now let's add some weight to this text, so I'm going to add a modifier for my text here.
Where I'm going to set its weight.
To be to that zero f.
So now will have more weight, which will make sure that it takes more of the available space.
In this case, it takes all of the available space except for the space that the other items need.
So you see our icon here, need some space, then detects takes all the available space because it has
a very high weight.
It has the only weight.
The others don't have any weight, so to speak, so they only take as much space as they require.
So that's a neat little trick where you can just set the weight for your text or for your item that
you want to take all of the available space and the other items don't get any weight to it.
All right.
And that's pretty much it, so now you know how to add such an app bar menu here at the top.
I hope enjoyed this video and the next one, we are going to look at the draw menu.