Tutorial Xamarin Android : Membuat Dialog Fragment

Hallo, selamat sore jumpa lagi dengan saya, pada kesempatan ini saya bereksperimen mengenai dialog fragment pada xamarin android ya, Oh iya mumpung masih dalam suasana lebaran nih ,  saya sekeluarga mengucapkan minal aidzin wal fa idzin mohon maaf lahir dan batin. Selamat merayakan idul fitri bagi yang merayakannya.

Sebelumnya saya akan menjelaskan apa itu fragment ya?

Fragment adalah salah satu komponen , antar muka (user interface ) yang merupakan sebuah bagian dari Activity, dapat disebut juga dengan nama Sub-Activity. Satu Activity bisa mengelola beberapa fragment .untuk menampilkan hasil di layar user (pengguna). Dalam Satu Activity juga ,sebuah fragment dapat diganti,ditambahkan dan dihapus ,dan juga bersifat reusable ,artinya dapat digunakan kembali sesuai kebutuhan. Fragment dipengaruhi dari lifecycle (siklus hidup ) Activity , karna Fragment termasuk bagian dari Activity. (Sumber).

Yap sekarang kita sudah memahami apa itu fragment ya, sekarang saatnya kita buat Dialog Fragment dimana ketika user mau mendaftar / signup maka akan muncul sebuah dialog box pendaftaran. Langkah-langkah pembuatannya adalah sebagai berikut :

Langkah 1 :
Buatlah sebuah project android baru pada xamarin studio kemudian berikan nama DialogForm, pastikan jangan gunakan DialogFragment ya karena nanti akan menimbulkan eror, nama project harus berbeda dari semua komponen xamarin studio.

Langkah 2:
Pilih Modern Compability agar dapat berjalan pada device android minimal jelly bean.

Langkah 3 :
Pada folder Resources layout buka file Main.axml , lalu ubah codingnya seperti berikut sehingga mendapatkan tampilan halaman login dan daftar.

Codingnya adalah sebagai berikut :

<?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="#ffffffff"
    android:padding="30dp">
    <TextView
        android:text="Silahkan Login "
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:textColor="#ff263238"
        android:gravity="center" />
    <Button
        android:text="LOGIN"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnlogin"
        android:layout_marginTop="58.5dp"
        android:background="#ffff5722" />
    <TextView
        android:text="Atau "
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        android:textColor="#ff263238"
        android:gravity="center"
        android:layout_marginTop="13.5dp"
        android:layout_marginBottom="9.5dp" />
    <Button
        android:text="DAFTAR"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnregister"
        android:background="#ff03a9f4" />
    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar1" />
</LinearLayout>

Jika benar maka akan menampilkan UI seperti ini .

Langkah 4:
Selanjutnya adalah membuat sebuah layout baru bernama Dialog_Layout.axml lalu ketikan coding seperti berikut :

<?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="#ffffffff"
    android:padding="30dp">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtUsername"
        android:hint="username"
        android:textColorHint="#ffbdbdbd" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtEmail"
        android:hint="email"
        android:textColorHint="#ffbdbdbd" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtPassword"
        android:hint="password"
        android:textColorHint="#ffbdbdbd" />
    <Button
        android:text="DAFTAR"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button1" />
</LinearLayout>

Langkah 6 :
Membuat sebuah class baru bernama dialog_daftar.cs lalu masukan code seperti berikut :

using System;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.App;
using Android.Content;
using Android.Widget;

namespace DialogForm
{
 public class dialog_daftar : DialogFragment
 {
  public dialog_daftar()
  {
  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   base.OnCreateView(inflater, container, savedInstanceState);
   var view = inflater.Inflate(Resource.Layout.Dialog_Layout, container, false);
   return view;
  }

 }

}

Bisa kita lihat pada class dialog_daftar tersebut berekstend pada DialogFragment yaitu sebuah class komponen utama milik xamarin yang dapat kita gunakan untuk membuat Dialog. Kita juga membuat fungsi baru bernama View OnCreateView() yaitu kita akan membuat fungsi yang menampilkan sebuah layout namun dipanggil melalui sebuah fragment.

Langkah 7 :
Buka kembali file MainActivity.cs lalu kita ubag codenya sebagai berikut :

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

namespace DialogForm
{
 [Activity(Label = "DialogForm", MainLauncher = true)]
 public class MainActivity : Activity
 {
  private Button btnDaftar;
  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

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

   btnDaftar = FindViewById<Button>(Resource.Id.btnregister);
   btnDaftar.Click += (object sender, System.EventArgs e) =>
   {
    //Pull up dialog
    FragmentTransaction transaction = FragmentManager.BeginTransaction();
    dialog_daftar daftarDialog = new dialog_daftar();
    daftarDialog.Show(transaction, "dialog fragment");

   };
  }
 }
}

Pada activity Main tersebut kita terlebih dahulu membuat sebuah variable yang akan menggunakan Tombol Daftar yang dapat kita cek ada sebuah id yaitu btnregister pada file Main.axml. Kemudian kita membuat fungsi khusus saat button daftar di Click yaitu akan menampilkan dialog fragment ya. Karena menggunakan fragment maka kita wajib menggunakan FragmentTransaction, Nah kemudian kita gunakan fungsi .Show() agar dialog tersebut muncul.

Salam

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