A (175)

(Tuis.) #1
CHAPTER 6: Android Screen Design: Writing to the Display Using Activity and View 185

Inside of the end of your tag, after the android:orientation parameter you
just added, type in android: again, display the parameter helper popup, and find the
android:layout_margin parameters, as is shown in 6-17.


This android:layout_margin parameter puts space around the entire UI widget (if used inside of a
View child tag) or around the entire UI layout container (if used inside of the ViewGroup parent tag),
as you will soon see. If you want to put space only on one side, or only above or below your UI
widget (View) or layout container (ViewGroup), you can use one of the more specialized
layout_margin parameters, shown in the parameter helper popup in Figure 6-17. Double-click on
the android:layout_margin parameter to insert it in your parent tag, and add a 12dip,
or 12 density independent pixels, value inside of the quotation marks. We will be learning all about
this DIP (dip, or dp) constant, and how it relates to graphics, in Chapter 9, which will cover graphic
design in Android.


Figure 6-17. Use an android: work process to access LinearLayout parameter helper showing margin parameters


Let’s see how this margin spacing around the perimeter of our design improves how it looks, and use
the Run As ➤ Android Application work process. As you can see on the right side of Figure 6 -1 5 ,
an entire UI design is moved out using this single parameter, since we used it in the parent
ViewGroup to move the entire UI design as a whole.


Since this is the Hello Universe application, and a Galaxy Information Screen, let’s put a galaxy
image from the NASA web site into the background of the UI layout container, before we start
learning about how to refine and “tweak” our UI design using XML parameters, which is both easy
and fun, at least compared to doing it in Java!


After you learn how to add this “image background plate” to your UI layout design using the
android:background parameter in the parent tag, you will need to change your


child tag parameters to use a white text color and add some UI elements
to hold the default data values, and eventually the Galaxy object data values. Later on, once the UI
design looks reasonably professional, we will go back into your MainActivity class Java code and
create TextView objects and configure these with the Galaxy object data fields so that the actual
data from your Galaxy object is referenced in your UI design.
Free download pdf