Tutorial ListView dengan Sumber Data JSON

Tutorial ListView dengan Sumber Data JSON. Pada tutorial ini kita belajar menggunakan library retrofit untuk parsing data JSON dan Logging HTTP Request menggunakan OkHttp interceptor, disarankan sebelum memulai, ikuti tutorial Tutorial Parsing Data JSON dengan Retrofit. Berikut data JSON dari Web API.
http://api.teknorial.com/example/buku/

{ "listbuku" : [
 {
 	"idbuku" :  1,
 	"nama"   : "Ketika Mas Droid Pergi",
 	"harga"  : 20000,
 	"status" : "Tersedia"
 },
 {
 	"idbuku" :  2,
 	"nama"   : "Ada Apa Dengan Droid",
 	"harga"  :  50000,
 	"status" : "Tersedia"
 },
 {
 	"idbuku" :  3,
 	"nama"   : "Senin Bersama Droid",
 	"harga"  :  40000,
 	"status" : "Tersedia"
 },
 {
        "idbuku" :  4,
 	"nama"   : "Mengejar Ngejar Droid",
 	"harga"  :  100000,
 	"status" : "Tidak Tersedia"
 }
]
}

 

Tutorial ListView dengan Sumber Data JSON dengan Android Studio

1. Buat project Android baru.
2. Import Retrofit 2.0, converter-gson dan okhttp logging interceptor di build.gradle dalam dependencies.

    compile 'com.squareup.retrofit2:retrofit:2.0.0-beta4'
    compile 'com.squareup.retrofit2:converter-gson:2.0.0-beta4'
    compile 'com.squareup.okhttp3:logging-interceptor:3.1.2'

3. Tambahkan internet permission di AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET"/>

4. Buat package baru dengan nama models. Pada package models buatlah dua class berikut.
– Listbuku.java

package com.teknorial.retrofit2listview.models;

import java.util.HashMap;
import java.util.Map;

//Listbuku.java

public class Listbuku {
    //Variabel dalam json 
    private Integer idbuku;
    private String nama;
    private Integer harga;
    private String status;
    private Map<String, Object> additionalProperties = new HashMap<String, Object>();

    /**
     * 
     * @return
     *     The idbuku
     */
   //getter dan setter
    public Integer getIdbuku() {
        return idbuku;
    }

    /**
     * 
     * @param idbuku
     *     The idbuku
     */
    public void setIdbuku(Integer idbuku) {
        this.idbuku = idbuku;
    }

    /**
     * 
     * @return
     *     The nama
     */
    public String getNama() {
        return nama;
    }

    /**
     * 
     * @param nama
     *     The nama
     */
    public void setNama(String nama) {
        this.nama = nama;
    }

    /**
     * 
     * @return
     *     The harga
     */
    public Integer getHarga() {
        return harga;
    }

    /**
     * 
     * @param harga
     *     The harga
     */
    public void setHarga(Integer harga) {
        this.harga = harga;
    }

    /**
     * 
     * @return
     *     The status
     */
    public String getStatus() {
        return status;
    }

    /**
     * 
     * @param status
     *     The status
     */
    public void setStatus(String status) {
        this.status = status;
    }

    public Map<String, Object> getAdditionalProperties() {
        return this.additionalProperties;
    }

    public void setAdditionalProperty(String name, Object value) {
        this.additionalProperties.put(name, value);
    }

}

–Model.java.

package com.teknorial.retrofit2listview.models;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;



public class Model {

    private List<Listbuku> listbuku = new ArrayList<Listbuku>();
    private Map<String, Object> additionalProperties = new HashMap<String, Object>();

    /**
     * 
     * @return
     *     The listbuku
     */
    public List<Listbuku> getListbuku() {
        return listbuku;
    }

    /**
     * 
     * @param listbuku
     *     The listbuku
     */
    public void setListbuku(List<Listbuku> listbuku) {
        this.listbuku = listbuku;
    }

    public Map<String, Object> getAdditionalProperties() {
        return this.additionalProperties;
    }

    public void setAdditionalProperty(String name, Object value) {
        this.additionalProperties.put(name, value);
    }

}

[AdSense-A]
5. Buat package baru dengan nama rest dan tambahkan interface untuk menghandel request kita. Saya membuatnya dengan nama RestApi.java.

package com.teknorial.retrofit2listview.rest;

import com.teknorial.retrofit2listview.models.Model;

import retrofit2.Call;
import retrofit2.http.GET;

/**
 * Created by Teknorial on 10/02/2016.
 */
public interface RestAPI{

    @GET("example/buku")
    Call<Model> loadListBook();
}

6. Buka activity_main.xml dan tambahkan ListView didalamnya.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.teknorial.retrofit2listview.MainActivity">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listViewBuku"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

7. Buat TextView file dengan nama activty_listview.xml di direktori res/layout.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:textSize="20sp">
</TextView>

8. Buka MainActivity.java dan modifikasi seperti berikut.

package com.teknorial.retrofit2listview;

import android.app.ProgressDialog;
import android.content.Intent;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.teknorial.retrofit2listview.models.Listbuku;
import com.teknorial.retrofit2listview.models.Model;
import com.teknorial.retrofit2listview.rest.RestAPI;

import java.util.List;

import okhttp3.OkHttpClient;
import okhttp3.logging.HttpLoggingInterceptor;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;

public class MainActivity extends AppCompatActivity implements ListView.OnItemClickListener {
   //root url dari webservice
    public static final String ROOT_URL = "http://api.teknorial.com/";
   //deklarasi varibel untuk mengirim data ke activity lain
    public static final String ID_BUKU = "book_id";
    public static final String NAMA_BUKU = "nama_buku";
    public static final String HARGA_BUKU = "harga_buku";
    public static final String STATUS_BUKU = "status_buku";
    //listview untuk menampilkan data
    private ListView listview;
    //varibel books bertipe List dan List tersebut berdasarkan objek Listbuku
    private List<Listbuku> books;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //inisialisasi listview
        listview = (ListView) findViewById(R.id.listViewBuku);

        //memanggil method untuk mengambil data buku
        getBuku();

        //setting onItemClickListener untuk listview
        listview.setOnItemClickListener(this);


    }

    private void getBuku() {
        //Ketika Aplikasi mengambil data kita akan melihat progress dialog
        final ProgressDialog loading = ProgressDialog.show(this,"Fetching Data","Please Wait..",false,false);
        //Logging Interceptor
        HttpLoggingInterceptor logging = new HttpLoggingInterceptor();
        //set Level Log
        logging.setLevel(HttpLoggingInterceptor.Level.BODY);
        OkHttpClient.Builder httpClient = new OkHttpClient.Builder();
        httpClient.addInterceptor(logging);

        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(ROOT_URL)
                .addConverterFactory(GsonConverterFactory.create())//GsonConverter untuk parsing json
                .client(httpClient.build())
                .build();

                RestAPI service = retrofit.create(RestAPI.class);

                Call<Model> call = service.loadListBook();
                call.enqueue(new Callback<Model>() {  //Asyncronous Request
                    @Override
                    public void onResponse(Call<Model> call, Response<Model> response) {
                        loading.dismiss();
                        List<Listbuku> buku = response.body().getListbuku();

                //memasukkan data dari varibel buku ke books
                books = buku;
                //memanggil method untuk menampilkan list
                showList();
            }

            @Override
            public void onFailure(Call<Model> call, Throwable t) {

            }
        });
    }

    private void showList() {
        //String array untuk menyimpan nama semua nama buku
        String[] items = new String[books.size()];

        for (int i = 0; i < books.size(); i++) {
            items[i] = books.get(i).getNama();
        }
        //Membuat Array Adapter for listview
        ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.activity_listview, items);

        //setting adapter untuk listview
        listview.setAdapter(adapter);

    }

    //method ini akan dieksekusi ketikan listitem diklik
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //membuat intent
        Intent intent = new Intent(this, LihatDetailBuku.class);
        //mengambil buku dari list
        Listbuku listbuku = books.get(position);
        //menambahkan detail buku untuk intent
        intent.putExtra(ID_BUKU, listbuku.getIdbuku());
        intent.putExtra(NAMA_BUKU, listbuku.getNama());
        intent.putExtra(HARGA_BUKU, listbuku.getHarga());
        intent.putExtra(STATUS_BUKU, listbuku.getStatus());

        //memulai activity lain untuk menampilkan detail buku
        startActivity(intent);

    }
}

9. buat tampilan activity lain dengan nama activity_lihat_detail.xml.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="ID"
        android:id="@+id/txtIdBuku"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Nama"
        android:id="@+id/txtNamaBuku"
        android:layout_below="@+id/txtIdBuku"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Harga"
        android:id="@+id/txtHargaBuku"
        android:layout_below="@+id/txtNamaBuku"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Status"
        android:id="@+id/txtStatusBuku"
        android:layout_below="@+id/txtHargaBuku"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

10. Buat class activity lain dengan nama LihatDetailBuku.java, ini berguna untuk menampilkan detail data buku.

package com.teknorial.retrofit2listview;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

/**
 * Created by Teknorial on 13/02/2016.
 */
public class LihatDetailBuku extends AppCompatActivity {
    //mendefinisikan
    private TextView textViewIdBuku;
    private TextView textViewNamaBuku;
    private TextView textViewHargaBuku;
    private TextView textViewStatusBuku;

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_lihat_detail);

        //inisialisasi
        textViewIdBuku = (TextView) findViewById(R.id.txtIdBuku);
        textViewNamaBuku = (TextView) findViewById(R.id.txtNamaBuku);
        textViewHargaBuku = (TextView) findViewById(R.id.txtHargaBuku);
        textViewStatusBuku = (TextView) findViewById(R.id.txtStatusBuku);
        //mengambil intent
        Intent intent = getIntent();
        //Menampilkan nilai hasil parsing dari intent
        textViewIdBuku.setText("ID : "+String.valueOf(intent.getIntExtra(MainActivity.ID_BUKU,0)));
        textViewNamaBuku.setText("Nama : "+intent.getStringExtra(MainActivity.NAMA_BUKU));
        textViewHargaBuku.setText("Harga : Rp."+String.valueOf(intent.getIntExtra(MainActivity.HARGA_BUKU,0)));
        textViewStatusBuku.setText("Status : "+intent.getStringExtra(MainActivity.STATUS_BUKU));

    }
}

11. Buka kembali AndroidManifest,deklarasikan Activity LihatDetailBuku.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.teknorial.retrofit2listview">
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!-- deklarasi activity LihatDetailBuku -->
        <activity android:name=".LihatDetailBuku"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

            </application>

</manifest>

12. Run Aplikasi kita dan jika tidak ada error maka akan seperti screenshot berikut.

Jika salah satu item dari list disentuh maka akan masuk ke activity LihatDetailBuku seperti screenshot berikut.

Untuk melihat Log HTTP request bisa dilihat di logcat seperti screenshot berikut.

Demikian artikel Tutorial ListView dengan Sumber Data JSON. Jika masih bingung dengan tutorial ini mungkin Anda harus mengikuti tutorial https://teknorial.com/blog/tutorial-parsing-data-json-dengan-retrofit/. Ikuti terus teknorial.com untuk mengetahui banyak hal tentang pemrograman android. Jangan lupa untuk Like Fanspage Teknorial di Facebook dan Google Plus untuk mendapatkan update terbaru dari teknorial.com . Jika ada pertanyaan jangan ragu untuk bertanya dikotak komentar. Terima Kasih

Source code https://github.com/rflash95/Retrofit2Listview

Referensi
https://github.com/square/okhttp/tree/master/okhttp-logging-interceptor
https://futurestud.io/blog/retrofit-2-log-requests-and-responses
https://github.com/codepath/android_guides/wiki/Consuming-APIs-with-Retrofit

Tag

• Android
• json
• listview
• retrofit