Showing a full-width ImageView containing a SVG di

Question

My aim is to show a SVG background image filling the whole screen's width, in a ConstraintLayout. A Button is superposed to this background image, that's why you can see in the mock-up below:

The background image is the one that contains the stars. Its start and end sides would be constrained to the root GroupView, so that it would fill entirely the width of the screen.

The problem is the following: whether I bind the bottom side to the bottom side of the screen or not, the background image appears distorded, as illustrated in the following:

Here is the code I've written:

<ImageView
    android:id="@+id/imageView16"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/ic_background_stars"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/linearLayout4"  // "linearLayout4" is just a widget shown above, it's not an important element for this StackOverflow question
    />

<Button
    android:id="@+id/button_home_share"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="24dp"
    android:background="@color/colorRoyalRedLight"
    android:text="TextView"
    android:textAllCaps="false"
    android:textColor="@color/white"
    app:layout_constraintStart_toStartOf="@+id/imageView16"
    app:layout_constraintEnd_toEndOf="@+id/imageView16"
    app:layout_constraintTop_toTopOf="@+id/imageView16"
    app:layout_constraintBottom_toBottomOf="@+id/imageView16"
    />

My question

How could I use my SVG image as a background image that would appear without any distorsion, filling the whole screen's width? The height can of course adapt itself (to keep good proportions), but shouldn't be shorter (in Y and in X) than the button.

Answer 1

For the ImageView try setting android:scaleType="centerCrop". See ImageView.ScaleType.

CENTER_CROP

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). The image is then centered in the view. From XML, use this syntax: android:scaleType="centerCrop".