Skip to content

FlexboxLayout children not visible when width is unconstrained (such as within a horizontal recycler view) #589

@OlivierGenez

Description

@OlivierGenez

Issues and steps to reproduce

When FlexboxLayout's' width is unconstrained (i.e. the width MeasureSpec mode is UNSPECIFIED), its children views are not measured/laid out correctly, resulting in them being not visible.

This is relatively easy to replicate:

  • Create a simple layout with a single horizontal RecyclerView
  • Add one item to the RecyclerView, whose view is a FlexboxLayout such that:
    • its width and height are both set to wrap_content
    • it contains a TextView with arbitrary text in it
  • Run the app and observe that the text is not visible

Expected behavior

The FlexboxLayout child TextView should be visible (i.e. allowed to be the width it wants).

Version of the flexbox library

  • 2.0.1 and up

Notes

It seems the issue was introduced by this change: https://github.com/google/flexbox-layout/pull/521/files.

Looking at the current version of the corresponding code:

if (widthMode == View.MeasureSpec.EXACTLY) {
    mainSize = widthSize;
} else {
    mainSize = Math.min(largestMainSize, widthSize);
}

it seems to me that mainSize = Math.min(largestMainSize, widthSize); should only apply when widthMode == View.MeasureSpec.AT_MOST, but I might be missing something. I believe the logic should be instead:

if (widthMode == View.MeasureSpec.EXACTLY) {
    mainSize = widthSize;
} else if (widthMode == View.MeasureSpec.AT_MOST) {
    mainSize = Math.min(largestMainSize, widthSize);
} else {
    mainSize = largestMainSize;
}

I've tested this change on a local branch and it behaves as expected. If that seems right to you I'm happy to open a PR with this change + tests.

In the current state, having mainSize set to widthSize will cause the flex shrink logic to be applied, which will force the children sizes to be something else than the width they want to/should be. Note that disabling flex shrink result in the expected behaviour and is a temporary workaround.

Link to code

Here is a link to as simple project which demonstrates the issue: https://github.com/OlivierGenez/flexbox-layout-unconstrained-width-bug.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions