Use two images in Xamarin Forms Android Splash Screen

Question

I am completely new to Xamarin Forms Cross Platform Development. I wan to implement Whatsapp like Splash Screen. See below

With my existing code I am not able to use two different images in a splash screen. Followed the normal splash screen tutorials and able to generate simple splash with single image. here piece of code from my Splash.XMl (theme file)

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/primary"></color>
  </item>

  <item>
    <bitmap android:src="@drawable/Logo" android:gravity="center" android:tileMode="disabled"></bitmap>
    <bitmap android:src="@drawable/ack" android:gravity="bottom" android:tileMode="disabled"></bitmap>

  </item>


</layer-list>

I used two different <item></item> but no success. Please help. Thanks in Advance.

Answer 1

Would you try with this

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
           <color android:color="@android:color/white" />
    </item>
    <item>
        <bitmap
          android:src="@drawable/xamarin_small"
          android:gravity="center"/>
    </item>
    <item android:bottom="40dp">
        <bitmap
          android:src="@drawable/microsoft"
          android:gravity="center_horizontal|bottom"/>
    </item>
</layer-list>

With the code above I am able to display the two images as part of the background for the launcher.

Hope this helps.-

Answer 2

If you want to have 2 images in one splash screen, then follow @pinedax' answer. However, if you'd like to have 2 totally different splash screens, then it is a separate question. The 2 screenshots that you have provided are for the 2 themes - light & dark. Starting from Android 10 (API level 29) Google has release dark mode for smartphones. You can read more about it here

So what you will need is to have 2 separate splash screen xmls and let the system load them according to the phone's preferred theme. Inside the Resources/drawable folder, you can create 2 files:

splash_screen.xml :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="@android:color/white"/>
<item
        android:width="215dp"
        android:height="105dp"
        android:gravity="center">
    <bitmap
            android:src="@drawable/your_dark_icon_here"
            android:gravity="fill"/>
</item>

splash_screen_night.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item android:drawable="@android:color/black"/>
    <item
            android:width="215dp"
            android:height="105dp"
            android:gravity="center">
        <bitmap
                android:src="@drawable/your_light_icon_here"
                android:gravity="fill"/>
    </item>
</layer-list>

Take a look at the colors and the images - the first xml is with white background & dark logo and the second xml is the one for the dark mode - black background with light logo.

After that you will need to create a new folder inside your Resources - values-night . There, you will have one more styles.xml file. Now you will have 2 styles.xml files - one in Resources/values and one one Resources/values-night

NB: Mind the casing, since these folders & files are case-sensitive!

Inside Resources/values/styles.xml you can set the launch theme like so:

<style name="LaunchTheme" parent="MainTheme">
    <item name="android:windowBackground">@drawable/splash_screen</item>
</style>

Inside Resources/values-night/styles.xml you can set the launch theme like so:

@drawable/splash_screen_night

The last thing to do is to set the splash screen in our Activity.

[Activity(Label = "DarkModeSplashScreen", Icon = "@mipmap/icon", Theme = "@style/LaunchTheme", LaunchMode = LaunchMode.SingleTop, MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

For detailed steps & also how to implement it on iOS you can follow this great tutorial: Xamarin: Creating a Dark Mode Splash Screen