Search code examples
androidkotlininstagram

How to create Instagram Explorer Layout?


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