Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android 13 not working fullscreen. #571

Open
1 task done
GuidoGagliardini opened this issue May 10, 2023 · 5 comments
Open
1 task done

Android 13 not working fullscreen. #571

GuidoGagliardini opened this issue May 10, 2023 · 5 comments

Comments

@GuidoGagliardini
Copy link

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 --->

Screenshot from 2023-05-09 22-14-41

then when start LottieSplashScreen

Screenshot from 2023-05-09 22-14-56

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="hi@ionicframework.com" 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/icon@2x.png" width="114" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
        <icon height="196" src="resources/ios/icon/icon-98@2x.png" 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/icon-108@2x.png" 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

  • 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

@timbru31
Copy link
Owner

This is probably related to #461

@GuidoGagliardini
Copy link
Author

GuidoGagliardini commented May 16, 2023

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?

@fabriciovasc
Copy link

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

Screenshot 2023-06-13 220455

@GuidoGagliardini
Copy link
Author

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!

@koalter
Copy link

koalter commented Sep 24, 2023

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

image

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants