A (175)

(Tuis.) #1

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


The easy way to create the next two tags is to copy and paste the first


tag under itself two more times, changing the galaxyOne ID to galaxyTwo and
galaxyThree, respectively, and changing the galaxybutton1 to galaxybutton2 and galaxybutton3
and the galaxyone to galaxytwo and galaxythree.

Since the Graphical Layout Editor tab will not be able to correctly “render” the SlidingPaneLayout’s
algorithm (engine) (as you will see, it only previews your LinearLayout of ImageButton UI elements,
which look great, by the way), let’s use the Run As ➤ Android Application menu sequence
(right-click on your project folder to get to this menu, if you forgot where to locate it) to test the
current SlidingPaneLayout class UI design now!


As you can see in Figure 8-25, the SlidingPaneLayout class’s engine (algorithm) is evaluating the
ImageButton UI pane as the top pane, and, if you drag the pane to the right, you’ll reveal the Galaxy
Information Screen pane underneath it.


Figure 8-25. Previewing an ImageButton (left), first SlidingPane configuration (center), and final SlidingPane (right)


Notice how your top pane fades as it slides to the right, as can be seen via the (lighter)
ImageButtons, in the center part of Figure 8-25.


Since you want your Galaxy Information Screen to be the prominent pane in the UI (that is, the
top-most pane), which slides over the less-prominent (bottom-most) UI part of your sliding pane
UI design, you will need to change the order of your containers within your


parent container.
Free download pdf