Download Code

In this tutorial you will learn how to create application which contain navigation drawer android.Before starting to create navigation drawer.You should read Fragments,Frame Layout with Sliding Drawer,Fragments with Fragment Layout tutorial.

Navigation Drawer(Drawer Android)

The navigation drawer is a panel.Displays the app’s main navigation drawer options on the left edge of the screen Link.

AppCompat Activity

Base class for activities that use the support library action bar features.

Base Adapter

Common base class of common implementation for an Adapter that can be used in both ListView  and Spinner.

Let’s start create new android application project.Go to activity_main.xml and add DrawerLayout,Frame Layout,ListView.

fragments, fragments in android, navigation drawer, navigation drawer in android, frame layout, frame layout with fragment, how to use frame layout with fragment, fragments with frame layout in android, sliding drawer using frame layout, frame layout with sliding drawer, how to create navigation drawer in android, navigation drawer in android tutorial, sliding navigation drawer tutorial android, sliding navigation drawer android tutorial, drawer layout in android, drawer layout tutorial, drawer layout,ImageView,TextView

Create another layout(nav_list_item.xml).Add ImageView and TextView in it.

fragments, fragments in android, navigation drawer, navigation drawer in android, frame layout, frame layout with fragment, how to use frame layout with fragment, fragments with frame layout in android, sliding drawer using frame layout, frame layout with sliding drawer, how to create navigation drawer in android, navigation drawer in android tutorial, sliding navigation drawer tutorial android, sliding navigation drawer android tutorial, drawer layout in android, drawer layout tutorial, drawer layout,ImageView,TextView

Now to go to values > strings.xml.Add two array.

  • Array of titles
  • Array of icons

fragments, fragments in android, navigation drawer, navigation drawer in android, frame layout, frame layout with fragment, how to use frame layout with fragment, fragments with frame layout in android, sliding drawer using frame layout, frame layout with sliding drawer, how to create navigation drawer in android, navigation drawer in android tutorial, sliding navigation drawer tutorial android, sliding navigation drawer android tutorial, drawer layout in android, drawer layout tutorial, drawer layout,ImageView,TextView

Next create fragments xml,activity.

bsee.xml

fragments, fragments in android, navigation drawer, navigation drawer in android, frame layout, frame layout with fragment, how to use frame layout with fragment, fragments with frame layout in android, sliding drawer using frame layout, frame layout with sliding drawer, how to create navigation drawer in android, navigation drawer in android tutorial, sliding navigation drawer tutorial android, sliding navigation drawer android tutorial, drawer layout in android, drawer layout tutorial, drawer layout,ImageView,TextView

BSEE.java

package com.example.codecnav;

import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class BSEE extends Fragment{

	public BSEE(){}
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		View view = inflater.inflate(R.layout.bsee, container, false);
		return view;
	}
}

Create new class drawer android items CodecDrawerItem.java which will be used for set and get icon,title.

package com.example.codecnav;

public class CodecDrawerItem {
	private String title;
	private int icon;

	public CodecDrawerItem(){}

	public CodecDrawerItem(String title, int icon){
		this.title = title;
		this.icon = icon;
	}
	public String getTitle(){
		return this.title;
	}
	public int getIcon(){
		return this.icon;
	}
	public void setTitle(String title){
		this.title = title;
	}

	public void setIcon(int icon){
		this.icon = icon;
	}


}

Create another class for drawer android CodecNavDrawerListAdapter.java which will be used to set layout of drawer item.

package com.example.codecnav;

import java.util.ArrayList;


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

public class CodecNavDrawerListAdapter extends BaseAdapter{

	private Context con;
	private ArrayList itemList;
	
	public CodecNavDrawerListAdapter(Context con,ArrayList itemList){
		this.con = con;
		this.itemList = itemList;
	}
	
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return itemList.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return itemList.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		if (convertView == null) {
            LayoutInflater mInflater = (LayoutInflater)con.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = mInflater.inflate(R.layout.nav_list_item, null);
        }
         
        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
      
         
        imgIcon.setImageResource(itemList.get(position).getIcon());        
        txtTitle.setText(itemList.get(position).getTitle());
        
        
        
        return convertView;
	}

}

MainActivity.java

package com.example.codecnav;

import java.util.ArrayList;


import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.AppCompatActivity;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;


public class MainActivity extends AppCompatActivity {


	private DrawerLayout myDrawer;    // drawer layout variable
	private ListView list;             //listview variable
	private ActionBarDrawerToggle dToogle;        // drawer toogle
	private CharSequence title;    // nav drawer title
	private CharSequence appTitle;   // used to store app title
	private String[] menuTitles;    // slide menu items
	private TypedArray icons;        //array of icons
	private ArrayList DrawerItems;       // array list for drawer items(navigation)
	private CodecNavDrawerListAdapter listAdapter;        // class variable
	private ActionBar actionBar;                      // action bar variable to access features


	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		actionBar = getSupportActionBar();
		actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#02537e")));
		setContentView(R.layout.activity_main);
		appTitle = title = getTitle();            
		menuTitles = getResources().getStringArray(R.array.department_items);
		icons = getResources().obtainTypedArray(R.array.department_icon_items);
		myDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
		list = (ListView) findViewById(R.id.list_slidermenu);
		DrawerItems =  new ArrayList();
		DrawerItems.add(new CodecDrawerItem(menuTitles[0],icons.getResourceId(0, -1)));
		DrawerItems.add(new CodecDrawerItem(menuTitles[1],icons.getResourceId(1, -1)));
		DrawerItems.add(new CodecDrawerItem(menuTitles[2],icons.getResourceId(2, -1)));
		icons.recycle();
		
		list.setOnItemClickListener(new SlideMenuClickListener());

		// setting the nav drawer list adapter
		listAdapter = new CodecNavDrawerListAdapter(getApplicationContext(),DrawerItems);
		list.setAdapter(listAdapter);

		// enabling action bar app icon and behaving it as toggle button
		getSupportActionBar().setDisplayHomeAsUpEnabled(true);
		getSupportActionBar().setHomeButtonEnabled(true);
		getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_drawer);

		dToogle = new ActionBarDrawerToggle(this, myDrawer,
				R.drawable.ic_drawer, //nav menu toggle icon
				R.string.app_name, // nav drawer android open - description for accessibility
				R.string.app_name // nav drawer close - description for accessibility
				) {
			public void onDrawerClosed(View view) {
				getSupportActionBar().setTitle(appTitle);
				// calling onPrepareOptionsMenu() to show action bar icons
				invalidateOptionsMenu();
			}

			public void onDrawerOpened(View drawerView) {
				getSupportActionBar().setTitle(title);
				// calling onPrepareOptionsMenu() to hide action bar icons
				invalidateOptionsMenu();
			}
		};
		myDrawer.setDrawerListener(dToogle);

		if (savedInstanceState == null) {
			// on first time display view for first nav item
			displayView(0);
		}
	}

	/**
	 * Slide menu item click listener
	 * */
	private class SlideMenuClickListener implements
	ListView.OnItemClickListener {
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position,
				long id) {
			// display view for selected nav drawer item
			displayView(position);
		}
	}


	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// toggle nav drawer on selecting action bar app icon/title
		if (dToogle.onOptionsItemSelected(item)) {
			return true;
		}
		// Handle action bar actions click
		switch (item.getItemId()) {
			
		
		default:
			return super.onOptionsItemSelected(item);
		}
	}




	/**
	 * Diplaying fragment view for selected nav drawer list item
	 * */
	private void displayView(int position) {
		// update the main content by replacing fragments
		Fragment fragment = null;
		switch (position) {
		case 0:
			fragment = new Home();
			break;
		case 1:
			fragment = new BSEE();

			break;
		case 2:
			fragment = new BCSE();
			break;
			
		}

		if (fragment != null) {
			FragmentManager fragmentManager = this.getFragmentManager();

			fragmentManager.beginTransaction()
			.replace(R.id.frame_container, fragment).addToBackStack(null).commit();

			// update selected item and title, then close the drawer
			list.setItemChecked(position, true);
			list.setSelection(position);
			setTitle(menuTitles[position]);
			myDrawer.closeDrawer(list);
		} else {
			// error in creating fragment
			Log.e("MainActivity", "Error in creating fragment");
		}
	}

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

	/**
	 * When using the ActionBarDrawerToggle, you must call it during
	 * onPostCreate() and onConfigurationChanged()...
	 */

	@Override
	protected void onPostCreate(Bundle savedInstanceState) {
		super.onPostCreate(savedInstanceState);
		// Sync the toggle state after onRestoreInstanceState has occurred.
		dToogle.syncState();
	}

	@Override
	public void onConfigurationChanged(Configuration newConfig) {
		super.onConfigurationChanged(newConfig);
		// Pass any configuration change to the drawer toggls
		dToogle.onConfigurationChanged(newConfig);
	}

}

Now run your android application project.

fragments, fragments in android, navigation drawer, navigation drawer in android, frame layout, frame layout with fragment, how to use frame layout with fragment, fragments with frame layout in android, sliding drawer using frame layout, frame layout with sliding drawer, how to create navigation drawer in android, navigation drawer in android tutorial, sliding navigation drawer tutorial android, sliding navigation drawer android tutorial, drawer layout in android, drawer layout tutorial, drawer layout,ImageView,TextView
That’s it for this tutorial.
Thanks.