➺  Mervin Villaceran

Ionic 5 splash screen setup in Android with Capacitor

March 21, 2021 1 min read
Ionic 5 Capacitor

Ionic 5 has a default splash screen images for different screens when you create a new project and add a new platform either android or ios.

Note: This setup is only for android.

After creating a new project and installing the android platform using capacitor, then you need to run or build it to create the default icons and splash screens for different screen sizes.

Change splash screen images

Open android studio and locate the drawable files. In android studio, open resource folder in app -> res. Right click the drawable folder, then click Show in Explorer. Change all images in the drawable folders using your new splash screen.

Update capacitor config

Open capacitor.config.json file and add the config below for your SplashScreen plugin.

"plugins": {
"SplashScreen": {
"launchShowDuration": 1500,
"launchAutoHide": true,
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP"
}
},

LaunchShowDuration - the maximum duration to display the splash screen in milliseconds.
LaunchAutoHide - set to true if you want to automatically hide the splash screen.
androidSplashResourceName - resource file name in android
androidScaleType - scale type in android.

You can also hide programatically the splash screen if the platform is ready. Check here for the installation. Then update your app.component.ts.

this.platform.ready().then(() => {
this.splashScreen.hide();
});

Update styles.xml

Lastly, you also need to add more styles config in your styles.xml. In your android studio, open app -> res -> values -> styles.xml. Then add these lines in AppTheme.NoActionBarLaunch style.

<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsTranslucent">true</item>

And you are good to go.

Keep coding!