How to make splash screen image cover the screen?

Question

I am trying to make an image cover the screen, by using the following drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:gravity="fill_horizontal|fill_vertical"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

Now, I don't want to FILL the space (stretching the image) but to COVER it (as in CSS3 cover).

Every single answer I have seen only either fills or centers an image, is there really no way to do this?

Just note that I'm using Flutter for this app.

Answer 1

You can find every single parameter you can use for your bitmap here:
https://developer.android.com/guide/topics/resources/drawable-resource#XmlBitmap

I think what you want to use for your gravity value is either clip_vertical or clip_horizontal and you need to combine it with one of the alignment options for gravity: top, left, bottom, right, center_vertical or center_horizontal.

You need to use an image with the biggest aspect ratio (21:9) and define a base for it (the main part of the image). The base must be either in one of the sides or the center.

Example: If you want to put the "base" of your image in the bottom, even if the upper part is clipped, the bottom part keeps what is important. Take a look at the images below, the first is 21:9 and the second is the same image cliped into a 4:3 screen. The third image is how each of the main aspect ratios would clip the image.

The same idea can be used to clip images with a 4:3 aspect ratio, where you would keep the height and clip the width.

I hope that answers your question.