Tutorial Android : Membuat Recyclerview secara simple menggunakan Groupie
Setelah pada artikel-artikel sebelumnya kita belajar membuat recyclerview di android, kali ini saya akan membahas bagaimana cara membuat recyclerview lebih simple dan cepat, cepat disini maksudnya adalah proses membuatnya tidak lama, kenapa saya bilang lama ? karena untuk membuat sebuah recyclerview kita melalui beberapa tahapan sebagai berikut :
- membuat recyclerview
- membuat adapter
- membuat holder
- membuat layout item
Salah satu cara agar ketika membuat recyclerview lebih simple dan cepat adalah dengan menggunakan library, salah satunya adalah Groupie.
Groupie adalah library yang membantu kita untuk menghandle recyclerview yang kompleks, cara menggunakan library ini, langkah2nya adalah :
Menambahkan Dependency
tambahkan
implementation 'com.xwray:groupie:2.1.0'
selain itu groupie juga memiliki module untuk kotlin dan kotlin android extension, yang membuat kalian tidak akan perlu menulis ViewHolder lagi, cara setupnya tinggal tambahkan
implementation 'com.xwray:groupie-kotlin-android-extensions:2.1.0'
Deklarasi adapter
langkah pertama kita perlu mendeklarasi GroupAdapter, groupadapter ini sebenarnya adalah RecyclerView.Adapter yang langsung bisa kalian gunakan ke RecyclerView kalian
val groupAdapter = GroupAdapter<ViewHolder>()
recyclerview.adapter = groupadapter
Deklarasi Item
lalu selanjutnya buat class untuk assign value ke tiap itemnya
class HeroItem(private val hero: Hero) : Item() {
override fun bind(viewHolder: ViewHolder, position: Int) {
viewHolder.itemView.txtHeroName.text = hero.name
Picasso.get().load(hero.image).into(viewHolder.itemView.imgHeroes)
}
override fun getLayout(): Int = R.layout.item_hero
}
method getLayout ini adalah layout apa yang akan digunakan untuk tiap itemnya, lalu method bind ini adalah dimana kalian dapat meng-set value ke tiap-tiap itemnya
Set adapter ke Recyclerview
Selanjutnya adalah bagaimana menggunakan item ini ke recyclerview dan adapter yang sudah dideklarasi sebelumnya
class MainActivity : AppCompatActivity(), HeroListener {
// declare adapter from groupadapter
private var groupAdapter = GroupAdapter<ViewHolder>()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val listHeroes = listOf(
Hero(name = "Spider-Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/9/30/538cd33e15ab7/standard_xlarge.jpg"),
Hero(name = "Black Panther", image = "https://i.annihil.us/u/prod/marvel/i/mg/1/c0/537ba2bfd6bab/standard_xlarge.jpg"),
Hero(name = "Iron Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/a0/55b6a25e654e6/standard_xlarge.jpg"),
Hero(name = "Dead Pool", image = "https://i.annihil.us/u/prod/marvel/i/mg/5/c0/537ba730e05e0/standard_xlarge.jpg"),
Hero(name = "Captain Marvel", image = "https://i.annihil.us/u/prod/marvel/i/mg/c/10/537ba5ff07aa4/standard_xlarge.jpg"),
Hero(name = "Ant Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/90/54ad7297b0a59/standard_xlarge.jpg"),
Hero(name = "Spider-Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/9/30/538cd33e15ab7/standard_xlarge.jpg"),
Hero(name = "Black Panther", image = "https://i.annihil.us/u/prod/marvel/i/mg/1/c0/537ba2bfd6bab/standard_xlarge.jpg"),
Hero(name = "Iron Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/a0/55b6a25e654e6/standard_xlarge.jpg"),
Hero(name = "Dead Pool", image = "https://i.annihil.us/u/prod/marvel/i/mg/5/c0/537ba730e05e0/standard_xlarge.jpg"),
Hero(name = "Captain Marvel", image = "https://i.annihil.us/u/prod/marvel/i/mg/c/10/537ba5ff07aa4/standard_xlarge.jpg"),
Hero(name = "Ant Man", image = "https://i.annihil.us/u/prod/marvel/i/mg/6/90/54ad7297b0a59/standard_xlarge.jpg")
)
// inisiasi recyclerview layout manager dan adapter
rvMain.apply {
layoutManager = LinearLayoutManager(this@MainActivity)
adapter = groupAdapter
}
// looping hero
listHeroes.map {
// masukkan hero ke groupadater
groupAdapter.add(HeroItem(it))
}
}
override fun onHeroClick(hero: Hero) {
Toast.makeText(this, "hero clicked ${hero.name}", Toast.LENGTH_SHORT).show()
}
}
kode diatas adalah kode yang saya gunakan di artikel sebelumnya, kuncinya untuk memasukkan tiap item ke recyclerview adalah pada kode groupAdapter.add(HeroItem(it))
simple, cepat dan mudah untuk dicustom, misal kita memiliki multi view type, tinggal kita buatkan class item untuk view tersebut, contoh saya buat satu lagi class Item
class HeroSecondItem(private val hero: Hero) : Item() {
override fun bind(viewHolder: ViewHolder, position: Int) {
viewHolder.itemView.txtHeroName.text = hero.name
Picasso.get().load(hero.image).into(viewHolder.itemView.imgHeroes)
}
override fun getLayout(): Int = R.layout.item_hero_second
}
yang saya bedakan disini adalah layoutnya, untuk second item ini LinearLayout orientation saya ubah menjadi horizontal, hasilnya adalah
untuk item dengan nama awal āDā maka akan menggunakan item dengan layout orientation horizontal,
kode pada tutorial ini dapat diunduh di link-github
Leave a Comment