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.
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.