Xamarin forms custom splash screen

Question

On my Splash screen, I want to put the App version for both Android and iOS at the bottom

Answer 1

This is how I add a Splash Screen in my Xamarin Forms apps

1. Create a new ContentPage ie Splash.xaml
2. Set the MainPage in your App.xaml.cs file to MainPage = new Splash();
3. On the Splash.xaml I add an image (logo) and set the ContentPage backgroundcolor to my desired color for the app.
4. Add a Label on the Splash.xaml below the Image
5. On the Splash.xaml.cs OnAppearing() function set the Label's Text = to app's current version. You could use the Xamarin.Essentials plugin to get the version. Optionally, I then run a Task to animate the logo or fade it in/out. Once the animation is done in the Splash.xaml.cs OnAppearing function I then set the MainPage to a new page ie. a Login page or Main.xaml
6. In the Android project, I leave the MainActivity "MainLauncher = true" as is.
7. In the iOS Project, I remove the Xamarin logo from the StoryBoard and set the background color to my desired color for the app.

Here is some sample code on my website.

Answer 2

Normally, we use drawable resource to create the splash screen. It could not input the text, you could generate static images with the text you are interested in.

The way we used to create the splash screen.

Resource> Drawable> Create splash_background.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="#000000"/>
  </item>
 <item>
   <bitmap
    android:src="@drawable/pink"
    android:tileMode="disabled"
    android:gravity="center"/>
  </item>
</layer-list>

Resources> values> add style in styles.xml

<style name="MyTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="android:windowBackground">@drawable/splash_background</item>
</style>

Change Theme in MainActivity.

[Activity(Label = "SplashScreenDemo", Icon = "@mipmap/icon", Theme = "@style/MyTheme.Splash", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

For more about IOS, you could check the link. https://medium.com/@thesultanster/xamarin-splash-screens-the-right-way-3d206120726d

Answer 3

To make a custom Splash Screen, try this out

Create SplashScreen.axml in your resource directory in Droid project

`<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
         <ImageView
          .
          .PLACE YOUR IMAGE CODE HERE
          .
         />
    <TextView
        android:id="@+id/AppVersion"
        android:text="App-Version - "
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="40dp"
        android:layout_marginBottom="40dp"
        android:textColor="#FFFFFF"
        android:textSize="12"
        android:background="@android:color/transparent" />
</RelativeLayout>`

Then create cs file for your splash screen in Droid project

    namespace Blue.Test {
    [Activity(Theme = "@android:style/Theme.NoTitleBar", MainLauncher = true, NoHistory = true, ScreenOrientation = ScreenOrientation.Portrait)]    
    public class SplashScreenActivity : Activity {
        protected override void OnCreate(Bundle savedInstanceState) {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.SplashScreen);            
            FindViewById<TextView>(Resource.Id.AppVersion).Text = $"Version {PackageManager.GetPackageInfo(PackageName, 0).VersionName}";            
        }
    }
}

Remember to set MainLauncher = true & NoHistory = true in your assemble