Android LinearLayout Line Breaks in XML

Question

I have an activity designed to get customer information. First line gets name, 2nd line street address, third line is city, state and zip. I can achieve what I want using a RelativeLayout and by using android:layout_below and android:layout_toRightOf, but then i have to specifically indicate a width for my views. That width may look odd as the user reorients or switches between older and newer versions of android where everything is sized differently. I want to utilize the weight feature of a LinearLayout, but everything just comes up all on one line. How do I insert a line break to create rows of views within a LinearLayout?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/custLabel"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:layout_width="0dip"  
android:text="Name"/>
<EditText
android:id="@+id/customer"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:layout_width="0dip"/>
<TextView
android:id="@+id/addressLabel"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:layout_width="0dip"
android:text="Address"/>
<EditText
android:id="@+id/address"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:layout_width="0dip"/>
<TextView
android:id="@+id/cityLabel"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:layout_width="0dip"
android:text="City"/>
<EditText
android:id="@+id/city"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:layout_width="0dip"/>
<TextView
android:id="@+id/stateLabel"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:layout_width="0dip"
android:text="State"/>
<EditText
android:id="@+id/state"
android:layout_height="wrap_content"
android:layout_weight=".20"
android:layout_width="0dip"/>
<TextView
android:id="@+id/zipLabel"
android:layout_height="wrap_content"
android:layout_weight=".1"
android:layout_width="0dip"
android:text="Zip"/>
<EditText
android:id="@+id/zip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:layout_width="0dip"/>
</LinearLayout>

score 4 · Accepted Answer · edited Sep 25 '15 at 08:58

You must use nested LinearLayout's to do this. I think something like this

<?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" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/custLabel"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Name" />

        <EditText
            android:id="@+id/customer"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".75" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/addressLabel"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Address" />

        <EditText
            android:id="@+id/address"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".75" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/cityLabel"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:text="City" />

        <EditText
            android:id="@+id/city"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".25" />

        <TextView
            android:id="@+id/stateLabel"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:text="State" />

        <EditText
            android:id="@+id/state"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".20" />

        <TextView
            android:id="@+id/zipLabel"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:text="Zip" />

        <EditText
            android:id="@+id/zip"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight=".20" />
    </LinearLayout>
</LinearLayout>

should work.

That works. Can't believe there's not a simpler way. Thanks! — jmease, Feb 06 '12 at 14:47

score 3 · Answer 2 · answered Feb 06 '12 at 14:42

The property of a Linear view is, it will arrange the child views in Horizontal or Vertical manner. You cannot order each TextView and Edit text in a alternate lines. For that you have to use extra layouts like table layout or even another linear layout inside the current Linear layout.

Following is the example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TableLayout
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight=".25" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/custLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Name" />

        <EditText
            android:id="@+id/customer"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".75" >

            <requestFocus />

        </EditText>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/addressLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="Address" />

        <EditText
            android:id="@+id/address"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".75" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/cityLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:text="City" />

        <EditText
            android:id="@+id/city"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25" />
    </TableRow>

    <TableRow
        android:id="@+id/TableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/stateLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:text="State" />

        <EditText
            android:id="@+id/state"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".20" />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/zipLabel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".1"
            android:text="Zip" />

        <EditText
            android:id="@+id/zip"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25" />
    </TableRow>

</TableLayout>

score 1 · Answer 3 · answered Feb 06 '12 at 14:26

1

What you want to do is not possible with a single LinearLayout. You should check out TableLayout.

answered Feb 06 '12 at 14:26

SimonVT

1,080
10
12

I've used TableLayouts for other things. Is it possible to set the column widths as percentages? – jmease Feb 06 '12 at 14:29
It is possible with the "layout-weight" attribute to set the columns to take a set amount of space, nearly identical to percentage. – Jean-Philippe Roy Feb 06 '12 at 14:43

Android LinearLayout Line Breaks in XML

3 Answers3

Linked