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.

Since you're doing this in a Flutter app, how wedded are you to doing this in an Android drawable vs. in Flutter code? Seems easier in Flutter. — emerssso, Jul 12 '18 at 18:23
@emerssso it is easier, except I'd get a blank screen before being able to do anything in flutter, which completely misses the point for a splash screen — arielnmz, Jul 13 '18 at 13:45
`scaleType="centerCrop"` makes image cover `` but unfortunately doesn't work for `` — Pavel, Aug 15 '20 at 01:47
I tried using a larger size launch_image inside @drawable folder with the fill option and this fixed the stretching issue for me. There is no other alternative for fill option. — Deepak K J, Aug 19 '20 at 12:55
I wasted a lot of time on your problem, and I suspect it has no solution, sorry :( — farouk osama, Aug 19 '20 at 20:06
Can you post a sample image of what you want and what it is doing? — BlackHatSamurai, Aug 20 '20 at 22:41
just to clarify, as you will be dealing with multiple aspect ratios, do you want your image to be stretched or to be copped? — quealegriamasalegre, Aug 21 '20 at 22:14

Rod · Answer 1 · 2020-08-20T23:27:36.063

3

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.

edited Aug 20 '20 at 23:27

answered Aug 20 '20 at 15:13

Rod

1,601
12
18

1

In my case any of `clip_vertical` and `clip_horizontal` doesn't fit image to screen leaving white margins at left and right. `clip_vertical` also stretches the image (compressing it vertically) – Pavel Aug 20 '20 at 20:44
The image must fit the biggest aspect ratio (21:9), thus even after cliped, it still will cover the entirety of the screen. Your problem is in preparing the image, not the avaible parameters. I'll update my answer with an example. – Rod Aug 20 '20 at 23:08
How about landscape mode? will this cover the area? – arielnmz Aug 21 '20 at 21:02
It is the same idea. You need to fix one side and work with the other. – Rod Jan 26 '21 at 13:54

score -1 · Answer 2 · edited Aug 19 '20 at 09:38

-1

below code worked for me....

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@android:color/white" />
     <item>
         <bitmap
             android:gravity="fill"
             android:src="@drawable/launch_image" />
     </item> 
</layer-list>

edited Aug 19 '20 at 09:38

Pavel

5,374
4
30
55

answered Aug 18 '20 at 16:44

Shardul Singh Gurjar

239
3
1

Please read the question carefully: *I don't want to FILL the space (stretching the image) but to COVER it* – Pavel Aug 19 '20 at 09:39
OP asks how to cover the screen without stretching an image – Pavel Aug 19 '20 at 09:40

score -7 · Answer 3 · answered Jul 12 '18 at 18:32

-7

Check the Tolyas answer Starting from API 23, it is possible to set width and height right within the "item" tag

answered Jul 12 '18 at 18:32

Bruno Santiago

1
1

This is an exact quote of https://stackoverflow.com/a/38608066/1890510 and shouldn't be an answer. – Björn Zurmaar Jul 12 '18 at 18:52

score -8 · Answer 4 · answered Jul 13 '18 at 07:44

-8

In Flutter, you can achieve it with the help of the following code snippet.

body: new Center(
child: new Image.asset('assets/images/flutter.png'),
),

I found a simple example for it here

answered Jul 13 '18 at 07:44

Sunil

3,211
3
21
21

Splash screen must be implemented in `launch_background.xml` for Android. Also, please format your code. – mertcanb Oct 16 '19 at 18:18

How to make splash screen image cover the screen?

4 Answers4