Stretching and Spanning layouts in Android

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:

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:

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:

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.