1 00:00:00,530 --> 00:00:07,130 Welcome back and this video and the next and probably the second next, so the next two or maybe three 2 00:00:07,130 --> 00:00:12,450 videos, we are going to set up this functionality here where you can swipe something from the left. 3 00:00:12,470 --> 00:00:16,400 Well, it's a little more difficult with the most under it is on the actual device. 4 00:00:16,790 --> 00:00:24,020 So you can open up this setting here or this drawer in which you can then go to profiles, sign out 5 00:00:24,020 --> 00:00:25,970 and then potentially add more stuff later on. 6 00:00:26,150 --> 00:00:29,840 And we can also see the currently the name of the application. 7 00:00:29,840 --> 00:00:33,670 Later on, it will be replaced by the username and then also the user image. 8 00:00:33,680 --> 00:00:35,390 So that's the idea of this feature. 9 00:00:35,600 --> 00:00:42,440 And of course, we will also have this little burger icon, which also adds this functionality or opens 10 00:00:42,440 --> 00:00:43,550 up this drawer. 11 00:00:43,980 --> 00:00:47,090 OK, so this will take quite some time to set up. 12 00:00:47,090 --> 00:00:51,070 So be prepared for quite some XML stuff and then also some coding. 13 00:00:51,080 --> 00:00:53,960 So in this video, we are going to start with all of the XML stuff. 14 00:00:53,960 --> 00:00:58,520 And I think in the next one we should be at the point where we can start with the Cotlar and stuff so 15 00:00:58,520 --> 00:01:03,560 that it will be displaying also when using this icon button here. 16 00:01:04,280 --> 00:01:04,720 All right. 17 00:01:04,730 --> 00:01:05,519 So let's get started. 18 00:01:05,540 --> 00:01:08,720 Let's go to our activity main and hear. 19 00:01:08,720 --> 00:01:14,240 What we can do is we can just take all of the code and put it into a separate file. 20 00:01:14,250 --> 00:01:21,140 So we're going to use this file called Main on the score content XML and then paste it in here. 21 00:01:21,150 --> 00:01:28,520 So instead of having our Hello World TextView, which will later on be replaced, of course, with our 22 00:01:28,520 --> 00:01:33,530 recycle of you, instead of having that in our activity main XML, we are going to have that in the 23 00:01:33,530 --> 00:01:34,350 main content. 24 00:01:34,730 --> 00:01:39,680 OK, so the activity in XML will be our entry point, so to speak, to the activity. 25 00:01:39,680 --> 00:01:44,090 But in here we are going to then prepare everything else. 26 00:01:44,100 --> 00:01:46,720 So we're going to send to the different files, of course. 27 00:01:46,940 --> 00:01:48,950 So it's not going to be everything in one file. 28 00:01:48,950 --> 00:01:50,630 It's going to be in multiple files. 29 00:01:51,080 --> 00:01:57,110 OK, so if we look at it, we have multiple aspects of our application, multiple parts of our application. 30 00:01:57,380 --> 00:01:59,260 So we have this top part here. 31 00:01:59,260 --> 00:02:04,780 Then we have this menu here, then we have an ad part, then we have a content main. 32 00:02:05,060 --> 00:02:07,670 So we have a bunch of different sections. 33 00:02:07,680 --> 00:02:10,960 And of course, this here is a navigation draw. 34 00:02:10,970 --> 00:02:13,700 So a lot of stuff that we use here. 35 00:02:15,560 --> 00:02:22,820 So let's start with this one where I'm using a drawer layout, so here drawer layout and inside of this 36 00:02:22,840 --> 00:02:30,020 draw a layout, I of course, need to add some more settings, for example, the name spaces and so 37 00:02:30,020 --> 00:02:30,230 forth. 38 00:02:30,230 --> 00:02:32,710 So I'm just going to put that in here and talk about it. 39 00:02:32,990 --> 00:02:36,030 So we have the names spaces and this one is never used, but it's OK. 40 00:02:36,710 --> 00:02:39,770 So we have the name spaces, the tools and then. 41 00:02:40,700 --> 00:02:48,230 We give this draw out and Edem, so our whole activity is going to be a draw layout, then it's going 42 00:02:48,230 --> 00:02:53,990 to have the idea that's going to match parent and Highton with and I'm setting the FETs system windows 43 00:02:53,990 --> 00:02:54,560 to true. 44 00:02:54,890 --> 00:02:59,290 What that will do is it will allow us to uh yeah. 45 00:02:59,720 --> 00:03:01,540 Adjust the UI accordingly. 46 00:03:01,550 --> 00:03:07,280 So it's just going to adjust view layout based on system windows such as the status bar. 47 00:03:07,910 --> 00:03:09,950 OK, so that's what we're doing here. 48 00:03:10,580 --> 00:03:14,700 Then we set the draw to be open in the settings. 49 00:03:14,810 --> 00:03:20,510 Of course we don't see anything yet because the drawer is empty, but we will of course add stuff in 50 00:03:20,510 --> 00:03:21,230 here now. 51 00:03:22,050 --> 00:03:23,760 OK, so let's do that. 52 00:03:25,030 --> 00:03:30,550 First of all, I'm going to include something I'm going to include in you file, which is going to be 53 00:03:30,550 --> 00:03:31,300 lay out. 54 00:03:32,730 --> 00:03:39,840 And you don't have this file yet, so you will need to create it Atalay out at Balmain, OK, so you 55 00:03:39,840 --> 00:03:41,130 can just enter this and then. 56 00:03:41,130 --> 00:03:44,520 Right, click or click on it and create this file. 57 00:03:46,330 --> 00:03:47,930 So this is what we're going to include. 58 00:03:47,950 --> 00:03:54,580 It's the same thing as we will later on inside of this file do in order to get to main content to be 59 00:03:54,580 --> 00:03:55,690 displaying as well. 60 00:03:57,520 --> 00:04:06,370 Now we need to give it a heightened with for this bailout, so let's do that real quick with each parent, 61 00:04:06,720 --> 00:04:12,880 each parent, and then inside of my drawer, lay out underneath this include what I would like to have 62 00:04:12,880 --> 00:04:16,480 as a navigation view, navigation. 63 00:04:16,480 --> 00:04:20,459 So open navigation view. 64 00:04:21,160 --> 00:04:26,530 So this one here and it also needs a with I'm going to use for content and to hide. 65 00:04:26,530 --> 00:04:29,470 I'm going to use my parent here for the height. 66 00:04:31,450 --> 00:04:39,700 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 67 00:04:39,700 --> 00:04:41,260 Nadaf underscore view. 68 00:04:43,300 --> 00:04:51,010 Then I'm going to give it some gravity, going to say that system is also going to be like the other 69 00:04:51,010 --> 00:04:51,940 setting that we had. 70 00:04:51,940 --> 00:04:54,130 So it's system windows set to true. 71 00:04:54,520 --> 00:05:01,220 And then what I also need to have in here I want to have in here is the header layout. 72 00:05:01,330 --> 00:05:05,830 So there is this header layout and therefore I create a new file. 73 00:05:06,400 --> 00:05:15,220 So add layout naff header main and you can type in the whole text and then also also create this file 74 00:05:15,220 --> 00:05:17,940 once you have entered this, because it will appear as an arrow. 75 00:05:18,280 --> 00:05:19,630 So create this file. 76 00:05:21,640 --> 00:05:29,500 And then I need a menu, so I have a menu and this one will be mine, my activity main draw. 77 00:05:29,530 --> 00:05:36,220 So you also need to create this file, so just enter at menu activity, main draw and then to create 78 00:05:36,220 --> 00:05:37,900 that once you hover over it. 79 00:05:39,930 --> 00:05:45,570 So in your case, it will just be read right like here, and then you can hover over it and say create 80 00:05:45,570 --> 00:05:50,370 me new resource file activity, main draw, just do it as is. 81 00:05:50,370 --> 00:05:52,770 And then you see it will create this menu for you. 82 00:05:54,100 --> 00:05:59,440 And it will also create this new menu folder in which the activity main draw now will be. 83 00:05:59,740 --> 00:06:06,730 So now that we have included that we can go to our app Balmain and design that and we can design the 84 00:06:06,730 --> 00:06:14,680 activity main draw, then we can design the NAF Heider main and then we can go over to our main content 85 00:06:14,680 --> 00:06:15,100 as well. 86 00:06:15,130 --> 00:06:20,440 So this one, well actually we have designed that one as well already, even though we still, of course, 87 00:06:20,440 --> 00:06:23,980 need to put a lot of you in there later on. 88 00:06:24,220 --> 00:06:26,590 Phrenologists, this content which says hello world. 89 00:06:26,590 --> 00:06:26,830 Right. 90 00:06:26,830 --> 00:06:33,340 But later on it should be, of course, a list view or a recycled view which displays all of the different 91 00:06:33,790 --> 00:06:36,640 boards that we are assigned to or that we have created. 92 00:06:37,270 --> 00:06:42,000 OK, so now let's go to our app, our main here. 93 00:06:42,010 --> 00:06:45,880 What I want to have is an app bar layout. 94 00:06:46,120 --> 00:06:50,020 So let's create an app bar layout. 95 00:06:51,730 --> 00:06:56,080 And it's going to match the parent in with and rip the content and hide. 96 00:06:58,570 --> 00:07:01,150 Also, I'll give it a theme so. 97 00:07:02,080 --> 00:07:11,110 Theme will be at style, and I'm not sure whether we have it here, so it's going to be an up theme. 98 00:07:12,670 --> 00:07:20,640 Well, let's just do it like this theme and then it's not no action bar, but it's up bar over life. 99 00:07:22,010 --> 00:07:25,010 All right, so we will need to also create this style. 100 00:07:26,370 --> 00:07:29,870 So let's go over and create this, so create value. 101 00:07:31,740 --> 00:07:39,160 And I'm just going to create it like this and let's go over to our values here in the resources folder 102 00:07:39,180 --> 00:07:42,390 there, we'll go to Styles and now we have this HEPA overlay. 103 00:07:42,630 --> 00:07:53,280 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 104 00:07:53,880 --> 00:07:55,140 DARG action bar. 105 00:07:56,580 --> 00:07:57,390 And. 106 00:07:58,900 --> 00:08:01,390 Here, Dark Dot Action Bar. 107 00:08:03,880 --> 00:08:09,410 OK, so this is just the style for now, we can, of course, then added to style as we want. 108 00:08:09,430 --> 00:08:14,530 So for now we just take the parent of a theme overlay, a computer action bar. 109 00:08:14,530 --> 00:08:18,160 But if we want later on, we can style it even more in here. 110 00:08:18,730 --> 00:08:19,200 All right. 111 00:08:19,510 --> 00:08:26,050 And while we're in here, let's also create another style, which will be the pop up overlay, which 112 00:08:26,050 --> 00:08:28,570 we're going to use later on, which is going to be this one. 113 00:08:28,580 --> 00:08:34,630 So theme pop up overlay and we'll have the parent or theme overlay combat lite. 114 00:08:38,090 --> 00:08:46,180 OK, so now we can use it in here in our at Balmain and then the next thing we need to set up here, 115 00:08:46,190 --> 00:08:46,760 of course. 116 00:08:48,390 --> 00:08:54,980 There's going to be a toolbar, so let's go ahead and create a toolbar in there inside of this bar layout. 117 00:08:55,290 --> 00:08:57,900 And by the way, you can see it's still complaining here. 118 00:08:58,330 --> 00:09:00,870 That is because probably it doesn't have a content. 119 00:09:01,230 --> 00:09:08,670 So let's just add the content and see if the bug or if there are this appears so Android X app, comput 120 00:09:09,480 --> 00:09:10,830 widget toolbar. 121 00:09:11,010 --> 00:09:12,940 So that's the one I want to use in there. 122 00:09:13,410 --> 00:09:15,000 And now let's design it. 123 00:09:15,000 --> 00:09:15,990 So let's give it an idea. 124 00:09:15,990 --> 00:09:18,660 First, the idea will be toolbar. 125 00:09:20,400 --> 00:09:32,010 On the score or tool bar underscore main activity, then the layout with will be much apparent, the 126 00:09:32,010 --> 00:09:37,380 layout height will be just the height of the action bar size, so. 127 00:09:39,060 --> 00:09:40,830 Maybe you can remember how to do it. 128 00:09:40,860 --> 00:09:42,390 We get to attribute. 129 00:09:43,330 --> 00:09:50,860 And then we used the action part size, so we say it should be as high as the action bar and then we 130 00:09:50,860 --> 00:09:53,480 can also assign a background color if we want to. 131 00:09:53,500 --> 00:09:59,350 So I'm just going to say it should use the attribute called color primary. 132 00:10:01,380 --> 00:10:02,340 And then finally. 133 00:10:03,470 --> 00:10:06,650 I'm going to add a pop up theme. 134 00:10:09,000 --> 00:10:14,310 And here we need to import Ebbe, so let's create the namespace declaration here at the top. 135 00:10:14,320 --> 00:10:21,060 You can see it edited now for us and I can use pop up theme, which will be our style. 136 00:10:22,830 --> 00:10:26,070 And here it's the pop up overlay style that we created. 137 00:10:27,860 --> 00:10:28,430 All right. 138 00:10:30,280 --> 00:10:35,050 And here, the complaining, well, because it needs their constraints, but I don't want to add all 139 00:10:35,050 --> 00:10:40,570 of those constraints in here, I'm just going to replace the constraint layout with a coordinator, 140 00:10:40,570 --> 00:10:44,320 layout coordinator layout just like that. 141 00:10:45,130 --> 00:10:45,640 All right. 142 00:10:47,380 --> 00:10:51,490 So this will be our high bar, the one here at the top. 143 00:10:52,120 --> 00:10:52,600 All right. 144 00:10:54,240 --> 00:11:00,330 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 145 00:11:00,330 --> 00:11:01,380 a constraint layout here. 146 00:11:01,380 --> 00:11:03,570 I'm just going to use a linear layout. 147 00:11:05,000 --> 00:11:13,640 This makes my life a lot easier in this case, so what I will need in here is a background, so I'm 148 00:11:13,640 --> 00:11:18,950 just going to use a background of never had her main background. 149 00:11:19,070 --> 00:11:21,560 So at drawable. 150 00:11:23,370 --> 00:11:30,480 Slash on the score heter underscore main on the score background, so we will need to create this file 151 00:11:30,480 --> 00:11:35,750 as well or we will need to import it, which is just going to be another XML file. 152 00:11:36,090 --> 00:11:39,600 Then I want this to be gravitating towards the bottom. 153 00:11:39,870 --> 00:11:45,840 So gravity bottom, then orientation is going to be vertical. 154 00:11:45,990 --> 00:11:51,540 So that stuff is put on top of each other and then the theme is going to be our theme overlay. 155 00:11:53,660 --> 00:11:57,050 Which is going to be the dark version, so dark. 156 00:12:00,030 --> 00:12:05,940 So basically, this NAF Haramain is going to take care of this part here at the top, so I want this 157 00:12:05,940 --> 00:12:08,520 to be this background, which is this. 158 00:12:09,790 --> 00:12:18,580 Well, background that you can see here, so there's a gradient and then I want to have, of course, 159 00:12:18,580 --> 00:12:23,330 the icon, which is the rounded icon, and then a text underneath with. 160 00:12:23,800 --> 00:12:27,220 So how do we add rounded icons? 161 00:12:27,790 --> 00:12:30,760 Well, we need to add another dependancy. 162 00:12:31,090 --> 00:12:35,440 So we've worked with this dependancy before when we worked with rounded icons. 163 00:12:35,440 --> 00:12:40,610 So we will need to go to our cradle and address a certain line to it. 164 00:12:40,630 --> 00:12:41,920 So let's go over. 165 00:12:43,010 --> 00:12:46,280 Bill Gradle and at the implementation here. 166 00:12:47,610 --> 00:12:54,870 Which is this implementation, so I don't have circle image for you three dot 1.0. 167 00:12:56,060 --> 00:12:58,280 And, of course, don't forget to sync it. 168 00:13:00,040 --> 00:13:06,070 So at this point, I totally understand that this is or this might be a little confusing how I'm creating 169 00:13:06,070 --> 00:13:10,900 all of these different XML files in so many different examples which are interlinked with each other 170 00:13:10,900 --> 00:13:11,700 and so forth. 171 00:13:12,010 --> 00:13:19,900 But in the end, if you look at this screen here, we have an bar, then we have a main content, this 172 00:13:19,900 --> 00:13:25,000 part here, which we can design however we want, but we don't want to have all of those different things 173 00:13:25,480 --> 00:13:32,680 open at the same time, because we also have this whole UI or whole XML file, which consists of two 174 00:13:32,680 --> 00:13:33,480 XML parts. 175 00:13:33,480 --> 00:13:37,750 So the top part and then this one here is a menu with different items. 176 00:13:38,080 --> 00:13:43,080 OK, so we have this menu with different items which we haven't designed yet. 177 00:13:43,090 --> 00:13:48,100 So Activity Manger XML, which is this one here with the menu in the background where we will need to 178 00:13:48,100 --> 00:13:49,270 add those two things here. 179 00:13:49,540 --> 00:13:54,780 And then we have this top part, which is what we have already prepared. 180 00:13:54,790 --> 00:13:58,030 So this never haramain, this is going to be the one. 181 00:13:58,270 --> 00:14:04,120 And then, yeah, that's how those all of those XML files come together. 182 00:14:04,960 --> 00:14:05,500 All right. 183 00:14:05,500 --> 00:14:06,950 So let's make a little break here. 184 00:14:07,210 --> 00:14:13,900 It is a lot of XML, and it really makes sense for me to go through it this time a little more in-depth, 185 00:14:13,900 --> 00:14:19,930 because we have skipped a lot of XML before, but we haven't ever used a draw such as this one. 186 00:14:19,930 --> 00:14:23,990 So I think it makes sense to really go over this a little more in depth. 187 00:14:24,250 --> 00:14:30,250 So let's go ahead and finish the XML part in the next video and then afterwards we're going to add the 188 00:14:30,670 --> 00:14:31,300 codling code. 189 00:14:31,570 --> 00:14:32,010 All right. 190 00:14:32,030 --> 00:14:32,800 So see you there.