How to create a layout like instagram explore with flexboxlayoutmaanger in android?

Question

I am trying to create a recyclerview that shows images like instagram tab. I have checked this Implement Asymmetrical Grid Layout Manager Like Instagram Search question but it does not seem to do the work. I tried using gridlayoutmanager but I can't make it work. How to recreate it with google's FlexboxLayoutManager or a custom layout manager? Hope you'll answer. Regards.

Answer 1

You can use SpannedGridLayoutManager from Nick Butcher as layout manager for your RecyclerView.

Here how it looks like in action, i used it for creating the sample layout below.

Answer 2

This works for me so well SpannedGridLayoutManager.

  // Sample usage from your Activity/Fragment
  private fun setupSpannedGridLayout() {
        val manager = SpannedGridLayoutManager(
            object : GridSpanLookup {
                override fun getSpanInfo(position: Int): SpanInfo {
                    // Conditions for 2x2 items
                    return if (position % 6 == 0 || position % 6 == 4) {
                        SpanInfo(2, 2)
                    } else {
                        SpanInfo(1, 1)
                    }
                }
            },
            3,  // number of columns
            1f // how big is default item
        )
        recyclerView.layoutManager = manager
        adapter = GridAdapter(arrayListOf())
        recyclerView.adapter = adapter
    }

PS: i am using kotlin here :).

Answer 3

As per the above answer use SpannedGridLayoutManager. To show grids similar to instagram use below code

var spannedGridLayoutManager = SpannedGridLayoutManager(
        orientation = SpannedGridLayoutManager.Orientation.VERTICAL,
        spans = 3
    )
spannedGridLayoutManager.itemOrderIsStable = true
spannedGridLayoutManager.spanSizeLookup =
        SpannedGridLayoutManager.SpanSizeLookup { position ->

            var x = 0
            if (position % 9 == 0) {
                x = position / 9
            }
            when {
                position == 1 || x % 2 == 1 || (position - 1) % 18 == 0 ->
                    SpanSize(2, 2)
                else ->
                    SpanSize(1, 1)
            }

        }
    recyclerView.layoutManager = spannedGridLayoutManager
    recyclerview.adapter = searchGridAdapter
    

Answer 4

for the newest Instagram layout in 2022 you can 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)
            }
        }