Tutorial Xamarin Android : Menampilkan Progress Bar ketika Load Data JSON

Ketika kita menunggu list email terbaru, tentunya kalian melihat sebuah icon loading pada email hingga data email abru masuk, proses tersebut dinamakan dengan progress bar. Nah jika pada tutorial sebelumnya kita membuat aplikasi yang menampilkan data JSON ke dalam listview android kita seolah ada jeda waktu yaitu proses server mengirimkan data ke aplikasi android kita. Pada tutorial sebelumnya hal itu terlihat kurang menarik karena hanya muncul layar kosong saja sebelum data tampil. Nah untuk mengatasinya kita akan menggunakan Progress Bar pada xamarin android kita ya, Jika kalian baru membuka web blog ini , kalian bisa cek artikel sebelumnya tentang Tutorial Xamarin Android : Mengambil REST API (Data JSON MySQL) Dalam ListView.

Setelah kalian mengikuti tutorial saya sebelumnya kita akan merubah beberapa code antara lain adalah sebagai berikut .

Langkah 1
Buka file Main.axml nya lalu tambahkan progress bar di bawah ListView dan ubah layout menjadi RelativeLayout seperti ini code nya.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <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" />
 <ProgressBar
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/listProgressBar"
  android:indeterminate="true"
  android:layout_centerInParent="true"
  android:visibility="gone" />
</RelativeLayout>

Bisa kalian cek code ini

<ProgressBar
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/listProgressBar"
  android:indeterminate="true"
  android:layout_centerInParent="true"
  android:visibility="gone" />

Saya menambahkan progress bar dengan ID = listProgressBar.

Langkah 2
Buka file MainActivity.cs lalu panggil progress bar tersebut dalam sebuah variable sehingga code MainActivity.cs menjadi seperti berikut

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://smkmaarifnu1ajibarang.sch.id/demo/webservices/Select.php?");
  private ProgressBar mProgressBar;

  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>();
   mProgressBar = FindViewById<ProgressBar>(Resource.Id.listProgressBar);

   var webClient = new WebClient();
   webClient.DownloadStringAsync(BaseUri);
   mProgressBar.Visibility = ViewStates.Visible;
   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);
    mProgressBar.Visibility = ViewStates.Gone;
    DaftarSiswa.Adapter = adapter;


   }
   );

  }
 }
}

Jika kalian cek perubahan maka ada beberapa baris code yang saya tambahkan antara lain

private ProgressBar mProgressBar;

Code diatas adalah kita mendefinisikan variable Progress Bar

Kemudian code ini

mProgressBar = FindViewById<ProgressBar>(Resource.Id.listProgressBar);

Panggil ID Progress Bar nya.

Serta code

mProgressBar.Visibility = ViewStates.Visible;

Status Terlihat jika data JSON belum muncul,

Terakhir tambahkan pada saat data terdownload

mProgressBar.Visibility = ViewStates.Gone;

Progress Bar hilang jika data sudah ter load.


Jalankan via emulator, jika ada eror bisa jalankan voa handphone android kamu, terkadang ada beberapa permasalahan eror ketika di jalankan di emulator bawaan xamarin.

Terimakasih

Ipung Purwono