Android UI how to align textviews?

Question

I have this linear layout and inside the linear layout i have several text views. Now what i want to do is to display the info text on the left side and then the value next to it but the values should be aligned after the longest info text.

I can't see how i can use another Linear Layout inside the linear layout.

            <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Room:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Date:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Time:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Location"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </LinearLayout>

Like a html table. One with the info text and then the next with the value. The text views with the text value should be aligned after the longest info text.

Html equivalent

<table>
<tr>
<td>Room:</td>
<td>{value}</td>
</tr>
<tr>
<td>Date:</td>
<td>{value}</td>
</tr>
...
</table>

Will it be possible to align this besides putting in a fixed dp width?

Answer 1

Something like this,

Room: Value
Date: Value

You could use a layout like this,

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:orientation="vertical" >

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:orientation="horizontal" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Room:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
      </LinearLayout>
     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:orientation="horizontal" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Date:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </LinearLayout>
     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="5dp"
            android:orientation="horizontal" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Time:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Location"
                android:textSize="12dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </LinearLayout>
        </LinearLayout>

If you want to create a table like strucutre, then you should look at Table Layout. You will find a good example here

Answer 2

Try this code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    tools:context=".FullscreenActivity" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

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

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Room:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </TableRow>

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

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Date:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </TableRow>

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

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Time:"
                android:textSize="12dp" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </TableRow>

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

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="Location"
                android:textSize="12dp" />

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#ff00ff"
                android:text="{value}"
                android:textSize="12dp" />
        </TableRow>
    </TableLayout>

</LinearLayout>

Answer 3

You can use TableLayout. Refer below link for clarity , as i cant write the entire code here.

http://mobile.tutsplus.com/tutorials/android/android-sdk_table-layout/

Answer 4

U can put the textViews in a LinearLayout like below

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:layout_marginLeft="5dp"
                android:orientation="vertical" >

    <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#ff00ff"
                    android:text="Room:"
                    android:textSize="12dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#ff00ff"
                    android:text="{value}"
                    android:textSize="12dp" />
    </LinearLayout>

    // add  the rest of textviews similarly as above
</LinearLayout>