Android XML Layout with imagebuttons in a row

Question

Im trying to create a row of image buttons, so lets say 3 rows and 3 columns.

I keep trying to make the images all the same size but the design just messes up.

Trying to get something like this:

Image Image Image

Image Image Image

Image Image Image

Can someone help me get these in line?

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

    <ImageButton
        android:layout_width="100dp"
        android:layout_height="172dp"
        android:id="@+id/imageButton"
        android:src="@drawable/sample_0"
        android:layout_gravity="center_horizontal" />

    <ImageButton
        android:layout_width="129dp"
        android:layout_height="180dp"
        android:id="@+id/imageButton2"
        android:src="@drawable/sample_1" />

</LinearLayout>

Answer 1

If you dont want to use GridView , you can do it with android:layout_weight , like that:

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="180dp">

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton"
            android:layout_weight="1" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton2"
            android:layout_weight="1" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton3"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="180dp">

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton4"
            android:layout_weight="1" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton5"
            android:layout_weight="1" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton6"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="180dp">

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton7"
            android:layout_weight="1" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton8"
            android:layout_weight="1" />

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:id="@+id/imageButton9"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

Answer 2

You should not try to arrange images with layout_ height-width parameters. As with change in screen size, orientation etc will result into messing up the layout.

Use GridView to arrange your images on screen. See the docs for gridview GridView