Search code examples
androidandroid-tablelayout

TableLayout columns are not of uniform width


Im trying to create a layout like following

enter image description here

Following is my code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/border"
    android:clipToPadding="false"
    android:elevation="10dp"
    android:orientation="vertical"
    android:outlineProvider="bounds"
    android:paddingBottom="10dp">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:orientation="horizontal"
        android:stretchColumns="0,1,2">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="0"
                android:gravity="center_vertical"
                android:text="Proforma Inv.#" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="1"
                android:gravity="center"
                android:text="Invoice#" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_column="2"
                android:gravity="center_vertical"
                android:text="Status" />
        </TableRow>

    </TableLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:orientation="horizontal"
        android:stretchColumns="0,1,2">

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

            <TextView
                android:id="@+id/dashProformaInvoiceNo"
                style="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="PI1:4000039"
                android:textColor="#00ff00"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/dashInvoiceNo"
                style="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="INC 4000039"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/dashShippingStatus"
                style="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cargo shipped"

                android:textStyle="bold" />
        </TableRow>

    </TableLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:orientation="horizontal"
        android:stretchColumns="*">

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

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

                <TextView
                    android:id="@+id/textView10"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Product:"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/dashProductName"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Biomass pellet"
                    android:textStyle="bold" />
            </LinearLayout>

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

                <TextView
                    android:id="@+id/textView42"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Rate: "
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/dashRate"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="USD 100"
                    android:textStyle="bold" />
            </LinearLayout>
        </TableRow>


    </TableLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:orientation="horizontal"
        android:stretchColumns="*">

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

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

                <TextView
                    android:id="@+id/textView5"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="ETD"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/dashETD"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="07 oct 2015 11.00"
                    android:textStyle="bold" />

            </LinearLayout>

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

                <TextView
                    android:id="@+id/textView43"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Quantitiy: "
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/dashQuantity"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="600 Tons"
                    android:textStyle="bold" />

            </LinearLayout>
        </TableRow>


    </TableLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:orientation="horizontal"
        android:stretchColumns="*">

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

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

                <TextView
                    android:id="@+id/textView7"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="ETA: "
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/dashETA"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="06 OCT 2015"
                    android:textStyle="bold" />

            </LinearLayout>

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


                <TextView
                    android:id="@+id/textView45"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Amount: "
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/dashAmount"
                    style="bold"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="USD 6000"
                    android:textStyle="bold" />
            </LinearLayout>
        </TableRow>


    </TableLayout>

</LinearLayout>

The problem is that Im not be able to make the columns to have equal width. I have tried setting weight to all linear layouts but still the problem persists.


Solution

  • You are giving wrap content as layout width for textviews. This is interfering with stretch columns.

    Change width of all elements inside table layout as

         android:layout_width="0dp"
    

    Also why are you using so many table layout? You can put all table row tags inside one table layout and the below can also come inside table layout inbetween table rows.

       <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_span="3"
        android:background="#000" />
    

    android:layout_span="3" will make the view span all the columns.