A (175)

248 CHAPTER 7: Making Apps Interactive: Intents, Event Handling, and Menus

This layout guidelines feature in the Eclipse Graphical Layout Editor is a pretty cool feature, and
makes it easier for me to show you what each RelativeLayout parameter is doing, and exactly where
it is being applied!

Now you can copy and paste the third set of and UI elements, and change the
relative layout referencing to create the fourth and final set of and UI elements.
Change the edit_fleet to edit_ships, hint_fleet to hint_ships, and submit_fleet to submit_ships.
The UI element layout_below should reference edit_fleet and the layout_alignLeft can
reference edit_colony, edit_pop, or edit_fleet, your choice, as these will all produce the same exact
alignment result.

Make sure that you add the android:layout_alignBaseline parameter into each of your other

UI definitions, just to make sure that everything is being done in exactly the same precise
way. Surgically precise UI design saves lives! We’ve created quite a complex network of relative
positioning and relative alignment referencing in this design.

Now let’s use the Run As ➤ Android Application menu sequence and take a look at the completed
UI design in the Nexus One emulator, before we get tricky and add in a cool galaxy background
image to take this UI design to an even higher visual level, so it matches the UI design we created
for the MainActivity Activity subclass.

As you can see in Figure 7-32, on the left-hand side, the layout of the UI design now looks really
nice, and was created using less than three dozen lines of XML markup, which is less than five lines
of XML markup per UI element. The right side of Figure 7-32 shows the changes we are about to
make, in order to bring this UI design for this Edit Galaxy Information screen into visual conformance
with the MainActivity class’s UI screen design.

Figure 7-32. Test the RelativeLayout UI in the Nexus One AVD and add a background image and white textColor