Kotlin Basic (3) : OnClick Action & Intent

Artikel ini adalah kelanjutan dari artikel Kotlin Basic: Activity dan artikel Kotlin Basic: RecyclerView.

Pada artikel sebelumnya, kita telah membuat Aplikasi Android menggunakan Bahasa Kotlin untuk menampilkan daftar (list) produk serta halaman detail produk. Selanjutnya, kita akan menambahkan aksi klik pada Button dan RecyclerView Item, serta aksi berpindah ke halaman lain.

Intent Move to Other Activity

Untuk menambahkan aksi klik pada Button kita perlu menambahkan onClick Listener. Sedangkan untuk berpindah dari satu halaman ke halaman lain, kita dapat menggunakan Intent.

Tambahkan baris kode berikut di MainActivity.kt agar Button Add Product dapat ditekan kemudian melakukan perpindahan dari halaman utama List Product ke halaman Detail Product.

class MainActivity : AppCompatActivity() {

    private var list: ArrayList<Products> = arrayListOf()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        showListProducts()
        setupAddProduct()
    }

    private fun showListProducts() {
        . . .
    }

    private fun setupAddProduct() {
        btnAddProduct.setOnClickListener {
            val detailIntent = Intent(this,   
                  DetailProductActivity::class.java)
            startActivity(detailIntent)
        }
    }
}

OnClick Action in List Item

Kita akan mengimplementasikan aksi klik di setiap Item pada List Product di halaman utama. Terlebih dahulu, kita perlu menambahkan Interface dan mengimplementasikan onItemClickCallback di kelas ListProductAdapter.kt.

class ListProductAdapter(val listProduct: ArrayList<Products>) :
    RecyclerView.Adapter<ListProductAdapter.ListProductViewHolder>() {

    private lateinit var onItemClickCallback: OnItemClickCallback

    fun setOnItemClickCallback(
        onItemClickCallback: OnItemClickCallback) {
            this.onItemClickCallback = onItemClickCallback
    }

    override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int)
       : ListProductAdapter.ListProductViewHolder {
         . . .
    }

    override fun getItemCount(): Int = listProduct.size

    override fun onBindViewHolder(holder:    
      ListProductAdapter.ListProductViewHolder, position: Int) {
        holder.bind(listProduct[position])
        holder.itemView.setOnClickListener() {
            onItemClickCallback
              .onItemClick(listProduct[holder.adapterPosition])
        }
    }

    class ListProductViewHolder(itemView: View) 
      : RecyclerView.ViewHolder(itemView) {
        . . .
    }

    interface OnItemClickCallback {
        fun onItemClick(data: Products)
    }
}

Hasil akhir dari ListProductAdapter.kt adalah sebagai berikut:

Selanjutnya, kita implementasikan onItemClick di kelas MainActivity.kt sebagai halaman utama yang menampilkan List Product. Kita tambahkan fungsi setListClickAction(), dan sedikit penyesuaian kode di fungsi lain.

class MainActivity : AppCompatActivity() {

    private var list: ArrayList<Products> = arrayListOf()

    private lateinit var listProductAdapter: ListProductAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        showListProducts()
        setupAddProduct()
        setListClickAction()
    }

    private fun showListProducts() {
        list.addAll(ProductsData.listProduct)
        listProductAdapter = ListProductAdapter(list)

        rvProducts.apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = listProductAdapter
            setHasFixedSize(true)
        }
    }

    private fun setupAddProduct() {
        . . .
    }

    private fun setListClickAction() {
        listProductAdapter.setOnItemClickCallback(
          object : ListProductAdapter.OnItemClickCallback {
            override fun onItemClick(data: Products) {
                Toast.makeText(this@MainActivity, 
                        "Anda memilih ${data.name}", 
                            Toast.LENGTH_SHORT).show()
            }
        })
    }
}

Intent Move to Other Activity with Data

Di awal tadi, kita telah menggunakan Intent untuk berpindah dari satu halaman ke halaman lain. Kali ini, kita akan menggunakan Intent untuk mengirim data ke halaman lain.

Kita akan menangkap data nama, harga, dan gambar suatu Item di List Product yang dikirimkan dari Main Activity ke Detail Product. Untuk itu, kita perlu menambahkan kode di kelas DetailProductActivity.kt

class DetailProductActivity : AppCompatActivity() {
    companion object {
        const val EXTRA_NAME = "extra_name"
        const val EXTRA_PRICE = "extra_price"
        const val EXTRA_IMAGE_URL = "extra_image_url"
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        . . .
    }
}

Data Item dari List Product yang di-klik akan dikirimkan ke halaman Detail Product untuk ditampilkan. Mari kita ubah fungsi setListClickAction() di dalam kelas MainActivity.kt sebagai berikut:

private fun setListClickAction() {
    listProductAdapter.setOnItemClickCallback(object 
      : ListProductAdapter.OnItemClickCallback {
        override fun onItemClick(data: Products) {
            val manageDetailIntent = Intent(this@MainActivity, 
                  DetailProductActivity::class.java).apply {
                     putExtra(DetailProductActivity.EXTRA_NAME,         
                             data.name)
                     putExtra(DetailProductActivity.EXTRA_PRICE,  
                             data.price.toString())
                     putExtra(DetailProductActivity.EXTRA_IMAGE_URL, 
                             data.image)
                }
            startActivity(manageDetailIntent)
        }
    })
}

Hasil akhir dari kelas MainActivity.kt adalah sebagai berikut:

Data yang ditangkap di halaman Detail Product kemudian kita tampilkan dengan menambah kode sebagai berikut:

class DetailProductActivity : AppCompatActivity() {

    ...

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_detail_product)

        showProductDetail()
    }

    private fun showProductDetail() {
        etProductNameDetail.setText(
                 intent.getStringExtra(EXTRA_NAME))
        etProductPriceDetail.setText(
                 intent.getStringExtra(EXTRA_PRICE))
        etProductImageDetail.setText(
                 intent.getStringExtra(EXTRA_IMAGE_URL))

        Glide.with(this)
            .load(intent.getStringExtra(EXTRA_IMAGE_URL))
            .into(imgProductDetail)
    }
}

Sehingga hasil akhir dari kelas DetailProductActivity.kt adalah sebagai berikut:

To Be Continued . . .

Artikel ini bersambung ke Kotlin Basic: API.