[FIXED] How to create Instagram Explorer Layout?

Issue

I tried even using FlexboxLayout and Spanned to get the desired shape and it didn't work, please help (Kotlin) enter image description here

//////////////////////////////////////////////// and my code in adapter:

        binding.apply {
            Picasso.get().load(exploreList[position].exploreImageUrl).into(ivExplore)
            exploreRecyclerviewLayout.setOnClickListener {
                Toast.makeText(context, "itemNumber = $position", Toast.LENGTH_SHORT).show()
            }


            if (position ==1){
                exploreRecyclerviewLayout.layoutParams.height = (width/3)*2
                exploreRecyclerviewLayout.layoutParams.width = (width/3)*2
            } else if (position>1 && position%8 == 0) {
                exploreRecyclerviewLayout.layoutParams.height = (width/3)*2
                exploreRecyclerviewLayout.layoutParams.width = (width/3)*2
            } else {
                exploreRecyclerviewLayout.layoutParams.height = width/3
                exploreRecyclerviewLayout.layoutParams.width = width/3
            }

        }
    }
}

in Fragment:

   val exploreRvLayoutManager = FlexboxLayoutManager(requireContext()).apply {
        flexDirection = FlexDirection.ROW
        justifyContent = JustifyContent.FLEX_START
        flexWrap = FlexWrap.WRAP
    }

i need this enter image description here

Solution

• The correct solution was found *

I used the SpannedGridLayoutManager again. Doubles position 1 and positions divisible by 8 Positions 1, 8, 16 and...

val exploreRvLayoutManager=SpannedGridLayoutManager(orientation = SpannedGridLayoutManager.Orientation.VERTICAL,3)
    exploreRvLayoutManager.spanSizeLookup=
        SpannedGridLayoutManager.SpanSizeLookup {posittion ->
            if(posittion > 0&& posittion %8==0){
                doubledSizePosittion=posittion
            }
            when (posittion){
                1->SpanSize(2,2)
                doubledSizePosittion->SpanSize(2,2)
                else-> SpanSize(1,1)
            }
        }

enter image description here

Answered By - Masoud Mousavi

Answer Checked By - Candace Johnson (PHPFixing Volunteer)