recycleview with SpannedGridManager like Instagram Explore

pada umumnya penggunaan recycleview hanya bisa menampilkan list item dalam bentuk List, Grid, dan Staggered.

instagram views

lalu bagaimana jika kita ingin menampilkan nya dalam bentuk seperti instagram? yaitu tampilan dengan column dan ukuran item yang tidak beraturan.

setelah googling selama seharian penuh, akhirnya saya menemukan Layout Manager yang digunakan instagram untuk membuat tampilan seperti diatas, yaitu SpannedGridLayoutManager

Big thanks untuk NickButcher yang membuat layout manager yang dinamakan SpannedGridLayoutManager,

dan langsung saja berikut cara pengunaan staggered layout manager

Download this class SpannedGridLayoutManager

kemudian pada setup recyclerview tambahkan manager seperti berikut ini :

val manager = SpannedGridLayoutManager(object : SpannedGridLayoutManager.GridSpanLookup{
    override fun getSpanInfo(position: Int): SpannedGridLayoutManager.SpanInfo {
        // Conditions for 3x3 items
        return if (position % 12 == 0 || position % 12 == 7) {
            SpannedGridLayoutManager.SpanInfo(2, 2)
        } else {
            SpannedGridLayoutManager.SpanInfo(1, 1)
        }
    }

},3/*column*/,1f/*how big is default item*/)

binding.feedHome.setHasFixedSize(true)
binding.feedHome.layoutManager = manager
binding.feedHome.adapter = adapter

sehingga tampilan nya akan seperti ini :

        if (position % 12 == 0 || position % 12 == 7) {
            SpannedGridLayoutManager.SpanInfo(2, 2)
        } else {
            SpannedGridLayoutManager.SpanInfo(1, 1)
        }

dari penggalan condition diatas kita melihat bahwa kita membuat grid dalam 3 column dimana terdapat gambar dalam 2,2 pada position item yang di modular 12 == 0 atau position yang di modular 12 == 7

0 dan 7 adalah position dimana item akan dibuat besar, kamu bisa mengganti condition tersebut sesuai dengan keinginan, dengan cara menghitung pada item position berapa saja kamu ingin membuat item menjadi lebih besar.