Android layout: How show all images evenly distributed on the window

Question

i try to create a Android-App that using all images from gitHub png-images 0ad.

i try to put all (about 19) images at the screen. i tried to set the image size to 17% of the screen (or 0.17).

if i set all to layout_width="match_parent" images are to large. if i set images to layout_width="50dp" images are to small for some devices.

my idea was to use (because i have read android.com..multiscreen resources.displayMetrics * 0.10 as image size.

I also tried many answers from Percentage width in a RelativeLayout. Seems outdated.

full source: https://github.com/0ad-matters/0ad-counter-unit-guide

My best Solution in app/src/main/res/layout/activity_main.xml at the moment shows images to small:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:minWidth="match_parent"
        android:minHeight="match_parent"
        android:maxWidth="match_parent"
        android:maxHeight="match_parent">

        <TableLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">


            <TableRow android:layout_width="match_parent" android:layout_height="match_parent">
                <ImageButton
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        app:srcCompat="@drawable/emblem_athenians"
                        style="@style/Widget.AppCompat.ImageButton"/>
                <ImageButton
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        app:srcCompat="@drawable/emblem_britons"
                />
            </TableRow>
        </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

TabkeRow match_parent for layout_width and layout_height looks like this:

if i use wrap_content for with of a image it takes 100% of the image size. thats to large as you could see here:

Have you tried setting the widths to "0dp" and the heights to "wrap_content"? — Rob, Nov 24 '22 at 02:33
@Rob you mean without using a table? i did not. You mean the width, height of the ImageButtons ? — SL5net, Nov 24 '22 at 08:59
I don't think that works anymore with tables. some kind of grid i guess is expected. — SL5net, Nov 24 '22 at 09:02
Yes, removing the table. I'll post a more detailed answer below. — Rob, Nov 25 '22 at 00:41

score 1 · Accepted Answer · answered Nov 25 '22 at 01:39

Here's how I'd do it: Remove the table create a new ConstraintLayout for each row of ImageButtons. Set the constraints for each button to the next button in the row, creating a chain of constraints across the layout. Constrain the top of the second row to the bottom of the first row. For brevity, I only did four buttons per row, but this will work with as many as you want to add.

Also, set adjustViewBounds to true and scale the images if you'd like to include the entire image.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/row1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/r1col1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/r1col2"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_athenians" />

        <ImageButton
            android:id="@+id/r1col2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r1col1"
            app:layout_constraintEnd_toStartOf="@+id/r1col3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_britons" />

        <ImageButton
            android:id="@+id/r1col3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r1col2"
            app:layout_constraintEnd_toStartOf="@+id/r1col4"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_carthaginians" />

        <ImageButton
            android:id="@+id/r1col4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r1col3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_han" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/row2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/row1">

        <ImageButton
            android:id="@+id/r2col1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/r2col2"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_kushites" />

        <ImageButton
            android:id="@+id/r2col2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r2col1"
            app:layout_constraintEnd_toStartOf="@+id/r2col3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_macedonians" />

        <ImageButton
            android:id="@+id/r2col3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r2col2"
            app:layout_constraintEnd_toStartOf="@+id/r2col4"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_macedonians2" />

        <ImageButton
            android:id="@+id/r2col4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r2col3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_mauryas" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Result: Justified buttons

Android layout: How show all images evenly distributed on the window

1 Answers1