Android Navigation Drawer Example Tutorial

Filed Under: Android

In this tutorial we’ll implement a Navigation Drawer in our android application. Android navigation drawer is a sliding menu and it’s an important UI component. You will see navigation drawer in most of the android applications, it’s like navigation menu bars in the websites.

Android Navigation Drawer

Android Navigation Drawer is a sliding left menu that is used to display the important links in the application. Navigation drawer makes it easy to navigate to and fro between those links. It’s not visible by default and it needs to opened either by sliding from left or clicking its icon in the ActionBar.

In broader terms, Navigation Drawer is an overlay panel, which is a replacement of an activity screen which was specifically dedicated to show all the options and links in the application.

In this android navigation drawer tutorial we’ll implement the navigation drawer using the Drawer Layout API present in Android Support Library. We’ll show 3 fragment views that can be opened from the drawer items.

Android Navigation Drawer Project Structure

android navigation drawer

Android Navigation Drawer Example

To implement the Navigation Drawer we first need to add android.support.v4.widget.DrawerLayout as the root of the activity layout as shown below.

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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <LinearLayout
        android:id="@+id/container_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    </LinearLayout>


    <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:background="#FFFFFF"
        android:choiceMode="singleChoice"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="1dp" />

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

The menu options in the navigation drawer are stored in the form of a ListView. Each option opens in the FrameLayout.

We’ve used a ToolBar in place of an ActionBar here. ToolBar has been introduced since Android 5.0 as a generalisation of ActionBar. It gives us more control and flexibility to modify and its easier to interleave with other views in the hierarchy.

The layout ToolBar is defined in the xml layout given below.

toolbar.xml


<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

We need to use the Theme Theme.AppCompat.NoActionBar in the styles.xml when using Toolbars.

The layout for the ListView rows in the Navigation Drawer is given below.

list_view_item_row.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:padding="10dp" >

    <ImageView
        android:id="@+id/imageViewIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:paddingRight="10dp" />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageViewIcon"
        android:paddingRight="10dp"
        android:text="Item Name"
        android:textColor="@android:color/black"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        />

</RelativeLayout>

The navigation drawer items are put in a string array in the strings.xml file as shown below.

strings.xml


<string-array name="navigation_drawer_items_array">
        <item>Connect</item>
        <item>Fixtures</item>
        <item>Table</item>
    </string-array>

The DataModel.java class is used to define the objects for the drawer list items.

DataModel.java


package com.journaldev.navigationdrawer;

public class DataModel {

    public int icon;
    public String name;

    // Constructor.
    public DataModel(int icon, String name) {

        this.icon = icon;
        this.name = name;
    }
}

The drawer items are stored in the form of a ListView. Hence we need to use an Adapter Class to provide that data to the activity class.

DrawerItemCustomAdapter.java


package com.journaldev.navigationdrawer;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class DrawerItemCustomAdapter extends ArrayAdapter<DataModel> {

    Context mContext;
    int layoutResourceId;
    DataModel data[] = null;

    public DrawerItemCustomAdapter(Context mContext, int layoutResourceId, DataModel[] data) {

        super(mContext, layoutResourceId, data);
        this.layoutResourceId = layoutResourceId;
        this.mContext = mContext;
        this.data = data;
    }

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

        View listItem = convertView;

        LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
        listItem = inflater.inflate(layoutResourceId, parent, false);

        ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);
        TextView textViewName = (TextView) listItem.findViewById(R.id.textViewName);

        DataModel folder = data[position];


        imageViewIcon.setImageResource(folder.icon);
        textViewName.setText(folder.name);

        return listItem;
    }
}

The MainActivity.java source code is given below.

MainActivity.java


package com.journaldev.navigationdrawer;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private String[] mNavigationDrawerItemTitles;
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    Toolbar toolbar;
    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    android.support.v7.app.ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTitle = mDrawerTitle = getTitle();
        mNavigationDrawerItemTitles= getResources().getStringArray(R.array.navigation_drawer_items_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        setupToolbar();

        DataModel[] drawerItem = new DataModel[3];

        drawerItem[0] = new DataModel(R.drawable.connect, "Connect");
        drawerItem[1] = new DataModel(R.drawable.fixtures, "Fixtures");
        drawerItem[2] = new DataModel(R.drawable.table, "Table");
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        getSupportActionBar().setHomeButtonEnabled(true);

        DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.layout.list_view_item_row, drawerItem);
        mDrawerList.setAdapter(adapter);
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        setupDrawerToggle();

    }

    private class DrawerItemClickListener implements ListView.OnItemClickListener {

        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }

    }

    private void selectItem(int position) {

        Fragment fragment = null;

        switch (position) {
            case 0:
                fragment = new ConnectFragment();
                break;
            case 1:
                fragment = new FixturesFragment();
                break;
            case 2:
                fragment = new TableFragment();
                break;

            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

            mDrawerList.setItemChecked(position, true);
            mDrawerList.setSelection(position);
            setTitle(mNavigationDrawerItemTitles[position]);
            mDrawerLayout.closeDrawer(mDrawerList);

        } else {
            Log.e("MainActivity", "Error in creating fragment");
        }
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getSupportActionBar().setTitle(mTitle);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    void setupToolbar(){
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }

    void setupDrawerToggle(){
        mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.app_name, R.string.app_name);
        //This is necessary to change the icon of the Drawer Toggle upon state change.
        mDrawerToggle.syncState();
    }
}

In the above code getSupportActionBar().setDisplayHomeAsUpEnabled(false); is used to hide the default back button.

In this code we’ve used a DrawerItemClickListener Class that loads the respective fragment of the list item clicked using a FragmentManager. Also the the title of the ToolBar is changed to the list item clicked using setTitle(mNavigationDrawerItemTitles[position]);.

The fragment classes and their respective layouts are given below.

ConnectFragment.java


package com.journaldev.navigationdrawer;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ConnectFragment extends Fragment {

    public ConnectFragment() {
    }

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

        View rootView = inflater.inflate(R.layout.fragment_connect, container, false);

        return rootView;
    }

}

The layout of the above fragment is defined below.

fragment_connect.xml


<RelativeLayout 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:orientation="vertical">


    <TextView
        android:id="@+id/label"
        android:layout_alignParentTop="true"
        android:layout_marginTop="100dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="45dp"
        android:text="Connect"
        android:textStyle="bold"/>

    <TextView
        android:layout_below="@id/label"
        android:layout_centerInParent="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12dp"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:text="Edit fragment_connect.xml to change the appearance"
        android:id="@+id/textView2" />

</RelativeLayout>

The other two items are defined in exactly the same way as above hence we’re skipping it here.

Navigation Drawer Android Example Output

Below is the output produced by our navigation drawer android example application.

android navigation drawer example

This brings an end to android navigation drawer example tutorial. You can download the final Android Navigation Drawer Project from the below link.

Comments

  1. Ayush says:

    how can i add header in it. if i add header it repeated again and again

  2. Shameem says:

    hi
    I am shameem
    Please resolve this error in App

    2019-02-20 18:06:13.889 2415-2415/com.example.newnavigation E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.newnavigation, PID: 2415
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.newnavigation/com.example.newnavigation.MainActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2747)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2808)
    at android.app.ActivityThread.-wrap12(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1541)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:165)
    at android.app.ActivityThread.main(ActivityThread.java:6375)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:802)
    Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
    at android.support.v7.app.AppCompatDelegateImpl.setSupportActionBar(AppCompatDelegateImpl.java:345)
    at android.support.v7.app.AppCompatActivity.setSupportActionBar(AppCompatActivity.java:130)
    at com.example.newnavigation.MainActivity.setupToolbar(MainActivity.java:121)
    at com.example.newnavigation.MainActivity.onCreate(MainActivity.java:35)
    at android.app.Activity.performCreate(Activity.java:6845)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1119)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2700)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2808) 
    at android.app.ActivityThread.-wrap12(ActivityThread.java) 
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1541) 
    at android.os.Handler.dispatchMessage(Handler.java:102) 
    at android.os.Looper.loop(Looper.java:165) 
    at android.app.ActivityThread.main(ActivityThread.java:6375) 
    at java.lang.reflect.Method.invoke(Native Method) 
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912) 
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:802) 

    1. kashish says:

      In your styles.xml file. Add these two items.

      false
      true

      Example:


      @color/colorPrimary
      @color/colorPrimaryDark
      @color/colorAccent
      false
      true

  3. Alessandro vikram says:

    How can I add a home button in addition to those connect,fragment…. nd onclick it should direct me to the home page!! -Thanks

  4. aniket says:

    can you post tablefragment and fixturesfragment java file

  5. Shara says:

    01/25 11:19:08: Launching app
    $ adb shell am start -n “com.example..navigation/com.example..navigation.MainActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
    Connected to process 5828 on device emulator-5554
    Application terminated.

    I’m having this error program is not running properly–it is showing Unfortunately stopped

  6. Mridul Agarwal says:

    How do i set the first fragment to open when i start the app instead of the blank fragment

    1. CHERRY YAP says:

      you may add another tag between and

  7. waqar says:

    i need to start navigation below the appbar,what change i need to do in your project

  8. John says:

    Hey if I need the Buttons black and the toolbar white what I nedd to change?

  9. Badru says:

    Caused by: java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.support.v7.app.ActionBar.setDisplayHomeAsUpEnabled(boolean)’ on a null object reference

    1. Badru says:

      Fixed…

      1. Nidhi says:

        I am getting the same error. How to solve this?

  10. yolo says:

    06-23 17:15:20.965 7234-8041/? V/NativeCrypto: Read error: ssl=0x7f5b4afec0: I/O error during system call, Software caused connection abort
    06-23 17:15:20.975 7234-7412/? V/NativeCrypto: Read error: ssl=0x7f68287a80: I/O error during system call, Software caused connection abort
    06-23 17:15:20.982 4161-5467/? V/NativeCrypto: Read error: ssl=0x7f7f833700: I/O error during system call, Software caused connection abort
    06-23 17:15:20.997 7038-7318/? V/NativeCrypto: Read error: ssl=0x7f7f84e4c0: I/O error during system call, Software caused connection abort
    06-23 17:19:21.623 4473-5657/? V/NativeCrypto: SSL shutdown failed: ssl=0x7f5a039700: I/O error during system call, Software caused connection abort
    06-23 17:19:29.053 4473-5657/? V/NativeCrypto: SSL shutdown failed: ssl=0x7f4d7c6500: I/O error during system call, Software caused connection abort
    06-23 17:20:04.820 4473-5657/? V/NativeCrypto: SSL shutdown failed: ssl=0x7f7f8ecc40: I/O error during system call, Software caused connection abort
    06-23 17:20:18.837 4473-5657/? V/NativeCrypto: SSL shutdown failed: ssl=0x7f7f8ea6c0: I/O error during system call, Software caused connection abort
    06-23 17:21:38.241 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 90
    06-23 17:22:09.654 4161-5210/? W/GeofencerStateMachine: Ignoring removeGeofence because network location is disabled.
    06-23 17:26:38.255 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 95
    06-23 17:30:15.835 4161-5210/? W/GeofencerStateMachine: Ignoring removeGeofence because network location is disabled.
    06-23 17:30:19.858 4161-5210/? W/GeofencerStateMachine: Ignoring removeGeofence because network location is disabled.
    06-23 17:31:38.310 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 98
    06-23 17:36:38.614 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 97
    06-23 17:41:38.652 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 102
    06-23 17:46:38.722 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 97
    06-23 17:51:39.129 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 102
    06-23 17:56:39.193 2872-2892/? I/OHPD: [BgDetect][PD] found PD is caused by skipped uid 10212 usg 104
    06-23 18:01:12.779 2872-3392/? I/InputDispatcher: Dropped event because of pending overdue app switch.
    06-23 18:07:15.128 4161-5210/? W/GeofencerStateMachine: Ignoring removeGeofence because network location is disabled.
    06-23 18:09:08.275 4228-4228/? D/RegisteredAidCache: Not updating routing table because NFC is off.
    06-23 18:09:08.279 4228-4228/? D/RegisteredNfcid2Cache: Not updating routing table because NFC is off.
    06-23 18:09:08.693 11922-11922/? I/MAMComponents: Not initializing MAM classes because the MDM package is not installed.
    06-23 18:09:08.694 11922-11922/? I/MAMComponents: Not initializing MAM classes because the MDM package is not installed.
    06-23 18:09:09.593 11971-11971/? E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.bhaveyashda.nvdrawer, PID: 11971
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.bhaveyashda.nvdrawer/com.bhaveyashda.nvdrawer.MainActivity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2728)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2814)
    at android.app.ActivityThread.-wrap12(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1527)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:154)
    at android.app.ActivityThread.main(ActivityThread.java:6290)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
    Caused by: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
    at android.support.v7.app.AppCompatDelegateImplV9.setSupportActionBar(AppCompatDelegateImplV9.java:204)
    at android.support.v7.app.AppCompatActivity.setSupportActionBar(AppCompatActivity.java:129)
    at com.bhaveyashda.nvdrawer.MainActivity.setupToolbar(MainActivity.java:119)
    at com.bhaveyashda.nvdrawer.MainActivity.onCreate(MainActivity.java:34)
    at android.app.Activity.performCreate(Activity.java:6760)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1134)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2681)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2814) 
    at android.app.ActivityThread.-wrap12(ActivityThread.java) 
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1527) 
    at android.os.Handler.dispatchMessage(Handler.java:102) 
    at android.os.Looper.loop(Looper.java:154) 
    at android.app.ActivityThread.main(ActivityThread.java:6290) 
    at java.lang.reflect.Method.invoke(Native Method) 
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) 
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) 

    The above is my android monitor log, My app is not running it is getting crashed, please help

  11. yolo says:

    drawerItem[0] = new DataModel(R.drawable.connect, “Connect”);
    drawerItem[1] = new DataModel(R.drawable.fixtures, “Fixtures”);
    drawerItem[2] = new DataModel(R.drawable.table, “Table”);

    The above three line are giving me error what do I have to put in the drawable folder to correct this ??, I have not downloaded your project instead copied the code to android studio

    1. Aqsa says:

      download any three icons and name them
      Connect,Fixtures,Table
      respectively

  12. ahmed says:

    hello sir,
    its showing me error:
    switch (position) {
    case 0:
    fragment = new Fragment();
    break;
    case 1:
    fragment = new FixturesFragment();
    break;
    case 2:
    fragment = new TableFragment();
    break;

    default:
    break;
    }

    Error: cannot resolve symbol TableFragment()

    1. Deedar Ali says:

      have you created TableFragment class in your project check it?

  13. Nayan says:

    R.drawable.connect Its showing an error… Where to set it in drawable xml files

    plz explain

  14. Gaga says:

    Can you share an example how to communicate with more fragments in this case ????
    For example, after the user connects the another fragment UI appears or something like that, please?? I am new and I am learning lot, but your tutorial is the perfect one I have so far found 😉

  15. Gaga says:

    public class TableFragment extends ListFragment implements AdapterView.OnItemClickListener {

    ListView contacts;
    public TableFragment() {
    }

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

    View view = inflater.inflate(R.layout.fragment_contacts, container, false);
    contacts = (ListView)view.findViewById(R.id.listViewAllContacts);

    return view;
    }
    @Override
    public void onActivityCreated (Bundle savedInstanceState){
    super.onActivityCreated(savedInstanceState);
    ArrayAdapter adapter = ArrayAdapter.createFromResource(getActivity(),
    R.array.Planets, android.R.layout.simple_list_item_1);
    setListAdapter(adapter);
    getListView().setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView adapterView, View view, int i, long l) {

    Toast.makeText(getActivity(), “Item: ” + i, Toast.LENGTH_SHORT).show();
    }
    }

    How can I change the code in MainActivity.java so that I can replace the fragmentMenager with the ListFragment instead of just Fragment? IS that possible? Because I need that implementation, please. Thanks in advance

    1. Gaga says:

      I just figured it out 😉 .

      in the MainActivity.java I have modified this method:

      private void selectItem(int position) {

      Fragment fragment = null;

      ListFragment listFragment = null;
      switch (position) {
      case 0:
      fragment = new ConnectFragment();
      break;
      case 1:
      fragment = new FixturesFragment();
      break;
      case 2:
      listFragment = new TableFragment();
      break;

      default:
      break;
      }

      if (fragment != null) {
      FragmentManager fragmentManager = getSupportFragmentManager();
      fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).commit();

      mDrawerList.setItemChecked(position, true);
      mDrawerList.setSelection(position);
      setTitle(mNavigationDrawerItemTitles[position]);
      mDrawerLayout.closeDrawer(mDrawerList);

      } else if(listFragment != null){
      FragmentManager fragmentManager = getSupportFragmentManager();
      fragmentManager.beginTransaction().replace(R.id.content_frame, listFragment).commit();

      mDrawerList.setItemChecked(position, true);
      mDrawerList.setSelection(position);
      setTitle(mNavigationDrawerItemTitles[position]);
      mDrawerLayout.closeDrawer(mDrawerList);
      }
      else {
      Log.e(“MainActivity”, “Error in creating fragment”);
      }
      }

      and also in the xml file for the table fragment_table.xml I have replaced inside the RelativeLayot as the following:

  16. joel Hernandez says:

    Hello, good afternoon
    I have a doubt
    I have the previous menu, but I want to add a google map to all the menu options with their respective current location, how can I do it?

  17. asad says:

    This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

    i am getting this error and app kept on crashing

    1. Anupam says:

      Hi,
      Set this in your styles.xml :

      false

      Thanks

    2. Heena says:

      Go in manifest and add android:theme=”@style/Theme.AppCompat.Light.NoActionBar” in the activity which contain navigation drawer

  18. Thomas says:

    Please help me on how to add header image and text to the list navigation drawer.(Above the list items)

  19. Naddi says:

    Great Tutorial.. Everything seems to be working fine… but i cant get the fragments to show when clicked on the drawer.. please help… Either than that, your tutorial is great..

  20. moein says:

    hi thank you for your tutorials.

  21. Radhika says:

    Very nice tutorial. Thanks.

    But i m having error with ActionbarDrawerToggle, getSupportFragmentManager and getSupportActionBar in MainActivity.java.

    Please suggest me the solution for this.

  22. vineetha says:

    hi i would like to know where to put the drawer icon in code? i mean .. i have not seen any way to put hamburger Icon in the word and so i am unable to show it with my drawer pls help me

  23. Omar says:

    Hi!

    The code you published is not working. In MainActivity.java, in the line mDrawerList.setOnClickLixtener()… I get a red line under the parameter. You should write mDrawerList.setOnItemClickListener() instead,

  24. Priyanka says:

    Pls help me in mainactivity.java file i the word arry; connect;table ….are in read color as error what to do now ????

  25. md zaid says:

    i did not add any code in gradle.i am getting error in manifest file also

  26. md zaid says:

    hi, i am getting these problem in the code.
    switch (position) {
    case 0:
    fragment = new ConnectFragment();
    break;
    case 1:
    fragment = new FixturesFragment();
    break;
    case 2:
    fragment = new TableFragment();
    break;

    default:
    break; please help!!

    1. Anupam says:

      Hi md zaid,
      Can you do a clean build and then see if it works?
      Also, can you ensure that your emulator is using Android SDK 15 or above?
      Last resort, if the app is crashing, you can post the logs from Android Studio here.
      Thanks

    2. dilip says:

      ConnectFragment,FixturesFragment,TableFragment these are class names.
      first you have to create classs with extend fragments

  27. Rakesh says:

    I need to display menu below the manu bar

    1. Rakesh says:

      below the title bar

  28. Jay AK says:

    Thank you so much dude. I’ve been searching for days for an example like this for a project in a course i’m taking, where i need a navigation drawer and an action bar. you just saved a fellow programmer
    Thank you

    1. Anupam says:

      Appreciate that 🙂

  29. Nunu says:

    How to change theme?

    1. Anupam says:

      Hi Nunu,
      You can change the app theme in the file styles.xml

      Thanks

  30. Youmoo says:

    Like the way you explain things 🙂

    I think the last 2 lines in MainActivity#onCreate should be swapped :

    “`
    mDrawerLayout.setDrawerListener(mDrawerToggle); // because mDrawerToggle is null here
    setupDrawerToggle();
    “`

    Thank you

    1. Anupam says:

      Hi Youmoo,
      Thanks for pointing that out.

  31. HCK says:

    May i know which folder you put the hamburger icon inside?
    because i want to change the icon, but i dunno the path
    thank you

    1. Anupam says:

      res->drawable->ic_drawer

      Thanks

  32. Mudra says:

    plz help me , how to change the color of hamburger Icon

    1. Anupam says:

      Hi Mudra,
      I didn’t get you. Can you be a little more specific?

      Thanks

  33. sachin purohit says:

    i follow the code…but my app is not opening…it’s opening and then crash..help me

    1. Anupam says:

      Hi sachin purohit,
      Can you send me the crash log thats printed in the log console of Android Studio?

      Thanks

  34. Junaedi says:

    I follow this tutorial and awesome!
    But I’m searching for right navigation drawer, is there any good tutorial that can be applied for me?
    Thanks

    1. Anupam says:

      I’ll write a tutorial on the same. Soon!

    2. Thommas says:

      I don’t know if it was posted but here you go..

      Put this code snippet in you onCreate before the setContentView();
      getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

      and set the ListViews layout_gravity to right in you xml.

      THis is how I managed to do it 🙂

  35. karthikeyan says:

    very nice tutorial thank you

    but i need extra profile image and name also how to do this

    1. Anupam says:

      Hi Karthikeyan,

      The latest android support library provides us with widget. You can use the sample code from the Navigation Drawer Activity when you create a new project.

      Other workarounds:
      You can use this library https://github.com/mikepenz/MaterialDrawer by importing the gradle dependency as
      compile(‘com.mikepenz:materialdrawer:5.5.0@aar’) {
      transitive = true
      }

      Or instead of using a listview inside the drawer we can use a ReyclerView with Multiple View Types. Randomly use a view type as the header that displays the profile image, details. I’ll be discussing this approach in a separate tutorial soon.

      Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages