1
00:00:00,660 --> 00:00:07,050
OK, but now let's go back to our UNEF Haramain and finish that, so we prepared.

2
00:00:08,770 --> 00:00:13,700
The linear layout structure, but in there, we now have those two image views, right?

3
00:00:14,050 --> 00:00:20,890
So the circle image view, which we get from our third party library that we have implemented, so now

4
00:00:20,890 --> 00:00:27,530
we can assign a width and here we are just going to use eight density pixels.

5
00:00:27,550 --> 00:00:29,830
Of course, we can use a dimension for that.

6
00:00:30,280 --> 00:00:37,030
So let's go ahead to our resources and explored all of the values that we have here in the Diamond's

7
00:00:37,030 --> 00:00:37,440
file.

8
00:00:38,590 --> 00:00:40,840
So I prepared this, of course, already.

9
00:00:42,880 --> 00:00:49,970
And it's going to be the ones that you see here, so height of NUW main menu or navigation menu and

10
00:00:50,020 --> 00:00:57,820
of image size and content margins start and never content margin top bottom than the username text size,

11
00:00:57,820 --> 00:01:01,880
the circular border with and then the naft divider height.

12
00:01:02,170 --> 00:01:07,780
So if you look very carefully, you will see that there is a little divider here, which is just one

13
00:01:07,780 --> 00:01:12,610
line, and we define the height as being just zero point five density pixels.

14
00:01:13,790 --> 00:01:20,630
And while we are adding value, so let's do the same thing with strings, so we will need two more strings

15
00:01:20,630 --> 00:01:26,120
here, one of them is going to be the NAF, my profile.

16
00:01:26,330 --> 00:01:30,970
So it's just going to say my profile and then sign out, which is going to be the sign out.

17
00:01:31,340 --> 00:01:39,020
So it's just those two texts that we have here so that we can make them global or that we have multiple

18
00:01:39,020 --> 00:01:44,360
languages later on, we could have multiple languages where we use different terms for those two things.

19
00:01:44,360 --> 00:01:44,640
Right.

20
00:01:45,190 --> 00:01:51,860
OK, so that is that now we can go back to our haramain and now we can use all of those dimensions instead.

21
00:01:53,350 --> 00:01:57,400
So the height of the circle image of you will be the image size.

22
00:01:59,570 --> 00:02:04,460
The same for the with, so both will be the next image size here, then.

23
00:02:05,840 --> 00:02:12,200
We are going to define the margin start as being NEF content margin start.

24
00:02:13,250 --> 00:02:14,930
Actually started and.

25
00:02:17,440 --> 00:02:19,180
And then margin end will be the same.

26
00:02:19,210 --> 00:02:27,820
So that's why it's called like that, so margin and will be enough margin start at.

27
00:02:29,910 --> 00:02:37,350
OK, so in both cases, with the same margin, then we can define a color, which I'm going to do here,

28
00:02:37,350 --> 00:02:40,770
so sieve border color will be.

29
00:02:41,840 --> 00:02:43,550
Android color.

30
00:02:46,320 --> 00:02:54,530
White and then the width, which will be our next image size.

31
00:02:56,330 --> 00:03:03,380
Actually, it's not the science that's the image, snarf image, circular border with so this is the

32
00:03:03,380 --> 00:03:08,750
border with and then the content description will be our string.

33
00:03:10,700 --> 00:03:21,080
And here it's image contant description, and finally the source will be our I see.

34
00:03:22,370 --> 00:03:30,200
And this is one that we need to create still, so it's going to be called see user place holder, so

35
00:03:30,200 --> 00:03:35,390
we will need to add a drawable, which will be the user placeholder, which is just this little icon

36
00:03:35,390 --> 00:03:37,610
that you can see here with that.

37
00:03:39,810 --> 00:03:46,860
All right, and if you want to have the TextView, so this is our circular image view, and I mean,

38
00:03:46,870 --> 00:03:49,830
if we just have a basic view and an image of you.

39
00:03:49,860 --> 00:03:51,900
So first, an image of you and then a view.

40
00:03:51,930 --> 00:03:53,210
Let me show you those two things.

41
00:03:53,730 --> 00:04:01,230
So the text you will have, the idee username will have a wealth of rep content height as well, the

42
00:04:01,240 --> 00:04:04,020
little margin towards multiple directions.

43
00:04:04,020 --> 00:04:09,300
The text color would be white and that exercise will be nephew's name, textiles, which we prepared

44
00:04:09,300 --> 00:04:10,200
and the dimensions.

45
00:04:10,200 --> 00:04:10,450
Right.

46
00:04:10,980 --> 00:04:19,290
So now if username in says OK and the tools text will be username, so let's create the namespace decoration

47
00:04:19,300 --> 00:04:21,839
so that it's just going to say user name here.

48
00:04:22,260 --> 00:04:26,780
Of course it doesn't display anything because we still don't have a background here.

49
00:04:27,090 --> 00:04:30,300
Neither do we have an icy user placeholder here.

50
00:04:32,030 --> 00:04:36,980
Before we add those, let's do one last thing, which will be the last preparation pretty much, and

51
00:04:36,980 --> 00:04:43,670
then we can add all of the different images and backgrounds that we're still missing and then we should

52
00:04:43,670 --> 00:04:44,700
be able to test it.

53
00:04:45,080 --> 00:04:47,690
So let's go over to our menu.

54
00:04:47,690 --> 00:04:50,720
And we have this activity main draw, right, which was this menu.

55
00:04:51,110 --> 00:04:57,140
Now I want to have a menu group, so I want to have two menu items, so my profile and sign out.

56
00:04:57,560 --> 00:04:58,730
So let's add those two.

57
00:04:59,120 --> 00:05:06,140
Let's add a group which will be a it's going to have checkable behavior single so only one can be active

58
00:05:06,140 --> 00:05:06,680
at the time.

59
00:05:07,730 --> 00:05:10,840
And then I want to have two items in there.

60
00:05:11,180 --> 00:05:18,990
One item will have the ID I.D. naff my profile.

61
00:05:20,840 --> 00:05:25,660
So if we click on that, we want to do something and then it should have an icon.

62
00:05:25,670 --> 00:05:29,180
So we will need to create an icon which will be in the double folder.

63
00:05:29,960 --> 00:05:33,470
So here at drawable and I'm just going to call this one.

64
00:05:33,470 --> 00:05:44,540
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

65
00:05:45,380 --> 00:05:50,060
and later on or actually my profile, I think it should be something like Nadaf.

66
00:05:51,400 --> 00:05:52,630
I just got my profile.

67
00:05:52,670 --> 00:05:56,680
Yep, that was the one that we prepared, so that's going to be item number one.

68
00:05:58,630 --> 00:06:03,220
And then we have another item, so item number two.

69
00:06:04,250 --> 00:06:06,090
And that's the sign out icon.

70
00:06:06,110 --> 00:06:08,900
So this one here, we have my profile and then we have sign out.

71
00:06:09,800 --> 00:06:13,810
And so I had already done something, so that's what we're going to implement in the next video.

72
00:06:13,820 --> 00:06:18,020
But for now, let's just add Android I.

73
00:06:18,440 --> 00:06:24,860
D equals Edem and this one will be Nadaf.

74
00:06:25,310 --> 00:06:27,170
Sign out.

75
00:06:29,350 --> 00:06:36,550
And it's going to have an icon and here I'm going to use I see or troubles.

76
00:06:38,410 --> 00:06:48,580
And I see no sign out, and the title will be Sign Out, so never sign out.

77
00:06:50,140 --> 00:06:52,030
OK, so now let's create those drawable.

78
00:06:53,290 --> 00:06:57,290
Therefore, I need to log in again to show you how the icons will look like.

79
00:06:57,850 --> 00:06:59,200
So let's open this up.

80
00:06:59,350 --> 00:07:01,840
Can see it's just shut down.

81
00:07:01,930 --> 00:07:02,500
I can.

82
00:07:02,500 --> 00:07:03,910
And then it's this profile icon.

83
00:07:03,910 --> 00:07:04,960
So let's add those two.

84
00:07:07,190 --> 00:07:08,060
Oh, new.

85
00:07:09,620 --> 00:07:11,300
And here, Victor Asset.

86
00:07:14,350 --> 00:07:20,160
And then you can search a person, so here I'm just going to use this person here.

87
00:07:22,560 --> 00:07:24,120
And let's see about that one.

88
00:07:24,270 --> 00:07:25,770
Well, it's not exactly that one.

89
00:07:28,630 --> 00:07:33,910
Well, it's very similar, right, so you can just select an icon that you prefer, doesn't have to

90
00:07:33,910 --> 00:07:35,590
be specifically the one that I'm using.

91
00:07:36,630 --> 00:07:42,840
Maybe it's this one like this assignment indicator, so let's use this one and then let's give it a

92
00:07:42,840 --> 00:07:43,470
different name.

93
00:07:43,470 --> 00:07:48,710
So it was I nav user, so I see NAV user.

94
00:07:49,050 --> 00:07:51,120
And let's also see, was it then dark?

95
00:07:51,420 --> 00:07:54,800
Well, it was, yes, I think it was like this.

96
00:07:54,870 --> 00:07:55,260
All right.

97
00:07:55,260 --> 00:07:59,540
I see enough user and let's go next and finish.

98
00:08:00,510 --> 00:08:01,860
Then this one disappears.

99
00:08:01,860 --> 00:08:04,950
This error now Nevsun out same thing.

100
00:08:05,580 --> 00:08:08,730
File new vector asset.

101
00:08:09,420 --> 00:08:15,190
So you open a clip, Art, and then you can search for power settings new.

102
00:08:15,410 --> 00:08:21,630
So this one is going to be fine for us and I'm just going to rename it to Neff's Sign Out.

103
00:08:21,630 --> 00:08:25,830
So I see Nadaf sign out.

104
00:08:27,190 --> 00:08:29,950
All right, and let's see if it's dark.

105
00:08:29,980 --> 00:08:30,730
Yes, it is.

106
00:08:30,760 --> 00:08:33,010
So let's go ahead and finish it.

107
00:08:34,120 --> 00:08:35,919
OK, so now we have those two icons.

108
00:08:38,220 --> 00:08:45,390
And we're only missing a few minor things, so, for example, here we are still missing the image as

109
00:08:45,390 --> 00:08:46,640
well as in the circle image.

110
00:08:46,670 --> 00:08:48,660
So I you as a placeholder.

111
00:08:50,810 --> 00:08:53,780
And at this point, I would like you to.

112
00:08:55,700 --> 00:08:56,810
Download the project.

113
00:08:57,820 --> 00:09:03,250
So the version for this project and then dragging all of the drawls, or you can, of course, use your

114
00:09:03,250 --> 00:09:11,350
own images if you want to, so just drawable htp up to troll access to HTTP.

115
00:09:11,350 --> 00:09:15,660
I just put those in here and skip the files that are already prepared.

116
00:09:16,030 --> 00:09:21,730
So just copy the ones from the version 11 and put them inside of the project.

117
00:09:23,610 --> 00:09:31,410
At this time, our images should be done or should be working, all of them should be found and at this

118
00:09:31,410 --> 00:09:34,560
moment we should be able to test our application.

119
00:09:35,190 --> 00:09:37,740
You can see this is how it's going to look like username.

120
00:09:37,740 --> 00:09:44,120
So this is our Hetton main, even though it doesn't look as good as I would like it to be.

121
00:09:44,130 --> 00:09:50,520
So let's add some more settings to the linear layout here, because I think we don't have a more fitting

122
00:09:50,520 --> 00:09:51,120
hide here.

123
00:09:51,240 --> 00:09:54,960
So the height that I want to use is the height of Nerf mane.

124
00:09:55,560 --> 00:09:57,240
So here I don't have Maixner.

125
00:09:57,250 --> 00:09:59,210
So that's the one that we had in the dimensions.

126
00:09:59,670 --> 00:10:04,290
So here height of NAV main, which is two and a density pixels.

127
00:10:04,740 --> 00:10:10,500
And then let's look at the design now and you can see it looks a lot better, it looks a lot more like

128
00:10:10,500 --> 00:10:11,310
what I want to have.

129
00:10:11,760 --> 00:10:18,240
OK, so then by the way, this little view here is only creating a little divider.

130
00:10:18,450 --> 00:10:26,250
OK, so it just has a way of match parent that has a color accent color and then it has the height of

131
00:10:26,250 --> 00:10:26,970
our divide or height.

132
00:10:26,980 --> 00:10:29,640
So just a little line here.

133
00:10:29,640 --> 00:10:31,020
Super thin line.

134
00:10:31,200 --> 00:10:34,560
OK, so it's just a divider, but now you know how to create dividers.

135
00:10:34,560 --> 00:10:37,860
Just create a little view with the height that you need.

136
00:10:39,530 --> 00:10:46,070
At this time, we can then finally test the application, so let's sign in or we should be signed and

137
00:10:46,070 --> 00:10:48,940
automatically can see we have two bars now.

138
00:10:48,950 --> 00:10:52,720
So this is not perfect yet, but this is something we will need to fix in the cold later on.

139
00:10:53,270 --> 00:10:55,610
But what you can also see is we have this.

140
00:10:56,950 --> 00:11:02,370
Draw here, we can drag we don't have an icon here yet, but we could use, but we have this draw,

141
00:11:03,010 --> 00:11:03,540
OK?

142
00:11:05,760 --> 00:11:09,590
Also, this program manager at the top.

143
00:11:09,960 --> 00:11:18,810
Something that we potentially can fix from here so we can add the pot remote and no action bar to our

144
00:11:18,810 --> 00:11:21,390
main activity settings.

145
00:11:21,420 --> 00:11:25,860
So here, let's do that here in the main activity settings and let's test it again just to see.

146
00:11:26,890 --> 00:11:29,050
Whether it is going to make the difference.

147
00:11:33,230 --> 00:11:38,750
And we are so now we don't have to act action bars, because we created one vehicle and the other one

148
00:11:38,750 --> 00:11:40,040
was there by default.

149
00:11:40,650 --> 00:11:46,070
Now, this is, of course, not so easy to drag out, but you can see we have my profile and we have

150
00:11:46,070 --> 00:11:46,820
to sign out.

151
00:11:47,210 --> 00:11:49,300
So those two icons are here.

152
00:11:49,490 --> 00:11:51,320
The text doesn't appear yet.

153
00:11:51,330 --> 00:11:53,440
So that's something that we need to look at.

154
00:11:55,110 --> 00:12:00,060
And that is, of course, because we have not assigned a text here, so we only have it in the tools,

155
00:12:00,480 --> 00:12:03,090
but we haven't assigned a text directly here.

156
00:12:04,820 --> 00:12:07,760
But that is fine, because we're going to do that in the court later on.

157
00:12:08,120 --> 00:12:13,430
There's one last thing that I would like to still do, and that is to add the activity, Maine actually

158
00:12:13,460 --> 00:12:16,310
or the content Maine, because you can see everything is in there.

159
00:12:16,310 --> 00:12:17,740
But the content Maine is not there.

160
00:12:17,750 --> 00:12:24,560
We don't have to tell a world text, which is our content, Maine or Maine content, except this one

161
00:12:24,560 --> 00:12:24,890
here.

162
00:12:25,400 --> 00:12:26,660
It's never appearing.

163
00:12:26,960 --> 00:12:29,080
So let's look at the structure.

164
00:12:29,090 --> 00:12:30,430
I think this is good review.

165
00:12:30,710 --> 00:12:35,480
So the thing is, we have the activity, Maine in the activity, Maine, we have a draw layout.

166
00:12:35,480 --> 00:12:37,910
Then we have a navigation view inside of it.

167
00:12:37,910 --> 00:12:42,500
But in between we have this includes statement where we say include the apartment.

168
00:12:42,530 --> 00:12:44,450
So let's look at at Balmain here.

169
00:12:44,450 --> 00:12:46,730
We have an eight bar layout and a toolbar.

170
00:12:47,090 --> 00:12:55,490
But then what is missing here is just underneath the bar layout, our include so that we have the layout,

171
00:12:56,570 --> 00:12:58,040
which is going to be our.

172
00:12:59,340 --> 00:13:04,120
At layout content main or your main content?

173
00:13:05,070 --> 00:13:07,380
OK, so we were missing this one.

174
00:13:07,800 --> 00:13:14,670
Now if we test this again now, we will also include our main content, which is in turn this one here

175
00:13:15,210 --> 00:13:18,840
where we have the TextView, which is currently just this has a world text.

176
00:13:19,830 --> 00:13:27,540
But having all of those elements now being combined and connected to each other, we create this user

177
00:13:27,540 --> 00:13:31,020
interface that we have here where everything is coming together.

178
00:13:31,050 --> 00:13:34,850
OK, so here we have a world, then we have the bar at the top.

179
00:13:34,860 --> 00:13:38,850
Then we have our draw here, which consists of two elements.

180
00:13:38,880 --> 00:13:45,330
So here Denef bar top and then the net part bottom, which is our menu pretty much.

181
00:13:47,080 --> 00:13:50,320
So we have the nav bar on that haramain, which is this part here.

182
00:13:52,810 --> 00:13:58,330
And then our menu, which is our activity main draw, which is to start with the profile and sign out.

183
00:13:59,110 --> 00:14:01,130
OK, so I think this is enough for this video.

184
00:14:01,180 --> 00:14:06,670
See you in the next one where we're going to, of course, implement the hamburger and a bunch more

185
00:14:06,670 --> 00:14:07,360
functionality.

186
00:14:07,390 --> 00:14:08,080
So I'll see you there.