Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get a TableLayout with 2 columns of equal width

Why doesn't my table have equal column widths? Here's the complete layout: first the table, then two buttons in a LinearLayout outside of table, those are divided equally.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

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

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="4dp" >

            <TableRow
                android:layout_marginTop="2dp"
                android:gravity="center_vertical" >

               <TextView
                    style="@style/Label.Plain"
                    android:layout_width="match_parent"
                    android:text="@string/Caption" />

                <EditText
                    android:background="#00ff00"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_height="@dimen/button_height"
                    android:inputType="numberDecimal"
                    android:selectAllOnFocus="true"
                    android:textSize="@dimen/spinner_text" />
            </TableRow>
        </TableLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="3dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btnOk"
                style="@style/Button.Plain.Fill"
                android:layout_weight="1"
                android:text="@string/ALS_OK" />

            <Button
                android:id="@+id/btnClose"
                style="@style/Button.Plain.Fill"
                android:layout_weight="1"
                android:text="@string/CANCEL" />
        </LinearLayout>
    </LinearLayout>

</ScrollView>

And here's how it looks (one column painted for visibility):

enter image description here

I could use linear layout here, just want to understand the logic behind TableLayout.

like image 426
Violet Giraffe Avatar asked Apr 25 '13 11:04

Violet Giraffe


1 Answers

you can acquire this in different ways,

like using

android:stretchColumns="*" 

in TableLayout or

android:weightSum="1" 

in TableRow and

 android:layout_width="0dp" 
 android:layout_height="wrap_content" 

in and any views in TableRow.

here is an example

<?xml version="1.0" encoding="utf-8"?>       
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableLayout
            android:id="@+id/tblTop10List"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:layout_marginTop="23dp"
            android:stretchColumns="*" >

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

                <TextView
                    android:id="@+id/tvTopName"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:text="HELLO THERE"
                    android:textColor="#FFF000"
                    android:layout_column="0"
                    />

                <TextView
                    android:id="@+id/tvTopNumber"
                    android:paddingLeft="4dp"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:textColor="#FFF000"
                    android:text="HELLO THERE "
                    android:layout_column="1"
                    />
            </TableRow>
        </TableLayout>

    </LinearLayout>

** for more info about table layout and it's property please check this nice article

http://www.informit.com/articles/article.aspx?p=2007353&seqNum=7

like image 177
minhazur Avatar answered Oct 20 '22 00:10

minhazur