How to Create a Splash Screen in 3 Steps in Xamarin.Android
Tags: xamarin, android, splash, csharp
Published: 2019-07-05 07:34:28

Most of the time Splashes in Android have been a complex topic that involved creating temporal [Activities](https://docs.microsoft.com/en-us/xamarin/android/user-interface/splash-screen) or [Timers](http://wintechtutorials.com/blog/android-splash-screen-using-timer) to emulate the behavior of it. An important reason why there was not a proper solution until 2015 is that Google discouraged them during the development of Android Apps, however, this changed with Material Design.

One of the reasons why you're reading this article is because your App might not be as fast as you expect and it takes a couple of seconds to load fully. This was my case for a while and I tested the options.

Not so far, I read an article in the Medium: [The (Complete) Android Splash Screen Guide](https://android.jlelse.eu/the-complete-android-splash-screen-guide-c7db82bce565), where I found the perfect example of how to implement it in Android without extra libraries, timers, or activities that is reliable, simple and fast.

There are some simple steps to consider:

***

## **1. Define a new Style.**

Go to your project and identify your **styles.xml** file, if you don't have one, you need to create one in:

> \com.mydomain.myproject\Resources\values\styles.xml

In this file you must have at least two styles: Launcher and MyCustomTheme where:
a. **Launcher** is your Splash Screen.
b. **MyCustomTheme** represents your custom configuration for your App.

Your basic **styles.xml** would look approximately like this one:

```xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <!-- The launcher theme. It sets the main window background to the launch_screen drawable -->
    <style name="Launcher" parent="android:Theme.Material.Light">
        <item name="android:windowBackground">@drawable/launch_screen</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    <!-- Here you define your own theme and configuration -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your personal configurations -->
    </style>
</resources>
```

I defined my parent as Theme.Material.Light, but there are multiple options that you could try **Theme.Material**, **Theme.Material.Light.DarkActionBar** or perform your own configurations with the AppCompact editions.

There are two important points in the Launcher Style:

- **windowActionBar** is false because you want to hide the bar that is by default with the Title of the App or View is shown.
- **windowNoTitle** is true because of the same previous reason, you don't want to show the name of App while loading.

### **1.1 Define a Drawable Launch Icon**

This is fully optional because you could have created your own personal image and stored it in the **Drawable folder** with a name like **launch_screen.png**; however, you can define a nicer way — in my opinion — where you need to create a new file called **launch_screen.xml**.

This file contains a background in the section of drawable and your App icon in a larger size that generally has a size of **192×192px**, this image is going to be centered when your app is launched.

```xml
<?xml version="1.0" encoding="utf-8"?>
<!-- The android:opacity=”opaque” line — this is critical in preventing a flash of black as your theme transitions. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"> 
  <!-- The background color, preferably the same as your normal theme -->
  <item android:drawable="@android:color/white"/>

  <!-- Your product logo - 144dp color version of your app icon -->
  <item>
    <bitmap
      android:src="@drawable/ic_splash"
      android:gravity="center"/>
  </item> 
</layer-list>
```

***

## **2. Set your new Splash.**

Go to your manifest file in:
> \com.mydomain.myproject\AndroidManifest.xml

There you need to define your new **android:Theme** as **"@style/Launcher"**.
***

## **3. Load your custom Theme.**

In **all your activities** in the event **OnCreate**, it's important to set your **custom Theme** as follows:

```csharp
protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetTheme(Resource.Style.MyCustomTheme);
}
```

If it's not loaded in all of them your application is going to **crash** because the **default** one is the **Splash**.

And that's all, now you have a fully reliable, fast, and easy to implement Splash screen!

![example](https://1.bp.blogspot.com/-sQWq_Tm1wrg/XQxmUZKz9bI/AAAAAAAACWI/prfWoLxCBS0fxn9U5l-MoMi3DPdB1Ie4gCEwYBhgL/s640/Preview.gif)

Now, some of the benefits of this method:
- **Easy to implement** in any kind of project.
- **No additional** classes, timers, or activities.
- **Minor changes** in the Styles.
- Create **your own style** based on your custom Image.
- **Flexibility** to choose colors and adapt it.

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)