1
00:00:00,630 --> 00:00:01,380
Hello there.

2
00:00:01,590 --> 00:00:02,400
I'm gonna be gone.

3
00:00:02,490 --> 00:00:03,320
And welcome back.

4
00:00:03,360 --> 00:00:06,200
Demand what you do realize in today's with you.

5
00:00:06,300 --> 00:00:08,620
We'll be talking about navigation door.

6
00:00:09,030 --> 00:00:10,980
So what is the navigation door.

7
00:00:11,100 --> 00:00:17,580
It is a sliding menu which appears on your Android screen with the hamburger icon in your action bar.

8
00:00:17,910 --> 00:00:20,610
So let's create a new project and get started.

9
00:00:25,210 --> 00:00:29,800
Let's call the project a navigation draw tutorial or draw tutorial

10
00:00:33,500 --> 00:00:38,250
draw tutorial that's on the next button.

11
00:00:38,690 --> 00:00:44,140
Again we're going to keep an eye on him as he gets 15 y so that we can run our application on almost

12
00:00:44,150 --> 00:00:46,550
hundred percent of the devices running Android in the world.

13
00:00:47,150 --> 00:00:48,290
Let's hit the next button

14
00:00:50,990 --> 00:00:52,980
let's start with an empty activity.

15
00:00:54,080 --> 00:00:58,550
Let's call our first of to ideas may not do lots of the finish button

16
00:01:02,110 --> 00:01:04,690
well understood that's building a project so let's wait.

17
00:01:05,380 --> 00:01:07,830
So the bottlenecks built and it's ready to go.

18
00:01:07,840 --> 00:01:08,800
So let's get started.

19
00:01:09,250 --> 00:01:11,370
So coming to the loud fight for us.

20
00:01:11,770 --> 00:01:17,120
Well let's get rid of this concern loud and so this constant loud we'll be using a drone allowed on

21
00:01:17,290 --> 00:01:18,140
to use that.

22
00:01:18,150 --> 00:01:20,060
We'll after our dependency on the grid.

23
00:01:20,140 --> 00:01:21,310
So let's do that first.

24
00:01:22,120 --> 00:01:27,340
So we load scripts application grader let's order dependency here.

25
00:01:27,370 --> 00:01:35,210
So implementation calling not Android not supposed design.

26
00:01:35,590 --> 00:01:45,250
And the vision which is twenty six point one point zero let's sing the greater Well the gradient think

27
00:01:45,480 --> 00:01:48,370
on our design support libraries ready to use.

28
00:01:48,370 --> 00:01:51,670
So let's disclose this file looks closed us.

29
00:01:51,940 --> 00:01:54,550
So coming back to our main example.

30
00:01:54,700 --> 00:01:57,850
So let's change this to draw out.

31
00:01:59,290 --> 00:02:02,470
Let's give it an IDC draw layout.

32
00:02:02,880 --> 00:02:03,400
OK.

33
00:02:04,450 --> 00:02:18,220
Let's just have the navigation with you with say 270 DP unsafe height much better and so it's the navigation

34
00:02:18,220 --> 00:02:22,770
view which gives you that left column which slides in and out.

35
00:02:23,320 --> 00:02:23,990
OK.

36
00:02:23,990 --> 00:02:28,870
And this requires a menu file to populate the draw menu.

37
00:02:28,870 --> 00:02:30,310
So let's create a menu file.

38
00:02:30,730 --> 00:02:34,600
So coming to resources let's create a menu directory.

39
00:02:34,740 --> 00:02:39,010
So a new resource directory let's call it menu.

40
00:02:40,720 --> 00:02:41,100
Okay.

41
00:02:41,110 --> 00:02:47,430
So coming here to the directory lets other new file a new menu resource file.

42
00:02:47,440 --> 00:02:50,380
So let's call it a draw menu.

43
00:02:50,410 --> 00:02:54,880
That's a low key button switch to the takes mode.

44
00:02:55,660 --> 00:02:57,090
Let's disclose this.

45
00:02:57,980 --> 00:03:02,380
Let's order first menu item that's the title.

46
00:03:02,660 --> 00:03:04,320
And to add that I don't mean it's strange.

47
00:03:04,370 --> 00:03:06,580
Which we need to define in string for example.

48
00:03:06,940 --> 00:03:13,160
So coming to values on string example let's create the string for our menu item.

49
00:03:13,490 --> 00:03:18,140
So let's call it a stay your home

50
00:03:21,050 --> 00:03:22,640
similarly let's add one more.

51
00:03:23,240 --> 00:03:31,090
So let's say a star about us and let's define the string us about us.

52
00:03:31,470 --> 00:03:31,900
Okay.

53
00:03:31,910 --> 00:03:34,860
Coming back to the menu eczema.

54
00:03:35,660 --> 00:03:36,890
Let's define that ideal here.

55
00:03:36,890 --> 00:03:45,170
So as your home let's define an idea say menu home let's define another menu item

56
00:03:48,160 --> 00:03:53,760
let's go by the title say SDR about us.

57
00:03:53,800 --> 00:03:58,560
Sorry it's about to use OK.

58
00:03:58,620 --> 00:04:00,530
Coming back to the menu not example.

59
00:04:00,780 --> 00:04:08,910
So about of us let's provided with an idea say menu about us.

60
00:04:09,330 --> 00:04:10,070
OK.

61
00:04:12,530 --> 00:04:16,770
So coming back to main example let's provide this menu file here.

62
00:04:16,790 --> 00:04:19,670
So which is draw our menu.

63
00:04:20,740 --> 00:04:21,330
OK.

64
00:04:21,710 --> 00:04:28,710
We need to define the gravity which tells the system from which direction this drawing needs to slide.

65
00:04:29,270 --> 00:04:34,400
So let's define that so loud gravity let's say.

66
00:04:34,910 --> 00:04:35,610
OK.

67
00:04:36,020 --> 00:04:39,890
So Android no gravity let's say.

68
00:04:39,950 --> 00:04:40,430
Start

69
00:04:43,120 --> 00:04:45,990
okay I guess we'll get ready to go.

70
00:04:45,990 --> 00:04:49,720
Let's have a look at the preview.

71
00:04:49,820 --> 00:04:52,550
Let's bring in the site.

72
00:04:52,760 --> 00:04:54,210
I'm going to select here.

73
00:04:54,210 --> 00:04:56,200
You can see there's an outline of a hue.

74
00:04:56,400 --> 00:04:58,060
So this is our draw.

75
00:04:58,260 --> 00:05:03,960
So let's close the preview coming to our main activity on Java.

76
00:05:04,170 --> 00:05:05,840
We need in stands of our draw layout.

77
00:05:05,850 --> 00:05:07,880
So let's create dot.

78
00:05:08,100 --> 00:05:10,940
So private draw out.

79
00:05:11,550 --> 00:05:12,840
Let's call a draw layout.

80
00:05:13,230 --> 00:05:14,550
Let's initialize it.

81
00:05:14,760 --> 00:05:22,140
So draw loud as a goal to find you but idea or idea and draw out.

82
00:05:22,740 --> 00:05:25,920
Let's also create an instance for navigation view.

83
00:05:26,130 --> 00:05:27,360
Let's create an idea here.

84
00:05:27,750 --> 00:05:31,970
So the let's call it now draw

85
00:05:35,440 --> 00:05:41,370
gain and just copy to so private navigation view.

86
00:05:41,990 --> 00:05:44,350
Let's call it now draw.

87
00:05:45,710 --> 00:05:46,810
Let's initialize it.

88
00:05:47,210 --> 00:05:53,380
So not draw is a goal to find new but idea dot idea and not draw.

89
00:05:54,050 --> 00:05:54,470
Okay.

90
00:05:54,470 --> 00:05:57,080
Both of our views are declared and initialize.

91
00:05:57,290 --> 00:06:01,850
So far what we've achieved is we've created a navigation draw.

92
00:06:01,910 --> 00:06:04,040
Now let's buy that hamburger.

93
00:06:04,660 --> 00:06:04,970
OK.

94
00:06:04,980 --> 00:06:09,880
So coming back to our main dot example let's provide a toolbar here.

95
00:06:10,310 --> 00:06:14,300
So toolbar with much parent hide.

96
00:06:14,480 --> 00:06:17,180
Are action bar.

97
00:06:17,360 --> 00:06:19,410
Sighs OK

98
00:06:23,400 --> 00:06:29,240
let's provide a background see color primary door.

99
00:06:29,320 --> 00:06:31,660
Let's provide a style.

100
00:06:32,680 --> 00:06:36,330
So Team overlay up combat action bar.

101
00:06:37,410 --> 00:06:37,780
OK.

102
00:06:37,790 --> 00:06:38,770
Or toolbar is ready.

103
00:06:38,770 --> 00:06:40,280
Let's go I did with an I.D..

104
00:06:40,370 --> 00:06:47,660
So I.D. toolbar and we need to change the theme of our obligation so let's go to the manifest.

105
00:06:47,730 --> 00:06:49,360
So application manifest.

106
00:06:49,690 --> 00:06:51,990
So as you can see teams let's change that.

107
00:06:52,630 --> 00:06:57,460
So team up combat light no action bar.

108
00:06:57,940 --> 00:07:01,360
So we've removed the default action bar and we've added our own.

109
00:07:01,930 --> 00:07:06,240
So let's disclose this manifest coming to the main activity.

110
00:07:06,880 --> 00:07:15,790
Let's create an instance of this toolbar so toolbar let's call it doable so find a but I.D. dot I.D.

111
00:07:15,950 --> 00:07:16,930
on board

112
00:07:19,530 --> 00:07:20,050
OK.

113
00:07:20,840 --> 00:07:22,970
So it's probably some greeting thing to shoot.

114
00:07:23,540 --> 00:07:27,640
Let's set the support action bar so set support action button.

115
00:07:27,650 --> 00:07:36,450
Let's go wider toolbar OK on it sees required support with seven toolbar.

116
00:07:36,460 --> 00:07:38,600
So it's just some import issues.

117
00:07:38,780 --> 00:07:43,660
So let's delete this and now all and import glass.

118
00:07:43,680 --> 00:07:46,050
And that's important support with event.

119
00:07:46,490 --> 00:07:48,960
OK.

120
00:07:49,450 --> 00:07:52,470
Now let's define some more things.

121
00:07:52,480 --> 00:07:56,860
So if gets a bolt action bar is not equal to no.

122
00:07:56,860 --> 00:08:00,730
We're just ticking if our action bar is present.

123
00:08:01,630 --> 00:08:12,690
So gets a bolt action bar set home is enabled through and gets a bolt action bar set up in the gate

124
00:08:12,690 --> 00:08:13,160
too.

125
00:08:13,660 --> 00:08:16,680
So here we are to provide that hamburger icon.

126
00:08:16,960 --> 00:08:18,420
So let's create that.

127
00:08:18,690 --> 00:08:23,770
So coming to resources right click new reactor asset.

128
00:08:24,130 --> 00:08:25,480
Let's click on this icon

129
00:08:28,690 --> 00:08:30,800
let's search for menu.

130
00:08:30,820 --> 00:08:31,900
This one looks good.

131
00:08:32,660 --> 00:08:35,440
OK well let's hit the next button.

132
00:08:35,710 --> 00:08:36,490
OK.

133
00:08:36,940 --> 00:08:38,780
Let's just change this names.

134
00:08:38,790 --> 00:08:42,250
Do I see menu next on finish.

135
00:08:42,850 --> 00:08:44,240
So let's close this.

136
00:08:44,260 --> 00:08:49,490
Now we can just use the drivable I see menu.

137
00:08:50,080 --> 00:08:53,500
Well our hamburger is ready so let's build our application and see

138
00:08:57,990 --> 00:08:58,330
well.

139
00:08:58,440 --> 00:09:00,550
Applications running so let's have a look.

140
00:09:01,880 --> 00:09:04,970
Well our drawers should definitely.

141
00:09:05,790 --> 00:09:08,330
But don't click is not working.

142
00:09:08,370 --> 00:09:11,450
The drawers sliding in but everything's blue why.

143
00:09:11,460 --> 00:09:12,810
So let's have a look.

144
00:09:13,560 --> 00:09:14,140
OK.

145
00:09:14,310 --> 00:09:21,690
So for the container layout Alexis Robert and Alina allow so much parent March parent orientation say

146
00:09:21,690 --> 00:09:25,820
vertical Let's drop these both things in June.

147
00:09:26,510 --> 00:09:28,770
OK now let's build it again.

148
00:09:29,520 --> 00:09:32,040
Well applications running so let's have a look.

149
00:09:32,610 --> 00:09:34,560
Now everything looks good.

150
00:09:34,680 --> 00:09:36,800
If we swipe and we can see our draw.

151
00:09:37,620 --> 00:09:41,850
Well but this is not working so let's handle this on click.

152
00:09:43,400 --> 00:09:51,570
So because this is a menu so on options item selected should do to switch.

153
00:09:52,200 --> 00:09:56,550
I do not get item I.D. case.

154
00:09:56,850 --> 00:10:00,890
So the idea for this is Android are I.D. at home.

155
00:10:01,950 --> 00:10:08,340
So what we want is whenever the user hits this button we should open the door so draw out that open

156
00:10:08,340 --> 00:10:12,810
draw let's draw the gravity which was gravity dot start.

157
00:10:14,250 --> 00:10:15,000
OK.

158
00:10:15,050 --> 00:10:20,440
And let's just return true because this function requires a boolean result.

159
00:10:20,960 --> 00:10:21,450
OK.

160
00:10:21,480 --> 00:10:23,350
Let's put a default case.

161
00:10:23,490 --> 00:10:27,720
Let's just return this Hugh Okay we're good to go.

162
00:10:28,300 --> 00:10:30,430
So let's move the application again.

163
00:10:32,430 --> 00:10:33,410
Okay.

164
00:10:33,610 --> 00:10:41,140
Now if I click you my door is open and if I click you and nothing is happening so let's handle these

165
00:10:41,140 --> 00:10:42,050
on clicks.

166
00:10:42,080 --> 00:10:44,140
So coming back to our yellow file.

167
00:10:44,920 --> 00:10:54,100
So now draw dot set navigation items like this node new navigation items like this no again let's create

168
00:10:54,100 --> 00:10:58,060
a switch so item get item idea.

169
00:10:58,670 --> 00:11:02,000
So we're just handling go and click on the basis of item items.

170
00:11:02,140 --> 00:11:08,760
So let's just call this case let through either case.

171
00:11:08,930 --> 00:11:11,750
So if you remember let's come back to this monitor.

172
00:11:11,760 --> 00:11:15,790
Example The idea for a menu items were many Roman menu about.

173
00:11:15,830 --> 00:11:17,060
So let's use these here.

174
00:11:17,390 --> 00:11:20,210
So case ordered i.e. menu home.

175
00:11:20,540 --> 00:11:21,780
Let's create a toast here.

176
00:11:22,040 --> 00:11:23,550
So those that make decks.

177
00:11:23,690 --> 00:11:26,730
That's really the context so we're not divided on this.

178
00:11:27,200 --> 00:11:30,100
Let's divide the message so.

179
00:11:30,620 --> 00:11:32,010
Home plate.

180
00:11:32,360 --> 00:11:33,950
Let's try the duration.

181
00:11:33,950 --> 00:11:45,920
So short and let's call the show function OK let's return boolean values so let's say true.

182
00:11:46,250 --> 00:11:48,860
Similarly let's define it for about us.

183
00:11:48,920 --> 00:11:53,400
So ordered i.e. not a menu about us.

184
00:11:53,660 --> 00:11:54,920
Let's create another toast.

185
00:11:54,920 --> 00:11:59,500
So make text through the context so mean activity like this.

186
00:11:59,510 --> 00:12:02,180
Let's provide the message so

187
00:12:05,220 --> 00:12:07,590
about us clicked.

188
00:12:08,010 --> 00:12:09,300
Let's do the duration.

189
00:12:09,360 --> 00:12:11,250
So in short.

190
00:12:11,860 --> 00:12:12,550
Okay.

191
00:12:15,510 --> 00:12:17,160
Let's roll the default case as well.

192
00:12:17,160 --> 00:12:19,460
So default return false.

193
00:12:20,310 --> 00:12:20,820
Okay.

194
00:12:20,850 --> 00:12:27,990
So we've handled complex let's run our application again both the applications running so let's have

195
00:12:27,990 --> 00:12:28,550
a look.

196
00:12:29,130 --> 00:12:29,940
Let's click here.

197
00:12:30,330 --> 00:12:32,530
Let's click on home and say home click.

198
00:12:32,550 --> 00:12:33,150
Let's try.

199
00:12:33,150 --> 00:12:34,550
About us.

200
00:12:34,560 --> 00:12:35,940
This is about us clicked.

201
00:12:36,540 --> 00:12:39,840
Well the only thing missing here is a header so that's that as well.

202
00:12:39,990 --> 00:12:41,730
So let's create allowed for header.

203
00:12:42,480 --> 00:12:48,160
So going to resources layout right click new resource file.

204
00:12:48,330 --> 00:12:51,880
So let's call it a draw header.

205
00:12:52,120 --> 00:12:53,720
That's the key button.

206
00:12:54,110 --> 00:12:56,140
So that small and close this.

207
00:12:56,670 --> 00:13:00,090
Let's get rid of this constraint layout let's call it to a linear layout.

208
00:13:00,720 --> 00:13:03,720
Let's go out with an orientation C vertical.

209
00:13:03,720 --> 00:13:06,030
That's what I did with a background color.

210
00:13:06,270 --> 00:13:07,960
Say primary dark.

211
00:13:09,030 --> 00:13:16,020
That's provided with a TextView with match variant or with wrap content and high drop content.

212
00:13:16,020 --> 00:13:17,560
I'll just tell you why I did that.

213
00:13:17,950 --> 00:13:21,560
So Ida we don't need an idea here for now.

214
00:13:21,720 --> 00:13:23,310
Let's provide a string for this.

215
00:13:23,550 --> 00:13:25,280
So strings dot example.

216
00:13:26,310 --> 00:13:28,830
So SDR welcome.

217
00:13:29,160 --> 00:13:35,850
So let's pull the string welcome view you coming back to the header load example let's throw the welcome

218
00:13:35,850 --> 00:13:36,390
string here.

219
00:13:36,390 --> 00:13:37,650
So string welcome.

220
00:13:38,430 --> 00:13:50,460
Okay let's change the color so text color say Android color white and let's let's check the preview.

221
00:13:50,970 --> 00:13:55,160
So as you can see the welcome is on the top.

222
00:13:55,250 --> 00:14:05,700
So let's bring it in the center so gravity center and let's change the height to say on grid DP.

223
00:14:06,010 --> 00:14:06,860
This looks good.

224
00:14:07,120 --> 00:14:13,500
So let's close this on coming to the main for example let's throw away the header layout here.

225
00:14:13,510 --> 00:14:18,270
So that allowed the name of the head allowed us draw header.

226
00:14:18,960 --> 00:14:22,090
Well everything's all set so let's run our application and see

227
00:14:24,770 --> 00:14:27,440
well the applications running so let's have a look.

228
00:14:28,460 --> 00:14:29,070
OK.

229
00:14:29,700 --> 00:14:31,380
Well the header is also here.

230
00:14:32,460 --> 00:14:35,820
Well that's all for navigation draw folks.

231
00:14:35,850 --> 00:14:39,100
If you have any issues any doubts feel free.

232
00:14:39,100 --> 00:14:42,060
Robert Coleman and we'll go through it again.

233
00:14:42,160 --> 00:14:42,610
And bye.