Tutorial Menggunakan RecyclerView dan Adapter di Kotlin-Merubah Tampilan RecyclerView | PART 3

 

PENDAHULUAN

    Jika anda membuka tutorial ini pastikan anda sudah membaca dan memahami Part 1 dan Part 2 yang telah dikupas sebelumnya. Materi ini merupakan kelanjutan dari ke 2 materi sebelum. Di materi ini kita akan mencoba merubah tampilan RecyclerView yang semula berbentuk List akan kita rubah ke dalam bentuk Grid. Metode ini nanti akan menggunakan Option Menu. Mari ikuti.

    Silahkan buka kembali projek "BUKU" yang telah di buat sebelumnya. Di projek tersebut kita telah membuat desain List Buku dengan menggunakan RecyclerView.

SETTING THEMA

    Android Studio versi terbaru sekarang 2023 telah menyediakan Option Menu. Namun opsi ini belum bisa berjalan. Kita perlu melakukan settingan pada file thema. Silahkan. File tersebut terletak pada root App=>res=>Values=>themes=>themes.xml. Silahkan buka file tersebut dan tambahkan baris berikut ini:

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Base.Theme.RecyclerView" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your light theme here. -->
<!-- <item name="colorPrimary">@color/my_light_primary</item> -->
</style>

<!-- Tambah untuk bar menu-->
<style name="Theme.RecyclerView" parent="Theme.AppCompat.Light.DarkActionBar"/>
</resources>

    Perhatikan pada halaman Desain Akan muncul Navbar BUKU. Jika navbar tidak muncul anda dapat klik ViewOption yang berbentuk icon mata kemudian aktifkan Show System UI. Perhatikan gambar di bawahnya:

    Nah. Jika langkah ini telah anda lakukan kita akan masuk ke tahap berikutnya.

MEMBUAT MENU

    Tahap selanjutnya adalah membuat option Menu. Android Studio telah menyediakan fitur untuk membuat opsi tersebut. anda dapat membuka root App=> Res. Klik kanan folder Res tersebut pilih New=>Android Resource Directory. Kemudian pada kotak dialog yang muncul pilih Resource Type = menu.

    Perhatikan pada root folder Res, terdapat tambahan satu folder bernama "menu". Klik kanan folder menut tersebut pilih New=>Menu Resource File.  Di kotak dialog isikan file name = menu_main. Langkah ini dilakukan untuk membuat file menu.

     Selanjutnya anda perhatikan pada folder menu sudah terdapat satu file dengan nama menu_main.xml. Kita akan menambahkan beberapa script seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_list"
android:title=" list"
app:showAsAction="never"/>
<item
android:id="@+id/action_grid"
android:title="grid"
app:showAsAction="never"/>
</menu>

    Terdapat 2 buah item menu yang akan kita buat dengan Action never, artinya menu akan ditampilkan dalam bentuk dropdown.

MENAMPILKAN OPTION

    Buka file MainActivity.kt. Disini kita akan membuat classa CreateOptionMenu. Jadi silahkan tambahkan script berikut ke dalam class MainActivity ( Paling bawah sebelum tanda } ).

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.menu_main, menu)
return super.onCreateOptionsMenu(menu)
}

    Sekarang anda jalankan program anda. Perhatikan pada bagian atas halaman terdapat tanda titik 3 bukan. Silahkan klik titik 3 tersebut. Akan muncul menu dropdown (list dan Grid menu). Namun jika menu ini di klik belum terjadi aksi. Jadi langkah kita selanjutnya adalah membuat aksi terhadap menu tersebut. Anda dapat tambahkan script berikut:

override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.action_list -> {
rvBuku.layoutManager = LinearLayoutManager(this)
}
R.id.action_grid -> {
rvBuku.layoutManager = GridLayoutManager(this, 2)
}
}
return super.onOptionsItemSelected(item)
}

Berikut script sempurnanya:

package com.example.recyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toolbar
import androidx.recyclerview.widget.GridLayoutManager
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
private lateinit var rvBuku: RecyclerView
private val list = ArrayList<DataItem>()

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
rvBuku = findViewById(R.id.rv_buku)
rvBuku.setHasFixedSize(true)
// val toolbar: Toolbar = findViewById(R.id.toolbar)
// setSupportActionBar(toolbar)

list.addAll(getListBuku())
showBuku()
}

private fun getListBuku():ArrayList<DataItem>{
val dataJudul = resources.getStringArray(R.array.data_judul)
val dataDeskripsi = resources.getStringArray(R.array.data_deskripsi)
val dataCover = resources.obtainTypedArray(R.array.data_cover)

val listBuku = ArrayList<DataItem>()

for (i in dataJudul.indices) {
val buku = DataItem(dataJudul[i],dataDeskripsi[i],dataCover.getResourceId(i, -1))
listBuku.add(buku)
}
return listBuku
}

private fun showBuku(){
rvBuku.layoutManager = LinearLayoutManager(this)
val listItem = ItemAdapter(list)
rvBuku.adapter = listItem
}

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.menu_main, menu)
return super.onCreateOptionsMenu(menu)
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.action_list -> {
rvBuku.layoutManager = LinearLayoutManager(this)
}
R.id.action_grid -> {
rvBuku.layoutManager = GridLayoutManager(this, 2)
}
}
return super.onOptionsItemSelected(item)
}

}

    Jalankan lagi projek anda dan coba pilih menu Grid lalu perhatikan perubahan pada halaman adroid anda: