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