At a glance guide to Navigation Drawer in Android

Navigation Drawer is a simple ListView wich revealed when the user swipes a finger from the left edge of the screen or the user touches the app icon in the action bar.

We start new project in Android Studio with marks near Navigation Drawer and Action Bar in Support Mode.

Setup our 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">

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- The navigation drawer -->
    <ListView android:id="@+id/lvDrawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="#666"
        android:dividerHeight="1dp"
        android:background="#333"
        android:paddingLeft="15sp"
        android:paddingRight="15sp"
        />

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

Next define view of item in Navigation Drawer in drawer_listview_item.xml file

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#fff"
    android:textSize="20sp"
    android:gravity="center_vertical"
    android:minHeight="35sp"
    />

Specify some items and hints for Navigation Drawer in res/values/strings.xml

<string-array name="animals">
    <item>Dog</item>
    <item>Cat</item>
    <item>Mouse</item>
    <item>Lion</item>
    <item>Python</item>
</string-array>

<string name="drawer_open">Open navigation drawer</string>
<string name="drawer_close">Close navigation drawer</string>

Finally, assemble it all together in MainActivity.java

public class MainActivity extends ActionBarActivity {
    private String[] drawerItems;
    private ListView lvDrawer;
    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle actionBarDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerItems = getResources().getStringArray(R.array.animals);
        lvDrawer = (ListView) findViewById(R.id.lvDrawer);
        lvDrawer.setAdapter(new ArrayAdapter(this, R.layout.drawer_listview_item, drawerItems));
        lvDrawer.setOnItemClickListener(new DrawerItemClickListener());

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close);

        drawerLayout.setDrawerListener(actionBarDrawerToggle);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        actionBarDrawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (actionBarDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        actionBarDrawerToggle.syncState();
    }

    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            Toast.makeText(MainActivity.this, ((TextView)view).getText(), Toast.LENGTH_LONG).show();
            drawerLayout.closeDrawer(lvDrawer);

        }
    }

}
Android Navigation Drawer

Full code you can see at github.

comments powered by Disqus