AndroidKotlinTutorial

RecycleView Dengan Rest API (Kotlin)

GubugCoding.com – Penggunaan RecycleView menggunakan Rest API sebagai datanya. Oke, kali ini saya akan share tutorial penggunaan RecycleView 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

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 :

  1. Ganti YOURAPIKEY dengan API kalian, caranya gampang cukup daftar aja di newsapi.org GRATIS
  2. 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 :
Perbedaan JSONObject dan JSONArray
Perbedaan JSONObject dan JSONArray

Terakhir

Coba Run Project kalian, kurang lebih hasilnya akan seperti berikut :

recycleview Kotlin REST API
recycleview Kotlin REST API

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 menggunakan Rest API di Kotlin, 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 !

Related Articles

Leave a Reply

Back to top button
Close

Adblock Detected

Tolong Matikan AdBlock dulu Gan :)