Splash screen is not showing in some android devices(Ionic).

I was adding the icon and splash screen in the android app which is built-in ionic and angular. I used ionic CLI for generating the splash screen and icon. I added the icon and splash screen successfully but the problem is in some android devices the icon is shown instead of the splash screen and on some devices, it works perfectly.

I found one solution on the internet. I follow the following steps to solve my problem.

Step 1 -

I added the following code in the Capacitor Config JSON file

{
 ...

    "plugins": {
        "SplashScreen": {
            "launchAutoHide": false,
            "androidScaleType": "CENTER_CROP",
            "splashFullScreen": true,
            "splashImmersive": false,
            "backgroundColor": "#ffffff" 
        }
    }

...
}

Step 2 - 

In the app component ts file added the following code.

import { SplashScreen } from '@capacitor/splash-screen';
import { Platform } from '@ionic/angular';

export class AppComponent {

constructor(private platform:Platform) {
      this.initializeApp();
     }

async initializeApp() {
    this.platform.ready().then(async () => {
      await SplashScreen.hide({
        fadeOutDuration:200
      });
    })
  }
}

Step 3 -

Added the below code in the style.xml file in the android project

<resources>
    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <item name="android:windowNoTitle">false</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
<resources>

This worked for me. I hope it will work for you too

Thank you.

 

Add comment