Question

I am trying to have a custom keypad with TableLayout and ImageButtons. So far, I have got to this

But clearly, I am having problems removing the vertical spacing that comes between two consecutive TableRows. The relevant code is as follows:

        <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:id="@+id/numkeypad"
                 android:orientation="vertical"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:stretchColumns="*"

                 android:layout_gravity="bottom"
                 android:visibility="visible"
                 android:background="@color/contents_text"
            >

        <TableRow
                android:layout_width="wrap_content"
                android:layout_height="60dp"
                android:layout_weight="1"
                >

            <ImageButton android:id="@+id/numkeypad_1"
                         android:layout_height="60dp"
                         android:layout_weight="0.33333333333333"
                    android:layout_width="wrap_content"
                    android:src="@drawable/k1"
                    >
            </ImageButton>
            <ImageButton android:id="@+id/numkeypad_2"
                    android:layout_weight="0.33333333333333"
                    android:layout_width="wrap_content"
                    android:layout_height="60dp"
                    android:src="@drawable/k2">
            </ImageButton>
            <ImageButton android:id="@+id/numkeypad_3"
                    android:layout_weight="0.33333333333333"
                    android:layout_width="wrap_content"
                    android:layout_height="60dp"
                    android:src="@drawable/k3">

            </ImageButton>
        </TableRow>

        <TableRow                     android:layout_width="wrap_content"
                                      android:layout_height="60dp"
                                      android:layout_weight="1">
            <ImageButton android:id="@+id/numkeypad_4"
                         android:layout_weight="0.33"
                         android:layout_width="wrap_content"
                         android:layout_height="match_parent"
                         android:src="@drawable/k4"
                    >
            </ImageButton>
            <ImageButton android:id="@+id/numkeypad_5"
                    android:layout_weight="0.33"
                    android:layout_width="wrap_content"
                    android:layout_height="60dp"
                    android:src="@drawable/k5">
            </ImageButton>

            <ImageButton android:id="@+id/numkeypad_6"
                         android:layout_weight="0.33"
                         android:layout_width="wrap_content"
                         android:layout_height="60dp"
                         android:src="@drawable/k6">

            </ImageButton>
        </TableRow>

Can someone point me what is causing the vertical spacing between the two TableRows and how could I remove it?

Thanks.

Answer 1

The behavior you see it’s due to that LayoutParams that you use for the ImageButtons. The TableLayout and TableRow are widgets that impose certain constraints on their children(regarding Layoutparams values used). A TableRow in your layout should be like
this:

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

        <ImageButton android:id="@+id/numkeypad_1"
                android:src="@drawable/k1" 
                android:background="@null" /> <!-- remove and possible padding from the Button drawable -->
        <ImageButton android:id="@+id/numkeypad_2"
                android:src="@drawable/k2" 
                android:background="@null" />
        <ImageButton android:id="@+id/numkeypad_3"
                android:src="@drawable/k3"
                android:background="@null" />
  </TableRow>