CHAPTER 8: Android UI Design: Using Advanced ViewGroup Layout Containers 287
The Android SlidingPaneLayout: Class Specification
The SlidingPaneLayout class is designed to provide a horizontal, dual-pane user interface layout,
for use at the top-level of your application’s UI design. By “top-level,” I mean in your MainActivity.
java class, which is really your top-level, or “Home” Activity, for your Android application.
We will implement the current Galaxy Information Screen as one of the two panes in this
SlidingPaneLayout UI container, and then add some other UI functionality which will be accessed
from the Hello Universe application home screen. This will be done by sliding (or swiping) the galaxy
information pane, revealing a galaxy selector UI design. We will create the galaxy selector UI using
a GridLayout, to keep the XML markup concise, and to practice what we learned in the first section
of the chapter. We’ll use ImageButton UI widgets, to introduce you to that popular UI widget class,
because we’re going to be expanding our knowledge regarding the ImageButton in the next chapter
covering graphic design in Android.
Because of the nature of its sliding function or method of operation, a SlidingPane UI layout
container is a good solution for creating UI layouts which smoothly adapt across different device
screen sizes and different screen orientations. I believe this is a reason Android OS developers
added this ViewGroup subclass, so that developers could easily implement a UI design which will
expand out to a wider extent on large (tablet and iTV) screens, but which will be able to contract
off-screen on small screen (smartwatch or smartphone) devices while still remaining usable.
The SlidingPaneLayout class hierarchy starts with the Java Object master class, and progresses
from there to the View class, then to the ViewGroup class, and finally to the SlidingPaneLayout
class. The SlidingPaneLayout is also part of a special android.support.v4.widget package, and is
structured using the following class hierarchy:
java.lang.Object
android.view.View
android.view.ViewGroup
android.support.v4.widget.SlidingPaneLayout
The Android SlidingPaneLayout class is a public static class. It is referenced by using a specialized
support.v4 package by using an import android.support.v4.widget.SlidingPaneLayout statement,
located at the very top of your Java Activity subclass; in this case, it will be used in your Hello
Universe app’s MainActivity.java class.
The left pane, which is the first pane to be defined in your SlidingPaneLayout UI XML definition
file, is treated as the “content list” or as a “content browser.” This left UI pane is designed to be
subordinate to, or of a lower priority than, the “primary detail view,” which is the right pane, and
which should be used to display content.
The optimal use of this SlidingPaneLayout class would involve UI-Content “pairings,” which require
two panes to display the UI and content or information which you wish to be persistent (visible) on
the display screen at all times. An example of this might be a phone contact list (on the right in the
primary detail view) along with a UI design providing various types of interactions (call, text, e-mail,
tweet, remove) applicable to contacts in the list.
Another example would be displaying a user’s recent e-mail list (on the left, using the content
browser scenario) with a primary content detail pane or view on the right displaying e-mail contents
of an e-mail selected from the content list on the left. In the Hello Universe application, this could