Starting Android Development Part 3: Layout Tutorial 1

January 5, 2010 No Comments

Now that I’ve bored you to death with details about how Android programming works, lets actually put something together, shall we? This post will deal mainly with creating layouts in Android and will finish up with a sample layout for our Temperature Conversion project.

For what Google has to say about layouts check out their developers site at http://developer.android.com/guide/topics/ui/index.html.

Now let me explain a little of what you read. Layouts for Android screens are described in XML files in your /res/layout/ folder. The XML file describes a hierarchy of layout elements. The higher level elements determine the where of your layout and the lower level elements within these elements determine the what of your layout.

Ok that was a mouthful. Lets look at the simple example Google provided:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >
<TextView android:id=”@+id/text”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Hello, I am a TextView” />
<Button android:id=”@+id/button”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Hello, I am a Button” />
</LinearLayout>

The Linear Layout describes the where, e.g. how the elements within this tag are going to be positioned in relation to each other. TextView and Button are two lower level elements which are UI elements the user will interact with (a box in which to enter data and a clickable button, respectively)

The result of that layout is listed below. Note the fact that Linear Layout makes the elements line up one below another (We’ll get into the alternative options later).

Armed with this knowledge, lets try to make our own Layout.

Go to File > New > Other
Click on Android > Android XML file
Click Next
In the resulting screen fill out the following values:
Project: Click Browse and select the project you want to associate this XML file with (for this demonstration it would be whatever you named the temperature conversation application project)
File: Call this file main.xml
Click Layout for the type of resource
Choose Linear Layout for the root element of the XML file

Everything should look similar to the screenshot below: