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

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: