Android Navigation Drawer over the tabs

Question

I am using the new navigation drawer available from the support library. When using the drawer along with tabs, the drawer menu is getting displayed below the tabs as shown below. How can i make sure the drawer menu is shown on the tabs. (It should display the drawer menu as if there are no tabs)

Drawer menu without tabs

Drawer menu with tabs

Answer 1

I got the same issue and the answer I got from Roman Nurik (Android team) is that the Navigation Drawer should not be used with the Action Bar tabs.

The discussion can be found here: https://plus.google.com/u/1/116515063230772720916/posts/8dWEkFcbTFX

Answer 2

In my AppCompatActivity I add this:

DrawerLayout drawerLayoutMenu =(DrawerLayout) findViewById(R.id.drawer_layout_menu);
RelativeLayout mDrawerPane =(RelativeLayout) findViewById(R.id.drawerPane);

And I call this on the toolbar menu icon

if (drawerLayoutMenu.isDrawerOpen(mDrawerPane)) {
    drawerLayoutMenu.closeDrawer(mDrawerPane);
} else {
        drawerLayoutMenu.openDrawer(mDrawerPane);
}

xml file

<android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout_menu"
        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:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:layout_scrollFlags="enterAlways"
                    app:popupTheme="@style/AppTheme.PopupOverlay">

                </android.support.v7.widget.Toolbar>

                <android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

                <android.support.v4.view.ViewPager
                    android:id="@+id/container"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
            </LinearLayout>
        </FrameLayout>

        <!--for menu-->

        <RelativeLayout
            android:id="@+id/drawerPane"
            android:layout_width="270dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="#fff"
            android:layout_gravity="left|start">

            <!--you can add a ListView-->

        </RelativeLayout>

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

Answer 3

WordPress Android version have an implementation of the problem you stated.

They developed a mimic version of TabView called "HorizontalTabView". Why they make this is exactly same as what you (also me) need.

WordPress github: https://github.com/WordPress/WordPress

Related source:

• HorizontalTabView.java
• WPActionBarActivity.java
• res/theme_browser_activity.xml

Hope this tip helps.