FlexboxLayoutManager (RecyclerView) alignItems property not functional

[Derek Lee]

• I have searched existing issues and confirmed this is not a duplicate

Issues and steps to reproduce

First of all - thank you for providing this functionality for us to use! This fit my use case perfectly and has saved me from having to create a custom layout. (I found this from your slide deck online - thank you for sharing that!)

I am working with a RecyclerView and using the FlexboxLayoutManager to lay out the items. It may also be important to note that I'm using ConstraintLayout.

I'd like to use the alignItems property to center the views vertically in the available space, given the height of the RecyclerView as it is constrained.

It didn't seem to matter what value I set the alignItems property to, the RecyclerView would always display using FLEX_START.

Therefore I attempted to try this in the FlexboxLayout demo-playground project and I found that the same behavior exists there. Please see the following screen recording which illustrates that alignItems works properly with ViewGroup but not within a RecyclerView:

Expected behavior

Given that the README.md shows that the alignItems property should be working with RecyclerView, I expected the alignItems property to function with RecyclerView the same way it functions with a ViewGroup:

I wouldn't be surprised if there's something I should be doing that I'm not or if there's some kind of configuration that I have incorrect. I invested quite a bit of time looking into various aspects such as variations for parent and child views using match_parent vs wrap_content however I wasn't able to work around this issue. Maybe there is something else that needs to be done when using ConstraintLayout and FlexboxLayoutManager for alignItems to work properly? If this is the case it'd be great to update the demo playground and documentation to indicate what is needed.

Version of the flexbox library

com.google.android:flexbox:2.0.1

Link to code

This bug was recreated using the demo-playground project included in this repository.

[Derek Lee]

Some further research has led me to understand the following:

Even when using FlexboxLayout with a ViewGroup in the included demo-playground, alignItems does not work when the flex direction is set to ROW and there is more than one row.

[First Issue] - ViewGroup FlexDirection.ROW + Multiple Lines + AlignItems
The FlexboxHelper.layoutSingleChildHorizontal() method appears to be the place where alignItems is applied. It seems that the value of crossSize, which is provided by the current FlexLine, works with a single row by providing the value of the available height, but as soon as there are multiple rows it doesn't have that information to be able to calculate the top of a row when using AlignItems.CENTER.

[Second Issue] - RecyclerView + FlexDirection.ROW + Single or Multiple Lines + AlignItems
For the FlexboxLayoutManager, when calling FlexboxHelper.layoutSingleChildHorizontal(), the value of crossSize is set to the same value as the current view height which makes the topFromCrossAxis value become 0. This seems to be incorrect, but I need to dig in more to see where it's getting this value and what the value should be.

I think in order to fix this, the value of crossSize needs to be calculated properly for FlexboxLayoutManager - and then additionally, context on how many rows needs to be taken into consideration (maybe from mFlexLines?).

I'd be happy to try and dig into this a bit but I'm not very familiar with the code or the nuances that you might want me to be aware of, so please let me know if you'd be willing to spend some time to provide some support to me so I can ensure a solution that is aligned with your preferences. For example, since I don't have a lot of experience with Android development, wonder if there would need to be considerations around which layout is used (Linear, Relative. Constraint, etc) - I also saw a PR which indicated that there was an issue calculating the size of a view depending on some settings (match_parent, for example).

Thanks for your consideration!