Android Splash Screen stretched

Question

I am trying to create a splash screen using this tutorial by using an additional theme. This is my launcher theme in styles.xml:

    <style name="AppTheme.Launcher" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="android:windowBackground">@drawable/ic_launch_screen</item>
        <item name="colorPrimaryDark">@color/color_white</item>
    </style>

This is the ic_launch_screen.xml file:

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

The ic_splash_screen file is already a 9-patch file looking like this:

In the 9-patch preview in Android Studio it shows that, if stretched, the logos will not be resized and look perfectly aligned.

Yet, when I use it in this combination, the splash screen looks stretched on my Huawei and Samsung but not on the pixel 2 emulator: Huawei Mate 10 Pro & Samsung Galaxy s9+ (they are stretched the same way):

On the emulator it looks perfect like this:

The problem is not because of the system navigation. It still looks stretched on the Huawei when I use three key navigation like in the emulator.

I have already tried playing around in the ic_launch_screen.xml by using <nine-patch> elements or the gravity:center attribute but it looks even more messed up then.

@tripleee Thanks for your help. How can I make images less humongous? I just clicked on image and then picked one from my PC. — René Jörg Spies, Jan 22 '20 at 11:43
There are four different sizes to choose from; the user interface unfortunately does nothing to help you discover this. See https://meta.stackoverflow.com/questions/253403/how-to-reduce-image-size-on-stack-overflow — tripleee, Jan 22 '20 at 11:53
This answer on another thread worked best for me: https://stackoverflow.com/a/60124091/2647345 — Luc, Sep 15 '22 at 23:30

score 4 · Accepted Answer · answered Jan 22 '20 at 10:02

4

I'm not sure why 9 patch isn't scaling but I can propose an workaround. You could create 2 drawables, First one with text pass13 and other one with logo. Now you can create the folowing layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/color_white" />
    <item>
        <bitmap
            android:gravity="center" 
            android:src="@drawable/drawable1" />
    </item>
    <item>
        <bitmap
            android:gravity="center|bottom" 
            android:src="@drawable/drawable2" />
    </item>
</layer-list>

Now it should scale well.

answered Jan 22 '20 at 10:02

UrosKekovic

940
7
10

Your approach works fine, thanks. Yet, now my logos are unsharp, see here: https://imgur.com/TohqwjD. Do you have any tips on how to sharpen those? If I use a larger image size than 256px, it scales badly again. – René Jörg Spies Jan 22 '20 at 11:25
1

@RenéSpies Do you have your drawables in all 5 dimensions (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)? – UrosKekovic Jan 22 '20 at 11:36
No, how can I achieve this? – René Jörg Spies Jan 22 '20 at 12:00
1

There is no shortcut to achieving this. Designers use their tools to export assets in different dimensions. Also if you have your asset as svg (vector asset) it wont lose quality when scaled. – UrosKekovic Jan 22 '20 at 13:30
I cannot create a vector asset using the built in tool. I cannot find any solution googling the error code so I opened a new question here: https://stackoverflow.com/questions/59911183/android-studio-vector-asset-tool-content-not-allowed-in-prolog – René Jörg Spies Jan 25 '20 at 16:28
1

I resolved the issue. I asked my graphic designer to make the logos in SVG format and so he did. Then I was able to use the built in tool in Android Studio to create a vector asset via this SVG file with no effort and now it looks great. – René Jörg Spies Jan 26 '20 at 13:28

Android Splash Screen stretched

1 Answers1