OK, but now let's go back to our UNEF Haramain and finish that, so we prepared.
The linear layout structure, but in there, we now have those two image views, right?
So the circle image view, which we get from our third party library that we have implemented, so now
we can assign a width and here we are just going to use eight density pixels.
Of course, we can use a dimension for that.
So let's go ahead to our resources and explored all of the values that we have here in the Diamond's
file.
So I prepared this, of course, already.
And it's going to be the ones that you see here, so height of NUW main menu or navigation menu and
of image size and content margins start and never content margin top bottom than the username text size,
the circular border with and then the naft divider height.
So if you look very carefully, you will see that there is a little divider here, which is just one
line, and we define the height as being just zero point five density pixels.
And while we are adding value, so let's do the same thing with strings, so we will need two more strings
here, one of them is going to be the NAF, my profile.
So it's just going to say my profile and then sign out, which is going to be the sign out.
So it's just those two texts that we have here so that we can make them global or that we have multiple
languages later on, we could have multiple languages where we use different terms for those two things.
Right.
OK, so that is that now we can go back to our haramain and now we can use all of those dimensions instead.
So the height of the circle image of you will be the image size.
The same for the with, so both will be the next image size here, then.
We are going to define the margin start as being NEF content margin start.
Actually started and.
And then margin end will be the same.
So that's why it's called like that, so margin and will be enough margin start at.
OK, so in both cases, with the same margin, then we can define a color, which I'm going to do here,
so sieve border color will be.
Android color.
White and then the width, which will be our next image size.
Actually, it's not the science that's the image, snarf image, circular border with so this is the
border with and then the content description will be our string.
And here it's image contant description, and finally the source will be our I see.
And this is one that we need to create still, so it's going to be called see user place holder, so
we will need to add a drawable, which will be the user placeholder, which is just this little icon
that you can see here with that.
All right, and if you want to have the TextView, so this is our circular image view, and I mean,
if we just have a basic view and an image of you.
So first, an image of you and then a view.
Let me show you those two things.
So the text you will have, the idee username will have a wealth of rep content height as well, the
little margin towards multiple directions.
The text color would be white and that exercise will be nephew's name, textiles, which we prepared
and the dimensions.
Right.
So now if username in says OK and the tools text will be username, so let's create the namespace decoration
so that it's just going to say user name here.
Of course it doesn't display anything because we still don't have a background here.
Neither do we have an icy user placeholder here.
Before we add those, let's do one last thing, which will be the last preparation pretty much, and
then we can add all of the different images and backgrounds that we're still missing and then we should
be able to test it.
So let's go over to our menu.
And we have this activity main draw, right, which was this menu.
Now I want to have a menu group, so I want to have two menu items, so my profile and sign out.
So let's add those two.
Let's add a group which will be a it's going to have checkable behavior single so only one can be active
at the time.
And then I want to have two items in there.
One item will have the ID I.D. naff my profile.
So if we click on that, we want to do something and then it should have an icon.
So we will need to create an icon which will be in the double folder.
So here at drawable and I'm just going to call this one.
I see I user and then we have a title which will be a string and for now it will this be the up name
and later on or actually my profile, I think it should be something like Nadaf.
I just got my profile.
Yep, that was the one that we prepared, so that's going to be item number one.
And then we have another item, so item number two.
And that's the sign out icon.
So this one here, we have my profile and then we have sign out.
And so I had already done something, so that's what we're going to implement in the next video.
But for now, let's just add Android I.
D equals Edem and this one will be Nadaf.
Sign out.
And it's going to have an icon and here I'm going to use I see or troubles.
And I see no sign out, and the title will be Sign Out, so never sign out.
OK, so now let's create those drawable.
Therefore, I need to log in again to show you how the icons will look like.
So let's open this up.
Can see it's just shut down.
I can.
And then it's this profile icon.
So let's add those two.
Oh, new.
And here, Victor Asset.
And then you can search a person, so here I'm just going to use this person here.
And let's see about that one.
Well, it's not exactly that one.
Well, it's very similar, right, so you can just select an icon that you prefer, doesn't have to
be specifically the one that I'm using.
Maybe it's this one like this assignment indicator, so let's use this one and then let's give it a
different name.
So it was I nav user, so I see NAV user.
And let's also see, was it then dark?
Well, it was, yes, I think it was like this.
All right.
I see enough user and let's go next and finish.
Then this one disappears.
This error now Nevsun out same thing.
File new vector asset.
So you open a clip, Art, and then you can search for power settings new.
So this one is going to be fine for us and I'm just going to rename it to Neff's Sign Out.
So I see Nadaf sign out.
All right, and let's see if it's dark.
Yes, it is.
So let's go ahead and finish it.
OK, so now we have those two icons.
And we're only missing a few minor things, so, for example, here we are still missing the image as
well as in the circle image.
So I you as a placeholder.
And at this point, I would like you to.
Download the project.
So the version for this project and then dragging all of the drawls, or you can, of course, use your
own images if you want to, so just drawable htp up to troll access to HTTP.
I just put those in here and skip the files that are already prepared.
So just copy the ones from the version 11 and put them inside of the project.
At this time, our images should be done or should be working, all of them should be found and at this
moment we should be able to test our application.
You can see this is how it's going to look like username.
So this is our Hetton main, even though it doesn't look as good as I would like it to be.
So let's add some more settings to the linear layout here, because I think we don't have a more fitting
hide here.
So the height that I want to use is the height of Nerf mane.
So here I don't have Maixner.
So that's the one that we had in the dimensions.
So here height of NAV main, which is two and a density pixels.
And then let's look at the design now and you can see it looks a lot better, it looks a lot more like
what I want to have.
OK, so then by the way, this little view here is only creating a little divider.
OK, so it just has a way of match parent that has a color accent color and then it has the height of
our divide or height.
So just a little line here.
Super thin line.
OK, so it's just a divider, but now you know how to create dividers.
Just create a little view with the height that you need.
At this time, we can then finally test the application, so let's sign in or we should be signed and
automatically can see we have two bars now.
So this is not perfect yet, but this is something we will need to fix in the cold later on.
But what you can also see is we have this.
Draw here, we can drag we don't have an icon here yet, but we could use, but we have this draw,
OK?
Also, this program manager at the top.
Something that we potentially can fix from here so we can add the pot remote and no action bar to our
main activity settings.
So here, let's do that here in the main activity settings and let's test it again just to see.
Whether it is going to make the difference.
And we are so now we don't have to act action bars, because we created one vehicle and the other one
was there by default.
Now, this is, of course, not so easy to drag out, but you can see we have my profile and we have
to sign out.
So those two icons are here.
The text doesn't appear yet.
So that's something that we need to look at.
And that is, of course, because we have not assigned a text here, so we only have it in the tools,
but we haven't assigned a text directly here.
But that is fine, because we're going to do that in the court later on.
There's one last thing that I would like to still do, and that is to add the activity, Maine actually
or the content Maine, because you can see everything is in there.
But the content Maine is not there.
We don't have to tell a world text, which is our content, Maine or Maine content, except this one
here.
It's never appearing.
So let's look at the structure.
I think this is good review.
So the thing is, we have the activity, Maine in the activity, Maine, we have a draw layout.
Then we have a navigation view inside of it.
But in between we have this includes statement where we say include the apartment.
So let's look at at Balmain here.
We have an eight bar layout and a toolbar.
But then what is missing here is just underneath the bar layout, our include so that we have the layout,
which is going to be our.
At layout content main or your main content?
OK, so we were missing this one.
Now if we test this again now, we will also include our main content, which is in turn this one here
where we have the TextView, which is currently just this has a world text.
But having all of those elements now being combined and connected to each other, we create this user
interface that we have here where everything is coming together.
OK, so here we have a world, then we have the bar at the top.
Then we have our draw here, which consists of two elements.
So here Denef bar top and then the net part bottom, which is our menu pretty much.
So we have the nav bar on that haramain, which is this part here.
And then our menu, which is our activity main draw, which is to start with the profile and sign out.
OK, so I think this is enough for this video.
See you in the next one where we're going to, of course, implement the hamburger and a bunch more
functionality.
So I'll see you there.