Latest

Android Navigation Drawer Example with a Step by Step Tutorial Guide

Android Navigation drawer is now a normal when creating an Android app.

It provides a higher consumer expertise because the consumer can easily entry more app functionality – on a small display smartphone.

Personally, it’s actually fun to make use of since I simply should swipe a finger to use or access a view.

This submit is a step by step guide on learn how to create a navigation drawer on your Android app.

android navigation drawer horizontal closed

android navigation drawer vertical opened

First, create a new venture File > New > Android Software Challenge > “NavigationDrawerExample”

Android Navigation Drawer Example – Step by Step Guide

1. Change activity_main.xml to navigation drawer format.

2. Prepare MainActivity properties

personal String[] mNavigationDrawerItemTitles;
personal DrawerLayout mDrawerLayout;
personal ListView mDrawerList;

three. res/values/strings.xml – put the drawer gadgets array


Create
Read
Help

4. put inside MainActivity.java oncreate – initialize three properties.

mNavigationDrawerItemTitles= getResources().getStringArray(R.array.navigation_drawer_items_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);

5. create res/layouts/listview_item_row.xml

This is for record view inside navigation drawer. Right click on res/layouts/ folder > New > File > Identify it “listview_item_row.xml”

6. create an object for drawer merchandise ObjectDrawerItem.java

File > New > Class > Identify it “ObjectDrawerItem”

public class ObjectDrawerItem

public int icon;
public String identify;

// Constructor.
public ObjectDrawerItem(int icon, String identify)

this.icon = icon;
this.identify = identify;

7. put nav drawer item icons in res/drawable-hdpi/

I have:

ic_action_copy.png
ic_action_refresh.png
ic_action_share.png

8. put inside oncreate – record the drawer gadgets

ObjectDrawerItem[] drawerItem = new ObjectDrawerItem[3];

drawerItem[0] = new ObjectDrawerItem(R.drawable.ic_action_copy, “Create”);
drawerItem[1] = new ObjectDrawerItem(R.drawable.ic_action_refresh, “Read”);
drawerItem[2] = new ObjectDrawerItem(R.drawable.ic_action_share, “Help”);

9. Create the custom adapter DrawerItemCustomAdapter.java

public class DrawerItemCustomAdapter extends ArrayAdapter

Context mContext;
int layoutResourceId;
ObjectDrawerItem knowledge[] = null;

public DrawerItemCustomAdapter(Context mContext, int layoutResourceId, ObjectDrawerItem[] knowledge)

tremendous(mContext, layoutResourceId, knowledge);
this.layoutResourceId = layoutResourceId;
this.mContext = mContext;
this.knowledge = knowledge;

@Override
public View getView(int position, View convertView, ViewGroup father or mother)

View listItem = convertView;

LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
listItem = inflater.inflate(layoutResourceId, father or mother, false);

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

ObjectDrawerItem folder = knowledge[position];

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

return listItem;

10. Cross the listing of drawer gadgets to DrawerItemCustomAdapter

This is to create the adapter – inside MainActivity.java oncreate

DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.format.listview_item_row, drawerItem);

11. Set the adapter – oncreate

mDrawerList.setAdapter(adapter);

12. create the merchandise click listener DrawerItemClickListener.java

personal class DrawerItemClickListener implements ListView.OnItemClickListener

@Override
public void onItemClick(AdapterView mum or dad, View view, int place, long id)
selectItem(position);

personal void selectItem(int position)

Fragment fragment = null;

change (position)
case zero:
fragment = new CreateFragment();
break;
case 1:
fragment = new ReadFragment();
break;
case 2:
fragment = new HelpFragment();
break;

default:
break;

if (fragment != null)
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction().exchange(R.id.content_frame, fragment).commit();

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

else
Log.e(“MainActivity”, “Error in creating fragment”);

13. Create the needed fragments and the views to inflate in res/format/

(i.e. CreateFragment.java => res/format/fragment_create.xml)

CreateFragment.java

public class CreateFragment extends Fragment

public CreateFragment()

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

View rootView = inflater.inflate(R.format.fragment_create, container, false);

return rootView;

fragment_create.xml


14. Set the merchandise click listener – oncreate

…and Inside MainActivity.java

mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

15. attempt to run – swipe your finger left to right – it works!

As of this stage, the app icon is ineffective to the nav drawer. It can’t set off the nav drawer. That is what will probably be our next steps.

16. For app icon management for nav drawer, add new property on MainActivity

ActionBarDrawerToggle mDrawerToggle;

17. add ic_drawer.png in res/drawable-hdpi/

18. add open and close description in values/string/

Open navigation drawer
Close navigation drawer

19. Set properties for correct title display

personal CharSequence mDrawerTitle;
personal CharSequence mTitle;

..and inside onCreate, after setContentView

mTitle = mDrawerTitle = getTitle();

20. Add the app icon control code inside MainActivity oncreate

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this,
mDrawerLayout,
R.drawable.ic_drawer,
R.string.drawer_open,
R.string.drawer_close
)

/** Referred to as when a drawer has settled in a utterly closed state. */
public void onDrawerClosed(View view)
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);

/** Referred to as when a drawer has settled in a utterly open state. */
public void onDrawerOpened(View drawerView)
tremendous.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);

;

mDrawerLayout.setDrawerListener(mDrawerToggle);

getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);

21. Add onOptionsItemSelected() technique

This is really needed to make app icon a toggle of nav drawer.

@Override
public boolean onOptionsItemSelected(MenuItem merchandise)

if (mDrawerToggle.onOptionsItemSelected(merchandise))
return true;

return super.onOptionsItemSelected(item);

22. Override setTitle() technique

That is actually needed for altering titles.

@Override
public void setTitle(CharSequence title)
mTitle = title;
getActionBar().setTitle(mTitle);

after which change this line

getActionBar().setTitle(mNavigationDrawerItemTitles[position]);

to this line

setTitle(mNavigationDrawerItemTitles[position]);

23. onPostCreate() technique

This is really needed to vary the up caret icon before the app icon

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

Lower Android (2.2+) Version Compatibility

Android Navigation Drawer solely works for Honeycomb and Up. To make it work with pre-honeycome units, you must use the Android help library. Obtain it first using your SDK manager and then comply with the step by step information here.

This link may additionally show you how to.

I found the next video helpful too.

http://stackoverflow.com/q/17388574
https://developer.android.com/design/patterns/navigation-drawer.html
http://developer.android.com/training/implementing-navigation/nav-drawer.html