Getting Started with XML Layouts

This tutorial will teach you the fundamentals of building Android interface layouts with XML. Read on!
When you’re getting started with developing Android apps using Eclipse and the ADT plugin, Eclipse’s powerful graphical layout editor is a great place to start visually designing your user interface. However, this "what you see is what you get" approach has its limitations, and at some point you'll need to switch to XML.

One of the major benefits of declaring your UI in XML is the ability to keep the UI and the behavior of your app separate, giving you the freedom to tweak your app’s presentation without disrupting its underlying functionality.

In this article, I’ll show you how to design a basic XML layout from scratch, including defining the root element, specifying height and width parameters, and adding some basic UI elements. Finally, I’ll use this basic layout to demonstrate some advanced XML options, such as allocating different amounts of space to different objects, and getting started with string resources.

Note: In Android, XML layouts should be stored in the res/layout directory with the .xml extension.

Part 1: XML Layout Basics

First, we’ll get used to XML by creating a very basic Android UI that uses the LinearLayout view group to hold a checkbox element. Open the res/layouts/activity_main.xml file and let’s get started.

Step 1: Specify Your Root Element

The UI must contain a single root element that acts as a visual container for all your other items. The root element can either be a ViewGroup (i.e LinearLayout, ListView, GridView) a merge element or a View, but it must contain the XML namespace. In this example, I’ll be using LinearLayout, a ViewGroup that aligns all children in a specified direction.

A LinearLayout consists of opening and closing XML tags:

1
< LinearLayout ....... >
In the opening tab, you’ll need to define the XML namespace, which is a standard recommended by the W3C. Defining the XML namespace in Android is easy, simply enter the following code and URL as part of the opening LinearLayout tag:

1
xmlns:android="<span class="skimlinks-unlinked">http://schemas.android.com/apk/res/android</span>"
Step 2: Width and Height

Next, specify the width and height parameters for your root element. In most instances, you’ll use the "fill_parent" value for the root element, as this instructs it to take up the device’s entire screen.

Enter the following XML for the height/width parameters:

1
2
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
Your XML should now look like this:

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width="fill_parent”
android:layout_height="fill_parent” >
</LinearLayout>
Step 3: Creating a Checkbox

It’s time to add something to that blank canvas! Enter the opening tag for your checkbox. Because this is a UI element, some additional XML is required:

1) Identify Your Item

Eclipse uses an integer ID to identify different UI elements within a tree. This should be referenced as a string, using the 'id' attribute and the following syntax:

android:id="@+id/name"

In this example, we’ll refer to this UI element as 'CheckBox:'

1
android:id="@+id/CheckBox"
2) Width/Height Parameters: wrap_content

Once again, you’ll need to enter the height/width parameters. Setting this attribute to ‘wrap_content’ will display the corresponding item large enough to enclose the content resize. We can re-use the height/width syntax structure from earlier, replacing 'fill_parent' with ‘wrap_content:’

1
2
android:layout_width="wrap_content"
android:layout_height="wrap_content"
3) Set Your Text

Finally, you’ll need to specify the text that should appear alongside the checkbox. We’ll set the checkbox to display 'Yes':

Your XML should now look like this:

</LinearLayout>
Run your code in the Android Emulator to see your XML in action!

Part 2: Create Your Second UI with XML

In the second part of this tutorial, we’ll look at some more advanced XML for fine-tuning your UI. We’ll create a layout consisting of two buttons, and then use the 'weight' attribute to change the percentage of layout space allocated to each before briefly covering the basics of string resources.

Step 1: Create Your Layout

The first step is to create the barebones of your layout. We’ll re-use the LinearLayout root element from the previous example, along with the width/height parameters and, of course, the XML namespace:

</LinearLayout>
Step 2: Create Your Buttons

To create the first button, add the 'Button' opening tag, and the integer ID using the element name 'button1.'

1
2
<Button
android:id="@+id/button1"
Set the width and height attributes to ="wrap_content." We’ll be creating a 'Yes' and a 'No' button, so specify 'Yes' as the accompanying text:

1
android:text="Yes"
Finally, close button1:

1
/>
Now you have the code for one button, you can easily create another by making a few adjustments:

1) Change the ID to 'button2'
2) Specify that the text should be 'No' (android:text="No")

Your XML should now look like this:

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Yes" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="No" />

</LinearLayout>
Step 3: Check the Emulator

To preview how this will look on a real-life Android device, boot up the emulator and take a peek!

Advertisement
Part 3: Advanced XML Options

Now you have your basic UI, we’ll use some more advanced XML to refine this simple layout.

Set Layout_Weight

The 'android:layout_weight' attribute allows you to specify the size ratio between multiple UI elements. Put simply, the higher the weight value, the greater proportion of allocated space, and the more the UI element expands. If you don’t specify a weight, Eclipse will assume the weight for all items is zero, and divide the available space up equally. The space ratio can be set with the following XML:

1
android:layout_weight="?"
In this example, we will assign ‘button1’ with a value of 1, and ‘button2’ with a value of 2.

Note, this is purely an addition; you do not need to change any of the existing code.

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="Yes" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="2"

android:text="No" />

</LinearLayout>
The above XML will create two buttons of different sizes:

An Intro to String Resources

A string resource can provide text strings for your application and resource files. In most instances, it’s good practice to store all your strings in the dedicated ‘strings.xml’ folder, which can be found by:

1) Opening the ‘Res’ folder in Eclipse’s project explorer.

2) Opening the ‘Values’ folder.

3) Opening the ‘strings.xml’ file.

To create a new string in your Android project:

1) Open the ‘strings.xml’ file and select ‘Add.’

2)Select ‘String’ from the list and click ‘Ok.’

3) Select your newly-created string from the ‘Resources Elements’ menu.

4) In the right-hand ‘Attributes for string’ menu, enter a name for the string, and a value (Note, the ‘name’ attribute is used to reference the string value, and the string value is the data that will be displayed.)

In this example, we will give the string the name of ‘agree’ and enter the value ‘I agree to the terms and conditions.’

5) Save this new string resource.

6) Open your ‘activity_main.xml’ file. Find the section of code that defines ‘button1’ and change the ‘android:text’ attribute to call this new string resource. Calling a string resource, uses the following syntax:

android:text="@string/name-of-resource"

So, in this example, the code will be:

1
android:text="@string/agree"
For ease of viewing the output, delete ‘button2.’ Your code should now look like this:

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="@string/agree" />

</LinearLayout>

Check the visual output of your code - the text should have been replaced with the value of your ‘agree’ string.

This is a very basic string, without any additional styling or formatting attributes. If you want to learn more about string resources, the official Android docs are a great source of further information.

Conclusion

In this article, we’ve covered the XML essentials of creating a root element for your layout and coded a few basic UI elements, before moving onto some more advanced XML that gives you greater control over your UI. You should now be ready to create your own simple user interfaces using XML!