Android Splash Screen stretched

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:

enter image description here

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):

enter image description here

On the emulator it looks perfect like this:

enter image description here

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.

Upvotes: 3

Views: 7716

Answers (1)

UrosKekovic
UrosKekovic

Reputation: 970

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.

Upvotes: 4

Related Questions