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.
Table of Contents
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.
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
Copy
<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
Copy
<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
Copy
<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
Copy
<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
Copy
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
Copy
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
Copy
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
Copy
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
Copy
<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.
Below is the output produced by our navigation drawer android example application.
This brings an end to android navigation drawer example tutorial. You can download the final Android Navigation Drawer Project from the below link.
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)
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
aniket says
can you post tablefragment and fixturesfragment java file
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
Mridul Agarwal says
How do i set the first fragment to open when i start the app instead of the blank fragment
CHERRY YAP says
you may add another tag between and
waqar says
i need to start navigation below the appbar,what change i need to do in your project
John says
Hey if I need the Buttons black and the toolbar white what I nedd to change?
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
Badru says
Fixed…
Nidhi says
I am getting the same error. How to solve this?
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
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
Aqsa says
download any three icons and name them
Connect,Fixtures,Table
respectively
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()
Deedar Ali says
have you created TableFragment class in your project check it?
Nayan says
R.drawable.connect Its showing an error… Where to set it in drawable xml files
plz explain
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 😉
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
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:
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?
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
Anupam Chugh says
Hi,
Set this in your styles.xml :
false
Thanks
Heena says
Go in manifest and add android:theme=”@style/Theme.AppCompat.Light.NoActionBar” in the activity which contain navigation drawer
Thomas says
Please help me on how to add header image and text to the list navigation drawer.(Above the list items)
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..
moein says
hi thank you for your tutorials.
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.
rakesh says
https://stackoverflow.com/questions/17893161/getsupportactionbar-the-method-getsupportactionbar-is-undefined-for-the-type
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
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,
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 ????
md zaid says
i did not add any code in gradle.i am getting error in manifest file also
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!!
Anupam Chugh 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
dilip says
ConnectFragment,FixturesFragment,TableFragment these are class names.
first you have to create classs with extend fragments
Rakesh says
I need to display menu below the manu bar
Rakesh says
below the title bar
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
Anupam Chugh says
Appreciate that 🙂
Nunu says
How to change theme?
Anupam Chugh says
Hi Nunu,
You can change the app theme in the file styles.xml
Thanks
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
Anupam Chugh says
Hi Youmoo,
Thanks for pointing that out.
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
Anupam Chugh says
res->drawable->ic_drawer
Thanks
Mudra says
plz help me , how to change the color of hamburger Icon
Anupam Chugh says
Hi Mudra,
I didn’t get you. Can you be a little more specific?
Thanks
sachin purohit says
i follow the code…but my app is not opening…it’s opening and then crash..help me
Anupam Chugh says
Hi sachin purohit,
Can you send me the crash log thats printed in the log console of Android Studio?
Thanks
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
Anupam Chugh says
I’ll write a tutorial on the same. Soon!
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 🙂
karthikeyan says
very nice tutorial thank you
but i need extra profile image and name also how to do this
Anupam Chugh 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
NItesh says
https://youtu.be/kR_L5sRr67c
help me with these