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;
public class Listbuku {
private Integer idbuku;
private String nama;
private Integer harga;
private String status;
private Map<String, Object> additionalProperties = new HashMap<String, Object>();
/**
*
* @return
* The idbuku
*/
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 {
public static final String ROOT_URL = "http://api.teknorial.com/";
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";
private ListView listview;
private List<Listbuku> books;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listview = (ListView) findViewById(R.id.listViewBuku);
getBuku();
listview.setOnItemClickListener(this);
}
private void getBuku() {
final ProgressDialog loading = ProgressDialog.show(this,"Fetching Data","Please Wait..",false,false);
HttpLoggingInterceptor logging = new HttpLoggingInterceptor();
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())
.client(httpClient.build())
.build();
RestAPI service = retrofit.create(RestAPI.class);
Call<Model> call = service.loadListBook();
call.enqueue(new Callback<Model>() {
@Override
public void onResponse(Call<Model> call, Response<Model> response) {
loading.dismiss();
List<Listbuku> buku = response.body().getListbuku();
books = buku;
showList();
}
@Override
public void onFailure(Call<Model> call, Throwable t) {
}
});
}
private void showList() {
String[] items = new String[books.size()];
for (int i = 0; i < books.size(); i++) {
items[i] = books.get(i).getNama();
}
ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.activity_listview, items);
listview.setAdapter(adapter);
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent intent = new Intent(this, LihatDetailBuku.class);
Listbuku listbuku = books.get(position);
intent.putExtra(ID_BUKU, listbuku.getIdbuku());
intent.putExtra(NAMA_BUKU, listbuku.getNama());
intent.putExtra(HARGA_BUKU, listbuku.getHarga());
intent.putExtra(STATUS_BUKU, listbuku.getStatus());
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 {
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);
textViewIdBuku = (TextView) findViewById(R.id.txtIdBuku);
textViewNamaBuku = (TextView) findViewById(R.id.txtNamaBuku);
textViewHargaBuku = (TextView) findViewById(R.id.txtHargaBuku);
textViewStatusBuku = (TextView) findViewById(R.id.txtStatusBuku);
Intent intent = getIntent();
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>
<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.
Unknown
Wednesday, September 6, 2017
Related Posts