Tuesday, October 18, 2022

[FIXED] Ionic & Capacitor - Android Splash Screen Responsiveness

October 18, 2022 android, angular, capacitor, ionic-framework, splash-screen

Issue

Context

This is related to the splash screen images responsiveness and according to my research it just happens because there is missing documentation at Capacitor Docs - Splash Screen.

Problem

The problem starts when implementing the splash screen plugin of capacitor. Normally this implementation is made from scratch when you create the whole project. However it doesn't/didn't worked well on devices that have a stretched aspect ratio (for example Google Pixel 2 XL) or devices that have fat aspect ratio (for example iPad Pro). There are even some scenarios in which the splash screen image moves around or shrinks/expands (while loading).

Visual Explanation

In other words the native implementation is causing the splash screen images to be just like in the image below. If the devices are stretched or fat the images aspect ratio aren't preserved.

Solution

So the goal is to not make this images to be stretched or fattened. To preserve the image like in the standard aspect ratio image. To solve this issue and make the splash images become responsive to the astronomic variety of a screen devices and aspect ratios you will have to manipulate:

capacitor.config.json (Ionic Project)
app.component.ts (Ionic Project)
styles.xml (Android Project)

#1 Capacitor Config JSON (Ionic Project)

{
 ...

    "plugins": {
        "SplashScreen": {
            "launchAutoHide": false,
            "androidScaleType": "CENTER_CROP",
            "splashFullScreen": true,
            "splashImmersive": false,
            "backgroundColor": "#ffffff" // YOUR SPLASH SCREEN MAIN COLOR
        }
    }

...
}

#2 App Component TS (Ionic Project)

import { Plugins } from '@capacitor/core'
const { SplashScreen } = Plugins;
...

export class AppComponent implements OnInit {
    ...

    // DON'T USE SPLASHSCREEN SHOW METHOD ANYWHERE
    // SplashScreen.show(); 

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

#3 Styles.xml (Android Project)

<?xml version="1.0" encoding="utf-8"?>
<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>

And that's it! All the images are now with the aspect ratio preserved and they will always be responsive for all devices.

References

Answered By - Grinnex.
Answer Checked By - David Goodson (JavaFixing Volunteer)

This Answer collected from stackoverflow and tested by JavaFixing community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0