99
Chapter 4: Designing the User Interface
necessary to create those types of layouts. Table 4-2 gives you a brief intro- duction to the common types of layouts that are available in the Android
Software Development Kit SDK.
Table 4-2 Android SDK Layouts
Layout Description
LinearLayout A layout that arranges its children in a
single row. RelativeLayout
A layout where the positions of the children can be described in relation
to each other or to the parent. FrameLayout
This layout is designed to block out an area on the screen to display a single
item. You can add multiple children to a FrameLayout, but all children are
pegged to the upper left of the screen. Children are drawn in a stack, with the
most recently added child at the top of the stack.
This layout is commonly used as a way to lay out views in an absolute position.
TableLayout A layout that arranges its children into
rows and columns.
Other different types of layout tools exist, such as a TabHost for creating tabs and a Sliding Drawer for finger-swiping motions of hiding and displaying
views. I’m not going to get into those at this point because they are only used in special-case scenarios. The items in Table 4-2 outline the layouts that you
will use most commonly.
Using the visual designer
I have some good news for you: Eclipse includes a visual designer. I also have some bad news: The designer is limited in what it can do as are all
visual designers.
Opening the visual designer
To view the visual designer, with the main.xml file open in the Eclipse editor, click the Layout button see Figure 4-5.
100
Part II: Building and Publishing Your First Android Application
Figure 4-5:
The Layout button,
which shows
the visual designer.
Visual designer
You should now see the visual designer, as shown in Figure 4-6.
Figure 4-6:
The visual designer.
101
Chapter 4: Designing the User Interface
From here, you can drag and drop items from the Layouts or Views toolboxes.
Inspecting a view’s properties
A feature I really like about the designer is the ability to view the properties of a given view, just by clicking it. Most likely, your Properties panel is hidden. To
show it, follow these steps:
1. Choose Window➪Show View➪Other. 2. Expand Java and choose Properties.
This opens the Properties view in Eclipse, as shown in Figure 4-7. To use the Properties window, simply select a view in the visual designer.
The view has a red border around it, and the properties show up in the Properties window below. Scroll through the list of properties to
examine what can be changed in the view.
Figure 4-7:
A selected item in the
visual designer
with some of the
properties listed in the
Properties window.
Red line around selected view
View properties If you’re not sure what properties a view has, open the visual designer, click
the Properties Tab, and inspect the Properties view. This gives you a quick
102
Part II: Building and Publishing Your First Android Application
glance into what the view has to offer. If the Properties tab is not visible, enable it by choosing Windows➪Show View➪Other➪General➪Properties.
A view’s available properties can change depending on its parent layout. For example, if a TextView is inside a LinearLayout, it has a different set of
properties for layout than if it is inside a RelativeLayout.
The visual designer works well for simple scenarios where your contents are static in nature. But what happens when you need to draw items on the
screen dynamically based on user input? That’s where the designer falls down. It cannot help you in those scenarios. It is best suited for static content sce-
narios. A static content scenario occurs when you create your layout once and it does not update dynamically. The text of TextViews or images might change,
but the actual layout of the views inside the layout would not change.
Developing the User Interface
Okay, it’s time to start developing your user interface. The first thing to do is to return to the XML view of your layout by clicking
the main.xml tab, which is directly next to the Layout tab that you clicked to get to the visual designer. When you are in the XML view, delete the
TextView of your layout. Your layout should now look like this:
?xml version=”1.0” encoding=”utf-8”? LinearLayout xmlns:android=”http:schemas.android.comapkresandroid”
android:orientation=”vertical” android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
LinearLayout
Viewing XML layout attributes
Before I go any further, let me explain the Android layout XML that you are currently working with. See Table 4-3.
Table 4-3 XML Layout Attributes
Layout Description
xmlns:android=”...” This defines the XML namespace that you
will use to reference part of the Android SDK.
103
Chapter 4: Designing the User Interface
Kategori