ZOFTINO.COM

Navigation Drawer Implementation in Android

Navigation drawer contains list of actions or menu items, which help users navigate thruogh your application. Panel containing list of actions in navigation drawer is hidden. With swipe or clicking an icon, user can open or close navigation drawer to view the list of actions.

Navigation drawer can be implemented by using the DrawerLayout widget. In the layout of your activity, you should define DrawerLayout element. Within DrawerLayout element, you need to first define element for content to be displayed on selecting actions from navigation drawer and second element should be a drawer view for list of actions.

In the activity, you need to set content view to the defined drawer layout xml and find drawer view to populate it with list of actions. Once the list view is populated with list of items, you need to set listener for the list view so that click events can be handled and appropriate content is shown to users. With this setup, you can see navigation drawer on swipe.

Navigation drawer implementation

android navigation drawer example

Drawer layout allows you to set listeners to listen to open and close events. To set listeners on drawer layout, you need to provide implementation of DrawerLayout.DrawerListener and pass it to setDrawerListener method.

If you want to show drawer navigation on touching an icon displayed on app bar, you need to use ActionBarDrawerToggle. ActionBarDrawerToggle enables integration between drawer functionality and app bar framework. It displays navigation drawer icon. When navigation drawer icon is touched, onOptionsItemSelected callback method is called. In this method, you need to call ActionBarDrawerToggle’s onOptionsItemSelected method. This will handle drawer integration and returns true if selected item is drawer icon.

ActionBarDrawerToggle can also be used as DrawerLayout.DrawerListener as ActionBarDrawerToggle implements DrawerLayout.DrawerListener. DrawerLayout.DrawerListener.

Navigarion drawer with ActionBarDrawerToggle

android navigation drawer and app bar integration

Navigation drawer example

Drawer layout

 <!--?xml version="1.0" encoding="utf-8"?-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_nav" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.zoftino.navigationdrawer.NavigationDrawerActivity">

<android.support.v7.widget.Toolbar android:id="@+id/z_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp"></android.support.v7.widget.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_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="@color/colorNavDraw"></ListView>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
 

Activity

 package com.zoftino.navigationdrawer;

import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class NavigationDrawerActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private String[] mCouponMenu;
    private ActionBarDrawerToggle mDrawerToggle;

    private String mTitle = "";
    private String mDrawerTitle = "";

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_drawer);
        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);

        myToolbar.setNavigationIcon(R.drawable.ic_drawer);

        mDrawerTitle = (String)(getSupportActionBar().getTitle());
        mTitle= mDrawerTitle;

        mCouponMenu = getResources().getStringArray(R.array.menu_items);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.list_item_nav, mCouponMenu));

        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        mDrawerToggle = new ActionBarDrawerToggle(this,
                mDrawerLayout,
                myToolbar,
                R.string.drawer_open,
                R.string.drawer_close) {

            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getSupportActionBar().setTitle(mTitle);
            }

            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getSupportActionBar().setTitle(mDrawerTitle);
            }
        };
        mDrawerLayout.addDrawerListener(mDrawerToggle);

    }
    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            Fragment fragment = DrawerContentFragment.newInstance(mCouponMenu[position]);

            FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.main_frame, fragment)
                    .commit();

            mDrawerList.setItemChecked(position, true);
            setTitle(mCouponMenu[position]);
            mDrawerLayout.closeDrawer(mDrawerList);
        }
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.my_menu, menu);
        return true;
    }
    @Override
    public void setTitle(CharSequence title) {
        mTitle = (String)title;
        getSupportActionBar().setTitle(mTitle);
    }
    @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);
    }
}
 

Fragment

 package com.zoftino.navigationdrawer;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class DrawerContentFragment extends Fragment {

    public static DrawerContentFragment newInstance(String item) {
        DrawerContentFragment dcf = new DrawerContentFragment();

        Bundle args = new Bundle();
        args.putString("drawer_item", item);
        dcf.setArguments(args);

        return dcf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        String drawer_item = "Coupons";
        if(getArguments() != null) {
            drawer_item = getArguments().getString("drawer_item");
        }

        ListView listView = new ListView(getActivity());
        listView.setAdapter(new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_activated_1, CouponStoreData.storeCoupons.get(drawer_item)));

        return listView;
    }
}
 

List item

 <?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:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:gravity="center_vertical"
    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:textColor="@android:color/white"></TextView>
 

Menu

 <!--?xml version="1.0" encoding="utf-8"?-->
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_up"  android:title="Settings" app:showAsAction="never"></item>
</menu>