A (175)

(Tuis.) #1

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


This means that we will need to add another alignment parameter to bring this UI design back into
a perfectly aligned design. What we need is something that will align the bottom of the EditText UI
widget with the bottom of the Button UI widget, or better yet, align the text inside of the EditText
field UI element with the text label on the Button UI element.


As you can see in Figure 7-30, the Button UI elements already align quite well, so we should
leverage that fact, by forcing the EditText UI elements to align with the Button UI elements in some
fashion, either by using the alignTop, alignBottom, or alignBaseline relative layout parameters, and
referencing the Button UI elements.


Since the alignTop and alignBottom parameters are fairly straightforward, and since the baseline
alignment of the text in these user interface elements will provide a more professional visual result,
we will go ahead and learn about baseline alignment next, using the android:layout_alignBaseline
parameter.


The baseline of a font is the part of the font that sits on the line that most of the font characters sit
on. There are a couple of exceptions to this rule, such as the “y” in Galaxy shown in Figure 7-30,
which drops below the baseline, and some other characters, such as the “f” or the “j” and the “g” or
the “q,” which could also sometimes drop below the baseline, depending upon how they are drawn
for any given font type or style.


Next, let’s clean up the UI design alignment, by learning about the android:layout_alignBaseline
RelativeLayout parameter, and then, once our UI design is back in perfect alignment, we can add
your final pair of EditText and Button UI elements, and then we will be ready to add in the graphic
imagery that will make your UI design really professional and visually appealing.


Figure 7-30. Using the Graphical Layout Editor tab to check on your RelativeLayout alignment results

Free download pdf