Button size in table row

Question

I have 4 images in Table row:

<TableRow
                android:layout_weight="1"
                android:gravity="center">

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:contentDescription="Icon"
                    android:src="@drawable/ic_android"
                    />
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:contentDescription="Icon"
                    android:src="@drawable/ic_android"
                    />
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:contentDescription="Icon"
                    android:src="@drawable/ic_android"
                    />
                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:contentDescription="Icon"
                    android:src="@drawable/ic_android"
                    />

</TableRow>

Why I'm getting two big buttons and two small ones as result. Why they are not same size?

Answer 1

Use layout_weight property to equally divide the space among four views. Remember to set the layout_width to 0dp.

<ImageButton
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:layout_margin="4dp"
     android:layout_weight="1"
     android:contentDescription="Icon"
     android:src="@drawable/ic_launcher_background" />

Sample Output :