How to enable or fake mini variant from Material Design guide for android.support.v4.widget.DrawerLayout?

Question

How to enable the "mini variant" from the Material Design guide - so that only the Drawer icons are shown in its closed state?

As a simple test project for my question I have taken the well-known Navigation Drawer Example by Google - and then added the second Drawer on the right side and icons for the ListView entries on both sides:

Please advise how to activate (or maybe fake?) the "mini variant Drawer" - so that only the music symbols are visible on the right side of the above screenshot.

Here is my layout file activity_main.xml:

<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          android:orientation="vertical"         android:layout_width="match_parent"         android:layout_height="match_parent">          <android.support.v7.widget.Toolbar              xmlns:android="http://schemas.android.com/apk/res/android"             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="wrap_content">          <ImageView              android:src="@drawable/ic_music_note_black_24dp"             android:onClick="openActions"             android:layout_gravity="right"             android:padding="16dp"             android:layout_width="wrap_content"             android:layout_height="wrap_content" />          </android.support.v7.widget.Toolbar>          <FrameLayout             android:id="@+id/content_frame"             android:layout_width="match_parent"             android:layout_height="match_parent" />      </LinearLayout>      <ListView         android:id="@+id/left_drawer"         android:layout_width="240dp"         android:layout_height="match_parent"         android:layout_gravity="start"         android:choiceMode="singleChoice" />      <ListView         android:id="@+id/right_drawer"         android:layout_width="160dp"         android:layout_height="match_parent"         android:layout_gravity="end"         android:choiceMode="singleChoice" />  </android.support.v4.widget.DrawerLayout> 

And the MainActivity.java using it:

public class MainActivity extends AppCompatActivity {     private Toolbar mToolbar;     private DrawerLayout mDrawerLayout;     private ListView mDrawerList;     private ListView mActionList;     private ActionBarDrawerToggle mDrawerToggle;      private String[] mPlanetTitles;     private String[] mActions;     private int[] mIcons;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          mPlanetTitles = getResources().getStringArray(R.array.planets_array);         mActions = getResources().getStringArray(R.array.music_actions);          TypedArray ta = getResources().obtainTypedArray(R.array.music_icons);         mIcons = new int[ta.length()];         for (int i = 0; i < mIcons.length; i++)             mIcons[i] = ta.getResourceId(i, R.drawable.ic_menu_black_24dp);         ta.recycle();          mToolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(mToolbar);          mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);         mDrawerList = (ListView) findViewById(R.id.left_drawer);         mActionList = (ListView) findViewById(R.id.right_drawer);          mDrawerList.setAdapter(new ArrayAdapter<String>(this,             R.layout.drawer_list_item, mPlanetTitles) {             @Override             public View getView(int position, View convertView, ViewGroup parent) {                 TextView view = (TextView) super.getView(position, convertView, parent);                 view.setCompoundDrawablePadding(24);                 view.setCompoundDrawablesWithIntrinsicBounds(                     R.drawable.ic_stars_white_24dp, 0, 0, 0);                 return view;             }         });          mActionList.setAdapter(new ArrayAdapter<String>(this,             android.R.layout.simple_list_item_1, mActions) {             @Override             public View getView(int position, View convertView, ViewGroup parent) {                 TextView view = (TextView) super.getView(position, convertView, parent);                 view.setCompoundDrawablePadding(24);                 view.setCompoundDrawablesWithIntrinsicBounds(mIcons[position], 0, 0, 0);                 return view;             }         });          mDrawerToggle = new ActionBarDrawerToggle(                 this,                  /* host Activity */                 mDrawerLayout,         /* DrawerLayout object */                 mToolbar,                 R.string.drawer_open,  /* "open drawer" description for accessibility */                 R.string.drawer_close  /* "close drawer" description for accessibility */                 ) {             public void onDrawerClosed(View view) {                 mToolbar.setTitle(mTitle);                 invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()             }              public void onDrawerOpened(View drawerView) {                 mToolbar.setTitle(mDrawerTitle);                 invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()             }         };         mDrawerLayout.setDrawerListener(mDrawerToggle);          if (savedInstanceState == null) {             selectItem(0);         }     } 

Here is a video showing Gmail for tablets in this mode.

Answer 1

The official NavigationDrawer does indeed mention 'mini-variant' in their design specification, but there is no documentation of how to use it. Maybe it will come later as a part of support library. Will update the answer if / when there will be an official solution.

Until than, take a look at ActionsContentView library, does exactly what you want. Last time it was updates was 2 years ago, but it works, I have used it a while ago. You can also get it on Google Play and test it.

Answer 2

Please visit following link:

https://github.com/mikepenz/MaterialDrawer

https://github.com/mikepenz/MaterialDrawer/issues/487

MaterialDrawer is an implementation to create material drawer. Its latest version, 4.0, though not released yet, provides an "embedded drawer" to reach what you want. Not perfect until now because I've downloaded its demo, tried this new feature and found the drawer couldn't open by sliding, but the author are working hard to finish it.

As a result, you can wait for the soon release and check its usage at that time.