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:
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:
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:
1
2
3
4
|
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:
1
2
3
4
5
6
7
8
9
|
android:layout_width="fill_parent”
android:layout_height="fill_parent” >
<CheckBox
android:id="@+id/CheckBox”
android:layout_width="wrap_content”
android:layout_height="wrap_content”
android:text="Yes" />
</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:
1
2
3
4
|
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</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:
Finally, close button1:
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<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!
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<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:
1
2
3
4
5
6
7
8
9
10
|
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<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!
