A (175)

298 CHAPTER 8: Android UI Design: Using Advanced ViewGroup Layout Containers

Before we finish learning about the Android SlidingPaneLayout class, which we will be customizing
further in the next chapter on graphic design for Android, we should take a look at how to utilize the
android:layout_width and android:layout_weight parameters inside of the two child UI panes. The
panes underneath the tag can contain parameters defining what percentage of
the screen should be used on widescreen (layout_weight), and how many device independent pixels
(DIP) the UI pane should open up to be, when the user slides the content pane and uncovers the
UI pane (layout_width). Once we have discussed these two key parameters, we will have covered
everything that you should know about the SlidingPaneLayout class.

Set Pane Size: layout_width and layout_weight

Add an android:layout_weight="0.25" and also change the android:layout_width to a
“hard-coded” DIP value of 110 , using an android:layout_width="110dip" parameter, and then
change the android:layout_height to use a match_parent constant, as shown in Figure 8-27.

Figure 8-27. Add a layout_weight parameter and change layout_height to match_parent and layout_width to 110dip

Using a MATCHPARENT constant will make sure that the height of your first
ImageButton UI design fills the SlidingPaneLayout UI pane’s height dimension, which is what you
want it to do. Generally, for a SlidingPaneLayout class UI design, you will want to use a match
parent constant for the child UI layout containers underneath the parent tag,
as the SlidingPaneLayout deals only with the width dimension in its processing engine (algorithm)
and simply fills the height dimension completely.

It is interesting to note that if you define a fixed value for the android:layout_width parameter using
an integer DIP (or dip or dp) value, you can control how far out your content pane will slide over your
UI pane. You will generally want to avoid hard coding DIP values in your Android UI design, since
doing so will prevent your UI design from morphing to fit different devices (and different screen sizes
and screen shapes).

The content pane you now have defined as your Galaxy Information Screen, and the UI pane, now
contain the three ImageButton UI elements inside of a vertical orientation LinearLayout container.

By defining a 110 DIP layout_width value, you will constrain your users to dragging the Galaxy
Information Screen just far enough to perfectly reveal the three ImageButtons which you created