Tutorial Xamarin Android : Membuat Splash Screen

SplashScreen Xamarin Android

Hi, ketemu lagi dengan saya, di hari ketiga ini saya melakukan eksperimen sederhana yaitu membuat Splash Screen pada Aplikasi android menggunakan xamarin, sebelumnya saya juga sudah membuat beberapa tutorial mengenai ListView dan bisa kalian cek ya,

SplashScreen ini menjadi sebuah kebutuhan wajib bagi sebuah aplikasi, rasa-rasanya menjadi kurang bagus jika aplikasi andorid kita , tidak ditambahkan SplashScreen. Tahu kan apa itu splash screen? Ya sebuah tampilan awal ketika kita membuka aplikasi pada android.

Oke, lebih jelasnya bahwa alur sebuah Splash Screen itu sendiri adalah sebagai berikut :

1. Kita membuat sebuah style sendiri dengan nama splashscreen.xml yang bisa kita taruh di folder drawable, perlu kita ketahui di folder drawable itu tidak hanya menaruh file gambar atau video saja , namun juga file xml yang dapat kita panggil pada file-file di folder values antara lain styles.
2. Kita juga membuat colors.xml untuk konfigurasi warna splashscreen
3. Kita lakukan interaksi antara file xml di file styles.xml
4. Membuat aktivity baru bernama SplashActivity.cs dan kita set Main Launcer = True yang menandakan bahwa aktivity ini adalah activity yang pertawa kita jalankan.
5. Hilangkan opsi MainLauncer = True pada MainActivity untuk menghindari double icon aplikasi pada Mobile Phone mu ya :)

Yap, berikut ini Step-by Step dalam membuat SplashScreen dengan android.

Step 1:

Siapkan sebuah file logo, lalu namakan logo tersebut dengan nama logo.png dan ukurannya width = 150 px height = 150 px. Taruhlah file logo tersebut kedalam folder drawable ya , Caranya adalah Klik kanan pada folder drawable pilih add files, lalu tinggal ambil file logo.png tersebut. Folder Drawable terdapat di dalam folder Resources ya.

Step 2 :

Pada folder drawable klik kanan -> Add New Files -> Pilih XML file lalu namakan dengan splashscreen.xml lalu isikan code seperti berikut 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Nah kita sengaja menggunakan layer-list agar kita bisa menaruh file bitmap, kalian bisa lihat src=@drawable/logo maksudnya adalah kita panggil gambar logo.png di folder drawable, Lalu kita set Gravity center agar logo pas berada di tengah.

Step 3:
Pada folder values klik kanan kemudian kita membuat file xml beranama Style.xml , file ini akan mengkonfigurasi tema yang akan digunakan pada activity splashscreen. Berikut code styles.xml

<?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:windowBackground">@drawable/splashscreen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>
</resources>

Step 4 :
Selanjutnya kita buat kembali file xml pada folder values bernama colors.xml codenya sebagai berikut :

 
<?xml version="1.0" encoding="UTF-8" ?> 
<resources>
<color name="transparent">#00000000</color>
<color name="menu_text_color">#acaca9</color>
<color name="splash_background">#fff</color>
</resources>

Pada Folder Componen lalu Klik Kanan -> Get More Component lalu instalkan 2 komponen berikut :

1. Android Support Design Library
2. Android Support Library v7 AppCompat

Caranya installnya cukup mudah anda tinggal add to project saja.

Step 5 :
Kita buat sebuah aktivity baru dengan nama SplashActivity.cs caranya adalah pada solution -> klik kanan -> Add New Files -> Pilih Android Activity -> Rename dengan SplashActivity.cs

Isi code SplashActivity Sebagai berikut :

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;

namespace SplashScreen
{
 [Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
 public class SplashActivity : Activity
 {
  static readonly string TAG = "X:" + typeof(SplashActivity).Name;

  public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
  {
   base.OnCreate(savedInstanceState, persistentState);
   Log.Debug(TAG, "SplashActivity.OnCreate");
  }

  // Launches the startup task
  protected override void OnResume()
  {
   base.OnResume();
   Task startupWork = new Task(() => { SimulateStartup(); });
   startupWork.Start();
  }

  // Simulates background work that happens behind the splash screen
  async void SimulateStartup()
  {
   Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
   await Task.Delay(3000); // Simulate a bit of startup work.
   Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
   StartActivity(new Intent(Application.Context, typeof(MainActivity)));
  }
 }
}

Keterangan Code :
Kita mengaktifkan MainLauncer = True agar aktivity ini yang pertama kali dijalankan, Kemudian Ada Task.Delay = 3000 ini untuk mengatur berapa lama splasscreen akan ter load, Lalu Setelah 3000 second selesai kemudian kita Buat fungsi yang akan melakukan perpindahan ke activity berikutnya yaitu MainActivity

Step 6 :
Lakukan modifikasi pada MainActivity.cs yaitu menghilangkan MainLAuncer=True agar tidak menjadi aktivity pertama yang dijalankan

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

namespace SplashScreen
{
 [Activity(Label = "SplashScreen")]
 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);
  }
 }
}

Selesai, anda sudah bisa membuat sebuah splashscreen pada aplikasi android anda.

Salam

Ipung Purwono
https://www.facebook.com/ipungz.purwono