/ Android

SlidingPaneLayout Android Example

This time we are going to look how to implement Sliding Panel in android application. It's just two layouts one the top of other. And the hidden layout will be showed with Sliding animation.

And to make little bit magic, Animation is added in the example. Animation which let us to demonstrate some actions to user and also makes more clarity on whats happening in the app. its a kind of visual representation. In some cases animations are used as attractions.

What is the necessity to use Sliding Pane ?

Purpose to use Sliding pane is when the application have three or more high priority sections or pages to display. If the application have only two or three high priority sections or pages to display, its better to use TabView. SlidingTabLayout is also available with Slide animation.

SlidingPaneLayout demo video

This video demonstartes how SlidingPanleLayout works.

SlidingPaneLayout Example

Create an android activity with SlidingPanelLayout Layout class which is available in support v4 library. In this example the activity's layout contains the menu Items to select different section and the other layout that displays the main content of the app.

UI Part

The activity's layout contains the xml code


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

    <LinearLayout
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#101010"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/android_robot" />
    </LinearLayout>

</android.support.v4.widget.SlidingPaneLayout>
Code part

After adding xml, run the application nowitself the SlidingPanelLayout will work smoothly.

To make more clarity, just the following tweaks are added.

  1. In the Activity's class file, create the variable for SlidingPanelLayout.

  2. If some other actions need to performed when opening and closing the Sliding layout means we need set listener to listen the open and close actions of SlidingPanelLayout. For that create PanelSlideListener object


PanelSlideListener panelListener = new panelListener(){

	@Override
		public void onPanelClosed(View arg0) {
			// TODO Auto-genxxerated method stub
		}

		@Override
		public void onPanelOpened(View arg0) {
			// TODO Auto-generated method stub
		}

		@Override
		public void onPanelSlide(View arg0, float arg1) {
			// TODO Auto-generated method stub
			
		}
};

PanelSlideListener has the three callback functions which are triggered during the open and close actions of SlidingPanel.

  1. onPanelClosed will be called after closing (hiding) the Slidepanel which was in visible state.
  2. onPanelOpened will be called after opening the hidden layout which was in hidden state.
  3. During the transition of open and close onPanelSlide function will be called.

When opening and closing the slidingPanel small Animation is added to ActionBar app icon. Just the rotation animation is added to Actionbar app icon using View property. The Activity's code follows


import android.app.Activity;
import android.os.Bundle;
import android.support.v4.widget.SlidingPaneLayout;
import android.support.v4.widget.SlidingPaneLayout.PanelSlideListener;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;


public class SlidingActivity extends Activity  {

	SlidingPaneLayout mSlidingPanel;
	ListView mMenuList;
	ImageView appImage;
	TextView TitleText;
	
	String [] MenuTitles = new String[]{"First Item","Second Item","Third Item","Fourth Item"};
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_sliding);
		mSlidingPanel = (SlidingPaneLayout) findViewById(R.id.SlidingPanel);
		mMenuList = (ListView) findViewById(R.id.MenuList);
	    appImage = (ImageView)findViewById(android.R.id.home);
	    
	    TitleText = (TextView)findViewById(android.R.id.title);
		
		
		mMenuList.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1,MenuTitles));
		
		mSlidingPanel.setPanelSlideListener(panelListener);
		mSlidingPanel.setParallaxDistance(200);
		
		
		getActionBar().setDisplayShowHomeEnabled(true);
		getActionBar().setHomeButtonEnabled(true);
		
	}
	
	
	
	PanelSlideListener panelListener = new PanelSlideListener(){

		@Override
		public void onPanelClosed(View arg0) {
			// TODO Auto-genxxerated method stub		getActionBar().setTitle(getString(R.string.app_name));
			appImage.animate().rotation(0);
		}

		@Override
		public void onPanelOpened(View arg0) {
			// TODO Auto-generated method stub
			getActionBar().setTitle("Menu Titles");
			appImage.animate().rotation(90);		
		}

		@Override
		public void onPanelSlide(View arg0, float arg1) {
			// TODO Auto-generated method stub
			
		}
		
	};

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// TODO Auto-generated method stub
		switch (item.getItemId()) {
		case android.R.id.home:
			if(mSlidingPanel.isOpen()){
				appImage.animate().rotation(0);
				mSlidingPanel.closePane();
	getActionBar().setTitle(getString(R.string.app_name));
			}
			else{
				appImage.animate().rotation(90);
				mSlidingPanel.openPane();
				getActionBar().setTitle("Menu Titles");
			}
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}
}

After adding the above code run the application in to the device. Now applications main screen will looks like

{<1>}Sliding pane

In this example, I added some additional actions like home icon enable (ActionBar app icon clickable) which triggers SlidingPane to open and close. And when swipe the screen from left or press ActionBar home icon, the following screen will be displayed.

{<2>}Slided pane

And to apply parallax effect when opening menu added this

mSlidingPanel.setParallaxDistance(200);

Parallax distance can be of based on the menu layout width which makes layout to move proportionally with sliding distance.

Hope you clear with the demo. Happy coding :-)

SlidingPaneLayout Android Example
Share this