A (175)

(Tuis.) #1
CHAPTER 8: Android UI Design: Using Advanced ViewGroup Layout Containers 291

the slideable pane and pull it back over the content view when the UI is needed by the end user for
the application’s intended functionality.


Besides SlidingPaneLayout.LayoutParams and its weight parameter, there are two other nested
classes under the SlidingPaneLayout class. These include a SlidingPaneLayout.PanelSlideListener
interface, which is an event listener interface that was specifically designed to be used
for monitoring touchscreen (slide) events associated with your SlidingPaneLayout UI design
implementations. You should utilize this interface for subclassing your own PanelSlideListener
subclass, in order to create a customized MyPanelSlideListener class implementation.


There is also a SlidingPaneLayout.SimplePanelSlideListener nested class, which provides a
simple listener class. What a simple listener class does is that it subclasses the SlidingPaneLayout.
PanelSlideListener interface, and only implements the minimum amount of functionality for that
class. This simply means that the subclass will add zero additional features and will contain only
basic event listening functionality from the superclass.


You will create an activity_slidingPane.xml UI definition file, as well as a SlidingPaneActivity.
java class, and then define the SlidingPaneLayout UI design and implement some digital image
compositing techniques to make it look professional and exciting to the end user. After that, you’ll
test the UI design across different screen sizes and orientations to see it work!


Using SlidingPaneLayout: Galaxy Selector


Let’s get down to business and implement a SlidingPaneLayout in your Galaxy Information Screen UI
design so that you can choose from more than one popular galaxy, and have its information update
in your information screen. To accomplish this, you will have to create and implement the following
structural structures in your MainActivity.java code and your activity_main.xml markup for your Hello
Universe Android application:


   Wrap an <android.support.v4.widget.SlidingPaneLayout> parent tag around
the existing <LinearLayout> UI design structure, which will place that UI design
structure inside of the SlidingPane UI engine as one of the two sliding panes for
this SlidingPaneLayout class.
 Create another vertical <LinearLayout> UI layout design containing three
<ImageButton> UI widgets, so you can get started at a beginning level with the
ImageButton class, which we will be learning about in detail in the next chapter
on graphic design for Android.
 Configure the <ImageButton> and <LinearLayout> XML tags with the minimum
amount of parameters which will be needed to accomplish a three ImageButton
UI for the second pane of the SlidingPaneLayout UI design.
 Add three new <string> constant XML parameters containing the galaxy names
for the sight-impaired to use (hear) when they encounter the ImageButton.
Note that Android requires the android:contentDescription parameter in all
<ImageView> and <ImageButton> UI widgets.
 Run the SlidingPaneLayout UI design modification in the Nexus One AVD
emulator to see the progress in the new sliding pane UI design.
Free download pdf