Create Layout/Screen with four ImageButtons (all of the same size)

Question

I am having a big problem to create an Android Layout, that contains only four ImageButtons.

It should look like this:

At the moment I created a TableLayout with two LinearLayout (horizontal: each contains two buttons.) But I am doing this by set the exact values:

<ImageButton
            android:layout_width="178dp"
            android:layout_height="260dp"
            android:src="@drawable/personal_coach"
            android:id="@+id/button_personal_coach"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:background="?android:selectableItemBackground"
            android:layout_marginRight="4dp"
            />

Is there a better way to do this? (more dynamically for other screen sizes without setting the width and height to an value)

Answer 1

Try something like:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2">



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>

Explanation

Here we use the weight attribute which divides the screen in percentages depending on the weighs. For example, putting 1 in both children it will make them to take the 50% of the screen. That is what we are doing first in vertical, and then in horizontal for each button.