Android DrawerLayout is not working with ViewPager?

Question

I have implemented ViewPager inside a DrawerLayout it is working properly but Drawer menu list view not displaying properly with the action bar it will display below the ViewPager tabs.Hope following figure will give you an idea. And i am using actionbarsherlock library.

enter image description here

How can i display the Drawer menu list view exactly below the action bar??

What i have tried.

Activity OnCreate():

        setContentView(R.layout.activity_layout);
        mDrawerLayout   = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList     = (ListView) findViewById(R.id.left_drawer);
        mLinearLayout   = (LinearLayout)findViewById(R.id.ll_viewpager_layout);

        // set a custom shadow that overlays the main content when the drawer opens
        mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
        // set up the drawer's list view with items and click listener

        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
                R.string.app_name,  /* "open drawer" description for accessibility */
                R.string.app_you  /* "close drawer" description for accessibility */
                ) {
            public void onDrawerClosed(View view) {
            }

            public void onDrawerOpened(View drawerView) {
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        invalidateMenuItems();

        mViewPager = new ViewPager(this);
        mViewPager.setOnPageChangeListener(this);
        mViewPager.setId(1);
        mViewPager.setOffscreenPageLimit(7);

        mLinearLayout.addView(mViewPager);

        mTabsAdapter = new TabsAdapter(this, mViewPager,mActionBar);

        mTabsAdapter.addTab(mActionBar.newTab().setText("Fragment"),Fragment.class, null);

        mTabsAdapter.addTab(mActionBar.newTab().setText("Fragment"),Fragment.class, null);

        mTabsAdapter.addTab(mActionBar.newTab().setText("Fragment"),Fragment.class, null);

        mTabsAdapter.addTab(mActionBar.newTab().setText("Fragment"),Fragment.class, null);

Activity Layout xml:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

                <LinearLayout
            android:id="@+id/ll_dashboard_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="200dip"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/abs__background_holo_light"
            android:cacheColorHint="#00000000"
            android:choiceMode="singleChoice"
            android:dividerHeight="1dip" />


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

score 4 · Answer 1 · edited Oct 24 '16 at 12:33

Drawer layout is parent of view pager. try this

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

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <!-- Framelayout to display Fragments -->

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

    <!-- Listview to display slider menu -->

    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/list_background"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />

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

score 2 · Accepted Answer · edited May 23 '17 at 12:13

2

It's the drawer's behavior with action bar tabs. You can't change it.

Find some official information in this answer: Android Navigation Drawer over the tabs

And workarounds in this answer: Getting DrawerLayout to Slide over the ActionBar

I would consider using this great library: PagerSlidingTabStrip

edited May 23 '17 at 12:13

Community

1
1

answered Jun 06 '13 at 20:49

Matthias Robbers

15,689
6
63
73

The google games app, if you select my games in the drawer it will launch a view pager with tabs and the drawer appears above all. – Maxrunner Jul 30 '13 at 15:49
Those are not action bar tabs. – Matthias Robbers Jul 30 '13 at 17:54
The tabs in the Google Play Games app. – Matthias Robbers Jul 31 '13 at 14:40
For the record, Google doesn't want you to overlap the action bar with the drawer. I've gotten this response from within Google and it's also stated in the Navigation Drawer documentation. "As the navigation drawer expands, it overlays the content but not the action bar" source: http://developer.android.com/design/patterns/navigation-drawer.html – Martin Marconcini Nov 01 '13 at 17:03

score 1 · Answer 3 · edited May 23 '17 at 11:48

1

I am not sure about Action Bar tabs , but you can use Pager Tab Strip in combination of Navigation Drawer to get navigation model similar like Google Play Music , have a look at my post

edited May 23 '17 at 11:48

Community

1
1

answered Aug 06 '13 at 12:19

Balaji

1,619
15
19

score 0 · Answer 4 · answered Jun 06 '13 at 07:03

0

Your XML is incorrect.

ListView should set layout_height to match_parent instead of wrap_content.

EDIT:

also the DrawerLayout should be toplevel instead of being squeezed into LinearLayout. Check the documentation of how to use DrawerLayout: http://developer.android.com/training/implementing-navigation/nav-drawer.html

answered Jun 06 '13 at 07:03

Damian Walczak

1,334
14
21

I have edited the question with the updated xml as you suggested but the problem is still there. – Dinesh Anuruddha Jun 06 '13 at 07:10
@kaluwila did you try putting the ViewPager and TabWidget into XML inside the LinearLayout? Have a look here: http://thepseudocoder.wordpress.com/2011/10/13/android-tabs-viewpager-swipe-able-tabs-ftw/ – Damian Walczak Jun 06 '13 at 07:16
@ Damian Walczak i have tried your way also but nothing happend :( – Dinesh Anuruddha Jun 06 '13 at 07:35
@kaluwila If you can provide full sample code, I can have a look. – Damian Walczak Jun 06 '13 at 08:00

Abhinav Saxena · Answer 5 · 2014-07-18T06:16:50.333

Have you used FrameLayout? The Content shown on the last FrameLayout will show on the top. You hide that "layer" and the FrameLayout "below" it (FrameLayout before last FrameLayout), will show up. In Your DrawerLayout, Drawer List should be in the last FrameLayout and Fragments in the second last, in which you can show the ViewPager.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_parent_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

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

                <LinearLayout
                    android:id="@+id/content_frame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="9"
                    android:orientation="vertical" >

                    <!-- Fragments will attach in this container, and have ViewPager -->
                </LinearLayout>


            </LinearLayout>
        </FrameLayout>


        <!-- attach drawer -->

        <FrameLayout
            android:id="@+id/drawer"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/grey"
            android:choiceMode="singleChoice"
            android:clickable="true"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp" >

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

                    <ListView
                    android:id="@+id/navigation_drawer_list"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:choiceMode="singleChoice"
                    android:groupIndicator="@null" />

                <!-- </LinearLayout> -->
            </LinearLayout>
        </FrameLayout>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

score 0 · Answer 6 · answered Apr 12 '16 at 13:10

To display drawer layout just below the toolbar use code-below in your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:openDrawer="start">

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

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

</LinearLayout>

Android DrawerLayout is not working with ViewPager?

6 Answers6

Linked