Tutorial Xamarin Android : Mengambil REST API (Data JSON MySQL) Dalam ListView

Setelah pada tutorial sebelumnya kita belajar membuat login dan register (menambahkan data ke mySQL) sekarang saya akan membuatkan sebuah tutorial sederhana bagaimana menampilkan data yang ada pada database mySQL bisa kita tampilkan (Retrieve) di aplikasi android kamu. Bahasa populernya adalah Mengkonsumsi REST API pada android. Oleh karena itu kita membutuhkan pertukaran data bentuk JSON agar tampil pada aplikasinya ya.

Demo aplikasi sebagai berikut :


Pada beberapa tutorial saya kesulitan mencari bagaimana menampilkannya pada Custom List View, adanya simple list view. Nah pada kesempatan kali ini saya akan meng custom Baris listrow nya dengan Adapter , jadi ListViewnya tidak sederhana namun terdapat 2 baris.

Okey, asumsi saya anda sudah memiliki JSON pada website / server anda ya, nah kalau saya akan mengambil data JSON seperti gambar berikut ini.

Jika kita cermati maka field nya adalah :

1. id
2. nama
3. alamat

Jadi pada tabel MySQL nya itu memiliki 3 buah filed ya. Nah data-data JSON tersebut akan saya tampilkan pada Android Xamarin menggunakan Komponen JSON.NET. Baik. ikuti langkah berikut ini ya.

Langkah 1

Buatlah sebuah project dengan nama JSONtoListView

Langkah 2

Pada folder Component -> Klik Kanan -> Get More Component -> Cari JSON lalu instal, tunggu hingga instalasi selesai

Langkah 3

Buka file Main.axml anda lalu masukan sebuah ListView . code axml nya 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:padding="20dp">
    <TextView
        android:text="List Data Siswa"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="22.0dp" />
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listData"
        android:layout_marginTop="9.0dp" />
</LinearLayout>

Langkah 4
Buatlah sebuah layout baru dengan nama ListViewRow.axml nah, file ini adalah file yang akan meng custom tampilan ListView menjadi 2 baris yaitu untuk menampilkan nama dan alamat dari JSON yang kita ambil. Kode nya seperti ini.

<?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:padding="5dp">
    <TextView
        android:text="Nama Siswa"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNama"
        android:textSize="18dp"
        android:textStyle="bold" />
    <TextView
        android:text="Alamat Siswa"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtAlamat"
        android:textSize="12dp" />
</LinearLayout>

Pada code diatas kita menambahkan 2 Buah TextView untuk menampung data JSON

<TextView
        android:text="Nama Siswa"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtNama"
        android:textSize="18dp"
        android:textStyle="bold" />
    <TextView
        android:text="Alamat Siswa"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtAlamat"
        android:textSize="12dp" />

Langkah 5
Buatlah sebuah Class dengan nama Siswa.cs dengan code seperti ini.

using System;
namespace JSONtoListView
{
 public class Siswa
 {
  public Siswa()
  {
  }

  public int id { get; set; }
  public string Nama { get; set; }
  public string Alamat { get; set; }
 }
}

Class ini akan menge set field dan akan ditampilkan pada List Adapter

Langkah 6
Buatlah sebuah adapter untuk menampilkan data pada ListView dengan nama MyListViewAdapater.cs

using System;
using System.Collections.Generic;
using Android.Widget;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using System.Net;
using Newtonsoft.Json.Linq;
namespace JSONtoListView
{
 public class MyListViewAdapter : BaseAdapter<Siswa>
 {
  public MyListViewAdapter()
  {
  }

  public List<Siswa> itemSiswa;
  private Context mContext;

  public MyListViewAdapter(Context context, List<Siswa> items)
  {
   itemSiswa = items;
   mContext = context;
  }

  public override int Count
  {
   get
   {
    return itemSiswa.Count;
   }
  }

  public override Siswa this[int position]
  {
   get
   {
    return itemSiswa[position];
   }
  }

  public override long GetItemId(int position)
  {
   return position;
  }



  public override View GetView(int position, View convertView, ViewGroup parent)
  {
   View row = convertView;
   if (row == null)
   {
    row = LayoutInflater.From(mContext).Inflate(Resource.Layout.ListViewRow, null, false);

   }

   TextView txtNama = row.FindViewById<TextView>(Resource.Id.txtNama);
   txtNama.Text = itemSiswa[position].Nama;

   TextView txtAlamat = row.FindViewById<TextView>(Resource.Id.txtAlamat);
   txtAlamat.Text = itemSiswa[position].Alamat;


   return row;
  }
 }
}

Pada code diatas kita akan menampilkan class Siswa yang ditampung dalam ListViewRow.axml ke dalam ListView pada Main.axml dengan id = listData

public override View GetView(int position, View convertView, ViewGroup parent)
  {
   View row = convertView;
   if (row == null)
   {
    row = LayoutInflater.From(mContext).Inflate(Resource.Layout.ListViewRow, null, false);

   }

   TextView txtNama = row.FindViewById<TextView>(Resource.Id.txtNama);
   txtNama.Text = itemSiswa[position].Nama;

   TextView txtAlamat = row.FindViewById<TextView>(Resource.Id.txtAlamat);
   txtAlamat.Text = itemSiswa[position].Alamat;


   return row;
  }

Langkah 7
Buka file MainActivity.cs anda lalu ubah codenya seperti ini.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using Newtonsoft.Json.Linq;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Newtonsoft.Json;

namespace JSONtoListView
{
 [Activity(Label = "JSONtoListView", MainLauncher = true)]
 public class MainActivity : Activity
 {
  private List<Siswa> itemSiswa;
  private ListView DaftarSiswa;
  private Uri BaseUri = new Uri("https://namawebsiteanda.com/demo/webservices/Select.php?");

  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   DaftarSiswa = FindViewById<ListView>(Resource.Id.listData);
   itemSiswa = new List<Siswa>();
   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   webClient.DownloadStringCompleted += WebClient_DownloadStringCompleted;
  }

  private void WebClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  {
   RunOnUiThread(() =>
   {
    itemSiswa = JsonConvert.DeserializeObject<List<Siswa>>(e.Result);
    MyListViewAdapter adapter = new MyListViewAdapter(this, itemSiswa);
    DaftarSiswa.Adapter = adapter;


   }
   );

  }
 }
}

Pada code diatas kita panggil url JSON sebagai web client dan kita Download lalu tampikan dengan adapter MyListViewAdapter.cs

private List<Siswa> itemSiswa;
  private ListView DaftarSiswa;
  private Uri BaseUri = new Uri("https://namawebsiteanda.com/demo/webservices/Select.php?");

  protected override void OnCreate(Bundle savedInstanceState)
  {
   base.OnCreate(savedInstanceState);

   // Set our view from the "main" layout resource
   SetContentView(Resource.Layout.Main);
   DaftarSiswa = FindViewById<ListView>(Resource.Id.listData);
   itemSiswa = new List<Siswa>();
   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   webClient.DownloadStringCompleted += WebClient_DownloadStringCompleted;
  }

Setelah dipanggil URL JSON nya taruhlah ke dalam ListView

private void WebClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  {
   RunOnUiThread(() =>
   {
    itemSiswa = JsonConvert.DeserializeObject<List<Siswa>>(e.Result);
    MyListViewAdapter adapter = new MyListViewAdapter(this, itemSiswa);
    DaftarSiswa.Adapter = adapter;


   }
   );

  }

Terimakasih


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