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.