Ionic + Capacitor 3 + Android shows distorted splash image briefly

Question

If you are using the @capacitor/splash-screen API to show a splash screen in your Ionic Android app with Capacitor 3 you might run into this issue:

Problem

For a fraction of a second the splash image will be shown distorted until it is shown in the correct aspect ratio. That means that it also "jumps" a bit on the screen This will especially be noticeable if you launch the app while the device is in landscape orientation or if you your device has stretched or fat display aspect ratio.

Background Info

It happens because AppTheme.NoActionBarLaunch that is used on app launch for MainActivity is set up to have the splash image as the background image, but the "real" splash image is initialized a couple of milliseconds later in the SplasScreen.buildViews() method of the plugin.

Solution

To fix it, you can change the following in your styles.xml file under /android/app/src/main/values:

Old:

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
    </style>

New (no background):

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@null</item>
    </style>

Or set the background color of your splash screen:

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">#ffffff</item>
    </style>

This will prevent the showing of the splash image as a background image before the actual ImageView is added to the view hierarchy. The ImageView will have the correct scaleType as defined in androidScaleType of the plugin configuration.

Tested with the following versions:

• @capacitor/android: 3.0.0-rc.0
• @capacitor/splash-screen: 0.3.6
• @ionic/angular: 5.6.3

The following configuration is used:

const config: CapacitorConfig = {
    // ...
    plugins: {
        SplashScreen: {
            launchShowDuration: 3000,
            launchAutoHide: false,
            backgroundColor: '#ffffffff',
            androidSplashResourceName: 'splash',
            androidScaleType: 'CENTER_CROP',
            showSpinner: false,
            splashFullScreen: false,
            splashImmersive: false,
        },
    },
    // ...
};

Note: No need to call SplashScreen.show() in the TypeScript (Ionic) code, it will automatically be shown. Just call SplashScreen.hide() in your TypeScript code once you want to hide the SplashScreen.

Kioto

While this works, the app shows a blank screen first, then the splashscreen. Better than a distorted image for sure but I am puzzled I never had this issue with Cordova. – Gentlemanatarms

You are right, this is not ideal. – Kioto

Answer 1

The above workaround does not work with the community barcode scanner which require transparent background.

My workaround (the drawback with blank white screen still exist there but it work):

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/white</item>
    </style>
    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar"></style>

Chutzpah