RecycleView Click Listener (Kotlin)

RecycleView Click Listener – Sesuai janji, kali ini kita akan membahas tentang RecycleView Click Listener/RecycleView Item Click Listener, yang artinya recycleview yang kita buat dapat merespon ketika kita klik

Baik itu untuk menampilkan data dari recycleview ataupun mengirim data dari activity ke activity lain, atau activity ke fragment, atau fragment ke activity, atau juga dari fragment ke fragment

Intinya, recycleview yang kita buat akan merespon klik dari user, sebenarnya selain klik, recycleview juga dapat melakukan swipe, baik itu swipe to delete atau swipe to undo, atau yang lain

Tapi, kali ini kita akan fokus membahas tentang RecycleView Click Listener untuk kotlin

Oke, untuk mengikuti tutorial ini, pastikan kalian sudah membaca post sebelumnya tentang RecycleView Dengan Rest API (Kotlin) karena kita akan meneruskan project yang sudah kita buat sebelumnya

Silahkan buka project sebelumnya. Jika sudah kita lanjut untuk prakteknya

RecycleView Item Click Listener

Sekarang buka, file NewsAdapter.kt yang dari project sebelumnya, akan terlihat seperti ini

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)
    }
}

Jika kalian perhatikan baik-baik, dalam NewsAdapter.kt sudah mengimplementasi OnItemClickCallback, berarti recycleview yang kita buat sudahlah support click listener

Sekarang kita hanya perlu coba di MainActivity.kt tambahkan baris berikut :

        //SetOnclickListener RecycleView
        adapter.setOnItemClickCallback(object : NewsAdapter.OnItemClickCallback{
            override fun onItemClicked(data: News) {
                Toast.makeText(this@MainActivity, "Anda mengklik berita ${data.description}", Toast.LENGTH_SHORT).show()
            }
        })

Penjelasan

Kode diatas untuk menampilkan Toast dengan detail Judul Berita, jika kalian mau menampilkan data lain, ganti bagian ${data.description} dengan yang data lain

Jadi MainActivity.kt akan menjadi seperti ini :

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 ditambahkan 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()

        //SetOnclickListener RecycleView
        adapter.setOnItemClickCallback(object : NewsAdapter.OnItemClickCallback{
            override fun onItemClicked(data: News) {
                Toast.makeText(this@MainActivity, "Anda mengklik berita ${data.description}", Toast.LENGTH_SHORT).show()
            }
        })

    }

    private fun getNews() {
        val listNews = ArrayList<News>()
        val baseUrl = "http://newsapi.org/v2/top-headlines?country=id&category=technology&apiKey=fcdb0e6487884530a25fa24a08812e84"
        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
        }
    }
}

Kurang lebih tampilannya akan seperti ini :

Penutup

Nah, gimana ? Mudah bukan untuk dapat membuat recycleview yang kita buat dapat merespon apa yang kita klik, dan menampilkan data yang kita mau

Ditutorial selanjutnya, akan saya jabarkan tentang cara mengirim data tersebut ke activity lain dengan mudah

Sekian dulu tutorial tentang RecycleView Click Listener (Kotlin), semoga dapat bermanfaat. Untuk yang ingin source codenya dapat kalian download melalui link dibawah. Terima kasih