Android: TableLayout align first column right, second left

Question

What must I do to get something like that:

I can do it without problems in HTML but how in Android?

Lund

I cant see your image because of ristriction copy your xml here.. So can get idea – Fluky

Answer 1

Use TextViews and gravity 

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:text="key" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:text="value" />
        </TableRow>

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:text="More key" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:text="More value" />
        </TableRow>

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:text="Even more key" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="left"
                android:text="Even more value" />
        </TableRow>
    </TableLayout>

Sugary

it works. but there is another problem. Cells in the table should be equals width (let's say 50%) but in fact they have 33% (first) and 66% (second). – Lund

Write first TextView wight=1 and second TextView wight=2 – Sugary

Answer 2

Write first TextView wight=1 and second TextView wight=2


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:text="key" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="left"
                android:text="value" />
        </TableRow>

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:text="More key" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="left"
                android:text="More value" />
        </TableRow>

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="right"
                android:text="Even more key" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="left"
                android:text="Even more value" />
        </TableRow>
    </TableLayout>

</LinearLayout>

Sugary

Answer 3

In columns of your TableLayout you must be using TextView to display the content.

So for first column try this,

<TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="Key"
        android:textColor="@android:color/black"/>

and for second column try this,

<TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:text="Value"
        android:textColor="@android:color/black"/>

Munch

It works, Thanks. But cells are not equals by width (they should be 50% (first) and 50% (second)). – Lund

@DarioRossi The code shown by Venky is perfect. What is the issue in her/his code ? – Ptero