Distorted splash screen in some devices

Question

I'm having trouble fixing the distorted splash screen issue on android. I'm using React native. Note that this only happens to some devices, for example, I have a samsung with android version 4.2.2 (splash screen NOT distorted), while the samsung which has an android version of 8+ is having a distorted splash screen.

Below is the attached distorted and not distorted splash screens:

First image is the "NOT DISTORTED" display

Second image is the "DISTORTED" display

This is the link for the guideline Splash Screen Guide

Answer 1

使您的图像视图的高度和宽度相等意味着两者都需要具有相同的大小

Answer 2

make resources available for all screen size and also what design you are using? can you post your xml?

Answer 3

Edited solution that will make your SplashScreen look great on all APIs including API21 to API23

First of all read this article and follow the GOOD way of making a splash screen.

If your logo is distorted or wont fit and you are only targeting APIs24+ you can simply scale down your vector drawable directly in its xml file like so:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

in the code above I am rescaling a drawable I drew on a 640x640 canvas to be 240x240. then i just put it in my splash screen drawable like so and it works great:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

my code is actually only drawing the triangle in the picture at the bottom but here you see what you can achieve with this. Resolution is finally great as opposed to the pixelated edges I was getting when using bitmap. so use a vector drawable by all means (there is a site called vectr that I used to create mine without the hasle of downloading specialized software).

EDIT in order to make it work also on API21-22-23

While the solution above works for devices runing API24+ I got really disappointed after installing my app a device running API22. I noticed that the splashscreen was again trying to fill the entire view and looking like shit. After tearing my eyebrows out for half a day I finally brute-forced a solution by sheer willpower.

you need to create a second file named exactly like the splashscreen xml (lets say splash_screen.xml) and place it into 2 folders called drawable-v22 and drawable-v21 that you will create in the res/ folder (in order to see them you have to change your project view from Android to Project). This serves to tell your phone to redirect to files placed in those folders whenever the relevant device runs an API corresponding to the -vXX suffix in the drawable folder, see this link . place the following code in the Layer-list of the splash_screen.xml file that you create in these folders:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

For some reason for these APIs you have to wrap your drawable in a bitmap in order to make it work and jet the final result looks the same. The issue is that you have to use the aproach with the aditional drawable folders as the second version of the splash_screen.xml file will lead to your splash screen not being shown at all on devices running APIs higher than 23. You might also have to place the first version of the splash_screen.xml into drawable-v24 as android defaults to the closest drawable-vXX folder it can find for resources. it finally worked for me

Answer 4

Follow steps :

1) Use only Icon and set Background as gradient drawable.

2) White Icon's width and height should be equal. Use Icon and place in XHDPI and XXHDPI drawable folder.

Layout Dsign :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/sample">

  <ImageView
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@android:color/white"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="90dp"/>
</RelativeLayout>

Drawable background sample.xml :

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <gradient
    android:startColor="#00ff00"
    android:endColor="#99ff99"
    android:angle="90"/>
   <corners
    android:radius="0dp"/>
 </shape>

Sample output which has multiple screen support: