Views and Layouts Tutorial: Layout

PrevMain 

Layouts determine how various UI components are placed. This section discusses layouts work in detail.

How to create a Layout?

Layouts are defined as XML files, also referred to as layout configuration files. Each tag in a Layout configuration file is a View (or a ViewGroup). Though layout elements can also be instantiated at runtime, it’s not recommended for newbie developers as it’s a complex approach. Further, creating layouts via XML files adheres to the MVC (Model View Controller) architecture which strongly recommends keeping the presentation of your application separate from the code that determines how your application works.

Each layout configuration must have one root which is either a View or ViewGroup object. Other additional UI components should then be added as a View hierarchy to define your layout. For example, here’s an XML layout that uses a vertical LinearLayout to hold a TextView and a Button:

<?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="Module 3 TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Module 3 Button" />
</LinearLayout>

The above snippet created a LinearLayout ViewGroup and added a TextView and a Button in it. We then define the corresponding strings in the strings.xml file as follows:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Module 3</string>
    <string name="text">TextView</string>
    <string name="button">Button</string>

</resources>

Run the Module 3 project on the Android Simulator and it shows the following user interface.

Layout

ViewGroups and Layouts

A number of ViewGroups can be used to achieve different layouts for your applications. Android offers the following built-in ViewGroups

LinearLayout

As shown in the earlier example, LinearLayout shows all UI elements arranged linearly – either in a single column or a single row (depending on orientation). In the earlier snippet, if we change the orientation to ‘horizontal’, all the views would then line up horizontally as shown below.

LinearLayout

Run the LinearLayout project provided with this module.

AbsoluteLayout

As the name itself suggests, the AbsoluteLayout ViewGroup lets you specify the absolute position for each view component contained in it.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 TextView"
        android:layout_x="126px"
        android:layout_y="161px" 
        />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 Button" 
        android:layout_x="12px"
        android:layout_y="361px"
        />

</AbsoluteLayout>

In this case, we are specifying the absolute position of each view using the layout_x and layout_y attributes. Running the project again shows the following user interface on the simulator.

AbsoluteLayout

Run the AbsoluteLayout project provided with this module.

TableLayout

As the name itself suggests, the TableLayout ViewGroup organizes the views into rows and columns. The <TableRow> element can be used to add a row in the table, which in turn contains one or more views as a column. As an example, let’s add our earlier label and button in two table rows to see how it looks.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
 <TableRow> 
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 TextView" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 Button" />
 </TableRow>
 
 <TableRow> 
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 TextView" />
    
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 Button" />
 </TableRow>    
</TableLayout>

Running the project again shows the following user interface on the simulator.

TableLayout

Run the TableLayout project provided with this module.

RelativeLayout

Using the RelativeLayout lets you specify how the various views are positioned relative to each other. As an example, let’s modify our earlier linear layout to a RelativeLayout as follows.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 TextView" 
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 Button"
        android:layout_alignLeft="@+id/text"
        android:layout_below="@+id/text"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

In this case, we placed the button directly below the TextView by using the layout_below attribute.

Running the project again shows the following user interface on the simulator.

RelativeLayout

Run the RelativeLayout project provided with this module.

FrameLayout

Using the FrameLayout, you can reserve a dedicated area of the screen to display a desired item. Views added in FrameLayout are shown on the top left corner of the area covered. As an example, let’s modify our earlier linear layout to a FrameLayout as shown below.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="40px"
        android:layout_y="35px" >
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 TextView" ></TextView>
</FrameLayout>
</AbsoluteLayout>

In this case, we created an AbsoluteLayout and then added a FrameLayout in it. The FrameLayout contains the TextView which we want to place at a specific position on the screen – 40px, 35 px.

Running the project again shows the following user interface on the simulator.

FrameLayout

Run the FrameLayout project provided with this module.

ScrollView

The ScrollView ViewGroup should be used when viewing the contained views would require user scrolling as they are not fitting the display by default. We use the LinearLayout example and add the label and button 10 times in order to make our UI larger than the normal screen size, thereby requiring the user to scroll to view all labels and buttons.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
     <LinearLayout
        android:layout_width="310px"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 TextView" ></TextView>
    <Button
android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Module 3 Button"
 />
…
…
…
Add button and label 10 times
…
…
    </LinearLayout>
</ScrollView>

Running the project again shows the following user interface on the simulator.

ScrollView

Run the ScrollView project provided with this module.

In this module, we covered the fundamental UI building blocks of an Android application. In the next module, we talk about intermediate User Interface concepts including menus, EditTexts, dialogs and custom views.

PrevMain