Splash screen exhibiting abrupt motion before switching to the main screen

Question

A splash screen implemented to be displayed while the Xamarin app loads in the background exhibits an unanticipated "upwards movement" while being displayed before switching to the main screen in Android devices (as seen in the following GIF of the loading screen).

My first assumption regarding the solution of this issue was to use the same style settings for both the splash screen activity and the main activity but it is to no avail as the unwanted motion is still exhibited, which, as of this moment, is completely baffling as the cause just cannot be segregated.

The splash screen is implemented as per the logic corresponding to the following code and style sheets in the Android Project:

Resources/drawable/splash_screen.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_screen_background"/>
  </item>
  <!-- For bitmap images -->
  <!--<item>
    <bitmap
        android:src="@drawable/app_icon"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>-->
  <!-- For Android's drawable vector images -->
  <item 
    android:drawable="@drawable/android_v_drawable_application_icon"
    android:gravity ="center"
    android:width="150dp"
    android:height="214.010dp" />
</layer-list>

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="splash_screen_background">#FFFFFF</color>
</resources>

value/styles.xml

<?xml version="1.0" encoding="utf-8" ?>
<resources>

  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from https://aka.ms/material-colors -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>

    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>

  <style name="SplashScreenTheme" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">false</item>
    <item name="windowActionModeOverlay">true</item>
  </style>
</resources>

Attributes to the Android Activity class pertaining to the splash screen:

[Activity(Label = "App_App1", 
        Theme = "@style/SplashScreenTheme",
        Icon = "@mipmap/icon",
        ConfigurationChanges = ConfigChanges.ScreenSize 
                                | ConfigChanges.Orientation,
        MainLauncher = true, 
        NoHistory = true,
        ScreenOrientation = ScreenOrientation.Portrait
        )]

Thanks in advance.

Wendy Zang - MSFT Wendy Zang - MSFT · Accepted Answer · 2020-09-17T06:34:17

I make the code sample to reproduce the "upwards movement".

In your description, you said "switching to the main screen in Android devices". I guess you have a special activity to do the splash screen. And have the main activity to LoadApplication.

When i set the same splash screen theme for the Splash_Activity and MainActivity, it would occure the "upwards movement".

So set the Theme to null or the default, it would be okay.

Splash_Activity:

 [Activity(Label = "App_App1",
    Theme = "@style/SplashScreenTheme",
    Icon = "@mipmap/icon",
    ConfigurationChanges = ConfigChanges.ScreenSize
                            | ConfigChanges.Orientation,
    MainLauncher = true,
    NoHistory = true,
    ScreenOrientation = ScreenOrientation.Portrait
    )]

MainActivity:

 [Activity(Label = "SplashScreen", Icon = "@mipmap/icon", Theme = "@style/MainTheme", NoHistory = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

You could download the source file from the GitHub for reference. https://github.com/WendyZang/Test/tree/master/SplashScreen2/SplashScreen

Splash screen exhibiting abrupt motion before switching to the main screen

2 Answers