Android Sliding Pane Side Menu Tutorial

Android provide the sliding pane which is side menu to let the user to navigate different activity. Android Sliding pane is the older version of Navigation Drawer before material design is coming out and it is slightly different which it does not overlay the activity. Besides, it is a good replacement navigation drawer if you dont want to overlay the activity. It also can combine with the fragment same usage as navigation drawer. In this tutorial, I will tell you how to use android sliding pane side menu in your new android project. Just need to follow what i do.

Sample Screensliding pane side menu

 

Creating a New Project

1. Open Android Studio IDE in your computer.
2. Create a new project and Edit the Application name to “SlidingPaneExample”.
(Optional) You can edit the company domain or select the suitable location for current project tutorial. Then click next button to proceed.
3. Select Minimum SDK (API 15:Android 4.0.3 (IceCreamSandwich). I choose the API 15 because many android devices currently are support more than API 15. Click Next button.
4. Choose “Empty Activity” and Click Next button
5. Lastly, press finish button.

Create 2 Fragments

Right click your project name and create blank fragments for content and sliding pane. For the name you can give the first fragment “SlidingPaneFragment” while another fragment “ContentFragment”. It will automatic create the xml file for both fragments.

Edit ContentFragment xml layout

At first, we go to edit the content fragment xml layout, you can follow the source code in the below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TextView
        android:text="Slide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
         />

    <WebView android:id="@+id/webPage"
             android:layout_height="match_parent"
             android:layout_width="match_parent"/>

</LinearLayout>

Edit SlidingPaneFragment xml layout

After that go to edit another fragment layout for the sliding pane how you want it to look like.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    
    <ListView  android:id="@+id/bookList" 
               android:layout_width="match_parent"
               android:layout_height="match_parent"/>
</LinearLayout>

Create a xml layout for sliding pane listview item

<?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="match_parent" >
    
    
    <TextView  android:id="@+id/bkmName" android:textStyle="bold"
               android:layout_width="wrap_content"
   			   android:layout_height="wrap_content"
   			   android:layout_alignParentLeft="true"/>
    
    
    <TextView android:id="@+id/bkmLink" 
        	  android:layout_width="wrap_content"
   			  android:layout_height="wrap_content"
   			  android:layout_alignParentLeft="true"
   			  android:layout_below="@id/bkmName" />

</RelativeLayout>

Edit activity_main.xml layout

In your activity_main layout add the sliding pane layout and both fragments on it.

<android.support.v4.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/sp" >
    

    <fragment android:id="@+id/leftpane"
              android:name="com.questdot.slidingpaneexample.SlidingPaneFragment"
              android:layout_width="190dp"
      		  android:layout_height="match_parent"
              android:layout_gravity="left"
        tools:layout="@layout/sliding_pane_layout" />
    

    <fragment android:id="@+id/rightpane"
              android:name="com.questdot.slidingpaneexample.ContentFragment"
              android:layout_width="350dp"
      		  android:layout_height="match_parent"
              android:layout_gravity="right"
              android:layout_weight="1"
        tools:layout="@layout/content_fragment_layout" />
    
</android.support.v4.widget.SlidingPaneLayout>

Create a Modal class

Add a new modal class name “Bookmark”.

public class Bookmark {
    public String name;
    public String link;

	public Bookmark(String name, String link) {
        this.name = name;
        this.link = link;
    }
}

Create an Interface

After that, create the interface “BookmarkListener” in your project.

public interface BookmarkListener {
    public void onChangeBookmark(String bookmark);
}

Add a new Adapter

By creating the new adapter, right click the project and create a new class name “LinkAdapter”. Then follow the source code below.

public class LinkAdapter extends ArrayAdapter<Bookmark> {
	
	private List<Bookmark> bookList;
	private Context ctx;
	
	public LinkAdapter(List<Bookmark> bookList, Context ctx) {
		super(ctx, R.layout.link_list_item, bookList);
		this.ctx = ctx;
		this.bookList = bookList;
	}

	@Override
	public int getCount() {
		return bookList.size();
	}

	@Override
	public Bookmark getItem(int position) {		
		return bookList.get(position);
	}

	@Override
	public long getItemId(int position) {		
		return bookList.get(position).hashCode();
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		View v = convertView;
		
		if ( v == null) {
			LayoutInflater inf = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			v = (View) inf.inflate(R.layout.link_list_item, null);
			TextView tName = (TextView) v.findViewById(R.id.bkmName);
			TextView tlink = (TextView) v.findViewById(R.id.bkmLink);
			
			tName.setText(bookList.get(position).name);
			tlink.setText(bookList.get(position).link);
		}
		
		return v;
	}
	
	
	

}

Edit ContentFragment class

Go to this class and edit it to load the web url in the webview when you click the listview from sliding pane.

public class ContentFragment extends Fragment {

	private WebView webView;
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
							 Bundle savedInstanceState) {
		
		View v = inflater.inflate(R.layout.content_fragment_layout, container, false);
		webView = (WebView) v.findViewById(R.id.webPage);
		webView.getSettings().setJavaScriptEnabled(true);
		setHasOptionsMenu(true);
		return v;
	}


	public void setBookmark(String link) {
		if (link != null) {
			System.out.println("loading url");
			webView.loadUrl(link);
		}
	}


}

Edit SlidingPaneFragment Class

After that, go to edit your sliding pane fragment class to display the bookmark list and click event in this fragment.

public class SlidingPaneFragment extends Fragment {
	
	private List<Bookmark> bookmarkList = new ArrayList<Bookmark>();
	
	
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		init();
	}


	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
							 Bundle savedInstanceState) {
		
		View v = inflater.inflate(R.layout.sliding_pane_layout, container, true);
		ListView lView = (ListView) v.findViewById(R.id.bookList);
		LinkAdapter la = new LinkAdapter(bookmarkList, getActivity());
		lView.setAdapter(la);
		lView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position,
									long id) {
				( (BookmarkListener) getActivity()).onChangeBookmark( bookmarkList.get(position).link );
				((MainActivity)getActivity()).pane.closePane();
			}
		});
		setHasOptionsMenu(true);
		return v;
	}



	private void init() {
		bookmarkList.add(new Bookmark("Google", "https://www.google.com/"));
		bookmarkList.add(new Bookmark("Apple", "http://www.apple.com/"));
		bookmarkList.add(new Bookmark("Microsoft", "https://www.microsoft.com/en-my/"));
	}


}

Edit MainActivity.java class

Go to your mainactivity.java class and implements the panelslide listener so you can slide the menu from the edge of the screen.

public class MainActivity extends AppCompatActivity implements BookmarkListener{
   SlidingPaneLayout pane;


   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      pane = (SlidingPaneLayout) findViewById(R.id.sp);
      pane.setPanelSlideListener(new PaneListener());
      
      if (!pane.isSlideable()) {
         getFragmentManager().findFragmentById(R.id.leftpane).setHasOptionsMenu(false);
         getFragmentManager().findFragmentById(R.id.rightpane).setHasOptionsMenu(true);
      }
   }


   
   private class PaneListener implements SlidingPaneLayout.PanelSlideListener {

      @Override
      public void onPanelClosed(View view) {
         System.out.println("Panel closed");
         
         getFragmentManager().findFragmentById(R.id.leftpane).setHasOptionsMenu(false);
         getFragmentManager().findFragmentById(R.id.rightpane).setHasOptionsMenu(true);
      }

      @Override
      public void onPanelOpened(View view) {
         System.out.println("Panel opened");
         getFragmentManager().findFragmentById(R.id.leftpane).setHasOptionsMenu(true);
         getFragmentManager().findFragmentById(R.id.rightpane).setHasOptionsMenu(false);
      }

      @Override
      public void onPanelSlide(View view, float arg1) {
         System.out.println("Panel sliding");
      }
      
   }



   @Override
   public void onChangeBookmark(String bookmark) {

      ContentFragment f = (ContentFragment) getFragmentManager().findFragmentById(R.id.rightpane);
      f.setBookmark(bookmark);
      
   }

}

Dont Forget

Add permission internet because i am using webview to demostrate.

<uses-permission android:name="android.permission.INTERNET"/>

Run your Project

Finally, you can run your project in your emulator to use the sliding panel and see whats different with navigation drawer.

(Android Sliding Pane Side Menu)

Source Code

(Visited 1,997 times, 1 visits today)
Advertisements

Yong Loon Ng

Ng Yong Loon, better known as Kristofer is a software engineer and computer scientist who doubles up as an entrepreneur.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *