cordova-plugin-lottie-splashscreen
cordova-plugin-lottie-splashscreen copied to clipboard
Published
20 hours ago •
timbru31
timbru31
Android 13 not working fullscreen.
Bug report
while the LottieSplashScreen animation is running the StatusBar is shown with a pink background It only happens from Android 13, and on IOS it has the expected behavior.
What steps will reproduce the problem?
launches the app and displays the Android IconSplash --->
then when start LottieSplashScreen
Expected output
When the SplashScreen animation is running, it fills the entire screen
What do you see instead?
Pink Background on StatusBar and the animation does not cover the entire screen.
Log file of the issue/error
No error logs.
Version information
Ionic:
Ionic CLI : 6.20.9 (/home/user/.nvm/versions/node/v14.19.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.4.4
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 11.0.0, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 12 other plugins)
Utility:
cordova-res : 0.15.4
native-run (update available: 1.7.2) : 1.4.1
System:
Android SDK Tools : 26.1.1 (/home/user/NuevosDocs/Android/Sdk)
NodeJS : v14.19.1 (/home/user/.nvm/versions/node/v14.19.1/bin/node)
npm : 6.14.16
OS : Linux 5.15
ionic cordova plugin list
> cordova plugin ls
call-number 0.0.2 "Cordova Call Number Plugin"
cordova-plugin-androidx-adapter 1.1.3 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.14 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.8.0 "Cordova FCM Push Plugin"
cordova-plugin-file 7.0.0 "File"
cordova-plugin-googleplus 8.5. "Google SignIn"
cordova-plugin-inappbrowser 5.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 5.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-lottie-splashscreen 0.9.6 "LottieSplashScreen"
cordova-plugin-sign-in-with-apple 0.1.2 "cordova-plugin-sign-in-with-apple"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-sqlite-storage 5.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
phonegap-plugin-barcodescanner 8.1.1-dev "BarcodeScanner"
AndroidManifest.xml
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.app.v2" xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
<uses-permission android:name="android.permission.INTERNET" />
<application android:hardwareAccelerated="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:networkSecurityConfig="@xml/network_security_config" android:supportsRtl="true" android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen" xmlns:tools="http://schemas.android.com/tools">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@style/Theme.App.SplashScreen" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="@string/launcher_name">
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:exported="false" android:launchMode="singleTop" android:name="com.gae.scaffolder.plugin.FCMPluginActivity">
<intent-filter>
<action android:name="FCM_PLUGIN_ACTIVITY" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
<service android:exported="false" android:name="com.gae.scaffolder.plugin.MyFirebaseMessagingService" android:stopWithTask="false">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_launcher" />
<activity android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden|screenSize" android:exported="true" android:name="com.journeyapps.barcodescanner.CaptureActivity" android:screenOrientation="fullSensor" android:windowSoftInputMode="stateAlwaysHidden" tools:replace="android:screenOrientation" />
<activity android:clearTaskOnLaunch="true" android:configChanges="orientation|keyboardHidden|screenSize" android:exported="false" android:name="com.google.zxing.client.android.CaptureActivity" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" android:windowSoftInputMode="stateAlwaysHidden" />
</application>
<uses-permission android:name="android.permission.CALL_PHONE" />
<uses-feature android:name="android.hardware.telephony" android:required="false" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.USE_CREDENTIALS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
</manifest>
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.app.v2" ios-CFBundleVersion="141" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App</name>
<description>App</description>
<author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="BackupWebStorage" value="none" />
<preference name="LottieAnimationLocation" value="www/assets/lottieSplashScreen/hiAnimationLottie.json" />
<preference name="LottieScaleType" value="CENTER_CROP" />
<preference name="LottieFullScreen" value="true" />
<preference name="LottieBackgroundColor" value="#5988B5" />
<preference name="LottieLoopAnimation" value="true" />
<preference name="android-minSdkVersion" value="25" />
<preference name="android-targetSdkVersion" value="32" />
<platform name="android">
<preference name="AndroidWindowSplashScreenBackground" value="#5988B5" />
<preference name="AndroidWindowSplashScreenAnimatedIcon" value="resources/iconSplash.png" />
<preference name="GradlePluginKotlinEnabled" value="true" />
<preference name="AndroidXEnabled" value="true" />
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="@xml/network_security_config" />
</edit-config>
<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<AndroidWindowSplashScreenAnimatedIcon density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<AndroidWindowSplashScreenAnimatedIcon density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
<icon height="40" src="resources/ios/icon/[email protected]" width="40" />
<icon height="60" src="resources/ios/icon/[email protected]" width="60" />
<icon height="48" src="resources/ios/icon/[email protected]" width="48" />
<icon height="55" src="resources/ios/icon/[email protected]" width="55" />
<icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="88" src="resources/ios/icon/[email protected]" width="88" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="172" src="resources/ios/icon/[email protected]" width="172" />
<icon height="196" src="resources/ios/icon/[email protected]" width="196" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
<icon height="216" src="resources/ios/icon/[email protected]" width="216" />
<splash height="2688" src="resources/ios/splash/Default-2688h~iphone.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-2688h~iphone.png" width="2688" />
<splash height="1792" src="resources/ios/splash/Default-1792h~iphone.png" width="828" />
<splash height="828" src="resources/ios/splash/Default-Landscape-1792h~iphone.png" width="1792" />
</platform>
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-sqlite-storage" spec="^5.1.0" />
</widget>
app.component.ts
initializeApp() {
this.platform.ready().then((a) => {
this.statusBar.styleDefault();
setTimeout(() => {
this.lottieSplashScreen.hide();
}, 3600);
if (this.platform.is('cordova')) {
this.setupFCM();
if(this.platform.is('android')){
this.statusBar.overlaysWebView(true);
}
}
});
}
Please provide any additional information below.
I have tried the following solutions-->
in the config.xml
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#000000" />
add file styles.xml into resources/android/xml I add settings to make the statusBar transparent, but it doesn't work.
Checklist
- [x] If there is a (potential) plugin conflict, I've identified the conflicting plugin
- [+ ] I have added a valid version output
- [ +] I have attached necessary information like a screenshot, example project or videos
Does anyone have the same thing?
Thank you so much
This is probably related to #461
ok. Thanks for answering me. Isn't there a way to force the splashscreen to occupy 100% of the screen height?
I had the same problem... do you must show lottie splashscreen after hiding native android splash screen with after your app is ready... example:
this.platform.ready().then(() => {
// your status bar changes
setTimeout(() => {
(navigator as any).splashscreen?.hide(); // hide native splash screen
this.lottie.show(); // show lottie splash screen
setTimeout(() => {
this.lottie.hide();
}, 4000)
}, 1000);
})
in this case, there will be two splashscreens... first will run the android native splash, after close then it will show lottie splashscreen
Result
I had the same problem... do you must show lottie splashscreen after hiding native android splash screen with after your app is ready... example:
Yes I have to show lottie splashscreen after the native splash, but this solution doesn't work. The problem is that lottie SplashScreen does not cover 100 of the height of the screen and leaves a purple border (as seen in the image).
Thank you very much for your contribution!
I think the issue may be related with the notch. That would explain why it shows the status bar area on your screenshot and not on @fabriciovasc 's.
This same behavior is also happening when I try it on a physical Galaxy A21s (Android 12)
EDIT: adding pictures for reference. Tested in Pixel 4 and Pixel 6 overlays, both running Android 13
