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