Creating A Splash Screen In Xamarin Android App Using Visual Studio 2015

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS).

In the Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

An Android app takes some time to start, especially when the app is first launched on a device.

A splash screen may display start up progress to the user or to indicate the app.

Prerequisites

  • Visual Studio 2015 Update 3.

The steps, given below are required to be followed in order to create the splash screen in Xamarin Android app, using Visual Studio 2015.

Step 1

Click File--> select New--> select Project. The project needs to be clicked after opening all the types of projects in Visual Studio or click (Ctrl+Shift+N).

Installed

Step 2

After opening the New Project, select Installed-->Templates-->Visual C#-->Android-->choose the Blank app (Android).

Now, give your Android app; a name (Ex:sample) and give the path of your project. Afterwards, click OK.

Installed

Step 3

Now, go to Solution Explorer. In Solution Explorer, get all the files and sources in your project.

Select Resource-->Layout-->double click to open main.axml page. To write XAML code, you need to select source.

Choose the Designer Window, if you want design and you can design your app.

Installed

Step 4

After opening main.axml, file will open the main Page Designer. You can design this page, as per your wish.

Installed

Step 5

In this step, add one XML file and it's name is colors.xml.

Go to Solution Explorer-->Resource-->Values-->Right click-->Add-->New Item (Ctrl+Shift+A).

Installed

Step 6

Now, Select XML file, give name colors.xml and click add.

Installed

Step 7

Afterwards, create the colors.xml file, write XML code, as shown below.

colors.xml

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.     <color name="window_background">#FFFFFF</color>  
  4. </resources>  
Installed

Step 8

In this step, add one XML file and it's name is styles.xml.

Go to Solution Explorer-->Resource-->Values-->Right click-->Add-->New Item (Ctrl+Shift+A).

Installed

Step 9

Now, select XML file, give the name styles.xml. and click add.

Installed

Step 10

Afterwards create the styles.xml file, write XML code, as shown below.

styles.xml
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.     <style name="Theme.SplashScreen" parent="android:Theme">  
  4.         <item name="android:windowBackground">@color/window_background</item><item name="android:windowNoTitle">true</item>  
  5.     </style>  
  6. </resources>// This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}  
Installed

Step 11

Now, go to MainActivity.cs page from Solution Explorer. Add the theme in splash screen Activity line.

MainActivity.cs

[Activity(Label = "splashscreen", MainLauncher = true, Icon = "@drawable/icon",Theme ="@style/Theme.SplashScreen")]

Installed

Step 12

If you have an Android Virtual device, run the app on it, else connect your Android phone and run the app on it.

Simply, connect your phone and go to Visual Studio. The connected phone will show up in the Run menu. 

(Ex:LENOVO A6020a40(Android 5.1-API 22)). Click the Run option.

Installed

Output

After few seconds, the app will start running on your phone.

You will see the splash screen before starting your app successfully.

Installed

Summary

This was the process to create the splash screen in Xamarin Android app, using Visual Studio 2015.

 


Similar Articles