Slide Menu Navigation Drawer in Android Sherlock

Hi Guys,

In this tutorial I describe about the slide menu navigation drawer in android. For this I have to use the Sherlock library as for supporting the Sherlock Fragment which is supported the lower version of API also.

ActionBarSherlock is an extension of the support library designed to facilitate the use of the action bar design pattern across all versions of Android with a single API.

The library will automatically use the native action bar when appropriate or will automatically wrap a custom implementation around your layouts. This allows you to easily develop an application with an action bar for every version of Android from 2.x and up.You can download the Sherlock library from Here.

Now you just import this library into your project area of eclipse. And Add this action sherlock library with your uses of project. How to Add the library with your project?
Right Click of your proejct -> Properties -> Android -> Add (click here and select your library).

In this library android support v4 library already there then there is no need to put android-support v4 library in your project. If this is availability in your project libs then remove from there.

Navigation Drawer:  The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app�s main navigation options.
The user can bring the navigation drawer onto the screen by swiping from the left edge of the screen or by touching the application icon on the action bar. You can download the sample for same by use of Action Bar and more detail about Navigaion Drawert Here.

So in this tutorial I have implemented this navigation drawer features by using of sherlock library.
Here is the video you can watch what have implemented with this.

Now Lets Start the Coding to implements the Slid Menu Navigation Drawer in android.
 

activity_main.xml

MainActivity.java

package com.sunil.navigation;

import android.content.res.Configuration;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.actionbarsherlock.view.MenuItem;

public class MainActivity extends SherlockFragmentActivity implements OnItemClickListener{

 private DrawerLayout drawlayout=null;
 private ListView listview=null;
 private ActionBarDrawerToggle actbardrawertoggle=null;
 
 private String[] myfriendname=null;
    private String[] myfriendnickname=null;
    private int[] photo=null;
    //Fragment fragment1 = new Fragment1();
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
   myfriendname = new String[] { "Sunil Gupta", "Abhishek Tripathi","Sandeep Pal", "Amit Verma" };
         myfriendnickname = new String[] { "sunil android", "Abhi cool","Sandy duffer", "Budhiya jokar"};
         photo = new int[] { R.drawable.sunil, R.drawable.abhi, R.drawable.sandy, R.drawable.amit};
         
         drawlayout = (DrawerLayout)findViewById(R.id.drawer_layout);
         listview = (ListView) findViewById(R.id.listview_drawer);
         
         getSupportActionBar().setHomeButtonEnabled(true);
         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
         getSupportActionBar().setDisplayShowHomeEnabled(true);
         getSupportActionBar().setDisplayShowTitleEnabled(true);
         
         drawlayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
         drawlayout.setBackgroundColor(Color.WHITE);
         
         MenuListAdapter menuadapter=new MenuListAdapter(getApplicationContext(), myfriendname, myfriendnickname, photo); 
         listview.setAdapter(menuadapter);
         
         actbardrawertoggle= new ActionBarDrawerToggle(this, drawlayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close)
            {
          public void onDrawerClosed(View view) {
     super.onDrawerClosed(view);
    }

    public void onDrawerOpened(View drawerView) {
     super.onDrawerOpened(drawerView);
    
    }
          
         };
         drawlayout.setDrawerListener(actbardrawertoggle);
         
         listview.setOnItemClickListener(this);
        
         if (savedInstanceState == null) {
             selectItem(0);
         }
 }
 
 @Override
 protected void onPostCreate(Bundle savedInstanceState) {
  super.onPostCreate(savedInstanceState);
  actbardrawertoggle.syncState();
 }
 
 @Override
 public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  actbardrawertoggle.onConfigurationChanged(newConfig);
 }
 
 @Override
 public void onItemClick(AdapterView arg0, View arg1, int position, long arg3) {
  selectItem(position);
  
 }
 
 
  private void selectItem(int position) {
   
         FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        
         // Locate Position
         switch (position) {
         case 0:
          Fragment1 fragment1=new Fragment1();
             ft.replace(R.id.content_frame, fragment1);
             Bundle b = new Bundle();
             b.putString("name",myfriendname[position]);
             b.putInt("photo",photo[position]);
             fragment1.setArguments(b);
             break;
         case 1:
          Fragment2 fragment2=new Fragment2();
             ft.replace(R.id.content_frame, fragment2);
             Bundle b1 = new Bundle();
             b1.putString("name",myfriendname[position]);
             b1.putInt("photo",photo[position]);
             fragment2.setArguments(b1);
             break;
         case 2:
          Fragment3 fragment3=new Fragment3();
             ft.replace(R.id.content_frame, fragment3);
             Bundle b2 = new Bundle();
             b2.putString("name",myfriendname[position]);
             b2.putInt("photo",photo[position]);
             fragment3.setArguments(b2);
             break;
         case 3:
          Fragment4 fragment4=new Fragment4();
             ft.replace(R.id.content_frame, fragment4);
             Bundle b3 = new Bundle();
             b3.putString("name",myfriendname[position]);
             b3.putInt("photo",photo[position]);
             fragment4.setArguments(b3);
             break;
         }
         ft.commit();
         listview.setItemChecked(position, true);
         setTitle(myfriendname[position]);
         drawlayout.closeDrawer(listview);
     }
  
  @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 
   if(item.getItemId()==android.R.id.home)
   {
    if(drawlayout.isDrawerOpen(listview))
    {
     drawlayout.closeDrawer(listview);
    }
    else {
    drawlayout.openDrawer(listview);
   }
   }
  return super.onOptionsItemSelected(item);
 }  

}

drawer_list_item.xml

MenuListAdapter.java

package com.sunil.navigation;

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 MenuListAdapter extends BaseAdapter{

     private Context context;
     private String[] mtitle;
     private String[] msubTitle;
     private int[] micon;
     private LayoutInflater inflater;
     
  public  MenuListAdapter(Context context, String title[], String subtilte[], int icon[])
  {
   this.context=context;
   this.mtitle=title;
   this.msubTitle=subtilte;
   this.micon=icon;
   
  }
 @Override
 public int getCount() {
  return mtitle.length;
 }

 @Override
 public Object getItem(int arg0) {
  return arg0;
 }

 @Override
 public long getItemId(int arg0) {
  return arg0;
 }

 @Override
 public View getView(int position, View arg1, ViewGroup parent) {
  
  TextView title;
  TextView subtitle;
  ImageView icon;
  
  inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.drawer_list_item, parent, false);
       
        title = (TextView) itemView.findViewById(R.id.title);
        subtitle = (TextView) itemView.findViewById(R.id.subtitle);
        icon = (ImageView) itemView.findViewById(R.id.icon);
        
        title.setText(mtitle[position]);
        subtitle.setText(msubTitle[position]);
        icon.setImageResource(micon[position]);
 
        return itemView;
  
 }

}

fragment1.xml

Fragment1.java

package com.sunil.navigation;

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.actionbarsherlock.app.SherlockFragment;

public class Fragment1 extends SherlockFragment{

 private ImageView imageview=null;
 private TextView textname=null;
 private TextView textdescription=null;
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
  View view=inflater.inflate(R.layout.fragment1, container, false);
  
  imageview=(ImageView)view.findViewById(R.id.imageView_pic);
  textname=(TextView)view.findViewById(R.id.textView_name);
  textdescription=(TextView)view.findViewById(R.id.textView_descroption);
  
  textname.setTextColor(Color.BLACK);
  textdescription.setTextColor(Color.BLACK);
  
  Bundle bundle=this.getArguments(); 
  if(bundle != null)
  {
   String name=bundle.getString("name");
   int pic=bundle.getInt("photo");
   textname.setText(name);
   imageview.setImageResource(pic);
  }
  
  textdescription.setText("I'm currently working as Android developer,  interested in a wide-range of technology topics, including programming languages,  opensource and any other cool technology that catches my eye. I love developing apps for Android, designing and coding.");
  return view;
 }
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  
 }
}

Manifest.xml

Same way you can add the Fragment2, Fragment3 and Fragment4. I have not added this classes to make clean this article.

 

You can download the source code ABSMenuNavigationDrawer and from GitHub <