Android SlidingPaneLayout: Tutorial

In this post, we want to show how to use Android SlidingPaneLayout. This is an interesting component that can be used when we want to have a multi-pane horizontal layout. This component is divided in two different parts:

left side: The master part. It usually contains a list of values (i.e. Contacts and so on)

right side: The detail part. It contains the details of the values in the left side.

This component helps us to divide the available screen space in two different sides that doesn’t overlap and can be sledded horizontally. It is smart enough to know when it is the time to enable the sliding feature or when the screen width is enough to hold both parts.
In this post, we will show how to use this component implementing a bookmark list in one side and the corresponding web content view in the other side. Android SlidingPaneLayout can be used with fragment or with other standard components, we will show how to use it with fragments.

Notice we have two fragment: one on the left side called ListBookmarkFragment and the other one on the right side called ViewBookmarkFragment. At line 1, we have our Android SlidingPaneLayout as the root element. One thing we have to set up is the width of this two fragment, at line 9 and 16. If the screen width is more than the sum of the two fragments width then the two fragments are visible at the same time, otherwise we have to slide left and right to enable one of them.

I won’t spend much time talking about fragment implementation details because is out of the topic, if you are interested you can give a look at the source code.

The main activity that holds the two fragments and handle the sliding pane is shown below:

Everything is very simple, but we need to implement more thing is we want to “use” the SlidingPaneLayout.

Android SlidingPaneLayout Listener

The api gives us the capability to listen when the user slide our panes left and right so that we can react in the right way and implement here our business logic. We have to implements an interface called SlidingPaneLayout.PanelSlideListener.

So in our Activity let’s add this piece of code. As you can notice at line 1 we implement that interface and we get notified when the left panel is closed, is opened and when the user is sliding. We are more interested about the first two events (closed and opened). Then we have to register our listener:

Running the code we can notice that when the left pane is closed or opened in the log we get the message. Now we can a way to get notified about the main two events. We can use it to set up correctly the action bar, for example.

SlidingPaneLayout and Actionbar

Using the listener, we can setup correctly the action bar. This aspect is very important because we can change the action bar icons according to the opened panel. In other words, when the left panel is open we can show some icons and when it is closed we can show other icons. To do it, we have simply implement our logic inside the listener methods:

We use setHasOptionMenu to turn on and off the fragment menu (line 7,8,14,15). Running the code we have:

As you can notice when you open the left panel the action bar icons change.

Inter fragment communication

One more thing we need to explain: how to exchange information between fragments. In other word, we want when user clicks on a bookmark list on the left side the corresponding web page is opened on the right side.
To get it, we can simply create our interface that acts as a listener and let our main activity implement it. So that when user select an item in the list on the left panel we notify the event to the main activity, that in turns call the right method in fragment that handles the right panel. So we have:

About The Author

I'm an electronic engineer with over 15 years of
experience in computer programming. I'm the author of the book "Android things projects". I'm a MVB at DZone and DZone Guide Author. I have contributed to the IoT guide. I'm the technical reviewer of the book Internet of Things with Arduino Blueprints(published by PacktPub). I love creating IoT projects using Arduino, Raspberry Pi,
Android, and other platforms. I am interested in the convergence
between IoT and the mobile applications. I'm SCEA, SCWCD, and SCJP
certified.
Follow on: Twitter | Linkedin

NONE

What about SlidingPanelayout and Drawer together?

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Sign up for our Newsletter

Enter your email and stay on top of things,

Get SwA updates delivered to your inbox. Article, tips, source code

×

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.