Tutorial Integrasi Retrofit 2 dengan RecyclerView Android

Halo halo semua, pada artikel kali ini kita akan belajar Tutorial Integrasi Retrofit 2 dengan RecyclerView Android. Sebelumnya, kita mulai dengan pengertian dan fungsi dari retrofit dan recyclerview itu sendiri ya. Mungkin sebagian dari kalian yang membaca artikel kali ini sebelumnya sudah pernah menggunakan klien HTTP selain retrofit ini seperti HttpClient, Volley, FAN , dan lain – lain , dengan begitu akan lebih mudah bagi kalian untuk memahami cara kerja retrofit. Yuk, langsung aja ke pengertiannya.

Retrofit adalah sebuah Http Client yang bergunakan untuk melakukan pertukaran data dengan REST Server / REST API. Data yang didapat berbentuk JSON, kemudian retrofit menguraikan data json tersebut menjadi berbentuk Plain Old Java Objects (POJO) untuk get dan set datanya.

Kemudian, Recyclerview adalah layout container untuk menampung data – data yang berjumlah lebih besar dan lebih flexible dari ListView.

Keterangan lebih lanjutnya, bisa kalian simak di official documentation dari retrofit ya.

Setelah pengertian, langsung aja yuk ke tutorial integrasi retrofit dengan recyclerview android.

Pertama, Siapkan Projek Baru

Langkah pertama, buka android studio kalian kemudian buatlah sebuah projek Integrasi Retrofit dengan Recyclerview dengan nama projek sesuka kalian deh.

Kedua, Siapkan Dependencies dan Permission

Karena pada projek ini kita akan menggunakan Retrofit dan Recyclerview maka kita memerlukan beberapa dependencies pada projek kali ini.

Retrofit
GsonConverter
RecyclerView
Cardview

Tambahkan Kode berikut pada build.gradle untuk menambahkan dependencies di atas :

implementation "com.android.support:cardview-v7:26.1.0"
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.squareup.retrofit2:retrofit:2.3.0'
implementation 'com.squareup.retrofit2:converter-gson:2.3.0'

Kemudian Sync Now, untuk mengsinkronkan projek dengan gardle

Tentu saja kita perlu dependecy retrofit.

Kemudian, kita memerlukan GsonConverter untuk mengkonversi data berbentuk JSON menjadi Java Objects dan sebaliknya.

Dan juga, karena kita akan melakukan akses ke API Server maka kita memerlukan permission Internet.

Buka AndroidManifest.xml pada projek kalian kemudian tambahkan permission Internet

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

Sehingga akan terlihat seperti gambar di bawah ini,

Ketiga, Siapkan API

Langkah ketiga, siapkan API Kalian Masing – masing ya. Pada tutorial kali ini, API Response yang saya gunakan adalah seperti berikut :

{
"status":true,
"result":[
{
"noinduk":"1",
"nama":"Alfansyah",
"alamat":"Jalan Merdeka",
"hobi":"Bermain Bola"
},
{
"noinduk":"2",
"nama":"Wawan Aja",
"alamat":"Jalan Kebenaran",
"hobi":"Mancing"
},
{
"noinduk":"3",
"nama":"Bubun",
"alamat":"Jalan Istimewa",
"hobi":"Dagangan yang tidak bisa di download"
},
{
"noinduk":"4",
"nama":"Surya",
"alamat":"Jalan Palawan",
"hobi":"Membuat laporan keuangan yang tidak bisa di downlo"
}
]
}

Ke-empat, Buat Data Model

Langkah ke-empat, kita akan membuat 2 class sebagai data model untuk merepresentasikan data JSON yang didapat dari API.

DataSiswa.class

Buat sebuah class baru bernama Data Siswa, untuk merepresentasikan data-data seperti noinduk, nama, alamat, dan hobi.

public class DataSiswa {

@SerializedName("noinduk")
@Expose
private String noinduk;

@SerializedName("nama")
@Expose
private String nama;

@SerializedName("alamat")
@Expose
private String alamat;

@SerializedName("hobi")
@Expose
private String hobi;

public String getNoinduk() {
return noinduk;
}

public void setNoinduk(String noinduk) {
this.noinduk = noinduk;
}

public String getNama() {
return nama;
}

public void setNama(String nama) {
this.nama = nama;
}

public String getAlamat() {
return alamat;
}

public void setAlamat(String alamat) {
this.alamat = alamat;
}

public String getHobi() {
return hobi;
}

public void setHobi(String hobi) {
this.hobi = hobi;
}
}

Result.class

Kemudian, buat sebuah class baru lagi yang berfungsi untuk merepresentasikan data berbentuk ArrayList dari API server.

Perhatikan ! , karena class Result berisikan data – data (noinduk,nama,alamat,hobi) maka pada Call<T> kita akan mengekstends class DataSiswa.

public class Result {

@SerializedName("result")
ArrayList<DataSiswa> result;

public ArrayList<DataSiswa> getResult() {
return result;
}

public void setResult(ArrayList<DataSiswa> result) {
this.result = result;
}
}

Sampai sini, kita sudah mempunyai 3 class yaitu MainActivity, Datasiswa, dan Result.

Ke-lima, Buatlah Sebuah Interface

Retrofit memerlukan sebuah Interface class untuk mendefinisikan HTTP Operations ke API Server. Contohnya, di interface kita mendefiniskan jenis HTTP Operations yang kita lakukan ke Endpoint seperti Get, Post, Delete, Update, dan Lain – lain bisa kita definisikan disini,

Buatlah sebuah interface baru dengan cara New -> Java Class -> Kind -> Interface. Kemudian beri nama ApiService.

Isi sesuai endpoint dari Api Kalian dan juga sesuai dengan method Http Request pada API kalian.

public interface ApiService {

@GET("getData.php")
Call<Result> getSiswa();

}

Ke-enam, Buatlah Layout Main dan Layout Per Item.

Layout Main yaitu layout dari MainActivity yang akan berisikan sebuah RecyclerView. Sedangkan Layout Per Item adalah layout yang akan mengatur peletakan item – item (noinduk,nama,alamat,dan hobi) pada sebuah cardview nantinya.

Pada saat membuat layout preview tidak muncul? Liat cara mengatasinya yuk!

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/rv_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v7.widget.RecyclerView>

</android.support.constraint.ConstraintLayout>

list_item.xml

Buatlah sebuah android resource file baru pada layout, beri nama list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardElevation="5dp"
android:layout_margin="10dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:orientation="horizontal"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.5"
android:src="@drawable/ic_person"/>
<LinearLayout
android:layout_weight="4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/tv_noinduk"
android:text="1000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/tv_nama"
android:text="Alfan"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/tv_alamat"
android:text="Jalan"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/tv_hobi"
android:text="Futsal"/>
</LinearLayout>
</LinearLayout>

</android.support.v7.widget.CardView>

Ke-Tujuh, Buatlah Sebuah Adapter

Adapter bertujuan untuk menghubungkan Layout Main dengan Layout Per Item.

Data yang didapat dari API server akan diterima oleh adapter kemudian adapter akan mengatur peletakan setiap item tersebut.

Buatlah sebuah adapter baru, beri nama RVAdapter.

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.MyViewHolder> {

ArrayList<DataSiswa> result;
Context context;

public RVAdapter(Context context, ArrayList<DataSiswa> result) {
super();
this.result = result;
this.context = context;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View itemView = inflater.inflate(R.layout.list_item,parent,false);
return new MyViewHolder(itemView);
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.tv_noinduk.setText(result.get(position).getNoinduk());
holder.tv_nama.setText(result.get(position).getNama());
holder.tv_alamat.setText(result.get(position).getAlamat());
holder.tv_hobi.setText(result.get(position).getHobi());
}

@Override
public int getItemCount() {
return result.size();
}

class MyViewHolder extends RecyclerView.ViewHolder{

TextView tv_noinduk,tv_nama,tv_alamat,tv_hobi;

public MyViewHolder(View itemView) {
super(itemView);

tv_noinduk = itemView.findViewById(R.id.tv_noinduk);
tv_nama = itemView.findViewById(R.id.tv_nama);
tv_alamat = itemView.findViewById(R.id.tv_alamat);
tv_hobi = itemView.findViewById(R.id.tv_hobi);
}
}
}

Dapat kita lihat, pada adapter kita cukup mendefinisikan satu variabel ArrayList<DataSiswa> untuk menampung data array yang dikirim dari ActivityMain nantinya.

Ke-Delapan, Atur Recycler View dan Retrofit pada MainActivity

Langkah ke – delapan kita definisikan Recycler View dan layout manager pada MainActivity.java.

Layout manager digunakan untuk mengatur layout dari recycler view nantinya bisa Linear, Grid, dan lain – lain.

Kemudian, pada mainActivity.java kita juga akan membuat fungsi getDataSiswa() untuk melakukan proses pertukaran data dengan retrofitnya.

public class MainActivity extends AppCompatActivity {

RecyclerView rv_main;
public static final String BASE_URL = "http://192.168.168.11/api-funtechsy/";

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

rv_main = findViewById(R.id.rv_main);

RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false);
rv_main.setLayoutManager(layoutManager);
rv_main.setHasFixedSize(true);
getDataSiswa();

}

void getDataSiswa(){
Retrofit retrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
ApiService service = retrofit.create(ApiService.class);
Call<Result> getSiswa = service.getSiswa();
getSiswa.enqueue(new Callback<Result>() {
@Override
public void onResponse(Call<Result> call, Response<Result> response) {
RVAdapter adapter = new RVAdapter(MainActivity.this,response.body().getResult());
adapter.notifyDataSetChanged();
rv_main.setAdapter(adapter);
}

@Override
public void onFailure(Call<Result> call, Throwable t) {
t.printStackTrace();
}
});
}
}

Ke-Sembilan, Build dan Run

Setelah selesai semua, silahkan build projek anda kemudian Run pada emulator atau Smartphone kalian.

Jika berhasil, kalian akan melihat list Recycler View seperti gambar di bawah :

Gimana? apa punya kalian berhasil? Jika ada error, bisa jadi versi SDK yang kalian gunakan tidak sesuai dengan dependencies yang saya beri.

Sekian dulu deh tutorial integrasi retrofit dengan recycler view kali ini, semoga bermanfaat ya.

Kalau kalian merasa senang dengan artikel ini, jangan lupa tinggalkan komentar kalian ya.

Terima kasih.

Tutorial Integrasi Retrofit 2 dengan RecyclerView Android

Pertama, Siapkan Projek Baru

Kedua, Siapkan Dependencies dan Permission

Ketiga, Siapkan API