Appcompatv7 - V21 Navigation Drawer Not Showing Hamburger Icon

Appcompatv7 - v21 Navigation drawer not showing hamburger icon

You need to call

mDrawerToggle.syncState();

Toolbar Navigation Hamburger Icon missing

If you want to use the same drawer as lollipop then let me tell you that's not a static image. That image is drawn in real time by a class called DrawerArrowDrawableToggle. So there is no "hamburger" icon for that.

However if you want the hamburger icon with no animation you can find it here:

https://material.io/tools/icons/?icon=menu&style=baseline

Hamburger Icon does not show in Navigation Drawer Fragment

I had this problem as well. For me, importing android.support.v7.app.ActionBarDrawerToggle instead of android.support.v4.app.ActionBarDrawerToggle fixed it. You also have to remove the R.drawable.ic_drawer argument when you define mDrawerToggle:

mDrawerToggle = new ActionBarDrawerToggle(
getActivity(),
mDrawerLayout,
R.string.navigation_drawer_open,
R.string.navigation_drawer_close
)

If that doesn't work, try some of the answers to this question.

Hamburger icon missing on custom toolbar, but tapping upper left corner opens drawer

I fixed this problem by:

1. Wrapping my Toolbar in an AppBarLayout, like this:

   <android.support.design.widget.AppBarLayout
       android:id="@+id/app_bar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:theme="@style/AppTheme.AppBarOverlay">
   
       <android.support.v7.widget.Toolbar
           android:id="@+id/custom_toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:popupTheme="@style/AppTheme.PopupOverlay"
           app:theme="@style/AppTheme.AppBarOverlay"/>
   
   </android.support.design.widget.AppBarLayout>
   

2.I placed the AppBarLayout directly as a child of a CoordinatorLayout, which in turn is a child of the DrawerLayout:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/custom_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:theme="@style/AppTheme.AppBarOverlay"/>

        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/content_main" />

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

3. Setting the AppBarLayout's ViewOutlineProvider to null, so that there's no shadow underneath the AppBarLayout. I got the idea from this answer: https://stackoverflow.com/a/39699464/4612653. Here's my MainActivity.java:

   public class MainActivityextends AppCompatActivity {

   private DrawerLayout mDrawerLayout;
   private Toolbar toolbar;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_login);
   
       initToolbar();
       initInstances();
   
   }
   
   private void initToolbar() {
       toolbar = (Toolbar) findViewById(R.id.custom_toolbar);
       setSupportActionBar(toolbar);
   }
   
   private void initInstances() {
       mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
   
       getSupportActionBar().setHomeAsUpIndicator(R.drawable.light_menu);
       getSupportActionBar().setDisplayHomeAsUpEnabled(true);
       getSupportActionBar().setHomeButtonEnabled(true);
       getSupportActionBar().setDisplayShowTitleEnabled(false);
   
       AppBarLayout appBar = (AppBarLayout) findViewById(R.id.app_bar);
       // remove shadow from AppBarLayout
       appBar.setOutlineProvider(null);
   
       NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
       if (navigationView != null) {
           setupDrawerContent(navigationView);
       }
   
   }
   
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       switch (item.getItemId()) {
           case android.R.id.home:
               mDrawerLayout.openDrawer(GravityCompat.START);
               return true;
       }
       return super.onOptionsItemSelected(item);
   }
   
   private void setupDrawerContent(NavigationView navigationView) {
       navigationView.setNavigationItemSelectedListener(
               new NavigationView.OnNavigationItemSelectedListener() {
                   @Override
                   public boolean onNavigationItemSelected(MenuItem menuItem) {
                       menuItem.setChecked(true);
                       mDrawerLayout.closeDrawers();
                       return true;
                   }
               });
   }
   

   }

Clicking Hamburger Icon does not open Navigation Drawer

You need to implement onOptionsItemSelected in the VisitingPlace activity as well.
Are you implementing this?

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
    if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

How to keep showing the hamburger icon instead of the back/up icon after clicked on the drawer?

As per the AppBarConfiguration documentation:

NavigationUI uses an AppBarConfiguration object to manage the behavior of the Navigation button in the upper-left corner of your app's display area. The Navigation button’s behavior changes depending on whether the user is at a top-level destination.

A top-level destination is the root, or highest level destination, in a set of hierarchically-related destinations. Top-level destinations do not display an Up button in the top app bar because there is no higher level destination. By default, the start destination of your app is the only top-level destination.

When the user is at a top-level destination, the Navigation button becomes a drawer icon if the destination uses a DrawerLayout. If the destination doesn't use a DrawerLayout, the Navigation button is hidden. When the user is on any other destination, the Navigation button appears as an Up button.

Therefore if you want to have the Drawer icon appear on multiple destinations and not just the start destination, you need to create an AppBarConfiguration object with exactly what destinations you want to be top-level destinations:

// Use the IDs from your navigation graph
val appBarConfiguration = AppBarConfiguration(
    setOf(R.id.rulesFragment, R.id.aboutFragment),
    drawerLayout)

Thus, your code becomes:

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration : AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        @Suppress("UNUSED_VARIABLE")
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        // Use the Kotlin extension in navigation-ui-ktx to create
        // the AppBarConfiguration
        appBarConfiguration = AppBarConfiguration(
            setOf(R.id.rulesFragment, R.id.aboutFragment),
            binding.drawerlayout)

        val navController = findNavController(R.id.myNavHostFragment)
        // To support up action and also the title, the third parameter is optional and is used
        // for the hamburger menu for drawer.
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration)

        // show the navigation drawer
        NavigationUI.setupWithNavController(binding.navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.myNavHostFragment)

        // this is for the hamburger menu
        return NavigationUI.navigateUp(navController, appBarConfiguration)
    }
}

How to show the hidden Navigation Drawer Hamburger icon?

try this to get deafult hamburger_icon drawable

actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer);
actionBar.setDisplayHomeAsUpEnabled(true);

crate this ic_drawer.xml in drawable folder

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>

---

Related Topics