Scale Imagebuttons to fit width

Question

I have a Scrollview with a ConstraintLayout and I want to add some Imagebuttons. They should be scaled to fit the half width so I can put 2 Buttons in a row. The whole thing must me scrollable because I want to add about 10 rows of buttons. I tried many options like seen here ConstraintLayout: how to have a view be half the screen width and centered?

My layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-xxxxxx"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/ibDog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/dog"
        app:layout_constraintEnd_toStartOf="@+id/ibHorse"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView"

        app:srcCompat="@drawable/dog" />

    <ImageButton
        android:id="@+id/ibHorse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/horse"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/ibDog"
        app:layout_constraintTop_toBottomOf="@+id/adView"
        app:srcCompat="@drawable/horse" />

    <ImageButton
        android:id="@+id/ibCat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/cat"
        app:layout_constraintEnd_toStartOf="@+id/ibFrog"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ibHorse"
        app:srcCompat="@drawable/cat" />

    <ImageButton
        android:id="@+id/ibFrog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/frog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/ibCat"
        app:layout_constraintTop_toBottomOf="@id/ibHorse"
        app:srcCompat="@drawable/frog" />


</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Thanks!

Answer 1

Try the following. I have changed the width of the ScrollView to match_parent and changed the width of the ImageViews to 0dp which will stretch out the images according to chain logic.

<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="true"
    tools:ignore="SpeakableTextPresentCheck">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/adView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:adSize="BANNER"
            app:adUnitId="ca-app-pub-xxxxxx"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@+id/ibDog"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toStartOf="@+id/ibHorse"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/adView"
            app:srcCompat="@drawable/ic_launcher_foreground" />

        <ImageButton
            android:id="@+id/ibHorse"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/ibDog"
            app:layout_constraintTop_toBottomOf="@+id/adView"
            app:srcCompat="@drawable/ic_launcher_foreground" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>