-1

First off, this is not a duplicate of any of the "missing hamburger icons" questions here in SO. The linked question suggests to call the syncState method, but as clearly shown in the code below, I am not even using ActionBarDrawerToggle. I am developing for a device that runs Android Lollipop, and I want my Activity to have:

  1. A transparent toolbar so that the layout underneath can be seen
  2. A translucent status bar
  3. a custom icon for the hamburger icon

The top of my app should like this. As you can see, my main content has a blue image. I wanted my content to be underneath the toolbar, so I made my toolbar transparent.

I ran my app on the device and I was surprised to see that the hamburger icon for my drawer is not visible. But when I tap the upper-left corner of the screen, the drawer opens and I can see my menu items correctly.

My styles.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <style name="AppTheme.Transparent">
        <item name="windowActionBarOverlay">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>
</resources>

And here's my MainActivity:

public class LoginActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        Toolbar toolbar = findViewById(R.id.custom_toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.light_menu);
        getSupportActionBar().setDisplayShowTitleEnabled(false);


        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        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;
                    }
                });
    }
}

Here are the layouts I used. My activity_login.xml used in the activity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

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


    <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>

app_bar_main.xml contains my Toolbar which is inside a RelativeLayout. The content of my Activity is on another layout, content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


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


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

</RelativeLayout>

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:src="@drawable/top" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/back_login" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/front_login" />

    </FrameLayout>

</RelativeLayout>

Here's my AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.myapp">

    <application
        android:name=".MyApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".LoginActivity"
            android:theme="@style/AppTheme.Transparent">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Can anyone help me in fixing this? Thanks.

Alvin Dizon
  • 1,855
  • 14
  • 34
  • Possible duplicate of [Appcompatv7 - v21 Navigation drawer not showing hamburger icon](https://stackoverflow.com/questions/26754940/appcompatv7-v21-navigation-drawer-not-showing-hamburger-icon) – Nouman Ch Sep 27 '18 at 01:30
  • @NoumanCh That's a different question. I am not using ActionBarDrawerToggle. – Alvin Dizon Sep 27 '18 at 01:46

3 Answers3

2

As you said

I ran my app on the device and I was surprised to see that the hamburger icon for my drawer is not visible. But when I tap the upper-left corner of the screen, the drawer opens and I can see my menu items correctly.

This means there is hamburger icon existing in your activity but color of that icon is incorrect

double check your R.drawable.light_menu

or use this XML to create a vector menu icon drawable

create a drawable resource file inside your drawable and paste below code

ic_menu_black.xml

<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>

and then set

getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu_black);

you will see a black menu icon. you can change fillColor according your need

Ashwini Saini
  • 1,324
  • 11
  • 20
0

You have to use ActionBarDrawerToggle to achieve your requirement. Please try to update your existing code as below,

    public class LoginActivity extends AppCompatActivity {

        private DrawerLayout mDrawerLayout;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_login);

            Toolbar toolbar = findViewById(R.id.custom_toolbar);
            setSupportActionBar(toolbar);

            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeAsUpIndicator(R.drawable.light_menu);
            getSupportActionBar().setDisplayShowTitleEnabled(false);


            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
            mDrawerLayout.addDrawerListener(toggle);
            toggle.syncState();

            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;
                        }
                    });
        }
    }

R.string.navigation_drawer_open and R.string.navigation_drawer_close are @StringRes int resources. Please update your strings.xml file with following.

<string name="navigation_drawer_open">Open</string>
<string name="navigation_drawer_close">Close</string>

Thanks!

Anupa Dayaratne
  • 358
  • 1
  • 8
  • Hi @AnupaDayaratne, thanks for taking the time to answer, but unfortunately, this doesn't work. Also, the ActionBarDrawerToggle constructor doesn't take Strings directly as input, but instead it uses int resource IDs. – Alvin Dizon Sep 27 '18 at 02:37
  • Hi, I have updated my answer already, `R.string.navigation_drawer_open` and `R.string.navigation_drawer_close` are `@StringRes int` resources. Please update your `strings.xml` file with following. `Open Close` Please try with this and let me know the updates. Thanks! – Anupa Dayaratne Sep 27 '18 at 02:40
0

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>
  1. 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;
                    }
                });
    }
    

    }

Alvin Dizon
  • 1,855
  • 14
  • 34