Home > DeveloperSection > Articles > Navigation Drawer Implementation in Android

Navigation Drawer Implementation in Android


Android Android Styles  Android Activity  Android Layout  Android Edittext  Android Listview 
Ratings:
0 Comment(s)
 1997  View(s)
Rate this:

Navigation Drawer Implementation in Android


Previously we have implemented search functionality in listview : Simple Search implementation in android

In this article we are going to implement a simple Navigation drawer List view. Navigation drawer is a UI design pattern that provides a set of menu items when user swipes from left edge of the application to the right. In Android, navigation drawer is available via Android Support library from revision 13.

We can see navigation drawer in YouTube, Google, and Facebook etc. It is very popular way to show menu navigation nowadays.

Pre-Requisites:

1.       Ellipse SDK

2.       Android SDK

3.       ADT plugin

Or Android Studio and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “MindStickDrawer”.

 

Implementation objective:

To show the list of companies with their icons in Navigation Drawer list view. When an item is selected then the company’s icon and name will be displayed on the screen.

 

Set String Resources

First of all set values for string resources in strings.xml

 

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

<resources>

 

    <string name="app_name">MindStickDrawer</string>

    <string name="hello_world">Hello world!</string>

    <string name="action_settings">Settings</string>

    <string name="drawer_open">Open Navigation drawer</string>

    <string name="drawer_close">Close Navigation drawer</string>

 

</resources>

 

 

Creating GUIs

Now, we need to add views in our view groups, i.e. add widgets to our GUI.

 We need

1.       A Drawer Layout (main GUI) consists of a Frame Layout (it will be shown  when the user select an item from the navigation list  and  List view (it will show the items in list view for navigation)

2.      A Fragment GUI which will be set to the Frame Layout.(It consists of a Text view and an image view)

3.      One more Layout for holding an item in the navigation list.(It also consists of an icon and text view)

For this, navigate to res/Layout/activity_main.xml from package explorer in Eclipse. Open activity_main.xml

Add following code into it:

 

<android.support.v4.widget.DrawerLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/drawer_layout"

> 

 

    <FrameLayout

        android:id="@+id/content_frame"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

 

    <!-- The navigation drawer -->

    <ListView android:id="@+id/drawer_list"

        android:layout_width="240dp"

        android:layout_height="wrap_content"

        android:layout_gravity="start"

        android:choiceMode="singleChoice"

        android:divider="@android:color/transparent"

        android:dividerHeight="0dp"

        android:background="#111"

 

        />

 

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

 

Next, navigate to res/Layout/fragment_layout.xml from package explorer in Eclipse. Open fragment_layout.xml

 

 

 

 

 

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

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

 

    <ImageView

        android:id="@+id/tv_icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher"/>

 

    <TextView

        android:id="@+id/tv_content"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:textSize="40sp" />

 

 

</LinearLayout>

 

 

 

Next, navigate to res/Layout/drawer_list_item.xml from package explorer in Eclipse. Open drawer_list_item.xml

 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

 

    <ImageView

        android:id="@+id/icon"

        android:layout_width="40dp"

        android:layout_height="40dp"

        android:layout_alignParentLeft="true"

        android:src="@drawable/ic_launcher"/>

 

    <TextView

        android:id="@+id/text1"

        android:layout_width="fill_parent"

        android:layout_height="50dp"

        android:textAppearance="?android:attr/textAppearanceListItemSmall"

        android:paddingLeft="16dp"

        android:paddingRight="16dp"

        android:textColor="#fff"

        android:background="?android:attr/activatedBackgroundIndicator"

        android:minHeight="?android:attr/listPreferredItemHeightSmall"

        />

</LinearLayout>

 

 

Creating a Fragment:

Fragment will be shown on the screen when an item in navigation drawer is selected. Now navigate to src folder and create a new fragment “CompanyFragment” and extend Fragments to it. Add this code in it:

 

package com.example.msclient010.mindstickdrawer;

 

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

 

 

public class CompanyFragment extends Fragment {

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

 

        // Retrieving the currently selected title  and icon

        String mTitle = getArguments().getString("mTitle");

        int mIcon = getArguments().getInt("imageId");

 

        //creating view correspond to the fragment

        View v = inflater.inflate(R.layout.fragment_layout, container, false);

 

        //getting reference to the text view and imageView of the fragment

        TextView tv = (TextView) v.findViewById(R.id.tv_content);

        ImageView icon = (ImageView) v.findViewById(R.id.tv_icon);

 

        //set currently selected company name and icon in the fragment

        tv.setText(mTitle);

        icon.setImageResource(mIcon);

 

        return v;

    }

 

}

 

 

 

Creating a Custom List adapter

To show our company’s icon and name in a customized list view we need to create a custom adapter which will set an icon and company name in each row item of our list

Navigate to src folder and create a new java class called “CustomListAdapter” and extend ArrayAdapter to it. Add this code in it

package com.example.msclient010.mindstickdrawer;

 

import android.app.Activity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

 

import java.util.List;

 

 

public class CustomListAdapter extends ArrayAdapter {

 

    //create a context, a string list for name and Integer List for icon resources

    private final Activity _context;

    private List<String> _text;

    private List<Integer> _icon;

 

    //create a constructor for adapter and initialize the context and other resources

    public CustomListAdapter(Activity context, List<String> text, List<Integer> icon) {

        super(context, R.layout.drawer_list_item, text);

        _context = context;

        _icon = icon;

        _text = text;

    }

 

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

 

        //Inflate the view for ListView item for each row of drawer list

        LayoutInflater inflater = _context.getLayoutInflater();

        View rowView = inflater.inflate(R.layout.drawer_list_item, null, true);

 

        //getting reference to the text view and imageView

        TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);

        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);

 

        //Set values for text and image

        txtTitle.setText(_text.get(position));

        imageView.setImageResource(_icon.get(position));

 

        //return the row view to the adapter

        return rowView;

    }

}

 

 

Main Activity Implementation:

Now here we need to integrate all our views and classes to behave as a fully functionally app.

Navigate to MainActivity in src folder from package explorer. Open MainActivity and this code in it:

package com.example.msclient010.mindstickdrawer;

 

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.support.v4.app.ActionBarDrawerToggle;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarActivity;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;

import java.util.ArrayList;

import java.util.List;

 

 

public class MainActivity extends ActionBarActivity {

 

    // Within which the activity is enclosed

    DrawerLayout mDrawerLayout;

 

    // Listview representing navigation drawer

    ListView mDrawerList;

 

    // ActionBarDrawerToggle indicates the presence of Navigation Drawer in the action bar

    ActionBarDrawerToggle mDrawerToggle;

 

    //List item contents ---- list of company names and icon

    List<String> compList;

    List<Integer> icons;

 

    // title and icon of the action bar

    String mTitle = "";

    int imageId = 0;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 

        mTitle = (String) getTitle();

 

        //add company names

        compList = new ArrayList<String>();

        compList.add("MindStick");

        compList.add("Oracle");

        compList.add("Microsoft");

        compList.add("Apple");

        compList.add("Amazon");

 

        //add icons for corresponding companies

        icons = new ArrayList<Integer>();

        icons.add(R.drawable.mindstick);

        icons.add(R.drawable.oracle);

        icons.add(R.drawable.microsoft);

        icons.add(R.drawable.apple);

        icons.add(R.drawable.amazon);

 

        // Getting reference to DrawerLayout

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

 

        mDrawerList = (ListView) findViewById(R.id.drawer_list);

 

        // getting reference to the ActionBarDrawerToggle

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

                R.drawable.google, R.string.drawer_open,

                R.string.drawer_close) {

 

            /** Called when drawer is closed */

            public void onDrawerClosed(View view) {

                getSupportActionBar().setTitle(mTitle);

                invalidateOptionsMenu();

            }

 

            /** Called when a drawer is opened */

            public void onDrawerOpened(View drawerView) {

                getSupportActionBar().setTitle("Select a Company");

                invalidateOptionsMenu();

            }

        };

 

        // Setting drawer toggle to drawer Layout

        mDrawerLayout.setDrawerListener(mDrawerToggle);

 

        // Creating an ArrayAdapter to add items to the list view mDrawerList

        CustomListAdapter adapter = new CustomListAdapter(this, compList, icons);

 

        // Setting the adapter on mDrawerList

        mDrawerList.setAdapter(adapter);

 

        // enable home button

        getSupportActionBar().setHomeButtonEnabled(true);

 

        // enable up navigation

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

 

        // Setting item click listener for the listview mDrawerList

        mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

 

            @Override

            public void onItemClick(AdapterView<?> parent, View view,

                                    int position, long id) {

 

                // Currently selected company

                mTitle = compList.get(position);

 

                //get the image id from the image name

                imageId = icons.get(position);

 

                //setting the comapny item to action bar icon

                getSupportActionBar().setIcon(imageId);

 

 

                // Creating a fragment object

                CompanyFragment cFragment = new CompanyFragment();

 

                // create a bundle object

                Bundle data = new Bundle();

 

                // Setting the title and image of the currently selected item of mDrawerList

                data.putString("mTitle", mTitle);

                data.putInt("imageId", imageId);

                cFragment.setArguments(data);

 

                // Getting reference to fragment manager

                FragmentManager fragmentManager = getFragmentManager();

 

                // creating a fragment transaction

                FragmentTransaction ft = fragmentManager.beginTransaction();

 

                // adding a fragment to the fragment transaction

                ft.replace(R.id.content_frame, cFragment);

 

                // commit the transaction

                ft.commit();

 

                // Closing the drawer

                mDrawerLayout.closeDrawer(mDrawerList);

            }

        });

    }

 

    @Override

    protected void onPostCreate(Bundle savedInstanceState) {

        super.onPostCreate(savedInstanceState);

        mDrawerToggle.syncState();

    }

 

    /**

     * Handling the touch event of app icon

     */

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {

            return true;

        }

        return super.onOptionsItemSelected(item);

    }

 

    /**

     * Called whenever we call invalidateOptionsMenu()

     */

    @Override

    public boolean onPrepareOptionsMenu(Menu menu) {

        // If the drawer is open, hide action items related to the content view

        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

 

        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);

        return super.onPrepareOptionsMenu(menu);

    }

 

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }

 

}

 

Now here all the implementation is completed and it’s time to see what we have implemented

 

Running the Navigation App:

 

Just hit on “Run” button and our app will be launched and the drawer will be displayed:

 

Click on the drawer icon and the list of companies will be appeared:

 

Click on the Company name and the selected company name and icon will be appeared at the screen:

 

Next, we see how to implement contextual menus : Contextual Menu Implementation in Android

Thanks for reading this post.

Happy Coding!! J


Don't want to miss updates? Please click the below button!

Follow MindStick