Lottie animation not centered on Samsung S20

[gAllegr]

Bug report

What steps will reproduce the problem?

Using the Ionic project with the Lottie SplashScreen, build the application for Android and run it on two different mobile devices.

Expected output

The lottie animation to be visualized centered into the screen, like in the following image (taken from a Huawei P30 Pro):

What do you see instead?

The lottie animation is displayed on the bottom of the screen.

Log file of the issue/error

No logs available

Version information

The installed Ionic plugin is "@ionic-native/lottie-splash-screen": "^5.19.1"

Your plugin installed is "cordova-plugin-lottie-splashscreen": "0.9.1"

Cordova Packages:

    cli: 10.0.0
        common: 4.0.2
        create: 3.0.0
        lib: 10.0.0
            common: 4.0.2
            fetch: 3.0.0
            serve: 3.0.0

Project Installed Platforms:

    android: 9.0.0

Project Installed Plugins:

    com-badrit-base64: 0.2.0
    cordova-plugin-add-swift-support: 2.0.2 
    cordova-plugin-androidx-adapter: 1.1.0  
    cordova-plugin-androidx: 1.0.2
    cordova-plugin-app-version: 0.1.9       
    cordova-plugin-camera: 5.0.0
    cordova-plugin-cocoapod-support: 1.6.2  
    cordova-plugin-email-composer: 0.9.2    
    cordova-plugin-enable-multidex: 0.2.0   
    cordova-plugin-facebook-connect: 2.2.0  
    cordova-plugin-file: 6.0.2
    cordova-plugin-firebase-analytics: 4.5.0
    cordova-plugin-googlemaps: 2.7.1        
    cordova-plugin-googleplus: 8.5.
    cordova-plugin-inappbrowser: 4.0.0      
    cordova-plugin-ionic-keyboard: 2.2.0
    cordova-plugin-ionic-webview: 5.0.0
    cordova-plugin-lottie-splashscreen: 0.9.1
    cordova-plugin-network-information: 2.0.2
    cordova-plugin-screen-orientation: 3.0.2
    cordova-plugin-sign-in-with-apple: 0.0.1
    cordova-plugin-statusbar: 2.4.3
    cordova-plugin-uniquedeviceid: 1.3.2
    cordova-plugin-whitelist: 1.3.4
    cordova-plugin-x-socialsharing: 5.6.3
    cordova-support-android-plugin: 1.0.1
    cordova-support-google-services: 1.4.1
    es6-promise-plugin: 4.2.2
    info.protonet.imageresizer: 0.1.1
    ionic-plugin-deeplinks: 1.0.20
    mx.ferreyra.callnumber: 0.0.2
    onesignal-cordova-plugin: 2.11.1

Environment:

    OS: Microsoft Windows 10 Pro 10.0.19042 (19042) (win32 10.0.19042) x64
    Node: v12.16.1
    npm: 6.13.4

android Environment:

    android:
**************************************************************************
The "android" command is deprecated.
For manual SDK, AVD, and project management, please use Android Studio.
For command-line tools, use tools\bin\sdkmanager.bat
and tools\bin\avdmanager.bat
**************************************************************************

Invoking "C:\Users\g.allegretta\AppData\Local\Android\Sdk\tools\bin\avdmanager" "list" "target"

Available Android targets:==============] 100% Fetch remote repository...
----------
id: 1 or "android-29"
     Name: Android API 29
     Type: Platform
     API level: 29
     Revision: 5
----------
id: 2 or "android-30"
     Name: Android API 30
     Type: Platform
     API level: 30
     Revision: 3


Project Setting Files:

    config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.*****.app" version="2.0.9" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>*****</name>
    <description>******</description>
    <author email="******" href="******">******</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="android-minSdkVersion" value="22" />
    <preference name="android-targetSdkVersion" value="29" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="LottieBackgroundColor" value="#FFFFFF" />
    <preference name="WKWebViewOnly" value="true" />
    <preference name="LottieRemoteEnabled" value="true" />
    <preference name="LottieLoopAnimation" value="true" />
    <preference name="LottieAnimationLocation" value="***********" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="1000" />
    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="*********" />
    <preference name="GOOGLE_MAPS_IOS_API_KEY" value="*************" />
    <preference name="WEB_APPLICATION_CLIENT_ID" value="***************" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="APP_ID" value="************" />
    <preference name="APP_NAME" value="************" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="APPCENTER_ANALYTICS_ENABLE_IN_JS" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <universal-links>
        <!-- other content -->
    </universal-links>
    <platform name="android">
        <resource-file src="google-services.json" target="app/google-services.json" />
        <preference name="GradlePluginGoogleServicesEnabled" value="true" />
        <preference name="GradlePluginKotlinEnabled" value="true" />
        <preference name="loadUrlTimeoutValue" value="200000" />
        <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:networkSecurityConfig="@xml/network_security_config" />
            <application android:allowBackup="false" />
        </edit-config>
        <resource-file src="resources/android/network_security_conf.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <hook src="hooks/copy_android_notification_icons.js" type="after_prepare" />
        <icon src="src/assets/icon/icn.png" />
        <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
        <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" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
    </platform>
    <platform name="ios">
      <!-- ios configuration data -->
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="^1.3.4" />
    <plugin name="cordova-plugin-statusbar" spec="^2.4.3" />
    <plugin name="call-number" spec="^1.0.1" />
    <plugin name="cordova-plugin-androidx" spec="^1.0.2" />
    <plugin name="cordova-plugin-androidx-adapter" spec="^1.1.0" />
    <plugin name="cordova-support-android-plugin" spec="^1.0.1" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.2.0" />
    <plugin name="cordova-plugin-file" spec="^6.0.2" />
    <plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
    <plugin name="cordova-plugin-cocoapod-support" spec="^1.6.2" />
    <plugin name="com-badrit-base64" spec="^0.2.0" />
    <plugin name="cordova-plugin-email-composer" spec="^0.9.2">
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
    </plugin>
    <plugin name="cordova-plugin-uniquedeviceid" spec="^1.3.2" />
</widget>

    package.json:
--- Start of Cordova JSON Snippet ---
{
  "plugins": {
    "cordova-plugin-whitelist": {},
    "cordova-plugin-statusbar": {},
    "cordova-plugin-ionic-keyboard": {},
    "cordova-plugin-file": {},
    "call-number": {},
    "cordova-plugin-cocoapod-support": {},
    "com-badrit-base64": {},
    "mx.ferreyra.callnumber": {},
    "cordova-plugin-email-composer": {
      "ANDROID_SUPPORT_V4_VERSION": "27.+"
    },
    "cordova-plugin-uniquedeviceid": {},
    "cordova-plugin-androidx": {},
    "cordova-plugin-androidx-adapter": {},
    "cordova-support-android-plugin": {},
    "cordova-plugin-add-swift-support": {},
    "cordova-plugin-app-version": {},
    "cordova-plugin-network-information": {},
    "cordova-plugin-x-socialsharing": {
      "ANDROID_SUPPORT_V4_VERSION": "24.1.1+",
      "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
      "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
    },
    "cordova-plugin-screen-orientation": {},
    "ionic-plugin-deeplinks": {
      // deeplinks configuration
    },
    "cordova-plugin-sign-in-with-apple": {},
    "info.protonet.imageresizer": {},
    "cordova-plugin-inappbrowser": {},
    "cordova-plugin-ionic-webview": {},
    "onesignal-cordova-plugin": {},
    "cordova-plugin-googlemaps": {
      "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
      "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
    },
    "cordova-plugin-firebase-analytics": {
      "ANALYTICS_COLLECTION_ENABLED": "true",
      "AUTOMATIC_SCREEN_REPORTING_ENABLED": "true",
      "ANDROID_FIREBASE_ANALYTICS_VERSION": "17.5.+",
      "IOS_FIREBASE_ANALYTICS_VERSION": "~> 6.32.2"
    },
    "cordova-plugin-enable-multidex": {},
    "cordova-plugin-lottie-splashscreen": {},
    "cordova-plugin-googleplus": {
      // google plus configuration
    },
    "cordova-plugin-camera": {
      "ANDROID_SUPPORT_V4_VERSION": "27.+"
    },
    "cordova-plugin-facebook-connect": {
      // facebook configuration
    }
  },
  "platforms": [
    "browser",
    "ios",
    "android"
  ]
}

Please provide any additional information below.

The problem is present only (so far) on Android, specifically on Samsung s20 devices. I personally verify on other devices (Samsung S8, Huawei P30 Pro and Xiaomi Redmi Note 9) and everything is fine on those.

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

[timbru31]

Have you experimented setting the LottieScaleType property? (see https://developer.android.com/reference/android/widget/ImageView.ScaleType)

[gAllegr]

Right now the property is not setted, so it's taking the default value FIT_CENTER, should try with CENTER or CENTER_INSIDE.

The main difference I noticed on the devices is that the Samsung S20 is a QHD+, while others FHD

[timbru31]

Yes, you can try any of those two alternatives, maybe that helps.
If not, I'll try to reproduce this in an emulator. (if possible)

[gAllegr]

Thank you for your response, I'll try asap and comment again.

It seems there is no simulator specifically for Samsung devices, I already tried to use Android Studio emulators and the problem is not displayed. I used the Samsung Remote Test Lab.

[gAllegr]

Hello @timbru31

I used an emulator of a Samsung S20 and tried almost all possible values of the property (all except for the FIT_XY, but it shouldn't be a problem because of that comment).

None works fine, I'll place screens right after:

• center crop
• center inside
• fit center
• center
• matrix
• fit end
• fit start

Note: yesterday evening I make a try on a friend's phone (Samsung Note 20 Ultra) and also there I could see the problem

[gAllegr]

Hello @timbru31, do you have any news?

Sorry to replay after only 6 days, but the client needs this fixed

[gAllegr]

Hi, there is something new about this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[timbru31]

Not stale, I've had sadly no time for investigation yet.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[timbru31]

Not stale, still needs an investigation.

[SirMathelot]

I have the same problem on my Samsung Galaxy A9 but only on this and I tested it on two other phones and in the emulator.