Contoh Sederhana Recyclerview Retrofit – Untuk tutorial android kali ini, kita akan mencoba mengimplementasikan contoh sederhana menampilkan data dengan recyclerview dan menggunakan retrofit sebagai REST client HTTP. Setelah sebelumnya kita telah berhasil membuat fungsi untuk login dan logout user (https://soft-gain.com/2020/06/19/cara-membuat-aplikasi-android-rest-api-menggunakan-retrofit/), sekarang kita akan coba menampilkan data pada Recyclerview dengan memanfaatkan retrofit sebagai REST client HTTP. Tanpa berlama-lama lagi langsung saja kita masuk pada pembahasan Contoh Sederhana Recyclerview CardView.
Recyclerview sendiri sebenarnya adalah sebuah dependencies yang digunakan untuk menampilkan data dalam bentuk list, biasanya dikombinasikan dengan cardview sebagai pembungkus atau frame layout masing-masing data. Dikarenakan kita akan menggunakan dua
dependencies ini, silahkan tambahkan dua library ini pada file build.gradle :
implementation 'com.android.support:recyclerview-v7:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'Berikutnya kita akan membuat model, untuk pembuatan model saya menggunakan website ini (http://www.jsonschema2pojo.org/) yang membantu saya memudahkan untuk men-convert hasil json string saya ke dalam java class, caranya sangat mudah tinggal paste-kan saja string json kita kedalam text area sebelah kiri lalu tekan preview, kurang lebih seperti ini :
Kita tinggal copy paste saja hasil preview diatas ke dalam class java kita, atau bisa jika klik tombol zip untuk download java class kita dalam dalam bentuk file.
Berikutnya buatlah 4 buah model seperti gambar dibawah ini (yang mana hasil java class dari website jsonschema2pojo akan kita taruh dalam model ini) :
Pertama didalam model barang kita memiliki fungsi getSuccess yang yang akan kita gunakan untuk mengambil object success dari json response yang kita terima :
package com.soft_gain.myinventory.Model.Barang;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class Barang {
@SerializedName("success")
@Expose
private Success success;
public Success getSuccess() {
return success;
}
public void setSuccess(Success success) {
this.success = success;
}
}Lalu didalam model success, kita memiliki fungsi getData yang kita gunakan untuk mengambil object data dalam bentuk list :
package com.soft_gain.myinventory.Model.Barang;
import java.util.List;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class Success {
@SerializedName("data")
@Expose
private List<Datum> data = null;
public List<Datum> getData() {
return data;
}
public void setData(List<Datum> data) {
this.data = data;
}
}Lalu didalam model datum atau model data, kita men-serialisasi-kan satu persatu attribute kedalam object java :
package com.soft_gain.myinventory.Model.Barang;
import com.google.gson.annotations.Expose;
import com.google.gson.annotations.SerializedName;
public class Datum {
@SerializedName("id")
@Expose
private String id;
@SerializedName("nama_barang")
@Expose
private String namaBarang;
@SerializedName("jumlah_barang")
@Expose
private Integer jumlahBarang;
@SerializedName("keterangan")
@Expose
private Object keterangan;
@SerializedName("created_at")
@Expose
private String createdAt;
@SerializedName("updated_at")
@Expose
private String updatedAt;
@SerializedName("updated_by")
@Expose
private Integer updatedBy;
@SerializedName("get_updated_by")
@Expose
private GetUpdatedBy getUpdatedBy;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getNamaBarang() {
return namaBarang;
}
public void setNamaBarang(String namaBarang) {
this.namaBarang = namaBarang;
}
public Integer getJumlahBarang() {
return jumlahBarang;
}
public void setJumlahBarang(Integer jumlahBarang) {
this.jumlahBarang = jumlahBarang;
}
public Object getKeterangan() {
return keterangan;
}
public void setKeterangan(Object keterangan) {
this.keterangan = keterangan;
}
public String getCreatedAt() {
return createdAt;
}
public void setCreatedAt(String createdAt) {
this.createdAt = createdAt;
}
public String getUpdatedAt() {
return updatedAt;
}
public void setUpdatedAt(String updatedAt) {
this.updatedAt = updatedAt;
}
public Integer getUpdatedBy() {
return updatedBy;
}
public void setUpdatedBy(Integer updatedBy) {
this.updatedBy = updatedBy;
}
public GetUpdatedBy getGetUpdatedBy() {
return getUpdatedBy;
}
public void setGetUpdatedBy(GetUpdatedBy getUpdatedBy) {
this.getUpdatedBy = getUpdatedBy;
}
}Untuk model getUpdatedBy sementara ini tidak dipakai jadi kita skip saja. Berikutnya buka file Interface.java dan tambahkan code berikut ini sebagai end point api kita :
@POST("barang")
Call<Barang> postBarang(@Header("Authorization") String Authorization);Perlu diperhatikan diatas, dimana kita memanggil model barang.java pada end point postBarang (dibagian ini : Call<Barang>), end point postBarang ini lah yang akan kita panggil pada bagian antar muka nantinya. Berikutnya kita akan menambahkan file BarangAdapter yang akan kita gunakan untuk data binding dengan RecyclerView :
package com.soft_gain.myinventory.Barang;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.soft_gain.myinventory.Barang.BarangFragmentList;
import com.soft_gain.myinventory.Model.Barang.Datum;
import com.soft_gain.myinventory.R;
import java.util.List;
public class BarangAdapter extends RecyclerView.Adapter<BarangAdapter.CustomViewHolder>{
private List<Datum> dataList;
private Context context;
public BarangAdapter(List<Datum> dataList){
this.dataList = dataList;
}
public BarangAdapter(BarangFragmentList connectFragment, List<Datum> dataList) {}
class CustomViewHolder extends RecyclerView.ViewHolder {
public final View mView;
TextView txtTitle;
CustomViewHolder(View itemView) {
super(itemView);
mView = itemView;
txtTitle = mView.findViewById(R.id.title);
}
}
@Override
public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
View view = layoutInflater.inflate(R.layout.adapter, parent, false);
return new CustomViewHolder(view);
}
@Override
public void onBindViewHolder(CustomViewHolder holder, int position) {
holder.txtTitle.setText(dataList.get(position).getNamaBarang());
}
@Override
public int getItemCount() {
return dataList.size();
}
}Perlu diperhatikan pada BarangAdapter diatas, dimana kita memanggil model Datum atau model data sebagai list yang mana model inilah yang akan kita inisiasi-kan kedalam recyclerview nantinya. Lalu berikutnya kita akan membuat fragment sebagai implementasi antar muka yang akan kita gunakan untuk menampilkan list data pada user. Tambahkan file BarangFragmentList.java dan isinya kurang lebih seperti ini :
package com.soft_gain.myinventory.Barang;
import android.app.ProgressDialog;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;
import com.soft_gain.myinventory.Api.Client;
import com.soft_gain.myinventory.Api.Interface;
import com.soft_gain.myinventory.Barang.BarangAdapter;
import com.soft_gain.myinventory.Model.Barang.Barang;
import com.soft_gain.myinventory.R;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
public class BarangFragmentList extends Fragment {
ProgressDialog progressDoalog;
SharedPreferences myPrefs;
public BarangFragmentList() {}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
final View rootView = inflater.inflate(R.layout.fragment_barang_list, container, false);
RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
progressDoalog = new ProgressDialog(getActivity());
progressDoalog.setMessage("Loading....");
progressDoalog.show();
myPrefs = getActivity().getSharedPreferences("sg_shared_pref", getActivity().MODE_PRIVATE);
String token = myPrefs.getString("token", "");
Interface service = Client.getClient().create(Interface.class);
Call<Barang> call = service.postBarang("Bearer "+token);
call.enqueue(new Callback<Barang>() {
@Override
public void onResponse(Call<Barang> call, Response<Barang> response) {
/*Log.v("log softgain : ", String.valueOf(response.body().getSuccess().getData().get(0).getNamaBarang()));*/
progressDoalog.dismiss();
RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
BarangAdapter mAdapter = new BarangAdapter(response.body().getSuccess().getData());
recyclerView.setAdapter(mAdapter);
recyclerView.setItemAnimator(new DefaultItemAnimator());
}
@Override
public void onFailure(Call<Barang> call, Throwable t) {
/*Log.v("log softgain : ", String.valueOf(t));*/
progressDoalog.dismiss();
Toast.makeText(getActivity(), "Something went wrong...Please try later!", Toast.LENGTH_SHORT).show();
}
});
return rootView;
}
}Perhatikan pada fragment diatas, dimana kita memanggil end point postBarang yang sudah kita buat sebelumnya, perlu diperhatikan juga dimana model yang kita jadikan acuan untuk inisiasi data adalah model barang (model ini harus disesuaikan dengan model yang kita deklarasikan pada end point di interface). Barulah pada bagian onResponse, kita men-inisiasi-kan getData (pada bagian ini : BarangAdapter mAdapter = new BarangAdapter(response.body().getSuccess().getData())) kedalam barangAdapter (yang mana sudah kita sesuaikan dalam BarangAdapter.java yang juga didalamnya kita inisiasi-kan model Datum atau model data), sehingga attribute yang ada dalam model datum atau model data dapat kita inisiasi-kan kedalam recyclerview. Lalu berikutnya tambahkan class BarangFragmentList pada MainActivity.java dibagian method selectItem (disini kita menggunakan side navigation menu yang akan kita bahas pada artikel berbeda). Berikutnya tambahkan layout fragment_barang_list.xml, di file ini kita akan menggunakan RecyclerView :
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>Terakhir kita akan tambahkan layout adapter.xml, yang mana pada file inilah kita akan menggunakan CardView :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view_friend"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardUseCompatPadding="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/title"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:paddingTop="20dp"
android:lines="2"
android:text="title" />
</RelativeLayout>
</android.support.v7.widget.CardView>Berikut ini adalah contoh hasil dari apa yang sudah kita buat diatas :
Demikian contoh sederhana dari implementasi recyclerview dan cardview menggunakan retrofit sebagai REST client HTTP, untuk full source-nya bisa diambil di repo saya (https://github.com/ImmanuelJL/myinventory.git), terima kasih.
