Navigation Drawer with Fragments Part 1 – MENU AND ACTIVITY THEME – Android Studio Tutorial

Hey guys.

In the next couple of videos we are going to learn how to implement a navigation drawer into our app with which we can switch between differentfragments We will build this navigation drawerfrom a scratch and I will split it up into 3 differentparts because there are quite a few stepsnecessary In part one we will make some preparations We will add the necessary dependency create these icons and the menu file and make some changes to our activitytheme In part 2 we will then create the navigationdrawer itself and in part 3 we will handle clickevents on our icons here and open our fragments In the description box under eachvideo you will find the link to the code forthis example And I will release the remaining partsin the next couple of days Okay, let's start First we have to add the dependencyfor the design support library Because this contains the navigationdrawer So we go into our build.

gradle filewith “(Module: app)” in its name And here at the bottom, we add this dependency For this we copy this copy this “appcompat”dependency completely with the “implementation”part Paste it one line below And we change the “appcompat-v7″ to”design” Make sure to change the “v7” as well “design” We keep the version number the same aswe have up here And when we have added this we click”Sync Now” Wait a short moment And when it's finished syncing we areready to go Now Android Studio also offers a ready-made navigation drawer activity, which you can findwhen you right click on your package Go to “New” -> “Activity” and here you can find “NavigationDrawer Activity” When you click this you will get an activity completely with the navigationdrawer and all the necessary code and it will look pretty similar to theone we are going to build But this navigation drawer won't openfragments And also if you don't know what each ofthe files does it can be very confusing so it's better to learn it by buildingit from scratch So we will skip this And implement this into our emptyactivity First we start with our icons So we open our “res” folder here open “drawable” and we right-click on “drawable” go to “New” and here we click on “Vector Asset” Then this window opens and here we click on this icon And then we can choose from a lot ofdifferent icons And you can choose whatever icons youwant I'm gonna choose the same one as I hadin the example The first one was this mail icon here Okay And I will slightly change the name to”ic_message” Because this is what the menu item in our navigation drawer will say Click “Next” And here on “Finish” And now we find our icon in this “drawable”folder here And I will now create 4 more icons but I will skip it in this video because you can just create them thesame way as we did for our message icon here Okay.

Now I have 5 different icons for our 5 menu items Next we have to prepare a menu file because this is what will get ouritems into our navigation drawer For this we first have to create a “menu” folderSo we right-click on “res” Go to “New” And here we create a new”Android resource directory” From this drop-down menu herewe choose “menu”, which automatically changes the directoryname We keep the rest as it is and click on”OK” Now we have this “menu” folder here We right-click on it And create a new “Menu resource file” And I'm gonna give it a name “drawer_menu” We click “OK” Down here we switch over to the “Text”tab And in here we will put all the menufiles that we want to show in our navigation drawer We put them between those “menu” tagshere And first we create a group and add the attribute “checkableBehavior” and set this to “single” This will make sure that we can onlyselect one menu item from the items that are within thisgroup We make a closing angle bracket And in between here we put differentmenu items We write “

” And in here I put 2 more items “

” and here we have with 3 items And this bottom part here will create aseparate section This section will have a verticalline And then the text “Communicate” From the 3 items at the top we canselect 1 It will open a fragment and it will stayselected From the icons from at the bottom wecan click them, they will trigger an action, but theywon't stay selected You can see that in this example These items here stay selected when wechoose them But those ones here only triggeran action A Toast message in this case But they won't stay selected And here we have this vertical line andthe “Communicate” text Okay, back into our project I'm gonna press [Ctrl + Alt + L] to rearrangethose attributes here and now it looks like this Now what can we also do is we can go up here in the first “menu” tag Go before this closing angle bracket and write “tools:” If this is red, we press [Alt + Enter] Then it adds this “xmlns:tools=.

.

.

“attribute here And then we can type in “showIn” in camel case with a capital 'I' =” ” and then we type in “navigation_view” And as you can see it changes the viewto the one we will see in our navigationdrawer This is not necessary, because this isjust for this preview window here If you can't see this preview in yourAndroid Studio then you can go up here to “Build” click on “Rebuild Project” And then you have to wait a short moment and then it should show this preview here properly Okay, and now also have to change ouractivity theme to get rid of the default action bar Because our navigation drawer shouldappear in front of the action bar But this is not possible with the default action bar.

So we have to remove it and implement a ToolBar instead A ToolBar is basically a more flexibleversion of the action bar For this we have to first get rid of thedefault action bar So we go into our “values” folderhere And open “styles.

xml” And now you have 2 different options:you can either remove the action bar for thewhole app For this you change the part up here to “Light.

NoActionBar” This will remove the action bar for allactivities And this is also the easiest way to dothis If you just want to remove the actionbar from one particular activity like we will do in this example, thenwe revert this And instead, create a separate style This is not very complicated We write “

NoActionBar” Close this with a closing angle bracket And in here we add 2 attributes: “

xml” Here we search for our “.

MainActivity” And before this closing angle bracket we add another attribute “android:theme” and here we search for “@style/AppTheme.

NoActionBar” And now this will remove the action baronly for this particular activity The other activities will keep their action bar.

Because they are set to this”AppTheme” Okay, that's it for part 1 In thenext video we will then create the navigationdrawer itself With the layout and everything So don't forget to subscribe to thechannel to not miss that And if this video was helpful, pleaseleave a like Take care.

.

Hãy bình luận đầu tiên

Để lại một phản hồi

Thư điện tử của bạn sẽ không được hiện thị công khai.


*