android custom navigation drawer

Android has different navigation options available to navigate between views in an android application.Navigation drawer is the the one of the best option out of them. In this tutorial Ill try to demonstrate howimplement a navigation drawer according to your customizations. If look at the navigation drawer sampleapplication at developer.android.com website, you can see it is a listview used to navigate through differentfragments. As you can see in the below screenshot it simply list down the names of different planets andwhen we click on a single item it will close the navigation drawer and it will load an image of that planet.

Android Custom Navigation DrawerFeb 14, 2014Android

Navigation Drawer with Advance Customizations

converted by Web2PDFConvert.com

http://tutecentral.com/http://www.tutecentral.comhttp://www.tutecentral.com/android/http://www.tutecentral.com/wp-content/uploads/2014/03/navigation_drawer_cover.pnghttp://developer.android.com/http://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

Navigat ion Drawer Sample App Navigat ion

Most of the google apps use navigation drawer. But those navigation drawers are customized by developersaccording to application requirement and usability. But android developer guide will not show you how tocustomize the navigation drawer according to users need. See below image to get an idea about customnavigation drawers.

Example Custom Navigat ion Drawer Apps


http://www.tutecentral.com/wp-content/uploads/2014/02/sample-app-navigation1.pnghttp://www.tutecentral.com/wp-content/uploads/2014/02/custom_nd_apps.pnghttp://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

In this tutorial Ill show you how to create a custom navigation drawer. First part of this tutorial Ill cover thebasic implementation of navigation drawer from second part onwards Ill show you how to customize it.Ifyou know basic implementation then skip this part and refer the customization part. You can find sourcecode and video demonstration of this tutorial at end of this page.

Demo Video

Basic Implementation of Navigation Drawer

Step 1 : Download ResourcesBefore you start you need to download below resources.

Resource Pack : Download the Resource Pack

Now extract the NavigationDrawer_ResourcePack.zip file you download.

Step 2 : Create a Project and Setup the ProjectCreate a new android project. Give the Application Name as NavigationDrawer, Package Name as com.tutecentral.navigationdrawer and select the Minimum Required SDK as API 14: Android 4.0(ICS). Ill keep the Activity Name as MainActivity and Layout Name as activity_main.

Copy and paste all drawable files in NavigationDrawer_ResourcePack -> app_drawables folder intoapplication drawables. Now we done with project setup.

Step 3 : Create Layout Files and FragmentFor demonstration purposes Ill use three fragments to navigate between navigation drawer items. Okay


http://downloads.tutecentral.com/wp-content/uploads/2014/02/NavigationDrawer_ResourcePack.ziphttp://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

Now create four layout files respectively custom_drawer_item, fragment_layout_one,fragment_layout_two and fragment_layout_three. custom_drawer_item is used for build acustom listview and other three fragment layout used for Fragment Views.

Open activity_main.xml file in res->layout folder. Copy and paste below code intoactivity_main.xml layout file. Dont forget to add the v4 support library (android-support-v4.jar) to libfolder in the project.

Steps to Create a New Layout File.

1. Right Click on the res -> layout folder2. Go to New -> Android XML File3. Select the Resource Type as Layout4. Give a File Name5. Select the Root Element (Most of the time it is a Layout type)6. Click Finish button

activity_main.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30


http://schemas.android.com/apk/res/androidhttp://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

Now copy and paste the below xml to custom_drawer_item.xml layout file. Be aware this xml file willbe change when we creating a custom navigation drawer

Steps to Add Support Library to Application

1. Goto Following Path Your Android SDK Drive \sdk\extras\android\support\v42. Copy android-support-v4.jar file3. Paste it in lib folder in your application

custom_drawer_item.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

Now copy and paste the below xml code to all three fragment xml files. Dont forget to change the idattribute values in other two layout file. See the comment in the code.

Next add following item to strings.xml file in res-> values folder

Now we are done with xml files.

43

44

45

46

47

48

49

50

51

52

android:layout_marginTop="1dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:background="#DADADC"

>

fragment_layout_one.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

U pdate strings.xml

1

2

Open drawer

Close drawer



Step 4 : Create Fragment Class and Custom ListView AdapterNext task is to create fragment class for all three layout files and implement a custom listview adapter. Create five class list down below

CustomDrawerAdapterDrawerItemFragmentOneFragmentTwoFragmentThree

Copy and paste below codes to FragmentOne, FragmentTwo and FragmentThree class respectively. All theseclass are subclass of Fragment Class

Steps to Create a New Class File.

1. Right Click on the src-> com.tutecentral.navigationdrawer package2. Go to New -> Class3. Give a Class Name4. Click Finish button

FragmentO ne.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

package com.tutecentral.navigationdrawer;

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 FragmentOne extends Fragment {

ImageView ivIcon;

TextView tvItemName;

public static final String IMAGE_RESOURCE_ID = "iconResourceID";

public static final String ITEM_NAME = "itemName";

public FragmentOne() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_layout_one, container,

false);

ivIcon = (ImageView) view.findViewById(R.id.frag1_icon);


http://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

31

32

33

34

35

36

37

38

39

tvItemName = (TextView) view.findViewById(R.id.frag1_text);

tvItemName.setText(getArguments().getString(ITEM_NAME));

ivIcon.setImageDrawable(view.getResources().getDrawable(

getArguments().getInt(IMAGE_RESOURCE_ID)));

return view;

}

}

FragmentTwo.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39









public class FragmentTwo extends Fragment {

ImageView ivIcon;




public FragmentTwo()

{

}

@Override



View view=inflater.inflate(R.layout.fragment_layout_two,container, false);

ivIcon=(ImageView)view.findViewById(R.id.frag2_icon);

tvItemName=(TextView)view.findViewById(R.id.frag2_text);




return view;

}

}

FragmentT hree.java

1 package com.tutecentral.navigationdrawer;



Next open the DrawerItem.java class and update it as below code. This class also be upgrade whencreating the custom navigation drawer

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39








public class FragmentThree extends Fragment {

ImageView ivIcon;




public FragmentThree() {

}

@Override



View view = inflater.inflate(R.layout.fragment_layout_three, container,

false);

ivIcon = (ImageView) view.findViewById(R.id.frag3_icon);

tvItemName = (TextView) view.findViewById(R.id.frag3_text);




return view;

}

}

D rawerI tem.java

1

2

3

4

5

6

7

8

9

10

11


public class DrawerItem {

String ItemName;

int imgResID;

public DrawerItem(String itemName, int imgResID) {

super();

ItemName = itemName;

this.imgResID = imgResID;



Now we can create a custom adapter for drawer listview. Open the CustomDrawerAdapter.java classand update the class according to below code. Keep in mind class will be update when customizing thenavigation drawer.

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

}

public String getItemName() {

return ItemName;

}

public void setItemName(String itemName) {

ItemName = itemName;

}

public int getImgResID() {

return imgResID;

}

public void setImgResID(int imgResID) {

this.imgResID = imgResID;

}

}

C ustomD rawerA dapter.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31


import java.util.List;

import android.app.Activity;

import android.content.Context;




import android.widget.ArrayAdapter;



public class CustomDrawerAdapter extends ArrayAdapter {

Context context;

List drawerItemList;

int layoutResID;

public CustomDrawerAdapter(Context context, int layoutResourceID,

List listItems) {

super(context, layoutResourceID, listItems);

this.context = context;

this.drawerItemList = listItems;

this.layoutResID = layoutResourceID;

}

@Override

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

// TODO Auto-generated method stub



Okay we are done with the adapter class now we need to update the MainActivity.java class. This classIll update step by step so you can understand how it works. Open the MainActivity.java class.

First declare the below objects.

Now initialize the declared object in onCreate() method

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

DrawerItemHolder drawerHolder;

View view = convertView;

if (view == null) {

LayoutInflater inflater = ((Activity) context).getLayoutInflater();

drawerHolder = new DrawerItemHolder();

view = inflater.inflate(layoutResID, parent, false);

drawerHolder.ItemName = (TextView) view

.findViewById(R.id.drawer_itemName);

drawerHolder.icon = (ImageView) view.findViewById(R.id.drawer_icon);

view.setTag(drawerHolder);

} else {

drawerHolder = (DrawerItemHolder) view.getTag();

}

DrawerItem dItem = (DrawerItem) this.drawerItemList.get(position);

drawerHolder.icon.setImageDrawable(view.getResources().getDrawable(

dItem.getImgResID()));

drawerHolder.ItemName.setText(dItem.getItemName());

return view;

}

private static class DrawerItemHolder {

TextView ItemName;

ImageView icon;

}

}

1

2

3

4

5

6

7

8

9

10

11

12

public class MainActivity extends Activity {

private DrawerLayout mDrawerLayout;

private ListView mDrawerList;

private ActionBarDrawerToggle mDrawerToggle;

private CharSequence mDrawerTitle;

private CharSequence mTitle;

CustomDrawerAdapter adapter;

List dataList;

...// dont copy this line



Now add item to the dataList object. So those list items will display in the drawer

Now initialize and set the adapter to the drawer listview

Now create a method in MainActivity.java to select the correct fragment. Ill call this methodSelectItem() which will take a one integer parameter, to identify the position of the selected item. Inthis method Ill use a switch-case statement to get correct fragment. I created only three fragments fordemonstration purpose. You can do this even using a single fragment class.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

...

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Initializing

dataList = new ArrayList();

mTitle = mDrawerTitle = getTitle();

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

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

mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,

GravityCompat.START);

...

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// Add Drawer Item to dataList


dataList.add(new DrawerItem("Message", R.drawable.ic_action_email));

dataList.add(new DrawerItem("Likes", R.drawable.ic_action_good));

dataList.add(new DrawerItem("Games", R.drawable.ic_action_gamepad));

dataList.add(new DrawerItem("Lables", R.drawable.ic_action_labels));

dataList.add(new DrawerItem("Search", R.drawable.ic_action_search));

dataList.add(new DrawerItem("Cloud", R.drawable.ic_action_cloud));

dataList.add(new DrawerItem("Camara", R.drawable.ic_action_camera));

dataList.add(new DrawerItem("Video", R.drawable.ic_action_video));

dataList.add(new DrawerItem("Groups", R.drawable.ic_action_group));

dataList.add(new DrawerItem("Import & Export",

R.drawable.ic_action_import_export));

dataList.add(new DrawerItem("About", R.drawable.ic_action_about));

dataList.add(new DrawerItem("Settings", R.drawable.ic_action_settings));

dataList.add(new DrawerItem("Help", R.drawable.ic_action_help));

...

1

2

3

4

5

6

...

adapter = new CustomDrawerAdapter(this, R.layout.custom_drawer_item,

dataList);

mDrawerList.setAdapter(adapter);

...

S electI tem(int position) in M ainA ctivity.java class

1

2

public void SelectItem(int possition) {



3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

Fragment fragment = null;

Bundle args = new Bundle();

switch (possition) {

case 0:

fragment = new FragmentOne();

args.putString(FragmentOne.ITEM_NAME, dataList.get(possition)

.getItemName());

args.putInt(FragmentOne.IMAGE_RESOURCE_ID, dataList.get(possition)

.getImgResID());

break;

case 1:

fragment = new FragmentTwo();

args.putString(FragmentTwo.ITEM_NAME, dataList.get(possition)

.getItemName());

args.putInt(FragmentTwo.IMAGE_RESOURCE_ID, dataList.get(possition)

.getImgResID());

break;

case 2:

fragment = new FragmentThree();

args.putString(FragmentThree.ITEM_NAME, dataList.get(possition)

.getItemName());

args.putInt(FragmentThree.IMAGE_RESOURCE_ID, dataList.get(possition)

.getImgResID());

break;

case 3:



.getItemName());


.getImgResID());

break;

case 4:



.getItemName());


.getImgResID());

break;

case 5:



.getItemName());


.getImgResID());

break;

case 6:



.getItemName());


.getImgResID());

break;

case 7:




57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110


.getItemName());


.getImgResID());

break;

case 8:



.getItemName());


.getImgResID());

break;

case 9:



.getItemName());


.getImgResID());

break;

case 10:



.getItemName());


.getImgResID());

break;

case 11:



.getItemName());


.getImgResID());

break;

case 12:



.getItemName());


.getImgResID());

break;

default:

break;

}

fragment.setArguments(args);

FragmentManager frgManager = getFragmentManager();

frgManager.beginTransaction().replace(R.id.content_frame, fragment)

.commit();

mDrawerList.setItemChecked(possition, true);

setTitle(dataList.get(possition).getItemName());

mDrawerLayout.closeDrawer(mDrawerList);

}



Now you need to override following methods and update those methods as following code

Now we need to create custom OnItemClickListener. To do that create a another class calledDrawerItemClickListener inside MainActivity.java. DrawerItemClickListener class implementsthe OnItemClickListener.

Now came back to OnCreate() method and set the OnItemClickListener as below

Now we need to enable the HomeUpButton for action bar and set the toggle to the Drawer Layout

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

@Override

public void setTitle(CharSequence title) {

mTitle = title;

getActionBar().setTitle(mTitle);

}

@Override

protected void onPostCreate(Bundle savedInstanceState) {

super.onPostCreate(savedInstanceState);

// Sync the toggle state after onRestoreInstanceState has occurred.

mDrawerToggle.syncState();

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// The action bar home/up action should open or close the drawer.

// ActionBarDrawerToggle will take care of this.

if (mDrawerToggle.onOptionsItemSelected(item)) {

return true;

}

return false;

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

// Pass any configuration change to the drawer toggles

mDrawerToggle.onConfigurationChanged(newConfig);

}

D rawerI temC lickL istener

1

2

3

4

5

6

7

8

9

private class DrawerItemClickListener implements

ListView.OnItemClickListener {

@Override

public void onItemClick(AdapterView parent, View view, int position,

long id) {

SelectItem(position);

}

}

1 mDrawerList.setOnItemClickListener(new DrawerItemClickListener());



Now our MainActivity.java class is completed. Below you can see the complete code forMainActivity.java class

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(true);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

R.drawable.ic_drawer, R.string.drawer_open,

R.string.drawer_close) {

public void onDrawerClosed(View view) {


invalidateOptionsMenu(); // creates call to

// onPrepareOptionsMenu()

}

public void onDrawerOpened(View drawerView) {

getActionBar().setTitle(mDrawerTitle);



}

};

mDrawerLayout.setDrawerListener(mDrawerToggle);

if (savedInstanceState == null) {

SelectItem(0);

}

M ainA ctivity.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24


import java.util.ArrayList;





import android.app.FragmentManager;

import android.content.res.Configuration;

import android.support.v4.app.ActionBarDrawerToggle;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.view.Menu;

import android.view.MenuItem;


import android.widget.AdapterView;

import android.widget.ListView;

public class MainActivity extends Activity {

private DrawerLayout mDrawerLayout;

private ListView mDrawerList;

private ActionBarDrawerToggle mDrawerToggle;



25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

private CharSequence mDrawerTitle;

private CharSequence mTitle;

CustomDrawerAdapter adapter;

List dataList;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Initializing

dataList = new ArrayList();

mTitle = mDrawerTitle = getTitle();

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

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

mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,

GravityCompat.START);
















adapter = new CustomDrawerAdapter(this, R.layout.custom_drawer_item,

dataList);

mDrawerList.setAdapter(adapter);

mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(true);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

R.drawable.ic_drawer, R.string.drawer_open,

R.string.drawer_close) {

public void onDrawerClosed(View view) {






79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

}

public void onDrawerOpened(View drawerView) {

getActionBar().setTitle(mDrawerTitle);



}

};

mDrawerLayout.setDrawerListener(mDrawerToggle);


SelectItem(0);

}

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

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

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

return true;

}





case 0:



.getItemName());


.getImgResID());

break;

case 1:



.getItemName());


.getImgResID());

break;

case 2:



.getItemName());


.getImgResID());

break;

case 3:



.getItemName());



133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186


.getImgResID());

break;

case 4:



.getItemName());


.getImgResID());

break;

case 5:



.getItemName());


.getImgResID());

break;

case 6:



.getItemName());


.getImgResID());

break;

case 7:



.getItemName());


.getImgResID());

break;

case 8:



.getItemName());


.getImgResID());

break;

case 9:



.getItemName());


.getImgResID());

break;

case 10:



.getItemName());


.getImgResID());

break;

case 11:




187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240


.getItemName());


.getImgResID());

break;

case 12:



.getItemName());


.getImgResID());

break;

default:

break;

}




.commit();




}

@Override

public void setTitle(CharSequence title) {

mTitle = title;


}

@Override

protected void onPostCreate(Bundle savedInstanceState) {

super.onPostCreate(savedInstanceState);

// Sync the toggle state after onRestoreInstanceState has occurred.

mDrawerToggle.syncState();

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

// Pass any configuration change to the drawer toggles

mDrawerToggle.onConfigurationChanged(newConfig);

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// The action bar home/up action should open or close the drawer.

// ActionBarDrawerToggle will take care of this.

if (mDrawerToggle.onOptionsItemSelected(item)) {

return true;

}



Now we are done with the Basic Implementation of Navigation Drawer you can run this applicationnow to see the output of the basic drawer.

Basic Navigat ion Drawer

You can download the basic navigation drawer sample code at end of this tutorial.

Customizing the Navigation DrawerNow we can update this basic implementation of navigation drawer to more customized navigation drawer.As I mention we have to update existing class and xml layouts to do this. Ill customize the navigationdrawer by adding a SpinnerView to select the user account and add some headers to the listview to

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

return false;

}



@Override


long id) {


}

}

}



categorize the list items (like youtube app).

Step 5 : Creating Custom Spinner ViewCreate a xml layout called custom_spinner_item file in res->layout. Add the following xml code tothe layout file. This is the layout file passed to the custom spinner adapter.

Now create below two class for custom adapter and layout model

CustomSpinnerAdapterSpinnerItem

Now open the SpinnerItem.java and add the below code to the class file.

custom_spinner_item.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

S pinnerI tem.java

1

2

3

4


public class SpinnerItem {



Now you can use this class to create a spinner custom adapter. So open the CustomSpinnerAdapter.java class and update the class according to below cording

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

int drawableResID;

String name;

String email;

public SpinnerItem(int drawableResID, String name, String email) {

super();

this.drawableResID = drawableResID;

this.name = name;

this.email = email;

}

public int getDrawableResID() {

return drawableResID;

}

public void setDrawableResID(int drawableResID) {

this.drawableResID = drawableResID;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getEmail() {

return email;

}

public void setEmail(String email) {

this.email = email;

}

}

C ustomS pinnerA dapter.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17




import android.content.Context;




import android.widget.ArrayAdapter;



public class CustomSpinnerAdapter extends ArrayAdapter{

public CustomSpinnerAdapter(Context context, int layoutResourceID,

int textViewResourceId, List spinnerDataList) {



18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

super(context, layoutResourceID, textViewResourceId, spinnerDataList);

this.context=context;

this.layoutResID=layoutResourceID;

this.spinnerData=spinnerDataList;

}

Context context;

int layoutResID;

List spinnerData;

public CustomSpinnerAdapter(Context context, int layoutResourceID,

List spinnerDataList) {

super(context, layoutResourceID, spinnerDataList);

this.context=context;

this.layoutResID=layoutResourceID;

this.spinnerData=spinnerDataList;

}

@Override

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


return getCustomView(position, convertView, parent);

}

@Override



return getCustomView(position, convertView, parent);

}

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

View row=convertView;

SpinnerHolder holder;

if(row==null)

{

LayoutInflater inflater=((Activity)context).getLayoutInflater();

row=inflater.inflate(layoutResID, parent, false);

holder=new SpinnerHolder();

holder.userImage=(ImageView)row.findViewById(R.id.left_pic);

holder.name=(TextView)row.findViewById(R.id.text_main_name);

holder.email=(TextView)row.findViewById(R.id.sub_text_email);

row.setTag(holder);

}

else

{



Now we are completed the CustomSpinnerAdapter.java class. We can use this class inCustomDrawerAdapter.java to populate a spinner in the navigation drawer.

Next update the custom_drawer_item.xml layout file. See the below code and update your xml file.Toupdate replace the old xml code by below updated code.

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

holder=(SpinnerHolder)row.getTag();

}

SpinnerItem spinnerItem=spinnerData.get(position);

holder.userImage.setImageDrawable(row.getResources().getDrawable(spinnerItem.getDrawableResID()));

holder.name.setText(spinnerItem.getName());

holder.email.setText(spinnerItem.getEmail());

return row;

}

private static class SpinnerHolder

{

ImageView userImage;

TextView name,email;

}

}

updated custom_drawer_item.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

android:layout_height="wrap_content"

android:orientation="vertical"

android:layout_marginTop="20dp"

>



Now we can do updates for other class used to create navigation drawer.

1. Updates For DrawerItem.java class

2. Updates for CustomDrawerAdapter.java Class

In this class changes will only happens to getView() method & DrawerItemHolder internal class. Justcopy and replace the below code to the class file so you may not get any errors while updating.

78

79

80

81

82

83

84

85

86

87

88

89

U pdates for D rawerI tem.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

public class DrawerItem {

String ItemName;

int imgResID;

String title;

boolean isSpinner;

...

public DrawerItem(boolean isSpinner) {

this(null, 0);

this.isSpinner = isSpinner;

}

public DrawerItem(String title) {

this(null, 0);

this.title = title;

}

...

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public boolean isSpinner() {

return isSpinner;

}

...

}



U pdates for C ustomD rawerA dapter.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

@Override



DrawerItemHolder drawerHolder;

View view = convertView;

if (view == null) {

LayoutInflater inflater = ((Activity) context).getLayoutInflater();

drawerHolder = new DrawerItemHolder();

view = inflater.inflate(layoutResID, parent, false);

drawerHolder.ItemName = (TextView) view

.findViewById(R.id.drawer_itemName);

drawerHolder.icon = (ImageView) view.findViewById(R.id.drawer_icon);

drawerHolder.spinner = (Spinner) view

.findViewById(R.id.drawerSpinner);

drawerHolder.title = (TextView) view.findViewById(R.id.drawerTitle);

drawerHolder.headerLayout = (LinearLayout) view

.findViewById(R.id.headerLayout);

drawerHolder.itemLayout = (LinearLayout) view

.findViewById(R.id.itemLayout);

drawerHolder.spinnerLayout = (LinearLayout) view

.findViewById(R.id.spinnerLayout);

view.setTag(drawerHolder);

} else {

drawerHolder = (DrawerItemHolder) view.getTag();

}

DrawerItem dItem = (DrawerItem) this.drawerItemList.get(position);

if (dItem.isSpinner()) {

drawerHolder.headerLayout.setVisibility(LinearLayout.INVISIBLE);

drawerHolder.itemLayout.setVisibility(LinearLayout.INVISIBLE);

drawerHolder.spinnerLayout.setVisibility(LinearLayout.VISIBLE);

List userList = new ArrayList();

userList.add(new SpinnerItem(R.drawable.user1, "Ahamed Ishak",

"ishakgmail.com"));

userList.add(new SpinnerItem(R.drawable.user2, "Brain Jekob",

"brain.jgmail.com"));

CustomSpinnerAdapter adapter = new CustomSpinnerAdapter(context,

R.layout.custom_spinner_item, userList);



3. Updates for MainActivity.java class

In OnCreate method we need call the correct constructor of the DrawerItem class when we adding itemto the dataList object and need to change the if condition which is used to check savedInstanceState== null. See the below coding and update your code.

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

drawerHolder.spinner.setAdapter(adapter);

drawerHolder.spinner

.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView arg0,

View arg1, int arg2, long arg3) {

Toast.makeText(context, "User Changed",

Toast.LENGTH_SHORT).show();

}

@Override

public void onNothingSelected(AdapterView arg0) {


}

});

} else if (dItem.getTitle() != null) {

drawerHolder.headerLayout.setVisibility(LinearLayout.VISIBLE);

drawerHolder.itemLayout.setVisibility(LinearLayout.INVISIBLE);

drawerHolder.spinnerLayout.setVisibility(LinearLayout.INVISIBLE);

drawerHolder.title.setText(dItem.getTitle());

} else {

drawerHolder.headerLayout.setVisibility(LinearLayout.INVISIBLE);

drawerHolder.spinnerLayout.setVisibility(LinearLayout.INVISIBLE);

drawerHolder.itemLayout.setVisibility(LinearLayout.VISIBLE);

drawerHolder.icon.setImageDrawable(view.getResources().getDrawable(

dItem.getImgResID()));

drawerHolder.ItemName.setText(dItem.getItemName());

}

return view;

}

private static class DrawerItemHolder {

TextView ItemName, title;

ImageView icon;

LinearLayout headerLayout, itemLayout, spinnerLayout;

Spinner spinner;

}



Next update the SelectItem() method. You need to update this according to the dataList item position.Fragment should be only need to change when we click in a selectable item not in header or spinner. Sochange the case statements to point correct selectable item. (Be careful you may get runtime errors if youupdate incorrectly.) I delete the 0,1 and 6 case statement and add new case statement for 14,15 and 16positions .

U pdates for O nC reate() method in M ainA ctivity

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

...


dataList.add(new DrawerItem(true)); // adding a spinner to the list

dataList.add(new DrawerItem("My Favorites")); // adding a header to the list





dataList.add(new DrawerItem("Main Options"));// adding a header to the list








dataList.add(new DrawerItem("Other Option")); // adding a header to the list




...


if (dataList.get(0).isSpinner()

& dataList.get(1).getTitle() != null) {

SelectItem(2);

} else if (dataList.get(0).getTitle() != null) {

SelectItem(1);

} else {

SelectItem(0);

}

}

U pdates for S electI tem() method in M ainA ctivity

1

2

3

4

5

6

7

8

9





case 2:





10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

.getItemName());

args.putInt(FragmentThree.IMAGE_RESOURCE_ID, dataList

.get(possition).getImgResID());

break;

case 3:



.getItemName());


.getImgResID());

break;

case 4:



.getItemName());


.getImgResID());

break;

case 5:



.getItemName());



break;

case 7:



.getItemName());


.getImgResID());

break;

case 8:



.getItemName());



break;

case 9:



.getItemName());


.getImgResID());

break;

case 10:



.getItemName());


.getImgResID());

break;

case 11:



Now update the OnItemClickListener to select the correct fragment when selecting the drawer item.

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111



.getItemName());



break;

case 12:



.getItemName());


.getImgResID());

break;

case 14:



.getItemName());


.getImgResID());

break;

case 15:



.getItemName());


.getImgResID());

break;

case 16:



.getItemName());


.getImgResID());

break;

default:

break;

}




.commit();




}

U pdates for D rawerI temC lickL istener class in M ainA ctivity

1

2

...




Google Facebook 55 Twitter 7 More

Ahamed Ishak

Now our customized drawer is completed. You can run this application in a emulator or in a real androiddevice to see it in action. This is only one way which I found to do the customization in a navigation drawer.This may not be the most convenient way to customize the navigation drawer but we can add any otherviews like check box, buttons and other compatible views to the drawer using this method. Below you candownload the source code for basic navigation drawer and custom navigation drawer. See the videodemonstration below Ill explain how to do this tutorial beginning to end.

If you have any issues regarding this tutorial feel free to ask. You can use comment section to communicatewith me. If you like this tutorial share this with others. Subscribe our GooglePlus,Youtube andFacebook page to get instant notification about our new tutorials and videos. Or subscribe to your websiteusing your email address to get instant email notification. Thank you very much for visiting my website.

Video Demonstration

DownloadsDownload the Source Code

Share this:

Google+

PREVIOUS ARTICLEAndroid Pull To Refresh

NEXT ARTICLERestful API for Android using ASP.NET and SQL Server Part 1

3

4

5

6

7

8

9

10

11

12


@Override


long id) {

if (dataList.get(position).getTitle() == null) {


}

}

}

Suivre 0

TAGS ANDROID CUSTOM SPINNER ADAPTER LIST VIEW LIST VIEW CUSTOM ADAPTER NAVIGATION DRAWER SPINNER VIEW

TweetTweet 7

55LikeLike

17


https://plus.google.com/u/1/+Tutecentral/postshttp://www.youtube.com/user/tutecentralhttps://www.facebook.com/tutecentralhttp://downloads.tutecentral.com/wp-content/uploads/2014/02/NavigationDrawerExample.ziphttp://www.tutecentral.com/android-custom-navigation-drawer/?share=google-plus-1&nb=1http://www.tutecentral.com/android-custom-navigation-drawer/?share=facebook&nb=1http://www.tutecentral.com/android-custom-navigation-drawer/?share=twitter&nb=1https://plus.google.com/+AhamedIshakhttps://plus.google.com/+AhamedIshakhttp://www.tutecentral.com/tag/android-2/http://www.tutecentral.com/tag/custom-spinner-adapter/http://www.tutecentral.com/tag/list-view/http://www.tutecentral.com/tag/list-view-custom-adapter/http://www.tutecentral.com/tag/navigation-drawer/http://www.tutecentral.com/tag/spinner-view/https://twitter.com/intent/tweet?text=Android Custom Navigation Drawer&url=http%3A%2F%2Fwww.tutecentral.com%2Fandroid-custom-navigation-drawer%2F&via=Tute Centralhttp://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.tutecentral.com%2Fandroid-custom-navigation-drawer%2Fhttp://plus.google.com/share?url=http://www.tutecentral.com/android-custom-navigation-drawer/http://pinterest.com/pin/create/button/?url=http://www.tutecentral.com/android-custom-navigation-drawer/&media=http://www.tutecentral.com/wp-content/uploads/2014/03/navigation_drawer_cover.pnghttp://www.tutecentral.com/android-pull-to-refresh/http://www.tutecentral.com/restful-api-for-android-part-1/http://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

Restful API for Android using ASP.NET and SQL Server Part 2

Restful API for Android using ASP.NET and SQL Server Part 1

Android Pull To Refresh

Android Swipe ListView

Ahamed IshakI'm a self motivated person who love to learn new stuff and share them with others.

SIMILAR ARTICLES

Mar 28, 2014

Mar 12, 2014

Jan 24, 2014

Jan 7, 2014


http://www.tutecentral.com/author/ishak-livegmail-com/http://www.tutecentral.com/author/ishak-livegmail-com/https://plus.google.com/+AhamedIshakhttp://www.tutecentral.com/android-custom-navigation-drawer/tutecentralhttp://www.tutecentral.com/restful-api-for-android-part-2/http://www.tutecentral.com/restful-api-for-android-part-2/http://www.tutecentral.com/restful-api-for-android-part-1/http://www.tutecentral.com/restful-api-for-android-part-1/http://www.tutecentral.com/android-pull-to-refresh/http://www.tutecentral.com/android-pull-to-refresh/http://www.tutecentral.com/android-swipe-listview/http://www.tutecentral.com/android-swipe-listview/http://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

Enter your email address to subscribe to this website and receive notifications of new posts by email.

Join 65 other subscribers

Email Address

Subscribe Us

Subscribe for Newsletters via Email

SOCIAL

187 Fans

95 Subscribers

12 Followers

206 Subscribers

Like Us

Tute Central

187 people like Tute Central.

Facebook social plugin

LikeLike


https://www.facebook.com/tutecentralhttps://plus.google.com/+Tutecentralhttp://www.tutecentral.com/feed/http://www.youtube.com/user/tutecentralhttps://www.facebook.com/tutecentralhttp://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

TuteCentral.com - A Developer Site

TuteCentral.com by TuteCentral is licensed under a Creative Commons Attribution 4.0 International License.

Copyright 2014 - TuteCentral.com

Privacy Policy


http://creativecommons.org/licenses/by/4.0/deed.en_UShttp://www.tutecentral.comhttp://creativecommons.org/licenses/by/4.0/deed.en_UShttp://www.tutecentral.com/privacy-policy/http://www.web2pdfconvert.com?ref=PDFhttp://www.web2pdfconvert.com?ref=PDF

android custom navigation drawer

Documents

navigation drawer items

androidnavigation drawer

layout files

android application

new android project

android developer guide

project setup

drawable files