Designing Layouts Using XML

You can edit the raw XML of a layout file directly. If you click on the project file /res/layout/main.xml, you see the main.xml tab, which shows you the raw XML of the layout file.

As you gain experience developing layouts, you should familiarize yourself with the XML layout file format. Switch to the XML view frequently and accustom yourself to the XML generated by each type of control. Do not rely on the Eclipse layout resource editor alone.

Give the Eclipse Layout editor a spin:

1. Open the Droidl Android project you created earlier.

2. Navigate to the /res/layout/main.xml layout file and double-click the file to open it in the Eclipse layout resource editor.

3. Switch to the Layout tab, and you should see the layout preview in the main window.

Did you Know?

The two most important tabs for the layout resource editor are the Outline tab and the Properties tab. If you drag the Properties tab up to the right side of the Eclipse Java perspective, you can simultaneously view the main layout resource editor in the middle of the screen, the Project Explorer to the left, the Properties tab to the right (to fully use the vertical space it needs), and Outline mode along the bottom (which is usually shorter and doesn't need the vertical space of the Properties tab).

4. Click the Outline tab. This outline is the XML View hierarchy of this layout file. In this case, you have a LinearLayout control. If you expand it, you see that it contains a TextView control.

5. Select the TextView control on the Outline tab. You see a red box highlight this control in the layout preview.

6. Click the Properties tab. This tab displays all the properties and attributes that can be configured for the TextView control you selected. Scroll down to the property called Text and note that it has been set to a string resource variable called @string/hello.

7. Click the Text property called @string/hello on Properties tab. You can now modify the field. Each time you change this field, note how the layout preview changes. You can type in a string directly, type a different string resource (@string/app_name, for example), or click the little button with the three dots and choose an appropriate resource from the list of string resources available to your application.

8. Switch to the main.xml tab and note the XML. If you save and run your project in the emulator, you should see results similar to those displayed in the preview.

Feel free to continue to explore. You might want to try adding controls, such as an ▼

ImageView control or another TextView control, to your layout. We cover designing layouts in much more detail later in this book. ▲

Using Layout Resources Programmatically

If and when you need to access an entire layout programmatically, you can use a Layoutlnflater class to inflate the layout file into a View object, as in the following example:

Layoutlnflater inflater = getLayoutInflater(); View layout = inflater.inflate(R.layout.main, null);

However, in most instances, you do not need to load the layout itself, but you need to interact with specific controls within the layout, such as the TextView control in the main.xml layout file. Layout contents, whether Button, ImageView, or TextView controls, are derived from the View class.

The default layout file created with the Droidl project contains a TextView control. However, this TextView control does not have a default name attribute. The easiest way to access the right View control is by name, so take a moment and set the id attribute of the TextView control, using the layout resource editor: Call it @+id/TextView01.

Here's how you would retrieve a TextView object named TextView01 that has been defined in the layout resource file:

TextView txt = (TextView)findViewById(;

Was this article helpful?

0 0

Post a comment