DrawerLayout Double Drawer (left and right drawers at the same time)

Question

I have an application in which I want to implement a double box - one on the left and one on the right. The left box is for navigating applications, the right box is for filtering results.

So the layout is 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> 

Here you can clearly see the "left_drawer" and "right_drawer", and their gravity is the "beginning" and "end", and it really works! You can pull them both out.

The problem is that when I implement DrawerToggle - it only opens the left drawer and does not close the right one, therefore, if the right drawer is open and I click the DrawerToggle button - the left drawers open ALSO and the right drawer overlaps.

There are several solutions that 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 a drawer on the opposite side of the drawer that I am trying to open - it automatically closes (if the left drawer is open and I press the switch on the correct drawer and vice versa).

And I did not understand how to do this, because DrawerToggle accepts DrawerLayout itself as a parameter, and not individual boxes ...

I am using the support library.

Does anyone have any idea? Thank you in advance.

Answer 1

You can call it like this, for example, in the ToggleButton handler:

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

Where mDrawer is the link to the specific box that you need to open (whether it is a view or a layout), in your case, the actual ListView that you want to display.

Answer 2

Here is the code for the Double Drawer Activity, which can be extended with other actions to implement a double drawer, assuming they have a layout similar to the one suggested by the 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); } } 

Answer 3

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> 

for more information see http://v4all123.blogspot.in/2016/03/simple-example-of-navigation-view-on.html

Answer 4

Here is my short solution for anyone who wants to prevent the animation of the drawer indicator if they conduct a right scan. Just 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 } } }; 

Answer 5

Use the gravity constant (Gravity.LEFT or Gravity.RIGHT) of any box that you want to close (when opening another) 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 that implements DrawerLayout.DrawerListener
See: http://developer.android.com/reference/android/support/v4/app/ActionBarDrawerToggle.html

Answer 6

I decided to add this code to 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 added an action button and redefined the action bar home button

Answer 7

create a custom element and add it to the right, go to it in the right box.

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