PNG logo shown twice and disorted in splashscreen on Android 5 (api v22)

user_7267944 0
Viewed 494

I'm working on splashscreen for android app build with react native. Splashscreen consist of solid color background and logo in PNG format. Splashscreen is working fine on new android versions but on android 5 (api version 22) logo is shown twice, once correctly and once distorted (stretched on entire screen). See screenshot at the end.

Splashscreen is setup with npm package react-native-splash-screen and it's source code looks like this:

res/layout/launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/splashscreen"
    android:orientation="vertical">
</LinearLayout>

and drawable/splashscreen looks like this:

res/drawable/splashscreen.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/purple"/>
    <item
        android:width="257dp"
        android:height="33dp"
        android:drawable="@mipmap/logo"
        android:gravity="center" />
</layer-list>

I have tried almost all different combination of android:gravity, android:scaleType and android:tileMode with no success. Even when I move the logo to <bitmap> tag in the item it was still the same. I did found out that when I change the gravity prop to some different value then the distorted logo move accordingly. But I can't get rid of it. Also I do not understand why is the logo visible twice if there is defined only once.

Any help appreciated. Thanks.

bad splashscreen

react-native android-layout splash-screen android
1 Answers

You can place an ImageView inside your LinearLayout, then set the LinearLayout background to @color/purple and the ImageView background to @mipmap/logo, as shown below:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@mipmap/logo"
        />

</LinearLayout>
user_55501610
Related