Welcome back and this video and the next and probably the second next, so the next two or maybe three
videos, we are going to set up this functionality here where you can swipe something from the left.
Well, it's a little more difficult with the most under it is on the actual device.
So you can open up this setting here or this drawer in which you can then go to profiles, sign out
and then potentially add more stuff later on.
And we can also see the currently the name of the application.
Later on, it will be replaced by the username and then also the user image.
So that's the idea of this feature.
And of course, we will also have this little burger icon, which also adds this functionality or opens
up this drawer.
OK, so this will take quite some time to set up.
So be prepared for quite some XML stuff and then also some coding.
So in this video, we are going to start with all of the XML stuff.
And I think in the next one we should be at the point where we can start with the Cotlar and stuff so
that it will be displaying also when using this icon button here.
All right.
So let's get started.
Let's go to our activity main and hear.
What we can do is we can just take all of the code and put it into a separate file.
So we're going to use this file called Main on the score content XML and then paste it in here.
So instead of having our Hello World TextView, which will later on be replaced, of course, with our
recycle of you, instead of having that in our activity main XML, we are going to have that in the
main content.
OK, so the activity in XML will be our entry point, so to speak, to the activity.
But in here we are going to then prepare everything else.
So we're going to send to the different files, of course.
So it's not going to be everything in one file.
It's going to be in multiple files.
OK, so if we look at it, we have multiple aspects of our application, multiple parts of our application.
So we have this top part here.
Then we have this menu here, then we have an ad part, then we have a content main.
So we have a bunch of different sections.
And of course, this here is a navigation draw.
So a lot of stuff that we use here.
So let's start with this one where I'm using a drawer layout, so here drawer layout and inside of this
draw a layout, I of course, need to add some more settings, for example, the name spaces and so
forth.
So I'm just going to put that in here and talk about it.
So we have the names spaces and this one is never used, but it's OK.
So we have the name spaces, the tools and then.
We give this draw out and Edem, so our whole activity is going to be a draw layout, then it's going
to have the idea that's going to match parent and Highton with and I'm setting the FETs system windows
to true.
What that will do is it will allow us to uh yeah.
Adjust the UI accordingly.
So it's just going to adjust view layout based on system windows such as the status bar.
OK, so that's what we're doing here.
Then we set the draw to be open in the settings.
Of course we don't see anything yet because the drawer is empty, but we will of course add stuff in
here now.
OK, so let's do that.
First of all, I'm going to include something I'm going to include in you file, which is going to be
lay out.
And you don't have this file yet, so you will need to create it Atalay out at Balmain, OK, so you
can just enter this and then.
Right, click or click on it and create this file.
So this is what we're going to include.
It's the same thing as we will later on inside of this file do in order to get to main content to be
displaying as well.
Now we need to give it a heightened with for this bailout, so let's do that real quick with each parent,
each parent, and then inside of my drawer, lay out underneath this include what I would like to have
as a navigation view, navigation.
So open navigation view.
So this one here and it also needs a with I'm going to use for content and to hide.
I'm going to use my parent here for the height.
Then I'm going to assign an ID here for it, which I'm going to call view, so I'd it's going to be
Nadaf underscore view.
Then I'm going to give it some gravity, going to say that system is also going to be like the other
setting that we had.
So it's system windows set to true.
And then what I also need to have in here I want to have in here is the header layout.
So there is this header layout and therefore I create a new file.
So add layout naff header main and you can type in the whole text and then also also create this file
once you have entered this, because it will appear as an arrow.
So create this file.
And then I need a menu, so I have a menu and this one will be mine, my activity main draw.
So you also need to create this file, so just enter at menu activity, main draw and then to create
that once you hover over it.
So in your case, it will just be read right like here, and then you can hover over it and say create
me new resource file activity, main draw, just do it as is.
And then you see it will create this menu for you.
And it will also create this new menu folder in which the activity main draw now will be.
So now that we have included that we can go to our app Balmain and design that and we can design the
activity main draw, then we can design the NAF Heider main and then we can go over to our main content
as well.
So this one, well actually we have designed that one as well already, even though we still, of course,
need to put a lot of you in there later on.
Phrenologists, this content which says hello world.
Right.
But later on it should be, of course, a list view or a recycled view which displays all of the different
boards that we are assigned to or that we have created.
OK, so now let's go to our app, our main here.
What I want to have is an app bar layout.
So let's create an app bar layout.
And it's going to match the parent in with and rip the content and hide.
Also, I'll give it a theme so.
Theme will be at style, and I'm not sure whether we have it here, so it's going to be an up theme.
Well, let's just do it like this theme and then it's not no action bar, but it's up bar over life.
All right, so we will need to also create this style.
So let's go over and create this, so create value.
And I'm just going to create it like this and let's go over to our values here in the resources folder
there, we'll go to Styles and now we have this HEPA overlay.
And what I'm going to do is I'm going to say that it has a parent which will be theme overlay, a compact
DARG action bar.
And.
Here, Dark Dot Action Bar.
OK, so this is just the style for now, we can, of course, then added to style as we want.
So for now we just take the parent of a theme overlay, a computer action bar.
But if we want later on, we can style it even more in here.
All right.
And while we're in here, let's also create another style, which will be the pop up overlay, which
we're going to use later on, which is going to be this one.
So theme pop up overlay and we'll have the parent or theme overlay combat lite.
OK, so now we can use it in here in our at Balmain and then the next thing we need to set up here,
of course.
There's going to be a toolbar, so let's go ahead and create a toolbar in there inside of this bar layout.
And by the way, you can see it's still complaining here.
That is because probably it doesn't have a content.
So let's just add the content and see if the bug or if there are this appears so Android X app, comput
widget toolbar.
So that's the one I want to use in there.
And now let's design it.
So let's give it an idea.
First, the idea will be toolbar.
On the score or tool bar underscore main activity, then the layout with will be much apparent, the
layout height will be just the height of the action bar size, so.
Maybe you can remember how to do it.
We get to attribute.
And then we used the action part size, so we say it should be as high as the action bar and then we
can also assign a background color if we want to.
So I'm just going to say it should use the attribute called color primary.
And then finally.
I'm going to add a pop up theme.
And here we need to import Ebbe, so let's create the namespace declaration here at the top.
You can see it edited now for us and I can use pop up theme, which will be our style.
And here it's the pop up overlay style that we created.
All right.
And here, the complaining, well, because it needs their constraints, but I don't want to add all
of those constraints in here, I'm just going to replace the constraint layout with a coordinator,
layout coordinator layout just like that.
All right.
So this will be our high bar, the one here at the top.
All right.
Now let's go over to our NAV Hatemi, so we need to design this one as well, and I'm not going to use
a constraint layout here.
I'm just going to use a linear layout.
This makes my life a lot easier in this case, so what I will need in here is a background, so I'm
just going to use a background of never had her main background.
So at drawable.
Slash on the score heter underscore main on the score background, so we will need to create this file
as well or we will need to import it, which is just going to be another XML file.
Then I want this to be gravitating towards the bottom.
So gravity bottom, then orientation is going to be vertical.
So that stuff is put on top of each other and then the theme is going to be our theme overlay.
Which is going to be the dark version, so dark.
So basically, this NAF Haramain is going to take care of this part here at the top, so I want this
to be this background, which is this.
Well, background that you can see here, so there's a gradient and then I want to have, of course,
the icon, which is the rounded icon, and then a text underneath with.
So how do we add rounded icons?
Well, we need to add another dependancy.
So we've worked with this dependancy before when we worked with rounded icons.
So we will need to go to our cradle and address a certain line to it.
So let's go over.
Bill Gradle and at the implementation here.
Which is this implementation, so I don't have circle image for you three dot 1.0.
And, of course, don't forget to sync it.
So at this point, I totally understand that this is or this might be a little confusing how I'm creating
all of these different XML files in so many different examples which are interlinked with each other
and so forth.
But in the end, if you look at this screen here, we have an bar, then we have a main content, this
part here, which we can design however we want, but we don't want to have all of those different things
open at the same time, because we also have this whole UI or whole XML file, which consists of two
XML parts.
So the top part and then this one here is a menu with different items.
OK, so we have this menu with different items which we haven't designed yet.
So Activity Manger XML, which is this one here with the menu in the background where we will need to
add those two things here.
And then we have this top part, which is what we have already prepared.
So this never haramain, this is going to be the one.
And then, yeah, that's how those all of those XML files come together.
All right.
So let's make a little break here.
It is a lot of XML, and it really makes sense for me to go through it this time a little more in-depth,
because we have skipped a lot of XML before, but we haven't ever used a draw such as this one.
So I think it makes sense to really go over this a little more in depth.
So let's go ahead and finish the XML part in the next video and then afterwards we're going to add the
codling code.
All right.
So see you there.