Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Add a Hamburger Menu Button

Usually, a navigation drawer can be controlled using a hamburger menu button that's present in the toolbar. In this lesson, you'll learn how to manually create such a button.

2.4 Add a Hamburger Menu Button

Although we have a navigation drawer in this activity there is no indication that it exists. In this lesson we are going to add a hamburger button to our toolbar, which will let the users know that a navigation drawer is available. The user will also be able to press the button to open the navigation drawer. Start by going to the main activity class and creating member variables for the DrawLayout And the NavigationView. Initialize both of them inside the onCreate method using findViewById. To add the hamburger button to the toolbar you need to first get a reference to the support action bar using the getSupportActionBar method. Next, called the setHomeAsUpIndicator method and pass the IC menu drawable to it. Additionally, call the setDisplayHomeAsUpEnabled method and pass true to it. To make the hamburger button clickable, you must go to the onOptionsItemSelected method. Here, you can remove this if condition because it is no longer necessary. And then, add a new if condition to check if the item Id is equal to This is the Id of the hamburger button. So if the user presses it, the navigation drawer should open. Therefore, call the drawer.openDrawer method and pass GravityCompat.START to it. You can now see that a hamburger button is present in the toolbar. If you click on it, the navigation drawer opens. The menu items inside the navigation view don't work just yet. So, if you click on them nothing really happens. Let's fix that now. To make them work, all you need to do is add a click handler to the navigation view and reset the value of the site variable. So you can delete this logic, which is not necessary anymore and call the setNavigationItemSelectedListener method of the navigation view. Pass a new on NavigationItemSelectedListener object to it. Here, change this to return true. And then set the value of the site variable to item.getTitle, and call updateScreen so that the list of questions is refreshed. Additionally, we want the navigation drawer to close automatically once the user has selected an item. Therefore, call the closeDrawers method of drawer layout here. Let's also highlight the selected item. So, call the setChecked method of the item object and pass true to it. You must have noticed that the color of the hamburger icon is black, and it doesn't really go well with the rest of the theme. So, let us now change its color to white. Doing that is easy because the hamburger icon is a vector asset, which means it is just an XML file. Here, all you need to do is to change the fill color to hash #FFFFFF, which is hex for white. Run the app again. Our hamburger button matches the theme now. If you click on a site here the app now shows questions from that site. Let's make a few more tiny changes before you move on to the next lesson. By default, this app shows questions from Stack Overflow. However, the Stack Overflow site is not highlighted in the menu by default. To fix this, just open menu_site.xml. Here, add a checked attribute to the Stack Overflow item and set its value to true. Next, the overflow menu still has this site option. This can be safely removed now because our navigation drawer is fully functional. So I go to mai_menu.XML and just delete the sites option. In this lesson, you learned how to create a hamburger menu button that can control a navigation drawer. You also learn how to highlight items in the navigation view. Thanks for watching.

Back to the top