Tutorial Xamarin Android : Membuat Animasi pada SplashScreen

Halo apakabar? semoga dalam keadaan baik ya dan masih semangat untuk mempelajari #xamarin :). Nah pada kesempatan kali ini kita akan belajar membuat animasi pada splashscreen xamarin android.  Jika pada tutorial yang lalu hanya membuat image statis pada kesempatan kali ini kita akan membuatnya dalam bentuk animasi.



Syarat utamanya adalah kita harus memiliki sebuah animasi dalam bentuk .gif tentunya yang akan kita gunakan sebagai bahan animasi. Untuk membuat animasi bisa menggunakan adobe photoshop, wondershare filmora atau after effects. Setelah itu convert file menjadi format .gif.

Langkah 1
Buatlah sebuah project baru dengan nama sesuai kebutuhan misalkan nama projectnya adalah " SpashGif" kemudian pilih Modern Developement maksudnya adalah memilih versi mimimum androidnya.

Langkah 2
Setelah anda membuat project, maka anda memiliki sebuah file dengan nama MainActivity.cs yang terbuat secara default ya :)

Kodenya seperti berikut :

using Android.App;
using Android.Widget;
using Android.OS;

namespace SpashGif
{
    [Activity(Label = "SpashGif", MainLauncher = false)]
    public class MainActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);
        }
    }
}

Note : Pada MainLauncher = false hal ini bertujuan agar activity ini bukan menjadi aktivity yang pertama kali dijalankan.

Langkah 3
Buatlah sebuah activity baru dengan nama SplashActivity.cs

Langkah 4
Instalah sebuah nuget packages dengan nama Refactored.GifImageView , anda bisa menginstalnya secara langsung dengan cara pada Packages-> Klik Kanan -> Add Packages  lalu cari Refactored.GifImageView lalu pilih add packages. Tunggu hingga selesai.

Langkah 5
Instal kembali AppCompatActivity pada packages, langkah seperti pada no.3 ya.

Langkah 6
kembali pada file SplashActivity.cs ubah kodenya seperti berikut

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Timers;
using Android.App;
using Android.Content;
using Android.Content.Res;
using Android.Nfc;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.App;
using Android.Util;
using Android.Views;
using Android.Widget;
using Felipecsl.GifImageViewLibrary;

namespace SpashGif
{
    [Activity(Label = "Banyu Center",MainLauncher = true, Theme ="@style/MyTheme.Splash", NoHistory = true)]
    public class SplashActivity : AppCompatActivity
    {
         

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Splash);

            GifImageView gif = FindViewById<GifImageView>(Resource.Id.gifImageView);

            Stream input = Assets.Open("a.gif");
            byte[] bytes = ConvertFileToByteArray(input);
            gif.SetBytes(bytes);
            gif.StartAnimation();

            Timer timer = new Timer();
            timer.Interval = 11000;
            timer.AutoReset = false;
            timer.Elapsed += Timer_Elapsed;
            timer.Start();

            // Create your application here
        }

        private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            StartActivity(new Intent(this, typeof(MainActivity)));
        }

        private byte[] ConvertFileToByteArray(Stream input)
        {
            byte[] buffer = new byte[16 * 1024];
            using (MemoryStream ms = new MemoryStream())
            {
                int read;
                while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
                    ms.Write(buffer, 0, read);
                return ms.ToArray();
            }
        }
    }


}

Sebelumnya buatlah sebuah layout dengan nama Splash.xml pada folder layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00c3ff">
    <com.felipecsl.gifimageview.library.GifImageView
        android:id="@+id/gifImageView"
        android:layout_gravity="center"
        android:scaleType="fitCenter"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffffff"
        android:src="#ff03a9f4" />
</LinearLayout>

Nah pada layout ini kita pasang componen gifimageview nya dengan id = gifImageView

Kemudian pada file styles.xml ubah code menjadi seperti  berikut

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>
</resources>

Styles akan kita gunakan untuk membuat splashscreen menjadi full tanpa status bar.

Oh iya terlupa, copy dan pastekan file animasi.gif pada folder Asset ya :)

Penjelasan Kode SplashAcitivity.cs

using Felipecsl.GifImageViewLibrary;

Panggil class dari nuget GifImageViewLibarary agar componen dapat bekerja dengan baik.

MainLauncher = true, Theme ="@style/MyTheme.Splash",

atur agar SplashActivity menjadi activity yang pertama dijalankan, dan gunakan Theme dari styles yang sudah kita ubah sebelumnya.

public class SplashActivity : AppCompatActivity
    

Affiliasikan dengan AppCompatActivity agar styles dapat dijalankan.

GifImageView gif = FindViewById<GifImageView>(Resource.Id.gifImageView);

            Stream input = Assets.Open("a.gif");
            byte[] bytes = ConvertFileToByteArray(input);
            gif.SetBytes(bytes);
            gif.StartAnimation();

Panggil id dari componen GifImageView, kemudian kita masukan asset file gif kita. kemudian Panggil fungsi ConvertFileToByteArray

Fungsinya sebagai berikut :

 private byte[] ConvertFileToByteArray(Stream input)
        {
            byte[] buffer = new byte[16 * 1024];
            using (MemoryStream ms = new MemoryStream())
            {
                int read;
                while ((read = input.Read(buffer, 0, buffer.Length)) > 0)
                    ms.Write(buffer, 0, read);
                return ms.ToArray();
            }
        }

Buat setelan Timer untuk durasi splashscreen.

Timer timer = new Timer();
            timer.Interval = 11000;
            timer.AutoReset = false;
            timer.Elapsed += Timer_Elapsed;
            timer.Start();

Panggil fungsi Timer_Elapsed

private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            StartActivity(new Intent(this, typeof(MainActivity)));
        }

isinya menjalankan Intent yaitu setelah waktu habis , maka jalankan MainActivity

Selesai ,

Terimakasih

Ipung Purwono