SlidingPaneLayout Example

In this tutorial, I will explain how to use SlidingPaneLayout. It’s an interesting component which can be used whenever we want a multi-pane horizontal layout in our app. It is divided in two different parts:

left side: The master pane which usually contains a list of values.

right side: The detail pane which usaully contains the details of the values in the left side.

In short you can say that left pane is treated as a content list or browser or as a subordinate to a primary detail view for displaying content. SlidingPaneLayout can be used to fragment or other components, we just need to make sure that in our main layout it has to be the root.

Let’s have a look on how to write code for all which we have discussed above. Please follow the steps below:

Step1: Create a new android project in your android IDE.

Step2:Write following into you layout file:

 

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pane A"
android:textStyle="bold" />

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

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pane B"
android:textColor="#C0C0C0"
android:textStyle="italic|bold" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>

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

Step3: Your java file should be like below:

 

package com.example.slidingpaneexample;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

 

Step4: Run for the output shown below:

SlidingPaneExample2

 

SlidingPaneExample1

Check my previous on Customized Toast Messages.

Leave a Comment: