You need to use the new toolbar in appcompat v21 and the new ActionBarDrawerToggle , which is also in this library.
Add the gradle dependency to your gradle file:
compile 'com.android.support:appcompat-v7:21.0.0'
Your activity_main.xml layout will look something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_parent_view" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:fitsSystemWindows="true"> <include layout="@layout/toolbar"/> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/main_fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" /> <fragment android:id="@+id/fragment_drawer" android:name="com.example.packagename.DrawerFragment" android:layout_width="@dimen/drawer_width" android:layout_height="match_parent" android:layout_gravity="left|start" /> </android.support.v4.widget.DrawerLayout> </LinearLayout>
Your toolbar layout will look something like this:
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary"/>
Your activity should extend from:
ActionBarActivity
When you find your views (box and toolbar) in action, set the toolbar as a support action bar and set setDrawerListener:
setSupportActionBar(mToolbar); mDrawerToggle= new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.app_name, R.string.app_name); mDrawerLayout.setDrawerListener(mDrawerToggle);
After that, you just need to take care of the menu items and the state of drawerToogle:
@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = new MenuInflater(this); inflater.inflate(R.menu.menu_main,menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (mDrawerToggle.onOptionsItemSelected(item)) { return true; } return super.onOptionsItemSelected(item); } @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); mDrawerToggle.syncState(); } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); mDrawerToggle.onConfigurationChanged(newConfig); } @Override public void onBackPressed() { if(mDrawerLayout.isDrawerOpen(Gravity.START|Gravity.LEFT)){ mDrawerLayout.closeDrawers(); return; } super.onBackPressed(); }
The implementation is the same as before the toolbar, and you get free arrow animation. No headaches. For more information, follow below:
If you want to display the box on the toolbar and in the status bar, see this question .
EDIT: Use the NavigationView from the support design library. A tutorial to learn how to use here: http://antonioleiva.com/navigation-view/