Simple how-to-do left side navigation drawer with toolbar and items in it which are clickable and move you to another activity (screen), or whatever you like to do with them.

First we will need a Home Activity (screen) and Home Activity layout for holding the navigation drawer layout, items in it, and toolbar (if needed, in my example the toolbar is included)

This is the Home Activity layout – src\main\res\layout\activity_home.xml

As you can see, the whole layout is declared as widget Drawer Layout so it can be slide from side (in this example is the default left side) including the widget Navigation Drawer (more important to us) which is holding the items in the menu that we declare in new xml layout file navigation_drawer.xml* and header image drawer_layout_header.png. In it we have Linear Layout set to vertical orientation for holding the item in the Drawer. (News, Birthday, Location… in my example). We are including the Toolbar.xml in this layout. Why? Well will need the toolbar in another activities, so to simplify life, we will not use the same code copy-paste style over and over again, we are using this simple tag INCLUDE, and the toolbar is there. And in future if we want to change (for some reason) the toolbar, we can do it just from one place, not all over the layouts. The Frame Layout is for displaying the fragments** (not new activity screens, but showing new screens in this Home Activity, using as fragment holder).

**In the Home Activity will show the fragments for the items in the Navigation Drawer, for example, when we click on Location, there is no new Activity, but we are using this Home Activity for showing the fragment, or in another words, optimizing code and hardware resources, fast viewing, no messy delays, but for fragments in another chapter more detailed.

*src\main\res\menu\navigation_items.xml that we include in the Navigation View so it can display our items. The names for the items are declared in the strings.xml default file. The icons for the items are separate .png files added to drawable folder.

1.1 Here is the Toolbar.xml we include – src\main\res\layout\activity_home.xml

Id is toolbar so we know what we looking for when we include, the width is “match_parent” so it fill the screen horisontaly, height is default for action bar size, background is my color Primary set in colors.xml, theme style is AppTheme in styles.xml, and the color for the toolbar text is set to color White. I have a button in my example with action edit icon..

The Home Activity functionality java code

– src\main\java\…(your package and app name)…\ui\screen\home\HomeActivity.java

-Before explaining the functionality, I must remind you that im using the ButterKnife library for findViewById(R.id….whatever) and binding this views in onCreate(), less messy, less code, works fine. Here is the link to the library:

http://jakewharton.github.io/butterknife/

(using this dependency in build.gradle compile ‘com.jakewharton:butterknife:8.6.0’)

@BindView to declare the views (toolbar, drawer layout and navigation view) and ButterKnife.bind(this) in onCreate() so it can be initialized. (more on this ButterKnife library)

In onCreate() we initialize the configured Navigation Drawer for the items in it by calling the configureNavigationDrawer(), so when we click on item, that fragment is called and showed on screen. We include the navView….Listener() so it can select with if –else if statement for selecting the fragment layout by id which is integer defined by the R.id.some_layout_for_item. That’s how the drawer knows which item is selected. Same can be achieved with switch – case control flow statement.

In onCreate() also we are calling the configureToolbar() for the toolbar to be set and visible.

Here we have several @Overriden methods like onCreateOptionsMenu(), after onCreate() called, we give the xml for menu (res/menu/search_menu.xml***) for the right side of the “toolbar” like options, settings, (three vertical dots)

@Overriden onOptionsItemSelected() is for the options menu item selection

@Overriden onBackPressed I have set not to exit the app but to close the drawer if opened:

If(navigation drawer is opened when back is pressed) {drawer close} else {exit app}

***onCreateOptionMenu() layout – res/menu/search_menu.xml (folder menu is created manually)

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *