Stretching and Spanning layouts in Android

- tagged Android Development, Layout, LinearLayout, Tutorial, XML, TableLayout

When I was working on my BF2Stats Android app, I had to find out how to place 2 widgets/layout elements on the same horizontal line, while keeping them stretched at the same time so they are filling the width of the screen.

It took me a little research before I found a solution, so I will share two methods with you today.

This tutorial will show you how to create layouts that stretches in the width.

In Eclipse I create a new Android Project by going to File -> New  -> Other -> Android -> Android Project. The default project just using the main.xml file for these example layouts will do just fine.

We can create a stretching layout with two different methods; Layout Weights and Layout Spans, I will show a simple example of both, and then I will show how to center an element in a TableLayout with Layout Spans.

Stretching layout using Layout Weights

About Layout Weights

Simply put, layout weights are a way of defining how much of the layout space a widget element will take.

It can be thought of as a percentage of layout space, but it is written 0.2 instead of 20%. So if you want to give an element a size of roughly 20%, you set android:layout_weight=”0.2″ for that element. (These percentages/weights are not exact values, a layout_weight of 0.1 may on your phone turn out to look more like 0.05 or 0.15)

Creating a simple layout with one EditText and one Button

The following code will give a simple layout using LinearLayout, and stretch both the EditText and the Button to fill the width:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Table01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingTop="10dp">

    <EditText
        android:id="@+id/searchText"
        android:text="Search text"
        android:layout_weight="0.8"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
         />

    <Button
        android:id="@+id/searchButton"
        android:text="Search"
        android:layout_weight="0.2"
        android:layout_alignParentRight="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
         />
</LinearLayout>

If you replace your main.xml files content with that code, save, and run it, the layout will look like this on your virtual device:

Stretching layout using Layout Spans

In this example we are going to use a TableLayout with one TableRow containing one EditText and a Button.

The amount of space given to each element, is specified in the android:layout_span attribute, which tells us how many columns it will span over.

The example code looks like this:

<?xml version="1.0" encoding="utf-8"?>  
<TableLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="*">

    <TableRow>
        <EditText
            android:id="@+id/searchText"
            android:text="Search text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_span="4" />

        <Button
            android:id="@+id/searchButton"
            android:text="Search"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_span="1" />
    </TableRow>
</TableLayout>
  • The stretchColumns="*" on line number 6 says that all columns should be stretched
  • We see on line 14 that the EditText has a layout span of 4 columns
  • On line 21 we see that the Button has layout span of 1 column
  • In total that is 5 columns in our TableLayout.

1/5 is 0.2, so the Button should take about 20% of the space, as we can see in the picture below:

How to center an element in a TableLayout

This is another example using Layout Spans and TableLayout. It just demonstrates how you could place elements with the use of the android:layout_span attribute. It also shows how to centre elements in a table, which is very handy.

The code looks like this:

<?xml version="1.0" encoding="utf-8"?>  
<TableLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="*">
    <TableRow>
        <TextView
            android:layout_span="3"
            android:text="Heading"
            android:layout_gravity="center_horizontal" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="Text1"
            android:background="#666666" />
        <TextView
            android:text="Text2" />
        <TextView
            android:text="Text3"
            android:background="#666666" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="Text4"
            android:layout_span="2"
            android:background="#333333" />
        <TextView
            android:text="Text5" />
    </TableRow>
</TableLayout>

And the resulting layout looks like this:

Explanation:

  • The Heading spans over 3 columns, and is centered over these columns by the gravity attribute
  • Text 1,2 and 3 span over one column each
  • Text 4 span over 2 columns, while Text 5 gets the rest, which is 1 column.
  • On line 6, the stretchColumns="*" says all columns are set to stretch.

Please share this article.

comments powered by Disqus