flexbox-layout: FlexboxLayoutManager did not display all items in NestedScrollView (item not displayed is hidden)

I’ve looked into this and the issue seems to come from lines 620 - 629 in FlexboxHelper.

Commenting out this block does the trick :

if (sumCrossSize > needsCalcAmount && reachedToIndex) {
    // Stop the calculation if the sum of cross size calculated reached to the point
    // beyond the needsCalcAmount value to avoid unneeded calculation in a
    // RecyclerView.
    // To be precise, the decoration length may be added to the sumCrossSize,
    // but we omit adding the decoration length because even without the decorator
    // length, it's guaranteed that calculation is done at least beyond the
    // needsCalcAmount
    break;
}

I haven’t had the time to understand what this is supposed to optimize.

Hope this helps to solve the issue

still exist in 3.0.0, fix the issue please!!! upset!!

It’s been 2 years guys can we please find a solution to this. I am also having the same issue.

v1.0.0, Is there a solution to this issue? the same problem I encountered?

I still have this issue with v1.0.0. Either items are not showing with setNestedScrolingEnabled(false), or the RecyclerView scrolls on its own with setNestedScrolingEnabled(true) (see @syde0 's gif).

A workaround may be to replace the RecyclerView with a simple FlexboxLayout and manually addView to it, but it’s not really ideal.

Found solution.

I had to redo the screen without using pattern: NestedScrollView + RecyclerView (with setNestedScrolingEnabled(false)). Rebuild screen with only RecyclerView and complicated RecyclerView.Adapter. And all bottom items now are shown.

This way is more hard then just use NestedScrollView. But it works and now I think it’s more correct, because now items inside RecyclerView may be recycled.

Also I had problems with NestedScrollView and plenty count of items inside RecyclerView. Scroll was very slow and laggy. Rebuild screen with complicated adapter also helps.

The code:

This is a set of LayoutManager in code:

    genreRecycler?.layoutManager = FlexboxLayoutManager(this).apply {
        flexDirection = FlexDirection.ROW
        justifyContent = JustifyContent.CENTER
    }

This is a screen RecyclerView.Adapter:

class IntroGenreAdapter(
    private val callback: Callback
) : ParentAdapter<IntroGenreItem, RecyclerView.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = when (viewType) {
        Type.HEADER -> IntroSimpleHolder(parent.inflate(R.layout.item_intro_genre_header))
        Type.FOOTER -> IntroSimpleHolder(parent.inflate(R.layout.item_intro_footer))
        else -> IntroGenreHolder(parent.inflate(R.layout.item_intro_genre))
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val item = list.getOrNull(position) ?: return

        if (item !is IntroGenreItem.Item || holder !is IntroGenreHolder) return

        holder.bind(item) { callback.onGenreClicked() }
    }

    override fun onViewRecycled(holder: RecyclerView.ViewHolder) {
        (holder as? IntroGenreHolder)?.unbind()
    }

    override fun getItemViewType(position: Int): Int = when (list[position]) {
        is IntroGenreItem.Header -> Type.HEADER
        is IntroGenreItem.Item -> Type.ITEM
       is IntroGenreItem.Footer -> Type.FOOTER
    }

    @IntDef(Type.HEADER, Type.ITEM, Type.FOOTER)
    private annotation class Type {
        companion object {
            const val HEADER = 0
            const val ITEM = 1
            const val FOOTER = 2
        }
    }

    interface Callback {
        fun onGenreClicked()
    }
}

Inside layouts of Header and Footer set for parent ViewGroup: android:layout_width="match_parent".

• It will make them full screen width.

And inside layout of Item set for parent ViewGroup: android:layout_width="wrap_content".

• It allow LayoutManager wrap them in row.

@syde0 @thagikura any solution for this issue? it’s still stuck from 2 years ago

Any updates on this?

It’s already 2023, and the problem still exists… There are only 2 options for me: copy the Flexbox library and remove the following code from the FlexboxHelper

if (sumCrossSize > needsCalcAmount && reachedToIndex) {
    // Stop the calculation if the sum of cross size calculated reached to the point
    // beyond the needsCalcAmount value to avoid unneeded calculation in a
    // RecyclerView.
    // To be precise, the decoration length may be added to the sumCrossSize,
    // but we omit adding the decoration length because even without the decorator
    // length, it's guaranteed that calculation is done at least beyond the
    // needsCalcAmount
    break;
}

or to completely rewrite my project, to get rid of NestedScrollView.

It’s very sad, that Google doesn’t maintain its own libraries

I have had the same problem. This issue reproducible when you put recycler view with FlexboxLayoutManager inside another recycler view. And FlexboxLayoutManager must have FlexDirection.ROW parameter. It cut my items after N row. Same problem in landscape mode too. If this issue can’t be solved, maybe someone can give a tip what combination of layout can reproduce (FlexBoxLayoutManager with a ROW) behaviour.

I’ve looked into this and the issue seems to come from lines 620 - 629 in FlexboxHelper.

Commenting out this block does the trick :

if (sumCrossSize > needsCalcAmount && reachedToIndex) {
    // Stop the calculation if the sum of cross size calculated reached to the point
    // beyond the needsCalcAmount value to avoid unneeded calculation in a
    // RecyclerView.
    // To be precise, the decoration length may be added to the sumCrossSize,
    // but we omit adding the decoration length because even without the decorator
    // length, it's guaranteed that calculation is done at least beyond the
    // needsCalcAmount
    break;
}

I haven’t had the time to understand what this is supposed to optimize.

Hope this helps to solve the issue

I confirm that the removal of the lines fix all my problems !