Android FlexboxLayoutManager recreating items

Question

I am using FlexboxLayoutManager to display Recycler View items with dynamic width. The problem I'm facing is when the background of the item is changed it reanimates/redraw all the next items which are not very attractive/required.

The following screenshot shows the use case. Whenever there are two/more items with different width in a single row, selecting/unselecting views is recreating the next neighbors.

My code for the this:

 val managerVal = FlexboxLayoutManager(context, FlexDirection.ROW)
// I have used these properties as well with other combinations showing here for reference
//            managerVal.alignItems = AlignItems.FLEX_START
//            managerVal.justifyContent = JustifyContent.CENTER
            itemView.rvFilterOptions.layoutManager = managerVal
val filterOptionAdapter = FilterOptionAdapter(
                context,
                record.values
            )
itemView.rvFilterOptions.adapter = filterOptionAdapter

I have also tried changing values in Adapter

val lp = itemView.llFilterValue.getLayoutParams()
            if (lp is FlexboxLayoutManager.LayoutParams) {
               lp.flexGrow = 1.0f
               flexboxLp.flexShrink = 1f
               lp.alignSelf = AlignItems.FLEX_START

            }

The code to change the background of the item in the adapter.

if (record.isSelected) {
                itemView.tvFilterValue.setTextColor(
                    AppCompatResources.getColorStateList(
                        context,
                        R.color.textWhite
                    )
                )
                itemView.ivFilterCheck.show()
                itemView.llFilterValue.background =
                    AppCompatResources.getDrawable(
                        context,
                        R.drawable.bg_dark_rectangle_circle_edge
                    )
            } else {
                itemView.tvFilterValue.setTextColor(
                    AppCompatResources.getColorStateList(
                        context,
                        R.color.textNormal
                    )
                )
                itemView.ivFilterCheck.invisible()
                itemView.llFilterValue.background =
                    AppCompatResources.getDrawable(
                        context,
                        R.drawable.bg_gray_rectangle_circle_edge
                    )
            }

A gif to show the behavior:

Thank you for your time.

Answer 1

So the fix ended up in my XML file.

Resoning: When you are using the flexbox with the flex-direction wrap you're allowing the flexbox library to handle the view sizes. Since my use case lies in nested recycler view one of my recycler view items was using match_parent property which was causing conflicts to adjust in view at the runtime (which caused confusion at library level).

The solution was to simply use wrap_content with flexbox to let the library take decisions for view measurements.