Capacitor Splash screen issue

Ionic Framework
1

I have an older application made with ionic 5 / capacitor 3. I have successfully upgraded to API 33, now using capacitor 4. So far so good, however the splash screen is completely broken.

I finally solved this problem successfully based on this topic:

However, tested on older Android, specifically Android 11, it is not good, it stretches completely.

How can I fix it to make the splash screen work properly on Android 12 and above?

This my styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#17ba5b</item>
        <item name="colorPrimaryDark">#44e283</item>
        <item name="colorAccent">#d9d9d9</item>
    </style>

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>

    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
        <item name="android:background">@drawable/icon</item>
        <item name="android:windowSplashScreenBackground">#17ba5b</item>
        <item name="windowSplashScreenBackground">#17ba5b</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/icon</item>
        <item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
    </style>
</resources>

Thanks!

2

You need to be on Capacitor 5 to support Android API/SDK 33.

3

No, I was able to deploy with Capacitor 4 to API/SDK 33. But that was not the question.

4

You may be able to deploy successfully but Capacitor 4 doesn’t officially support SDK 33 so you will most likely run into wonky issues. So, you should upgrade to Capacitor 5 first before trying to figure out why the splash screen is being weird.

5

Here it is: it’s on API 33, everything works fine, even the splash screen on Android 12/13.

This is NOT the question.

The question is how I can make it work on Android 11 or lower, because the logic was completely different there.


    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
6

Okay, I just now fixed with this:

    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
        <item name="android:background">@drawable/splash</item>
        <item name="android:windowSplashScreenBackground">#17ba5b</item>
        <item name="windowSplashScreenBackground">#17ba5b</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/icon</item>
        <item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
    </style>

So I have an splash screen for Android 12 below and an animated icon for android 12+

2 Likes