DrawerLayout Double Drawer (Left and Right Drawers simultaneously)

Android Problem Overview

I have an application, in which i want to implement a double drawer - one from the left and one from the right. Left drawer is for app navigation, right drawer is for result filtering.

So, the layout is like this:

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

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/light_grey"
        android:orientation="vertical">

        <GridView
            android:id="@+id/gridview"
            style="@style/GridViewStyle"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:horizontalSpacing="7dp"
            android:stretchMode="columnWidth"
            android:verticalSpacing="7dp" />
    </LinearLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

    <ListView
        android:id="@+id/right_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:background="#111"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

You can clearly see here "left_drawer" and "right_drawer", and their respective gravity - "start" and "end" And this actually works! You can pull them both out.

The problem is, when i implement the DrawerToggle - it only opens the left drawer, and does not close the right one, so if the right drawer is opened and i press the DrawerToggle button - the left drawers opens ALSO, and overlaps the right drawer.

There are a couple of solutions i'am trying to get:

Make the same DrawerToggle button on the right side, with the same behavior and animation as the left side.
Make the drawer on the opposite side of the drawer i am trying to open - automatically close (if the left drawer is open and i press the toggle of the right drawer and vise-versa).

And i haven't figured how to do that, because DrawerToggle accepts the DrawerLayout itself as a parameter, and not the individual drawers...

I am using the Support Library.

Anyone have any ideas? Thank you in advance.

Android Solutions

Solution 1 - Android

Here is the code for a Double Drawer Activity than can be extended by other activities to implement the double drawer, assuming they have a layout like the one propposed by OP.

    public class DoubleDrawerActivity extends ActionBarActivity {
	
	private DrawerLayout mDrawerLayout;
	private ActionBarDrawerToggle mDrawerToggle;
	private View mLeftDrawerView;
	private View mRightDrawerView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
	}
	
	@Override
	protected void onStart() {
		super.onStart();
		
		if(mDrawerLayout == null || mLeftDrawerView == null || mRightDrawerView == null || mDrawerToggle == null) {
			// Configure navigation drawer
	        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
	        mLeftDrawerView = findViewById(R.id.left_drawer);
	        mRightDrawerView = findViewById(R.id.right_drawer);
	        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_navigation_drawer, R.string.drawer_open, R.string.drawer_close) {
	
	            /** Called when a drawer has settled in a completely closed state. */
	            public void onDrawerClosed(View drawerView) {
	            	if(drawerView.equals(mLeftDrawerView)) {
		                getSupportActionBar().setTitle(getTitle());
		                supportInvalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
		                mDrawerToggle.syncState();
	            	}
	            }
	
	            /** Called when a drawer has settled in a completely open state. */
	            public void onDrawerOpened(View drawerView) {
	            	if(drawerView.equals(mLeftDrawerView)) {
		            	getSupportActionBar().setTitle(getString(R.string.app_name));
		            	supportInvalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
		            	mDrawerToggle.syncState();
	            	}	            	
	            }
	            
	            @Override
	            public void onDrawerSlide(View drawerView, float slideOffset) {
	            	// Avoid normal indicator glyph behaviour. This is to avoid glyph movement when opening the right drawer
	            	//super.onDrawerSlide(drawerView, slideOffset);
	            }
	        };
	        
	        mDrawerLayout.setDrawerListener(mDrawerToggle); // Set the drawer toggle as the DrawerListener
		}
	}
	
	@Override
	protected void onPostCreate(Bundle savedInstanceState) {
		super.onPostCreate(savedInstanceState);
		
		// Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
	}
	
	@Override
	public void onConfigurationChanged(Configuration newConfig) {
		super.onConfigurationChanged(newConfig);
		
		mDrawerToggle.onConfigurationChanged(newConfig);
	}
	
	@Override
	public boolean onPrepareOptionsMenu(Menu menu) {
		
		// If the nav drawer is open, hide action items related to the content view
        for(int i = 0; i< menu.size(); i++)
        	menu.getItem(i).setVisible(!mDrawerLayout.isDrawerOpen(mLeftDrawerView));
        
        return super.onPrepareOptionsMenu(menu);
	}
	
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		
		switch(item.getItemId()) {
			case android.R.id.home:
				mDrawerToggle.onOptionsItemSelected(item);
				
				if(mDrawerLayout.isDrawerOpen(mRightDrawerView))
					mDrawerLayout.closeDrawer(mRightDrawerView);
				
				return true;
		}
        
    	return super.onOptionsItemSelected(item);
	}
}

Solution 2 - Android

You can call it like this in a ToggleButton's handler for example :

mDrawerLayout.openDrawer(mDrawer);
mDrawerLayout.closeDrawer(mDrawer);

Where mDrawer is a reference to the specific drawer you need to open (be it a view or a layout), in your case, the actual ListView you wish to display.

Solution 3 - Android

You can use NavigationView from material design.

<?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:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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.design.widget.NavigationView
        android:id="@+id/nav_view2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer1" />

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

Solution 4 - Android

Here is my short solution for all who want to prevent the animation of drawer indicator if they swipe the right view. Simply implement the onDrawerSlide Method like this.

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer_white, 0, 0) {

    @Override
    public void onDrawerClosed(View view) {
       invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    }

    @Override
    public void onDrawerOpened(View drawerView) {
       invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    }

    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
       if (drawerView == mSlidingMenuNavigationList) {
           super.onDrawerSlide(drawerView, slideOffset);
       }
       else {
          // do nothing on all other views
       }
    }
};

Solution 5 - Android

Use the gravity constant (Gravity.LEFT or Gravity.RIGHT) of whatever drawer you want to close (as you open the other one) in onOptionsItemSelected() as shown below.

public boolean onOptionsItemSelected(MenuItem item) {
    if (mDrawerToggle.onOptionsItemSelected(item)) {
        
       // Close the right side drawer if visible
       if(mDrawerLayout.isDrawerVisible(Gravity.RIGHT)) {
           mDrawerLayout.closeDrawer(Gravity.RIGHT);
       }
       return true;
    }

    // Regular stuff
    switch (item.getItemId()) {
    case R.id.action_example:
        Toast.makeText(getActivity(), "Example action.", Toast.LENGTH_SHORT).show();
        return true;
    }

    return super.onOptionsItemSelected(item);
}

mDrawerToggle = Listener object implementing DrawerLayout.DrawerListener
See: http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html

Solution 6 - Android

I have solved adding this code in the onOptionsItemSelected method:

switch (item.getItemId()) {
	case android.R.id.home:
		if (mDrawerLayout.isDrawerOpen(mDrawerList_right)){
			mDrawerLayout.closeDrawer(mDrawerList_right);
		}
		mDrawerLayout.openDrawer(mDrawerList_left);
	}
	break;
case R.id.action_drawer:
		if (mDrawerLayout.isDrawerOpen(mDrawerList_left)){
			mDrawerLayout.closeDrawer(mDrawerList_left);
		}
		mDrawerLayout.openDrawer(mDrawerList_right);
	}
default:
	break;
}

I have added an action button and overrided the home button of the actionbar

Solution 7 - Android

make a custom item and add it the right, pass to it the right drawer.

final ToggleButton ic_nav = (ToggleButton) customNav.findViewById(R.id.ic_nav);

		ic_nav.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View arg0)
			{
				if ( mDrawerLayout.isDrawerOpen(mDrawerList) && arg0.isSelected()) {
					mDrawerLayout.closeDrawer(mDrawerList);
					arg0.setSelected(false);
				}
				else if (!mDrawerLayout.isDrawerOpen(mDrawerList) && !arg0.isSelected()){
					mDrawerLayout.openDrawer(mDrawerList);
					ic_nav.setSelected(false);
					arg0.setSelected(true);
				}
			}
		});

Content Type	Original Author	Original Content on Stackoverflow
Question	ExiRouS	View Question on Stackoverflow
Solution 1 - Android	Daniel López Lacalle	View Answer on Stackoverflow
Solution 2 - Android	Armel Larcier	View Answer on Stackoverflow
Solution 3 - Android	Gunaseelan	View Answer on Stackoverflow
Solution 4 - Android	Kai Burghardt	View Answer on Stackoverflow
Solution 5 - Android	silvermouse	View Answer on Stackoverflow
Solution 6 - Android	Francesco Ditrani	View Answer on Stackoverflow
Solution 7 - Android	mhdtouban	View Answer on Stackoverflow