Recipe Building Layouts in the Eclipse Editor

A quick way to get started with layouts is to use the handy graphical layout editor in Eclipse. Take a new activity and open its layout resource XML file. Here, it is the main.xml file. Then, click the Layout tab. This shows how the layout would look graphically. Click the black screen and remove everything to start from scratch. Then, follow these steps:

1. Click and drag a layout from the Layouts Selector to the screen area. For example, choose TableLayout, which holds multiple Views or ViewGroups down a column.

2. Click and drag any other layouts to nest them inside the first one. For example, choose TableRow, which hold multiples Views or ViewGroups along a row. Add three of these for this example.

3. Right-click each TableRow in the Outline view and add view elements from the Views Selector. For example, add a Button and CheckBox to the first TableRow, two TextViews to the second, and a TimePicker to the third.

4. Add a Spinner and VideoView view below the TableRow elements.

This looks like Figure 4.2, and the landscape and portrait view can be toggled to see the difference in the layout. Clicking the main.xml tab shows XML code like that shown in Listing 4.1.This provides a simple method to build UIs with the Android look and feel.

Listing 4.1 main.xml

<?xml version="1.0" encoding="utf-8"?> <TableLayout android:id="@+id/TableLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent"

xmlns:android=""> <TableRow android:id="@+id/TableRow01" android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:text="@+id/Button01" android:id="@+id/Button01"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text="@+id/CheckBox01" android:id="@+id/CheckBox01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow>

<TableRow android:id="@+id/TableRow02" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:text="@+id/TextView01" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="@+id/TextView02" android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow>

<TableRow android:id="@+id/TableRow03" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TimePicker android:id="@+id/TimePicker01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow>

<Spinner android:id="@+id/Spinner01"

android:layout_width="wrap_content" android:layout_height="wrap_content" /> <VideoView android:id="@+id/VideoView01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableLayout>

Another way to view the layout is using the Hierarchy Viewer. Running an application in the emulator, the hierarchyviewer can be run from the command line. It resides in the tools/ directory of the Software Development Kit (SDK) installation. For security reasons, this works only with the emulator as the device because running the hierarchyviewer on an actual device might reveal secure settings. Click the window of interest and select Load View Hierarchy. This produces a relational view of the different layouts. For this recipe, the result is as shown in Figure 4.3.

Figure 4.2 Android layout builder example, as seen in Eclipse.

Was this article helpful?

0 0
Character Building Thought Power

Character Building Thought Power

Character-Building Thought Power by Ralph Waldo Trine. Ralph draws a distinct line between bad and good habits. In this book, every effort is made by the writer to explain what comprises good habits and why every one needs it early in life. It draws the conclusion that habits nurtured in early life concretize into impulses in future for the good or bad of the subject.

Get My Free Ebook

Post a comment