Cara Menampilkan Data dari API ke RecyclerView Android Kotlin

Cara Menampilkan Data dari API ke RecyclerView Android Kotlin - Assalamualaikum, pada tutorial kali ini kita akan kembali mempelajari soal API pada pemrograman android. API atau Applicaiton Programming Interface bisa dibilang merupakan sebuah perantara antara aplikasi dengan database. Pada artikel ini, akan diajarkan cara menampilkan data tersebut ke dalam sebuah recycler view.

RecyclerView merupakan sebuah komponen view pada pemrograman android yang bisa diulang penggunaannya / penampilannya. RecylerView membutuhkan sebuah adapter untuk menjembatani data dengan view di android.

Mari kita ke tutorial nya.

Mempersiapkan API

Sebelumnya, kita perlu mempersiapkan API yang akan kita gunakan. Funtechsy sudah memberikan tutorial tentang cara membuat rest api menggunakan node js + mysql. Pada tutorial kali ini, kita akan menggunakan api tersebut. Silahkan dibaca dan dibuat dulu api nya ya.

Menginstall Dependency

Buka Build.Gradle kalian, tambahkan dependensi berikut di baris akhir.

//Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

//OkHttp
implementation 'com.squareup.okhttp3:logging-interceptor:4.9.2'

Membuat Layout

Kita perlu 2 layout antara lain layout untuk mainactivity dan layout untuk recycler view nya nanti.

Layout Main Activity

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
>

<androidx.appcompat.widget.Toolbar
android:id="@+id/tbMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/purple_500"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android Students"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:textColor="@color/white"
/>

</LinearLayout>

</androidx.appcompat.widget.Toolbar>

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="@layout/items_main"
>

</androidx.recyclerview.widget.RecyclerView>

</LinearLayout>

Layout Items ( Recycler View )

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.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:cardCornerRadius="7dp"
app:cardElevation="7dp"
android:id="@+id/cv_main"
android:layout_margin="10dp"
>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_margin="10dp"
android:weightSum="4"
>

<ImageView
android:id="@+id/iv_main"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="@drawable/ic_baseline_account_box_24"
/>

<LinearLayout
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
>

<TextView
android:id="@+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Alfansyah"
android:textSize="16sp"
/>

<TextView
android:id="@+id/tv_age"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="20 Tahun"
/>

<TextView
android:id="@+id/tv_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pria"
/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>

Membuat Model Data Class

Buat sebuah class baru bernama ResponseModel, class ini nantinya akan kita gunakan untuk deserialization dari response json dari API.

ResponseModel

package com.example.androidstudents

data class ResponseModel(
val status: Boolean,
val data: ArrayList<Students>,
val msg: String,
){
data class Students(
val id: Int,
val name: String,
val age: Int,
val gender: String,
)
}

Membuat Retrofit Service dan Retrofit Client

Buatlah sebuah class baru bertipe Interface beri nama RService

RService.kt

interface RService {

@GET("siswa")
fun getStudents(): Call<ResponseModel>

}

Kemudian buatlah sebuah class baru bertipe Object beri nama RClient

RClient

object RClient {
private const val BASE_URL = "http://10.0.2.2:3000/"
val rService: RService
get() {
val interceptor = HttpLoggingInterceptor()
interceptor.level = HttpLoggingInterceptor.Level.BODY
val client = OkHttpClient.Builder()
.addInterceptor(interceptor)
.build()
val retrofit = Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.client(client)
.build()
return retrofit.create( RService::class.java )
}
}

Membuat RecyclerView Adapter

Adapter berfungsi untuk menjembatani antara data dari MainActivity ke dalam Layout.

RVAdapter.kt

class RVAdapter(private val datas: ArrayList<ResponseModel.Students>, val ctx: Context):
RecyclerView.Adapter<RVAdapter.MyViewHolder>() {
class MyViewHolder(view: View): RecyclerView.ViewHolder(view){
val binding = ItemsMainBinding.bind(view)
val tvName = binding.tvName
val tvAge = binding.tvAge
val tvGender = binding.tvGender
val cvMain = binding.cvMain
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val itemView = LayoutInflater.from(parent.context).inflate(R.layout.items_main, parent, false)
return MyViewHolder(itemView)
}

override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.tvName.text = datas[position].name
holder.tvAge.text = datas[position].age.toString()
holder.tvGender.text = datas[position].gender
}

override fun getItemCount(): Int = datas.size

fun setData(data: ArrayList<ResponseModel.Students>){
datas.clear()
datas.addAll( data )
notifyDataSetChanged()
}
}

Membuat MainActivity

Di MainActivity, kita menginisiasikan class recycler view, class adapter, dan membuat fungsi dari retrofit client untuk mengambil data dari API. Selanjutnya, data response tersebut disalurkan ke adapter untuk ditempel ke dalam view layout.

MainActivity.kt

class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private lateinit var adapter: RVAdapter

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

adapter = RVAdapter(arrayListOf(), this@MainActivity)
binding.rvMain.layoutManager = LinearLayoutManager(this)
binding.rvMain.setHasFixedSize(true)
binding.rvMain.adapter = adapter
getStudents()
}

fun getStudents(){
RClient.rService.getStudents().enqueue(object : Callback<ResponseModel> {
override fun onResponse(call: Call<ResponseModel>, response: Response<ResponseModel>) {
if( response.isSuccessful ){
val data = response.body()
if( data != null ){
setData(data.data)
}
}
}

override fun onFailure(call: Call<ResponseModel>, t: Throwable) {
Log.d("Error Get", ""+t.stackTraceToString())
}
})
}

fun setData(data: ArrayList<ResponseModel.Students>){
adapter.setData( data )
}
}

Hasil Aplikasi

Selesai, kita sudah berhasil menampilkan data dari API Node JS ke dalam recyclerview di android kotlin menggunakan android studio.

Silahkan jika ada yang ingin ditanyakan atau kritik dan saran bisa disampaikan lewat kolom komentar ya, terimakasih sudah mengunjungi artikel ini. Sampai jumpa kembali.