{"id":619,"date":"2020-09-08T07:24:10","date_gmt":"2020-09-08T07:24:10","guid":{"rendered":"https:\/\/serkanseker.com\/?p=619"},"modified":"2021-02-23T07:10:21","modified_gmt":"2021-02-23T07:10:21","slug":"animated-splash-screen","status":"publish","type":"post","link":"https:\/\/serkanseker.com\/tr\/animated-splash-screen\/","title":{"rendered":"Animated Splash Screen"},"content":{"rendered":"\n

The home page takes some time to load when the mobile apps are first launched. So the user waits a bit to interact with the application. During this time, the app displays a layout to show progress or branding. These views are called Splash Screen<\/strong><\/a>.<\/p>\n\n\n\n

We usually see plain splash screens<\/strong> in mobile applications. But what should you do if you want to view an animated splash screen? Here, this post is for you. Alternatively, you can make your application look more beautiful with animated Splash Screen instead of a plain splash screen.<\/p>\n\n\n\n

In this post, I will take a closer at the animated splash screen construction for Xamarin.Forms and Xamarin.Android applications. I will also explain how to use Com.Airbnb.Xamarin.Forms.Lottie plugin and customize with Material Theme<\/a>.<\/p>\n\n\n\n

So, let\u2019s started. Follow the steps below in order.<\/p>\n\n\n\n

<\/p>

  1. Select a Lottie Animation<\/a><\/strong>

    <\/p> <\/li>

  2. Install Lottie Plugin<\/a><\/strong>

    <\/p> <\/li>

  3. Create a Splash Screen Layout<\/a><\/strong>

    <\/p> <\/li>

  4. Create a Splash Theme<\/a><\/strong>

    <\/p> <\/li>

  5. Add a Splash Activity<\/a><\/strong>

    <\/p> <\/li>

  6. Conclusion<\/a><\/strong>

    <\/p> <\/li><\/ol><\/div>\n\n\n\n

    Step 1 – Select a Lottie Animation<\/h2>\n\n\n\n

    Lottie animations are animations made with Adobe After Effect converted to JSON file. In this way, it is possible to use Lottie animations on many platforms. You can download many Lottie animations in JSON format on lottiefiles.com<\/a>. You can also edit and add the animation of your choice before downloading it.<\/p>\n\n\n\n

    1<\/span> Select the animation you want to use from lottiefiles.com<\/a> site and download it in JSON file format.<\/p>\n\n\n\n

    2<\/span> Then put this JSON file in the Android\/Assests<\/strong> folder.<\/p>\n\n\n\n

    \"lottie
    Put this animation file in the Assests folder<\/figcaption><\/figure>\n\n\n\n

    Step 2 – Install Lottie Plugin<\/h2>\n\n\n\n

    In Xamarin.Forms, it is not possible to show an animation directly in views. Fortunately, the Com.Airbnb.Xamarin.Forms.Lottie<\/a> plugin allows to show Lottie animations in Xamarin.Forms views. So, with this plugin, you can show the JSON file you downloaded. I think Com.Airbnb.Xamarin.Forms.Lottie is one of the best Xamarin plugins<\/a>.<\/p>\n\n\n\n

    To install the Com.Airbnb.Xamarin.Forms.Lottie plugin, type the following code into the Package Manager Console and run it.<\/p>\n\n\n\n

    Install-Package Com.Airbnb.Xamarin.Forms.Lottie -Version 4.0.8<\/code><\/pre>\n\n\n\n
    Alternatively, you can install it from NuGet Package Manager. Right-click the project and select Manage NuGet Package Manager for Solution. Then type Com.Airbnb.Xamarin.Forms.Lottie on the Browse tab and search And upload the plugin to the project.<\/p>\n\n\n\n
    \"install
    Install Lottie plugin to your project<\/figcaption><\/figure><\/div>\n\n\n\n
    Step 3 – Create a Splash Screen Layout<\/h2>\n\n\n\n
    Now we will create the splash layout that the user will see in this step.<\/p>\n\n\n\n
    1<\/span> First, go to Andorid\/Resources\/layout<\/strong> path.<\/p>\n\n\n\n
    2<\/span> Then right click on the layout folder and add a Layout. I named this layout SplashLayout.xml<\/strong>.<\/p>\n\n\n\n
    3<\/span> Next add a LottieAnimationView<\/strong> inside SplashLayout. Type the name of the JSON file in the Assests folder in the lottie_fileName<\/strong> property of LottieAnimationView. In this way, you can show the downloaded JSON file as an animation.<\/p>\n\n\n\n
    4<\/span> Finally, you can change properties such as lottie_autoPlay<\/strong> in LottieAnimationView to customize.<\/p>\n\n\n\n
    <RelativeLayout\n    xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n    xmlns:app="http:\/\/schemas.android.com\/apk\/res-auto"\n    android:orientation="vertical"\n    android:layout_width="match_parent"\n    android:layout_height="match_parent"\n    android:minWidth="25px"\n    android:minHeight="25px">\n    <com.airbnb.lottie.LottieAnimationView\n        android:layout_width="match_parent"\n        android:layout_height="match_parent"\n        android:id="@+id\/animation_view"\n        app:lottie_fileName="lf30_editor_ggPm1w.json" \n        app:lottie_autoPlay="true"\n        android:layout_centerHorizontal="true"\n        android:layout_alignParentBottom="true"\n        android:layout_marginBottom="15dp"\/>\n<\/RelativeLayout><\/code><\/pre>\n\n\n\n
    Step 4 – Create a Splash Theme<\/h2>\n\n\n\n
    With the material theme<\/a>, you can create a custom theme only on the Splash screen. So you can show a separate theme on the splash screen and a separate theme on the main page.<\/p>\n\n\n\n
    1<\/span> First, go to Android\/Resources\/values<\/strong> path.  <\/p>\n\n\n\n
    2<\/span> Then open the styles.xml<\/strong> file here. The styles.xml file contains application themes.<\/p>\n\n\n\n
    3<\/span> Then create a custom theme called MyTheme.Splash with a <style><\/strong> tags inside the <resources><\/strong> tags. As follows.<\/p>\n\n\n\n
      <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">\n    <item name="android:windowNoTitle">true<\/item>\n    <item name="android:windowFullscreen">true<\/item>\n    <item name="android:windowContentOverlay">@null<\/item>\n    <item name="android:windowActionBar">true<\/item>\n  <\/style><\/code><\/pre>\n\n\n\n
    You can further customize your Splash theme by changing its properties such as windowNoTitle<\/strong>, windowFullscre<\/strong>en, windowContentOverlay<\/strong>. I explained this topic in Material Theme<\/a>. If you wish, you can get help from there.<\/p>\n\n\n\n
    Step 5 – Add a Splash Activity<\/h2>\n\n\n\n
    Finally, you need an Activity to show the layout and theme. Because the application will no longer start from MainActivity. Splash activity will start first and then continue from Main Activity when the animation ends.<\/p>\n\n\n\n
    1<\/span> First, go to the Android folder of the project.<\/p>\n\n\n\n
    2<\/span> Then add an activity named SplashScreen.cs to this folder. This will be the activity before MainActivity.<\/p>\n\n\n\n
    3<\/span> Then change the Activity’s MainLauncher, Theme, NoHistory and Label properties as follows.<\/p>\n\n\n\n
    [Activity(Label = "MusicPlayer", MainLauncher = true, NoHistory = true, Theme = "@style\/MyTheme.Splash")]<\/code><\/pre>\n\n\n\n
    4<\/span> Next, let this activity inherit from the Acitivity class and the IAnimatorListener interface. And fill in the onCreate()<\/strong> and OnAnimationEnd()<\/strong> methods as below.<\/p>\n\n\n\n
        [Activity(Label = "MusicPlayer", MainLauncher = true, NoHistory = true, Theme = "@style\/MyTheme.Splash")]\n    public class SplashScreen : Activity, Android.Animation.Animator.IAnimatorListener\n    {\n        public void OnAnimationCancel(Animator animation)\n        {\n\n        }\n\n        public void OnAnimationEnd(Animator animation)\n        {\n            StartActivity(new Intent(Application.Context, typeof(MainActivity)));\n        }\n\n        public void OnAnimationRepeat(Animator animation)\n        {\n\n        }\n\n        public void OnAnimationStart(Animator animation)\n        {\n\n        }\n\n        protected override void OnCreate(Bundle savedInstanceState)\n        {\n            base.OnCreate(savedInstanceState);\n\n\n            SetContentView(Resource.Layout.SplashLayout);\n\n            var animation = FindViewById<Com.Airbnb.Lottie.LottieAnimationView>(Resource.Id.animation_view);\n\n            animation.AddAnimatorListener(this);\n        }\n    }<\/code><\/pre>\n\n\n\n
    Here you define an animation variable inside the onCreate()<\/strong> method. This animation variable will be the parameter of the OnAnimationEnd()<\/strong> method. Then redirect the activity to MainActivity with the OnAnimationEnd () method.<\/p>\n\n\n\n
    5<\/span> Finally, set the MainLauncher <\/strong>property of MainActivity to false<\/strong>. Thus, the application will not start from MainActivity.<\/p>\n\n\n\n
    All steps are ok. Now the application will start from the Splash activity, not the MainActivity. Then, after the animation is over, the application will continue from MainActivity. Thus, when the application is first started, the user will see an animation until MainActivty starts.<\/p>\n\n\n\n
    \"animated
    xamarin animated splash screen<\/figcaption><\/figure><\/div>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    In summary, Splash screen<\/a> is very important for a mobile application. Because one of the best ways to show branding is with the splash screen. You should definitely add splash screens to the mobile applications you develop.<\/p>\n\n\n\n
    In this post, I have looked a little closer at the animated login screen structure for Xamarin.Forms and Xamarin.Android applications. I also explained how to use Com.Airbnb.Xamarin.Forms.Lottie plugin and create a custom theme with Material Theme<\/a>. I hope it was useful.<\/p>\n\n\n\n
    If you\u2019re still not sure what to do, or if you got any errors, then I suggest you use the comment section below and let me know! I am here to help!<\/p>\n\n\n\n
    Also, share this blog post on social media and help more people learn.<\/strong><\/p>\n\n\n\n
    Related Links<\/h2>\n\n\n\n