Android 12+ image is blurry/pixelated

[AhmedLSayed9]

trafficstars

This is related to #724 but includes a reproducible sample.

The sample highlights the quality difference by ensuring the first screen displays the same image, making the blur/pixelation issue on Android 12+ clearly visible.

Reproducible repo: https://github.com/AhmedLSayed9/native_splash_quality_issue

Screenshots:

Native splash	Custom splash

[muhammadalkady]

Why are there no updates on this issue? It is a critical issue.

[bartalusCsaba]

It is not the generation process makes it bad... I made the same images manually in figma placed in the correspond drawable folder but in reality android system decides from screen dpi which icon to use. If I open up a corresponded image it is a png and sharp but I think the splash screen API on android 12+ has choose the wrong drawable folder and then scaling up the image because it is too little. That is why it is blurry...

[bartalusCsaba]

Edit. I found the solution. My comment before was bullshit. Sorry for that.

This is my config file

flutter_native_splash:
  color: "#FFFFFF" # Background color (change to match your design)
  android: true
  ios: true
  web: false
  image_android: assets/images/splash_logo.png
  image_ios: assets/images/splash_logo.png

also my splash logo for under Android 12 is used a png file wich size is 1152 * 1152 and the logo is in a circle of 768 * 768. This will generate for me the older version files and those are not pixaletad at all.

This will generate also the style for Android 12 but it is not setting the image because I didn't set android 12 configs in config file.

My style for Android 12 is:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowSplashScreenBackground">#FFFFFF</item> This is what the generator doesn't set
        <item name="android:windowSplashScreenAnimatedIcon">@drawable/ic_splash</item> This is what the generator doesn't set
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

This is also for night or you can customize it.

Now. If you check it out the documentation you observe that Android 12 uses Splash Screen API to show the splash screen for cold start and hot start as well and also observing that this library resolving all the scaling, sizing, etc. But the important point is that it will work with VectorDrawable!!!. So I exported my 1152*1152 image as and svg and imported in Android Studio as ic_splash which I set in the style file I mentioned before.

And woala the image is not pixaleted on older version because it uses the corresponded image from drawable folder and Android 12+ uses the vector drawable. Pixalation is gone.

Maybe the next update we need a option to use android 12 vector and the problem resolved

@muhammadalkady @AhmedLSayed9 @jonbhanson