Post
Ask Question

Create Animated Splash Screen In Xamarin With Visual Studio 2015

Introduction

In mobile applications, you will find many applications with animated splash screens. In Android, we can do animation by View Animation, Property Animation or Drawable Animation.

  • View Animation
    These animations refer to specific Views and can perform simple animation on the contents of the View. Because of it is simplicity, this type of animation is still useful for alpha, rotations, scale and translating animations.

  • Property Animation
    Property animation enables an application to animate almost anything. Property animations can be used to change any property of any object, even if that object is not visible on the screen.

  • Drawable Animation
    This is a special Drawable resource, which is used to apply a very simple animation effect to the layouts. 

In this article, I will use View animation to design animated splash screen.

The steps are given below in regards to animated splash screen.

Step 1

Create new project for an Android Application
 


I have selected “Blank App(Android)” template for this article.

Step 2

Splash screen, MainActivity layout and View animation
 
I have used two layouts “Main.axml” and “SplashScreen.axml”. “Main.axml” layout is for MainActivity and “SplashScreen.axml” layout is for splash screen. In “SplashScreen.axml”, I have taken one ImageView and TextView. I am performing View animation on ImageView and for performing an animation, I have created XML View file “view_animation.xml” under Resource->Anim folder. The code snippet of Main.axml, SplashScreen.axml and view_animation.xml is shown below.
 
SplashScreen.axml
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:p1="http://schemas.android.com/apk/res/android"  
  3.     p1:minWidth="25px"  
  4.     p1:minHeight="25px"  
  5.     p1:layout_width="match_parent"  
  6.     p1:layout_height="match_parent"  
  7.     p1:background="@android:color/white"  
  8.     p1:id="@+id/relativeLayout1">  
  9.     <TextView  
  10.         p1:text="Welcome Readers"  
  11.         p1:layout_width="wrap_content"  
  12.         p1:layout_height="wrap_content"  
  13.         p1:textSize="45dp"  
  14.         p1:textColor="@android:color/black"  
  15.         p1:layout_alignParentBottom="true"  
  16.         p1:layout_centerHorizontal="true"  
  17.         p1:id="@+id/textView1" />  
  18.     <ImageView  
  19.         p1:layout_width="wrap_content"  
  20.         p1:layout_height="wrap_content"  
  21.         p1:id="@+id/imageView"  
  22.         p1:layout_centerVertical="true"  
  23.         p1:layout_centerHorizontal="true"  
  24.         p1:src="@drawable/maxresdefault" />  
  25. </RelativeLayout>  

Main.axml

  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="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:minWidth="25px"  
  7.     android:minHeight="25px">  
  8.     <TextView  
  9.         android:text="Main Activity Started"  
  10.         android:textAppearance="?android:attr/textAppearanceLarge"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:id="@+id/textView1" />  
  14. </LinearLayout>  
view_animation.xml 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:interpolator="@android:anim/linear_interpolator">  
  4.  <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
  5.            android:fromXScale="1.0"  
  6.            android:toXScale="1.4"  
  7.            android:fromYScale="1.0"  
  8.            android:toYScale="0.6"  
  9.            android:pivotX="50%"  
  10.            android:pivotY="50%"  
  11.            android:fillEnabled="true"  
  12.            android:fillAfter="false"  
  13.            android:duration="2000" />  
  14.   <set android:interpolator="@android:anim/accelerate_interpolator">  
  15.     <scale android:fromXScale="1.4"  
  16.            android:toXScale="0.0"  
  17.            android:fromYScale="0.6"  
  18.            android:toYScale="0.0"  
  19.            android:pivotX="50%"  
  20.            android:pivotY="50%"  
  21.            android:fillEnabled="true"  
  22.            android:fillBefore="false"  
  23.            android:fillAfter="true"  
  24.            android:startOffset="2000"  
  25.            android:duration="400" />    
  26.   
  27.     <rotate android:fromDegrees="0"  
  28.             android:toDegrees="-45"  
  29.             android:toYScale="0.0"  
  30.             android:pivotX="50%"  
  31.             android:pivotY="50%"  
  32.             android:fillEnabled="true"  
  33.             android:fillBefore="false"  
  34.             android:fillAfter="true"  
  35.             android:startOffset="2000"  
  36.             android:duration="400" />  
  37.   </set>  
  38.     
  39. </set>   

View_animation.xml consists of scale and rotate type animations and all the animations are performed simultaneously. The first scale animation performed stretches the image horizontally and shrinks it vertically, followed by rotating the image at 45 degrees counter-clockwise and shrinking until it disappears from the screen.

Screenshot of layouts 

 
 
These animations are applied to imageview in SplashScreenDemo class, using Animation.View.Animations and then we start the animation using StartAnimation() method. The code snippet of SplashScreenDemo.cs is shown below.
 
SplashScreenDemo.cs
  1. public class SplashScreenDemo : Activity  
  2.     {  
  3.         ImageView imageView;  
  4.         Animation view_animation;  
  5.         TextView textview;  
  6.         protected override void OnCreate(Bundle bundle)  
  7.         {  
  8.             base.OnCreate(bundle);  
  9.             RequestWindowFeature(Android.Views.WindowFeatures.NoTitle);  
  10.             SetContentView (Resource.Layout.SplashScreen);  
  11.             imageView = (ImageView)FindViewById(Resource.Id.imageView);  
  12.             textview = (TextView)FindViewById(Resource.Id.textView1);  
  13.             view_animation = AnimationUtils.LoadAnimation(this,Resource.Animation.view_animation);  
  14.             textview.SetTextColor(Color.Red);  
  15.             imageView.StartAnimation(view_animation);  
  16.             view_animation.AnimationEnd += Rotate_AnimationEnd;  
  17.               
  18.         }  
  19.   
  20.         private void Rotate_AnimationEnd(object sender, Animation.AnimationEndEventArgs e)  
  21.         {  
  22.             Finish();  
  23.             StartActivity(typeof(MainActivity));  
  24.         }  
  25.     }  

The code snippet given above uses RequestWindowFeature() method to hide titlebar of SplashScreen layout. Using LoadAnimation() method, set view_animation.xml for View Animation and StartAnimation() method to start animation on ImageView. When animation ends, it will trigger Animation.AnimationEnd method, so I am terminating Splash Screen, using Finish() method and Starting MainActivity, using StartActivity() method.

MainActivity.cs

  1. public class MainActivity : Activity  
  2. {  
  3.         protected override void OnCreate(Bundle savedInstanceState)  
  4.         {  
  5.             base.OnCreate(savedInstanceState);  
  6.             SetContentView(Resource.Layout.Main);  
  7.             Toast.MakeText(this, "Welcome to MainActivity", ToastLength.Long).Show();  
  8.         }  
  9.   
  10. }  

Output

 

Summary

In this article, we learned how to create animated splash screens in Xamarin with Visual Studio 2015.


Similar Articles