Xamarin.Forms (Android): Workaround For Splash Screen With Logo, Custom Background and Animation

Let me start first from the fact that I am new to Xamarin (in fact, I am not that old in C# either). Anyway, after evaluating the Starter Edition (free), I decided to go with a Business License for Android only where we have the great Xamarin.Forms package. But having a Business license doesn't make you proficient! And the best way to learn is to start coding. Don't you agree? So I need to start coding for an App! But what application without a splash screen? Task

Build an app with Splash Screen that contains a logo! Start

And so I began as we always do:

• Open Visual Studio.
• New Project.
• Templates -> C# -> Mobile Apps -> Blank App (Xamarin Forms Shared).
• Name the project: AppWithSplashScreen.
• Remove iOS and WinPhone Projects from my solutions. Well, first I don't have the license and for achieving that Splash Screen you need a different approach for each of the platform's app.

So let us start doing what they suggest. Official recipe Ok, let us do it by the book, but instead of their “Loading…” image in the Resources/Drawable folder, I'll use the following Logo image: MCN = My Company Name. How imaginative is that! And the file name: MCNLogo.png.

Ok, we're done with the image, let's do our Splash Screen theme as they suggest:

1. Create a new folder under the Android project folder "Resources" with the name "Values".
2. In that folder add a new "Styles.xml" file. Add -> New Item, then XML File. Make sure after creating this file to have the property "Build Action" set to the default value: "AndroidResource". In this file we will create a new theme "Theme.Splash" that set the background of our Splash with our logo.
3. Edit the file to be as follows:
   1. <?xml version="1.0" encoding="utf-8" ?>
   2. <resources>
   3. <style name="Theme.Splash" parent="android:Theme">
   4. <item name="android:windowBackground">@drawable/mcnlogo</item>
   5. <item name="android:windowNoTitle">true</item>
   6. </style>
   7. </resources>
4. Add a Splash Activity to the Android Project using Add -> New Item, then Activity. Let's name it SplashActivity.
5. Change the attributes of the activity to set the theme attribute to "@styles/Theme.Splash", MainLauncher attribute to "True", and NoHistory also to "True". The Theme attribute is responsible for the style of the activity, the MainLauncher is responsible for making this activity the first activity to show and NoHistory is responsible for preventing navigation back to this activity. The activity attributes should look like the following:
   1. [Activity(Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
6. Add the following code to the "OnCreate" method in Splash activity immediately after the comments // Create your application here:
   1. System.Threading.Thread.Sleep(10000); // Simulate a long loading process on app
   2. StartActivity(typeof(MainActivity));
   The first line simulates a long-loading process.
   The second line Start our MainActivity where our application will run main tasks after the Splash is shown.
7. Just before running the application, we need to ensure that the MainLancher attribute of the MainActivity is set to false:
   1. [Activity (Label = "AppWithSplashScreen", Icon = "@drawable/icon", MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
8. And let's run the application. (I don't like working with emulators so I will run it on my Samsung S5).

Pretty simple isn't it? Well wait a second. Observations Well, I got my splash screen. But here are some observations of the app:

1. The app icon on my devices is the standard Android icon, and that is easy to fix. Just add an icon attribute of the SplashActivity to match that as the MainActivity:
   1. [Activity(Theme = "@style/Theme.Splash", Icon = "@drawable/icon", MainLauncher = true, NoHistory = true)]
2. Sometimes also Xamarin will install the package to your mobile with some random name instead of the name of the application: AppWithSplashScreen. That is also not that complex to fix in many ways, but for now I'll just add the label attribute of SplashScreen to the one in MainActivity:
   1. [Activity(Label = "AppWithSplashScreen", Theme = "@style/Theme.Splash", Icon = "@drawable/icon", MainLauncher = true, NoHistory = true)]
3. This observation is not a big deal, but wouldn't it be better to have the splash screen in full screen mode? In order to do that just change the parent theme in Styles.xml to "android:Theme.Holo.Light.NoActionBar.Fullscreen".
   1. <style name="Theme.Splash" parent="android:Theme.Holo.Light.NoActionBar.Fullscreen">
4. 10000 in Sleep line in SplashActivity.cs is good to watch the now but it is too long (10 sec) for a splash screen. So I will reduce it to 5000 and in the final version of my app it will go to 2000 even.
5. The most "dangerous" observation is:
   

Revised Task Build an app with Splash Screen that contains a logo at the center of the window! Official Recipe again So after searching with same keywords of the revised task, I came to this solution at Xamarin forums. Basically it says that instead of having an image (MCNLogo) as background in Styles.xml, we can redirect to the compiler to another XML resource where we set the image and some of its attributes to center it in the screen. So:

1. In Styles.xml replace the value of the "windowBackground" attribute to "@drawable/backgroundstyle" instead of "@drawable/mcnlogo":
   1. <item name="android:windowBackground">@drawable/backgroundstyle</item>
2. In the Resource/Drawable folder add a new XML file and name it "BackgroundStyle.xml" with the following code inside:
   1. <?xml version="1.0" encoding="utf-8" ?>
   2. <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
   3. android:src="@drawable/mcnlogo"
   4. android:gravity="center"
   5. android:layout_gravity="center"/>
   "gravity" and "layout_gravity" are set to center and centers the image in the Activity.
3. Run the application:
   
   Here you are, a centered logo in a full screen activity. If this is what you want, then you can stop reading this article and start writing your application code after the splash screen, but there is more that can be done.

It is too dark, isn't it? I wonder if it would be better to have a White background? Revised Revised Task Build an app with Splash Screen that contains a logo at the center of the window with a White background! Shibbs Recipe Searching Google with these keywords didn't give me an answer, but I found this question in Stack Overflow that matches mine. One of the answers (Shibbs' answer) was very interesting. Basically he suggests, why have the logo image as the background image? The SplashActivity is an activity at the end. So it can have it is own AXML layout where we can do whatever we want (almost). But the most interesting thing is the way he queues the MainActivity in the ThreadPool, allowing the splash screen to draw the XAML layout. Without this we will have only the blank splash screen:

1. In Styles.xml, remove the entire line where the "windowBackground" attribute and value are. Instead insert the following line specifying that the background is of White color:
   1. <item name="android:colorBackground">@android:color/white</item>
2. In the Resources folder, create a new folder "Layout". Here we will add our layout for the SplashActivity.
3. In the Layout folder, add a new Android Layout: Add->New Item...->Android Layout. let's call it "SplashLayout.xaml".
4. Edit the source of SpalshLayout to match the following markup:
   1. <?xml version="1.0" encoding="utf-8"?>
   2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   3. android:orientation="vertical"
   4. android:layout_width="fill_parent"
   5. android:layout_height="fill_parent"
   6. android:minWidth="25px"
   7. android:minHeight="25px"
   8. android:gravity="center">
   9. <ImageView
   10. android:src="@drawable/mcnlogo"
   11. android:layout_width="wrap_content"
   12. android:layout_height="fill_parent"
   13. android:id="@+id/imageView1"
   14. android:layout_gravity="center" />
   15. </LinearLayout>
   Here we have an ImageView in the center with source (src) of mcnlogo in the drawable folder.
5. In SpalshActivity.cs, edit the "OnCreate" method to match the following code:
   1. protected override void OnCreate(Bundle bundle)
   2. {
   3. base.OnCreate(bundle);
   5. SetContentView(Resource.Layout.SplashLayout);
   6. System.Threading.ThreadPool.QueueUserWorkItem(o => LoadActivity());
   7. }
   In this code, we set the content view of the SplashActivity to our SplashLayout.xaml and then we queue the MainActivity in the ThreadPool object using the LoadActivity method that we will write in the next step.
6. Add a new method to the SpalshActivity class called "LoadActivity":
   1. private void LoadActivity()
   2. {
   3. System.Threading.Thread.Sleep(5000); // Simulate a long pause
   4. RunOnUiThread(() => StartActivity(typeof(MainActivity)));
   5. }
   Note how we shifted the sleep period to this method.
7. Run the application:
   
   Here's our splash screen with centered logo and White background. If you reached your goal, you can stop reading this article. But something is bothering me. What about having a different (custom) background color? Let's say light Aqua color, it would be nice with our bluesh logo.