Implement Asymmetrical Grid Layout Manager Like Instagram Search

Question

I Created a RecyclerView And Set layoutManager Of My Adapter To GridLayout . But I Want GridLayout Like Instagram Search below image,

I Want A GridView Like This :

Please Help Me . Thanks .

i tried SpanSizeLookup But i Have Still My Problem And i Cant Control My Items to laying out exactly that way . . .

You can use [StaggeredGridLayoutManager](https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager) — AskNilesh, Jun 20 '19 at 07:26
You can use [StaggeredGridLayoutManager](https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager) or [FlexboxLayoutManager within RecyclerView](https://github.com/google/flexbox-layout#flexboxlayoutmanager-within-recyclerview) — AskNilesh, Jun 20 '19 at 07:35
But In StaggeredGridLayoutManager We Cannot Lookup The Span Size ! How Can I Determine this Row Has 2 spans and another has 3 Span ?! — Mohammad Ommi, Jun 20 '19 at 08:41

score 1 · Answer 1 · answered Aug 07 '19 at 07:29

please take a look this answer

and for show Your list in Span

val manager = SpannedGridLayoutManager(object : SpannedGridLayoutManager.GridSpanLookup{
        override fun getSpanInfo(position: Int): SpannedGridLayoutManager.SpanInfo {
            // Conditions for 2x2 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

and this image help you how to calculate item in show big image

SpannedGridLayoutManager not working. Help me please – Sep 27 '21 at 05:51 — , Sep 27 '21 at 05:51

score 0 · Answer 2 · answered Apr 12 '22 at 07:15

For the newest instagram layout in 2022, try this:

layoutManager.spanSizeLookup = IGLayoutManager.SpanSizeLookup { position ->

            // 0  1  2
            // s  s  b
            // 3  4  5  6  7  8  9  10 11
            // s  s  s  s  s  s  s  s  b
            // 12 13 14 15 16 17 18 19 20 21 22 23 24
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 25 26 27 28 29 30 31 32 33
            // s  s  s  s  s  s  s  s  b
            // 34 35 36 37 38 39 40 41 42 43 44 45 46
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 47 48 49 50 51 52 53 54 55
            // s  s  s  s  s  s  s  s  b
            // 56 57 58 59 60 61 62 63 64 65 66 67 68
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 69 70 71 72 73 74 75 76 77
            // s  s  s  s  s  s  s  s  b
            // 78 79 80 81 82 83 84 85 86 87 88 89 90
            // s  s  s  s  s  s  s  s  s  s  s  s  b
            // 91 92 93 94 95 96 97 98 99
            // s  s  s  s  s  s  s  s  b
            // 100 101 102 103 104 105 106 107 108 109 110 111 112
            // s   s   s   s   s   s   s   s   s   s   s   s   b
            // 113 114 115 116 117 118 119 120 121
            // s   s   s   s   s   s   s   s   b

            if (position < 2) {
//                ILog.debug("???", "$position is small")
                bigItemFlag = 0
                SpanSize(1, 1)
            }
            else if (position == 2) {
//                ILog.debug("???", "$position is big")
                bigItemFlag = 11
                SpanSize(1, 2)
            }
            else if (position % 11 == 0 && position == bigItemFlag) {
                bigItemFlag += 13
//                ILog.debug("???", "$position is big, $position mod 11 is ${position % 11}")
                SpanSize(1, 2)
            }
            else if (position % 11 == 2 && position == bigItemFlag) {
                bigItemFlag += 9
//                ILog.debug("???", "$position is big, $position mod 11 is ${position % 11}")
                SpanSize(1, 2)
            }
            else {
//                ILog.debug("???", "$position is small")
                SpanSize(1, 1)
            }
        }

Implement Asymmetrical Grid Layout Manager Like Instagram Search

2 Answers2

Linked