Menampilkan ListView pada Fragments dari Parsing JSON

Kalau biasanya kita parsing data JSON ke dalam listview di Activity itu adalah hal mudah, bagaimana jika menampilkannya kedalam fragment? Nah, ada sedikit perbedaan asusmsi disini. Misalkan saya memiliki sebuah data JSON yaitu data kabupaten. Saya generate data JSON dengan output seperti berikut ini.

[
{
id: "1",
nama_kabupaten: "Banjarnegara",
foto: "https://banyu.center/pariwisatajateng/assets/images/kabupaten/banjarnegara.jpg"
},
{
id: "2",
nama_kabupaten: "Banyumas",
foto: "https://banyu.center/pariwisatajateng/assets/images/kabupaten/banyumas.jpg"
},
{
id: "3",
nama_kabupaten: "Batang",
foto: "https://banyu.center/pariwisatajateng/assets/images/kabupaten/batang.jpg"
}

Link JSON : https://banyu.center/pariwisatajateng/api/getKabupaten

Nah data-data diatas ingin saya tampilka ke dalam listview namun di fragments, bagaimana caranya?

Untuk menampilkan data tersebut jika kita cek kita membutuhkan beberapa code yaitu :


1. Sebuah class untuk mendefinisikan field-field JSON nya saya berikan nama Kabupaten.cs
2. Sebuah fragment untuk menampilkan listviewnya saya berikan nama homeFragments.cs
3. Sebuah layout berisi listview dengan nama homeLayout.axml
4. Sebuah row untuk mengisi custom listview dengan nama ListRow.axml
5. Sebuah CustomListAdapter.cs khusus untuk menampung data field-field JSON ke dalam ListRow.axml
6. Sebuah componen dengan nama UrlImageViewerHelper
7. Sebuah componen dengan nama JSON.net

Oke,  cara kerjanya adalah sebagai berikut :

Generate field-field pada Kabupaten.cs, lalu panggil pada CustomListAdapter.cs. CustomListAdapter.cs tersebut akan mengirimkan data Kabupaten.cs ke layout ListRow.axml berdasarkan id nya. homeFragment.cs akan membuat variable ListView dengan layout homeLayout.axml panggil data CustomListAdapter.cs untuk menampilkan nya.

Code-codennya dalah sebagai berikut :

Kabupaten.cs

using System;
using System.Collections.Generic;

namespace NamaProjectMu
{


 public class Kabupaten
 {
  public Kabupaten()
  {
  }

  public int id { get; set; }
  public string nama_kabupaten { get; set; }
  public string foto { get; set; }
  public string keterangan { get; set; }


 }
}

CustomListAdapter.cs

using System;
using Android.Widget;
using Android.App;
using System.Collections.Generic;
using Android.Views;
using Android.Media;
using System.Net;
using System.Threading.Tasks;
using System.IO;
using Android.Graphics;

//Adapter untuk load list view kabupaten
namespace NamaProjectMu
{
 public class CustomListAdapter : BaseAdapter<Kabupaten>
 {
  public CustomListAdapter()
  {
  }
  Activity context;
  List<Kabupaten> list;

  public CustomListAdapter(Activity _context, List<Kabupaten> _list) : base()
  {
   this.context = _context;
   this.list = _list;
  }

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

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

  public override Kabupaten this[int index]
  {
   get { return list[index]; }
  }

  public override View GetView(int position, View convertView, ViewGroup parent)
  {
   View view = convertView;

   // re-use an existing view, if one is available
   // otherwise create a new one
   if (view == null)
    view = context.LayoutInflater.Inflate(Resource.Layout.ListRow, parent, false);


   Kabupaten item = this[position];
   view.FindViewById<TextView>(Resource.Id.NamaKabupaten).Text = item.nama_kabupaten;

   using (var imageView = view.FindViewById<ImageView>(Resource.Id.Foto))
   {
    string url = Android.Text.Html.FromHtml(item.foto).ToString();

    //Download and display image
    Koush.UrlImageViewHelper.SetUrlDrawable(imageView,
                                            url, Resource.Drawable.loadimage);
   }
   return view;
  }
 }
}

ListRow.axml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="50dp">
    <ImageView
        android:id="@+id/Foto"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:paddingLeft="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@android:drawable/ic_menu_gallery" />
    <TextView
        android:id="@+id/NamaKabupaten"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/Foto"
        android:lineSpacingExtra="3dp"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:textColor="#ff263238"
        android:text="Kabupaten"
        android:textStyle="bold"
        android:typeface="sans"
        android:textSize="@dimen/abc_action_bar_content_inset_material"
        android:layout_marginTop="22.5dp" />
</RelativeLayout>

homeLayout.axml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <ProgressBar
        android:id="@+id/progressBar"
        style="@android:style/Widget.DeviceDefault.ProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />
    <ListView
        android:id="@+id/dataList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:dividerHeight="1dp" />
</FrameLayout>

homeFragment.cs

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;
using Android.Text;

namespace NamaProjectMu
{
 public class HomeFragment : Android.Support.V4.App.Fragment
 {
  ListView DaftarKabupaten;
  ProgressBar progress;
  private List<Kabupaten> itemKabupaten;

  CustomListAdapter adapters;
  //Ambil alamat load data API JSON
  private Uri BaseUri = new Uri("https://banyu.center/pariwisatajateng/api/getKabupaten");


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

  }

  public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
  {
   //Menampilkan layout untuk fragment
   View view = inflater.Inflate(Resource.Layout.homeLayout, container, false);
   DaftarKabupaten = view.FindViewById<ListView>(Resource.Id.dataList);

   itemKabupaten = new List<Kabupaten>();
   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   progress = view.FindViewById<ProgressBar>(Resource.Id.progressBar);
   progress.Visibility = ViewStates.Visible;
   webClient.DownloadStringCompleted += WebClient_DownloadStringCompleted;


   return view;
  }

  //Ambil data JSON dengan download String 
  private void WebClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
  {
   Activity.RunOnUiThread(() =>
   {
    itemKabupaten = JsonConvert.DeserializeObject<List<Kabupaten>>(e.Result);
    //CustomListAdapter customListAdapter = new CustomListAdapter(this.Activity, itemKabupaten);
    adapters = new CustomListAdapter(this.Activity, itemKabupaten);
    DaftarKabupaten.Adapter = adapters;
    progress.Visibility = ViewStates.Gone;

    DaftarKabupaten.ItemClick += DaftarKabupaten_ItemClick; ;

   });
  }


  void DaftarKabupaten_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
  {
   Kabupaten select = itemKabupaten.ElementAt(e.Position);
   Toast.MakeText(this.Activity, select.id.ToString(), ToastLength.Short).Show();
   
  }
 }
}

Demikianlah cara menampilkan listview dari JSON kedalam fragments.

Terimakasih,
Salam