Resize ImageViews to fit and use full screen width in Android

Question

How can I fit these two (or more) marbles (ImageViews) to the full width of the Android screen?

The full screen should be used all the time, regardless of if there are 1 or 12 marbles.
Right now only 1½ marble fits, so some resize are needed!

In conclusion I would like to be able to add as many ImageViews as needed and they should automagically be resized to fit within but also use the whole Android display width...

My XML-code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/background_360x780_fireboxes"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingStart="15dp"
    android:paddingTop="15dp"
    android:paddingEnd="15dp"
    android:paddingBottom="15dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imgMarble1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_marble_dark_yellow_246x246" />

    <ImageView
        android:id="@+id/imgMarble2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintStart_toEndOf="@+id/imgMarble1"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_marble_dark_yellow_246x246" />

    <Button
        android:id="@+id/btnQuit"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginBottom="0dp"
        android:backgroundTint="@color/teal_700"
        android:onClick="quit"
        android:text="@string/btn_quit"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnPlay"
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="25dp"
        android:layout_marginBottom="0dp"
        android:backgroundTint="@color/teal_700"
        android:onClick="play"
        android:text="@string/btn_play"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Thanks @FilipeOliveira for your help:
From his comments above...

This is how you fit two (or more) marbles (ImageViews) within the Android display width:

• Set width = 0dp for every marble (ImageView)
  android:layout_width="0dp"
• Set imgMarble1's "Start" to "StartOf parent" and "End" to "StartOf imgMarble2"
  app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/imgMarble2"
• Set imgMarble2's "Start" to "EndOf imgMarble1" and "End" to "EndOf Parent"
  app:layout_constraintStart_toEndOf="@+id/imgMarble1"
app:layout_constraintEnd_toEndOf="parent"

"This will create a chain and the width will be auto resize based on screen width."

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
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="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/imgMarble1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imgMarble2"
        app:layout_constraintTop_toTopOf="parent" 
        app:srcCompat="@drawable/marble_dark_yellow_246x246" />

    <ImageView
        android:id="@+id/imgMarble2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/imgMarble1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/marble_dark_yellow_246x246" />