It’s possible to improve your Xamarin.Forms app experience with a custom layout splash screen using Xamarin.Forms for Android.
In your Android project under Resources/layout add a new file Splash.axml (if needed, add all resources used in your splash layout: Icon.png image to Resources/drawable folder, apptheme_color to Resources/values folder).
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="25px"
android:minHeight="25px"
android:gravity="center"
android:background="@color/apptheme_color">
<ImageView
android:src="@drawable/Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView1"
android:layout_gravity="center"/>
<LinearLayout
android:orientation="horizontal"
android:gravity="bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text1"
android:text="YOUR"
android:textStyle="bold"
android:textColor="#ffffff"
android:textColorHighlight="#ffffff"
android:textIsSelectable="false"
android:textSize="50dp"
android:layout_marginRight="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text3"
android:text="application"
android:textStyle="normal"
android:textColor="#F05A00"
android:textColorHighlight="#ffffff"
android:textIsSelectable="false"
android:textSize="50dp"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/text2"
android:text="Loading..."
android:textColor="#F05A00"
android:textColorHighlight="#ffffff"
android:textIsSelectable="false"
android:textSize="20dp"
android:textStyle="normal"/>
</LinearLayout>
Next, we need to display the splash screen layout on startup. Create a SplashActivity.cs file that will represent the first activity that loads from when app is run, MainActivity.cs is the second.
[Activity(Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : Activity
{
protected override async void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Splash);
Thread.Sleep(10000); // Simulate a long loading process on app startup.
this.StartActivity(typeof(MainActivity));
}
}
This will create the desired result… partially. What happens is, at first a blank screen loads with the background color of the Android theme you are using (if it’s Holo.Light, then the screen is white). Quickly after, your custom screen shows up and after some time the app itself. Luckily, you can customize the Android theme background color. In your Resources/values folder, in styles.xml file, add the following code:
<resourcesxmlns:android="http://schemas.android.com/apk/res/android">
<stylename="Theme.Splash"parent="android:Theme.Holo.Light ">
<itemname="android:windowNoTitle">true</item>
<itemname="android:colorBackground">@color/apptheme_color</item>
<itemname="android:windowBackground">@color/apptheme_color</item>
</style>
</resources>
Now we have a blank window showing up with the background color same as the splash screen. Soon after, our custom splash screen layout shows up. In the end, the app loads.
Happy coding!