Scaling vector graphics in ConstraintLayout

Question

This is a "how-to" question.

I have an android activity with 6 ImageView objects in a ConstraintLayout. I would like them placed in a horizontal row, always using the full width of the screen. For larger screens, instead of blank spaces between the ImageViews I would like the ImageViews to scale up, maintaining their aspect ratio. I am using vector resources for the content of the images.

How can this be done?

Please see: [How do I avoid misusing tags?](https://meta.stackoverflow.com/questions/354427/how-do-i-avoid-misusing-tags) — EJoshuaS - Stand with Ukraine, Aug 04 '17 at 18:26

score 5 · Accepted Answer · answered Aug 05 '17 at 13:07

Within ConstraintLayout, you can place your ImageView into a chain with

app:layout_constraintHorizontal_chainStyle="spread_inside"

or

app:layout_constraintHorizontal_chainStyle="spread"

and make the width of each view 0dp to expand each view horizontally to match its constraints. That will distribute each view across the width of the screen whether in portrait or landscape mode. (See this discussion of chains.)

Once that is done, specify android:adjustViewBounds="true" for each ImageView that will make the vector image scale up to fill its view. (See here and here).

Below are two sample images and the XML used. (I used four images, but it will work for six as well.)

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/imageView2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView3"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintEnd_toStartOf="@+id/imageView4"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:adjustViewBounds="true"
        app:srcCompat="@drawable/ic_android_green_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="@+id/imageView" />
</android.support.constraint.ConstraintLayout>

Thanks @Cheticamp - Your answer was right on the money and your example well done and very helpful. — John W, Aug 05 '17 at 15:34

Scaling vector graphics in ConstraintLayout

1 Answers1