ImageView in splashScreen is showed blurred

Question

I'm implementing a splash screen for my app, and when it runs, the splash contains a blurred image , not how it should be.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    tools:srcCompat="@mipmap/ic_launcher_foreground" />

Which one do I have to choose? Or how do I have to add the image? Because the image is 2700x2700px... I have the imageView as centerCrop.

I'd recommend you take a look at [How to implement a splash screen on Android: The Right Way](https://medium.com/@ssaurel/create-a-splash-screen-on-android-the-right-way-93d6fb444857) — PPartisan, Apr 04 '19 at 16:11

score 0 · Answer 1 · answered Apr 04 '19 at 16:28

0

Reduce the size of the image by 75% - (675 x 675). For phone layout, it is more than enough. You can use this online tool to change the dimensions of an image without changing the aspect ratio:

https://www.iloveimg.com/resize-image/resize-png

answered Apr 04 '19 at 16:28

pratiked

1,712
1
11
18

score 0 · Answer 2 · answered Oct 05 '21 at 07:07

If you're developing with bare React-Native, in your: android -> app -> src -> main -> res folder, create the folders drawable-v21, drawable-v22 and drawable-v24. The reason for this, like it happened to me, is that; the splashscreen would definitely appear distorted on some other device. But with these structure of folders, those devices would definitely use the resources allocated in these folders as the SDK would instruct. Hence, in these folders, create a file: background_splash.xml, with the below content:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@color/splashscreen_bg"
    />
    <item
        android:bottom="280dp"
        android:left="70dp"
        android:right="70dp"
        android:top="280dp"
    >
        <bitmap
            android:gravity="fill"
            android:src="@drawable/turbo_logo" />  <!-- this should contain the location of your splashscreen image -->
    </item>
</layer-list>

You would need to iterate the values of bottom and top, left and right, to the optimised value. However, top and bottom must be the same; also, left and right must be the same.

ImageView in splashScreen is showed blurred

2 Answers2