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