Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NavigationView and ActionBarDrawerToggle

With the new NavigationView is it still recommended to use ActionBarDrawerToggle or is this not "Material Design"? For instance previously we were supposed to hide action bar items when the drawer was opened but now the guidelines say that they should stay.

like image 822
Jeremy Avatar asked Jun 01 '15 18:06

Jeremy


People also ask

What is NavigationView in Android?

com.google.android.material.navigation.NavigationView. Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file. NavigationView is typically placed inside a DrawerLayout .

What is DrawerLayout?

DrawerLayout acts as a top-level container for window content that allows for interactive "drawer" views to be pulled out from one or both vertical edges of the window.

What is drawer menu?

The navigation drawer is a UI panel that shows your app's main navigation menu. The drawer appears when the user touches the drawer icon in the app bar or when the user swipes a finger from the left edge of the screen.


2 Answers

With the new NavigationView is it still recommended to use ActionBarDrawerToggle

No, it's not required.

If you look at the "official" demo code for the new Design Library, ActionBarDrawerToggle is no longer used, since the new NavigationView and AppCompatActivity don't really need it.

With the new v22 support library, you can strip out all of your ActionBarDrawerToggle code and just use the following to handle the interaction between NavigationDrawer and the ActionBar/ToolBar hamburger icon:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    final ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    actionBar.setDisplayHomeAsUpEnabled(true);
    ...
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            return true;
        ....
    }
    return super.onOptionsItemSelected(item);
}

You will need to provide your own "hamburger" drawable (R.drawable.ic_menu in my example). Besides that, the above code is all that's needed to handle opening of the drawer. The android.R.id.home case in onOptionsItemSelected() represents your hamburger drawer button. It points to a built-in resource id (not something you add to you menu xml), and it's handled automatically.

Besides that, you have to implement closing of the drawer by simply adding closeDrawers() to your click listener, like this:

navigationView.setNavigationItemSelectedListener(
    new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            // Handle menu item clicks here.
            drawerLayout.closeDrawers();
            return true;
        }
    });

closeDrawers() is a method of DrawerLayout, and takes care of everything. That's it. That's all the code you really need to properly handle navigation drawers now. No more messy code for flipping hamburgers and such!

Of course, if you really want to, you can still use NavigationView with ActionBarDrawerToggle the old way. But you certainly don't have to.

If you want drawer callbacks

Even though ActionBarDrawerToggle is not required to open/close the drawer, it may still be useful for handling additional callbacks (especially if you're using ActionBar already). Otherwise, you can implement your own by using DrawerLayout.DrawerListener or by using DrawerLayout.SimpleDrawerListener(), to handle other open/close related events.

like image 127
hungryghost Avatar answered Sep 28 '22 08:09

hungryghost


With the new NavigationView is it still recommended to use ActionBarDrawerToggle

Yes. The two tackle two completely different aspects of the navigation drawer.

In total, there are generally three components to a navigation drawer:

  • A DrawerLayout
  • Your navigation drawer content
  • A method of showing and hiding the drawer

The DrawerLayout is the layout that holds the navigation drawer content and your app's content. It is what allows you to pull the drawer in from the side and display the drawer over your app's content (the first child of the DrawerLayout).

Your navigation drawer content (the second child of your DrawerLayout) is typically a list of items that the user can click on. Previously, most implementations that I have seen used a ListView or a RecyclerView and maybe a header of some sort. NavigationView is a replacement for this, and is used to provide Material-compliant drawer contents.

ActionBarDrawerToggle is used to provide the hamburger icon in your app bar. It is what allows your users to tap on the icon to open or close your drawer.

like image 35
Bryan Herbst Avatar answered Sep 28 '22 08:09

Bryan Herbst