Android left sliding menu

A left sliding menu is a useful feature implemented in many applications (e.g. Facebook, Google plus etc.) as your application does not have enough space to show all navigation menu items on a single screen. The left sliding menu does not show by default. It shows when you click on the screen and drag from left to right. It allows the user to navigate between different application's modules.

In Android, you can create a left slide menu by using the Navigation Drawer. To define the Navigation Drawer in your application, you need to use the DrawerLayout. In the DrawerLayout, you can place a FragmentLayout for your main content view and a ListView to show items of the sliding menu.

To get start, now you need to create a new Android project. Then open the activity_main.xml and replace its content with the code below:

  <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" >
  
     <!-- The main content view -->
         <FrameLayout
             android:id="@+id/frame_container"
             android:layout_width="match_parent"
             android:layout_height="match_parent" />
  
     <!-- The navigation drawer list -->
        <ListView
           android:id="@+id/left_slide"
           android:layout_width="240dp"
           android:layout_height="match_parent"
           android:layout_gravity="start"
           android:background="#ffffff"
           android:choiceMode="singleChoice"
           android:divider="@android:color/transparent"
           android:dividerHeight="0dp" />
  
  </android.support.v4.widget.DrawerLayout>

After that, create a list_item.xml file that defines the template for every row of the ListView. Each row of the ListView (in this example) contains two elements: image and text.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout  
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="48dp"
     android:padding="5dp" >
  
     <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:contentDescription="@string/imgdesc" />
  
     <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/icon"
        android:gravity="center_vertical"
        android:textColor="#000000"
        android:textSize="20sp" />
    
  </RelativeLayout>

In values/strings.xml file, you will add the following code to define an array of strings. It is the collection of items of the slide menu.
<string-array name="titles">
     <item>Search</item>
     <item>Settings</item>
     <item>About</item>

   </string-array>

Then create a CustomAdapter class that extends the ArrayAdapter class. The object of the CustomAdapter will be used to supply data to the ListView.

  package com.example.andtip;
  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 CustomAdapter extends ArrayAdapter<String> {
  
  	int groupid;
  	String[] titles;
  	Context context;
  	
  	public CustomAdapter(Context context, int vg, int id, String[] titles){
  		super(context,vg, id, titles);
  		this.context=context;
  		groupid=vg;
  		this.titles=titles;
  	
  	}
  
  public View getView(int position, View convertView, ViewGroup parent) {
  
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(groupid, parent, false);     
        TextView textTitle= (TextView) itemView.findViewById(R.id.title);
        textTitle.setText(titles[position]);
        ImageView ico=(ImageView)itemView.findViewById(R.id.icon);
        ico.setImageResource(getImage(position));
        return itemView;
  	}
  
  public Integer getImage(int pos){
  		Integer[] imageIds=new Integer[3];
  		imageIds[0]=R.drawable.iconsearch;
  		imageIds[1]=R.drawable.ipcof;
  		imageIds[2]=R.drawable.about;
  		return(imageIds[pos]);
  	
  	}
  
  }

Now, to make the slide menu work, in the MainActivity class in the onCreate method, you will write code to create a reference to the ListView, create CustomAdapter object, and set the object to the ListView by using the setAdapter method.

  package com.example.andtip;
  import android.app.Activity;
  import android.os.Bundle;
  import android.support.v4.widget.DrawerLayout;
  import android.view.Menu;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.AdapterView;
  import android.widget.AdapterView.OnItemClickListener;
  import android.widget.ListView;
  import android.widget.TextView;
  import android.widget.Toast;
  
  
  public class MainActivity extends Activity {
  	private String[] SlideListViewItems;
     private ListView drawerListView;
     DrawerLayout drawer;
     Activity context;
     protected void onCreate(Bundle savedInstanceState) {
     	//TODO Auto-generated method stub
     	super.onCreate(savedInstanceState);
     	context=this;
     	setContentView(R.layout.activity_main);
     	// get slide list items from strings.xml      
     	SlideListViewItems = getResources().getStringArray(R.array.titles);
     	//get ListView defined in activity_main.xml
     	drawerListView = (ListView) findViewById(R.id.left_slide); 
     	//Set item click listener to slide list
     	drawerListView.setOnItemClickListener(new SlideItemAction());
     	//Set the adapter for the list view
     	drawerListView.setAdapter(new CustomAdapter(this, R.layout.list_item, R.id.title, SlideListViewItems));	
    
   }
   
  
      @Override
      public boolean onCreateOptionsMenu(Menu menu) {
          getMenuInflater().inflate(R.menu.main, menu);
          return true;
      }
  
      private class SlideItemAction implements OnItemClickListener{
  	   	
  	   	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  	    		
  	    		ViewGroup vg=(ViewGroup)view;
  	    		TextView txt=(TextView)vg.findViewById(R.id.title);
  	    		//show selected item
  	    		Toast.makeText(context, txt.getText().toString(), Toast.LENGTH_LONG).show();
  	    		
  	   }
      }
  
  
  }

Before running the project, make sure you have the following images in the res/drawable folder: iconsearch, ipconf, and about.

You should not that this slide menu is placed in the activity so that it is available to all fragments that are hosted by the activity. If you want to make the slide menu available to a specific fragment, you can use the setDrawerLockMode to hide and show the slide menu as you need. The following code will help you to accomplish the task.

 DrawerLayout drawer=(DrawerLayout)findViewById(R.id.drawer_layout);
  public void unlockDrawer(boolean b){
  			if(b){
  				drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
  			}
  			else{
  				drawer.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
  			}
  		
  	}

Android-left-sliding-menu

Posted by: Dara | post date: 06-07-2014 | Subject: Android Apps Development

Android left sliding menu

Android Apps Development tips

Comments