Xamarin Forms Custom Splash Screen

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

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

Solution 2:

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"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><ImageView..PLACEYOURIMAGECODEHERE.
         /><TextViewandroid: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

namespaceBlue.Test {
    [Activity(Theme = "@android:style/Theme.NoTitleBar", MainLauncher = true, NoHistory = true, ScreenOrientation = ScreenOrientation.Portrait)]    
    publicclassSplashScreenActivity : Activity {
        protectedoverridevoidOnCreate(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

Solution 3:

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-listxmlns:android="http://schemas.android.com/apk/res/android"><item><colorandroid:color="#000000"/></item><item><bitmapandroid:src="@drawable/pink"android:tileMode="disabled"android:gravity="center"/></item></layer-list>

Resources> values> add style in styles.xml

<stylename="MyTheme.Splash"parent="Theme.AppCompat.Light.NoActionBar"><itemname="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