RecycleView Kotlin Rest API – Penggunaan RecycleView Kotlin menggunakan Rest API sebagai datanya. Oke, kali ini saya akan share tutorial penggunaan RecycleView Kotlin dengan memanfaatkan Rest API dari newsapi.org
Tutorial yang akan saya jabarkan nanti menggunakan Kotlin sebagai bahasa pemrogramannya. Kenapa menggunakan Kotlin ? Menurut saya pribadi, penggunaan Kotlin sangatlah mempermudah proses coding.
Dibanding dengan JAVA, baris code Kotlin lebih simple dan lebih ringkas, terlebih lagi beberapa Extension dari Kotlin yang sangat membantu seperti : Parcelable, Android KTX, dan masih banyak lagi
Oke, langsung saja keintinya
Daftar Isi
Cara Buat RecycleView Kotlin Dengan Rest API
– Pertama, Buat Project baru Empty Activity dengan nama RecycleView RestAPI -> Language pilih Kotlin -> Minimum SDK API 21 -> Lalu klik Finish
– Kedua, tambahkan Extension dan Library berikut ke build.gradle (Module: app)
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
androidExtensions {
experimental = true
}
.
.
.
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.amitshekhar.android:android-networking:1.0.2'
catatan :
Kita menggunakan library ‘com.github.bumptech.glide:glide:4.9.0’ untuk menampilkan gambar dari URL dan ‘com.amitshekhar.android:android-networking:1.0.2’ untuk dapat mengakses REST API.
– Ketiga, tambahkan permission berikut ke AndroidManifest.xml untuk dapat mengakses internet
<uses-permission android:name="android.permission.INTERNET"/>
– Keempat, edit file activity_main.xml lalu tambahkan recycleview dan progressBar (optional), hasil akhirnya seperti berikut :
<?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"
android:orientation="vertical"
tools:context=".MainActivity">
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
– Kelima, buat layout baru untuk tampilan recycle view nya, dengan cara klik kanan layout -> New -> Layout Resource File -> Beri nama news_row_item -> OK.
Saya akan menampilkan 3 buah View, yaitu ImageView, dan 2 TextView. ImageView untuk menampilkan gambar, dan 2 TextView masing-masing untuk menampilkan Author dan Judul berita
Ubah news_row_item.xml seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/itemImageView"
android:layout_width="74dp"
android:layout_height="74dp"
android:layout_marginStart="16dp"
android:layout_marginTop="4dp"
android:contentDescription="gambar"
android:scaleType="centerCrop"
android:src="@drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/newsTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:paddingLeft="8dp"
android:lineSpacingExtra="4sp"
android:text="Deskripsi"
android:textAlignment="viewStart"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="@+id/itemImageView"
app:layout_constraintTop_toBottomOf="@+id/newsAuthor"
app:layout_constraintVertical_bias="0.279" />
<TextView
android:id="@+id/newsAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Judul"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toEndOf="@+id/itemImageView"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
– Keenam, buat kelas model untuk menampung datanya, caranya dengan Klik Kanan di Directory JAVA / Package Name kalian -> New -> Kotlin File/Class -> beri nama News dan pilih Class -> lalu enter
Tambahkan baris kode berikut ke file News.kt :
@Parcelize
data class News (
var title: String? = null,
var description: String? = null,
var photo: String? = null
) : Parcelable
– Ketujuh, buat adapter untuk RecycleView nya, caranya sama Klik Kanan di Directory JAVA / Package Name kalian -> New -> Kotlin File/Class -> beri nama NewsAdapter dan pilih Class -> lalu enter
Tambahkan baris kode berikut ke file NewsAdapter.kt :
class NewsAdapter : RecyclerView.Adapter<NewsAdapter.NewsViewHolder>() {
private val mData = ArrayList<News>()
private var onItemClickCallback: OnItemClickCallback? =null
fun setOnItemClickCallback(onItemClickCallback: OnItemClickCallback) {
this.onItemClickCallback = onItemClickCallback
}
fun setData(items: ArrayList<News>) {
mData.clear()
mData.addAll(items)
notifyDataSetChanged()
}
override fun onCreateViewHolder(viewGroup: ViewGroup, position: Int): NewsAdapter.NewsViewHolder {
val mView = LayoutInflater.from(viewGroup.context).inflate(R.layout.news_row_item, viewGroup, false)
return NewsViewHolder(mView)
}
override fun getItemCount(): Int = mData.size
override fun onBindViewHolder(newsViewHolder: NewsAdapter.NewsViewHolder, position: Int) {
newsViewHolder.bind(mData[position])
}
inner class NewsViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bind(news: News) {
with(itemView){
Glide.with(itemView.context)
.load(news.photo)
.apply(RequestOptions().override(55, 55))
.into(itemImageView)
newsAuthor.text = news.title
newsTitle.text = news.description
itemView.setOnClickListener { onItemClickCallback?.onItemClicked(news) }
}
}
}
interface OnItemClickCallback {
fun onItemClicked(data: News)
}
}
Dalam NewsAdapter.kt diatas sudah dimasukan juga kode untuk klik listener, dapat kalian lihat diartikel RecycleView Click Listener (Kotlin)
– Kedelapan, kita setting di MainActivity.kt, ada beberapa point penting untuk ditambahkan di MainActivity.kt. (Lihat komenan dibaris kode untuk lebih jelasnya.)
Tambahkan baris kode berikut ke file MainActivity.kt
class MainActivity : AppCompatActivity() {
//menambahkan Adapter RecycleView nya
private lateinit var adapter: NewsAdapter
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//deklarasikan adapter ke Activity
adapter = NewsAdapter()
//untuk memberitahukan adapter jika ada data yang berubah
adapter.notifyDataSetChanged()
//recycleView di activity_main.xml sudah dideklarasikan menggunakan kotlinx.android.synthetic
//setting layout recycleview ke LinearLayout
recycleView.layoutManager = LinearLayoutManager(this)
//menambahkan NewsAdapter sebagai adapter dari RecycleView
recycleView.adapter = adapter
//menampilkan progressBar
showLoading(true)
//untuk melakukan request REST API menggunakan library Fast Android Networking dan menambahkannya ke adapter
getNews()
}
private fun getNews() {
val listNews = ArrayList<News>()
val baseUrl = "http://newsapi.org/v2/top-headlines?country=id&category=technology&apiKey=YOURAPIKEY"
AndroidNetworking.get(baseUrl)
.setPriority(Priority.MEDIUM)
.build()
.getAsJSONObject(object : JSONObjectRequestListener{
override fun onResponse(response: JSONObject) {
Log.e("_kotlinResponse", response.toString())
val jsonArray = response.getJSONArray("articles")
for (i in 0 until jsonArray.length()) {
val jsonObject = jsonArray.getJSONObject(i)
val itemNews = News()
itemNews.title = jsonObject.getString("author")
itemNews.description = jsonObject.getString("description")
itemNews.photo = jsonObject.getString("urlToImage")
listNews.add(itemNews)
}
adapter.setData(listNews)
showLoading(false)
}
override fun onError(e: ANError) {
Log.d("Exception", e.message.toString())
}
})
}
private fun showLoading(state: Boolean) {
if (state) {
progressBar.visibility = View.VISIBLE
} else {
progressBar.visibility = View.GONE
}
}
}
Catatan :
- Ganti YOURAPIKEY dengan API kalian, caranya gampang cukup daftar aja di newsapi.org GRATIS
- Kalian harus pahami struktur dari REST API nya, itu akan menentukan request listener di library Android Fast Networking .
Disini saya menggunakan JSONObjectRequestListener karena struktur dari REST APInya memang dibuka menggunakan JSONObject, coba kalian lihat gambar berikut :
Terakhir
Coba Run Project kalian, kurang lebih hasilnya akan seperti berikut :
Baik, kita sudah belajar menampilkan data dari REST API menggunakan RecycleView di Kotlin, sejauh ini kalian dapat mengembangkannya sendiri dari segi tampilan maupun datanya
Untuk tutorial berikutnya, kita akan menambahkan ItemClickSupport pada RecyclerView untuk dapat menampilkan data yang kita klik
Sekian dulu tutorial tentang Penggunaan RecycleView Kotlin menggunakan Rest API, semoga bermanfaat. Untuk yang butuh source codenya dapat download dibawah ini. Untuk versi java kalian dapat lihat di RecycleView Dengan Rest API (Java)
Happy Coding !