Table Layout spacing issues

Question

enter image description here I am using a table layout. What i would want is to equally space the icons seen in the vertical layout(table layout) present on the left side of the screen, so as to cover the height of the whole screen. I tried out different methods like layout_weight="1", set the image width to 0dp and then set the weight...but none among them has helped.....

Here is the xml...

 <TableLayout
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                android:layout_marginTop="50dp" >

                 <TableRow
                   android:layout_weight="1"
                 >
                   <Button
                 android:id="@+id/button1"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"                                       
                 android:background="@drawable/XXX" />
                 </TableRow>

                 <TableRow
                    android:layout_weight="1"
                    >
                <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Desserts" 
                 />
                    </TableRow>

                    <TableRow
                     android:layout_weight="1"
                  >
                   <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:background="@drawable/sraberrydrink" />
                   </TableRow>

                   <TableRow
                   android:layout_weight="1"
                    >
                    <TextView
              android:id="@+id/textView2"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"

              android:text="Drinks"
              android:textColor="#000000"            
              android:textSize="10dp" />
                    </TableRow>

                    <TableRow
                    android:layout_weight="1"
                    >

                   <Button
              android:id="@+id/button3"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"

              android:background="@drawable/newsoups" />
                     </TableRow>
                 <TableRow
                     android:layout_weight="1"
                     >
                   <TextView
              android:id="@+id/textView3"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginLeft="45dp"
              android:text="Starters"
              android:textColor="#000000"
              android:textSize="10dp" />

                     </TableRow>
                     <TableRow
                         android:layout_weight="1" >

             <Button
             android:id="@+id/button4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="40dp"
             android:layout_marginTop="3dp"

             android:background="@drawable/chipa" />
                  </TableRow> 
                  <TableRow
                  android:layout_weight="1"
                  >
                <TextView
             android:id="@+id/textView4"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Snacks" 
             android:layout_marginLeft="45dp"
             android:textColor="#000000"
             android:textSize="10dp"/> 
                </TableRow>


           </TableLayout>

If someone could point to a solution....Thanks.

I've been experimenting a little; it seems that the use of layout_weight in any cell completely breaks column alignment. — Edward Falk, Jun 26 '12 at 22:15

Avi Kumar · Accepted Answer · 2012-04-30T09:17:05.390

enter image description here

What you can do is can use a linear layout like this

!<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <LinearLayout
    android:id="@+id/layout_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" android:background="#2e8b57" android:layout_weight=".8" android:gravity="center">

    <LinearLayout 
    android:id="@+id/layout_main"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical" android:layout_weight=".5">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

         <LinearLayout 
    android:id="@+id/layout_main"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical" android:layout_weight=".5">
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

              <LinearLayout 
    android:id="@+id/layout_main"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical" android:layout_weight=".5">
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

                   <LinearLayout 
    android:id="@+id/layout_main"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical" android:layout_weight=".5">
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    </LinearLayout>
    </LinearLayout>

        <LinearLayout 
    android:id="@+id/layout_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#8fbc8f" android:layout_weight=".2">
             <LinearLayout
    android:id="@+id/layout_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"  android:layout_weight=".8" android:gravity="center">



    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />



    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />


    </LinearLayout>

                 <LinearLayout
    android:id="@+id/layout_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"  android:layout_weight=".8" android:gravity="top|center">



    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />


    </LinearLayout>
            </LinearLayout>
</LinearLayout>

Avi, Yes....you are right...Had used linear layouts, but there is a reqt to use table layout.........so is anything possible with table layout? — Kunal Shah, Apr 30 '12 at 08:40
@KunalShah i have uploaded an image as your layout if you feel its fine or you still need to use table layout — Avi Kumar, Apr 30 '12 at 08:56
Hmmmmmmm......this is fine...And avi one more doubt....how to support this on multiple screens...as android resizes the resources, will it work? — Kunal Shah, Apr 30 '12 at 09:06
If you are using images you need to make images for small medium and high density devices and it shall work same on all screen sizes — Avi Kumar, Apr 30 '12 at 09:30
Avi, tried the code.. the difference between the table layout and using a linear layout is that the texts have to be aligned manually..this always is not giving good results — Kunal Shah, Apr 30 '12 at 10:18

Table Layout spacing issues

1 Answers1

Linked