Reputation: 710

android : issue with laying out components in tablelayout

am new to android development. in the android app that am working on, am trying to display a person’s photo and his/her details as shown below. The details are fetched from database but, of enow, I have hardcoded. Am having issue with the layout. I used tableview layout (because grid layout is not supported in version 8 of android). ‘name’ & ‘country’ are in row 1 of the table. ‘age’, ‘city’, ‘status’ are in row 2.

I tried so relative & linear layouts (tried switching between them), in vain. Also , tried to follow several answers from stack overflow.

1.Why is there so much unused space to the right corner of the table view? Am trying to spread out the fields to the center of the table view with some gap to the sides (the top bar in the page) but it seems to gravitate towards the left as you can see (and so leaves so much spec to the right unused).

enter image description here

When I rotate, it becomes worse (everything floats to the left ; I want the fields to space out well and leave some gaps to the sides) as you can see here

enter image description here

Here is the layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    android:orientation="vertical"
    tools:context=".MEFloorPlanDisplay" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="220dp"
        android:background="#666666"
        android:orientation="vertical" >

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

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

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

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

                        <TextView
                            android:id="@+id/textView_1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:paddingBottom="10dip"
                            android:paddingLeft="10dip"
                            android:paddingRight="10dip"
                            android:paddingTop="10dip"
                            android:text="NAME"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_1_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="10dip"
                            android:paddingLeft="10dip"
                            android:paddingRight="10dip"
                            android:paddingTop="10dip"
                            android:text="John"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>

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

                        <TextView
                            android:id="@+id/textView_2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="10dip"
                            android:paddingLeft="70dip"
                            android:paddingRight="10dip"
                            android:paddingTop="10dip"
                            android:text="COUNTRY"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_2_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="10dip"
                            android:paddingLeft="10dip"
                            android:paddingRight="10dip"
                            android:paddingTop="10dip"
                            android:text="AMERICA"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>
                </LinearLayout>
            </TableRow>

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

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

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentTop="true"
                        android:layout_weight="33"
                        android:orientation="vertical" >

                        <TextView
                            android:id="@+id/textView_3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="5dip"
                            android:paddingLeft="10dip"
                            android:paddingRight="10dip"
                            android:paddingTop="15dip"
                            android:text="AGE"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_3_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="5dip"
                            android:paddingLeft="10dip"
                            android:paddingRight="10dip"
                            android:paddingTop="0dip"
                            android:text="37"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentTop="true"
                        android:layout_centerHorizontal="true"
                        android:layout_weight="33"
                        android:orientation="vertical" >

                        <TextView
                            android:id="@+id/textView_4"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="5dip"
                            android:paddingTop="15dip"
                            android:text="CITY"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_4_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingBottom="5dip"
                            android:paddingTop="0dip"
                            android:text="CA"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentTop="true"
                        android:layout_weight="34"
                        android:gravity="right"
                        android:orientation="vertical" >

                        <TextView
                            android:id="@+id/textView_5"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="right"
                            android:gravity="right"
                            android:paddingBottom="5dip"
                            android:paddingLeft="10dip"
                            android:paddingTop="15dip"
                            android:text="STATUS"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_5_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:lines="2"
                            android:maxLines="3"
                            android:paddingBottom="5dip"
                            android:paddingLeft="10dip"
                            android:paddingTop="0dip"
                            android:text="SINGLE"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>
                </RelativeLayout>
            </TableRow>
        </TableLayout>
    </LinearLayout>

    <!-- image view code -->

</LinearLayout>

Upvotes: 0

Answers (2)

Hariharan

Reputation: 24853

Try this codes..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc"
    android:orientation="vertical"
    tools:context=".MEFloorPlanDisplay" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="220dp"
        android:background="#666666"
        android:orientation="vertical" >

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

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                    android:orientation="horizontal" >

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:layout_weight="0.4"
                        android:orientation="horizontal" >

                        <TextView
                            android:id="@+id/textView_1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:text="NAME"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_1_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingLeft="5dp"
                            android:text="John"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content" 
                        android:layout_weight="0.6"
                        android:gravity="center"
                        >

                        <TextView
                            android:id="@+id/textView_2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:text="COUNTRY"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_2_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:paddingLeft="5dp"                            
                            android:layout_gravity="center"
                            android:text="AMERICA"
                            android:textColor="#ffffff"
                            android:textSize="20dp" />
                    </LinearLayout>
                </LinearLayout>

            <LinearLayout
                android:id="@+id/tableRow2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" 
                android:orientation="horizontal"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                >

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.33"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:orientation="vertical" >

                        <TextView
                            android:id="@+id/textView_3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="AGE"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_3_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="37"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.33"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:orientation="vertical" >

                        <TextView
                            android:id="@+id/textView_4"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="CITY"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_4_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="CA"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.33"
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:orientation="vertical" >

                        <TextView
                            android:id="@+id/textView_5"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="STATUS"
                            android:textColor="#cccccc"
                            android:textSize="18sp" />

                        <TextView
                            android:id="@+id/textView_5_value"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="SINGLE"
                            android:textColor="#ffffff"
                            android:textSize="20sp" />
                    </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <!-- image view code -->

</LinearLayout>

In Portrait

enter image description here

In Landscape

enter image description here

Upvotes: 1

Carnage

Reputation: 117

Try to avoid TableLayout. Use LinearLayouts inside RelativeLayout.

Upvotes: 0

android : issue with laying out components in tablelayout

Answers (2)

Related Questions