androidxmlimageviewresize-image

Resize ImageViews to fit and use full screen width in Android


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...

enter image description here

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>

Solution

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

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

    "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" />
    

    Two ImageViews resized to fit and use the full screen width in Android