Starting Android Development Part 3: Layout Tutorial 2

January 6, 2010 2 Comments

As promised, here’s part two of my coverage on layouts in Android.  Lets pick up where we left off, namely we just created a main.xml file for layout of our temperature conversion application.

So you know what we’re trying to achieve here, here’s a screenshot of the final product.

I know what you’re thinking.  That’s not that cute of a layout.  I’ll leave the job of making really pretty layouts to you after you learn the basics.  For now this layout will do to show you how making layouts in Android works.

This layout consists of a TableLayout (A Linear Layout could have done here as well).  Each table row has other items embedded in it.  One row even has a TableLayout embedded within it (just to show that you can do this).  This is a valid layout, but is generally frowned upon, as embedding table layouts within table layouts can lead to slower UI performance in the long run.

Here’s the code for the layout:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
android:id="@+id/widget45"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<TextView
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff0000ff"
android:padding="10px"
android:text="Temperature Conversion App"
android:textSize="18px"
android:typeface="sans"
android:textStyle="bold"
>
</TextView>
<TableLayout
android:id="@+id/widget62"
android:layout_width="319px"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TableRow
android:id="@+id/widget63"
android:layout_width="149px"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:id="@+id/User_input_F"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text=" "
>
</EditText>
<TextView
android:id="@+id/widget78"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(ºF)"
>
</TextView>
</TableRow>
<TableRow
android:id="@+id/widget64"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:id="@+id/User_input_C"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text=" "
>
</EditText>
<TextView
android:id="@+id/widget79"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(ºC)"
>
</TextView>
</TableRow>
<TableRow
android:id="@+id/widget65"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:id="@+id/widget83"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text=" "
>
</EditText>
<TextView
android:id="@+id/User_input_K"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(ºK)"
>
</TextView>
</TableRow>
</TableLayout>
<TableRow
android:id="@+id/Conversion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="@+id/conversion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Convert to:"
>
</TextView>
<RadioGroup
android:id="@+id/widget144"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<RadioButton
android:id="@+id/F_Select"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Fareinheit"
>
</RadioButton>
<RadioButton
android:id="@+id/C_Select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Celcius"
>
</RadioButton>
<RadioButton
android:id="@+id/K_Select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kelvin"
>
</RadioButton>
</RadioGroup>
</TableRow>
<TableRow
android:id="@+id/widget84"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="@+id/Calculate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calculate"
>
</Button>
</TableRow>
</TableLayout>

Note how each element has an id attribute (android:id) and the value of that attribute starts with “@+id/name”.  “@+id/” identifies the name by which you can refer to this layout element later in your java programming.  Other things to note include:

• android:layout_width and android:layout_height: Use these to determine how much space an element is going to take up.  These can have two values: wrap_content and fill_parent.  Wrap content means the element will only be as large as it needs to be to display its content.  Fill_parent means the element will fill all available space it can, as determined by the parent element it resides in
• To find the attribute applicable to a given layout, check out that layouts documentation at the developer.android.com/reference website.  E.g. the API site for TableLayout is
  http://developer.android.com/reference/android/widget/TableLayout.html. I usually find the page i need by just searching “android layout” and the name of the element I’m using

In the next post of this series I will discuss some common Android layout elements, what they look like, and some of the attributes associated with that element.  Then it’ll be time to connect our layout (frontend) to the logic that makes it work (the backend).  For now check out the code I provided, try to understand how it works, and practice creating your own Android layouts!

Sphere: Related Content

Tags: Android Developer Center, development, layout design, ProgrammingAndroid Development Corner, Programming