FlexboxLayoutManager with FlexboxItemDecoration cause item height incorrent

[HolickABC]

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

Issues and steps to reproduce

Expected behavior

i expect the height of every items is the same, and has correct ItemDecoration

Version of the flexbox library

1.0.0

Link to code

• Result

• Step 1 set RecyclerView margin

<android.support.v7.widget.RecyclerView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="113dp"
            android:scrollbars="none"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:overScrollMode="never"/>

• Step 2 add two RecyclerView with FlexLayoutManager, ( And all of them using the same code, Only the datasources is diffrent )

• Step 3 add FlexboxItemDecoration for the two flexBoxRecyclerViews

private fun init() {
        if (layoutManager == null ) {
            val flexboxLayoutManager = FlexboxLayoutManager(context, FlexDirection.ROW)
            layoutManager = flexboxLayoutManager
            initDecoration()
            isNestedScrollingEnabled = false
        }
        overScrollMode = View.OVER_SCROLL_NEVER
        isHorizontalScrollBarEnabled = false
        isVerticalScrollBarEnabled = false
        adapter = mAdapter
    }

    private fun initDecoration() {
        val decoration = FlexboxItemDecoration(context)
        val drawable = GradientDrawable().apply {
            setSize(Utils.dp2px(context, 15f), Utils.dp2px(context, 15f))
        }
        decoration.setDrawable(drawable)
        decoration.setOrientation(FlexboxItemDecoration.BOTH)
        addItemDecoration(decoration)
    }

      the item layout for each

<com.xinpinget.xbox.widget.textview.AwesomeTextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:text='@{item.text}'
        android:textSize="12sp"
        android:paddingLeft="9dp"
        android:paddingRight="9dp"
        app:radius="4dp"
        android:maxWidth="122dp"
        android:singleLine="true"
        android:ellipsize="end"
        android:gravity="center_vertical"/>

Test by myself

  i exchange the datasource with the top and bottom, the bottom also be incorrent, and i dont think is my code bad....

Although solved by add margin for item, but i think add item decoration is the best way, hope your answer, thanks

[rexih]

have same problem .

previously i got the same problem. Time not enough so i give up this lib. https://github.com/google/flexbox-layout/issues/246

i use emulator and change its resolution, when the screen size is almost can contain one line's items like "item|margin|item|margin|item"(the last one without margin),the problem will happen

[eliotjohnson]

I am experiencing a similar issue as well. Seems related to #246 , but that was supposedly fixed.

I'm using my own drawable to achieve custom padding:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="8dp"
        android:height="12dp"/>
    <solid android:color="@android:color/transparent"/>
</shape>

and adding the decoration to my RecyclerView(s):

// Decoration for spacing between elements
val paddingDecoration = FlexboxItemDecoration(context)
paddingDecoration.setDrawable(resources.getDrawable(R.drawable.flex_divider))
filterSectionRecyclerView.addItemDecoration(paddingDecoration)

For certain content that comes very close to filling the entire row width, the wrapping is wrong:

If I adjust the padding slightly so it doesn't come as close to full row width, the wrapping works as expected:

[eliotjohnson]

@thagikura was this the behavior that was addressed by #294 ?

[thagikura]

No, this issue looks different from #294.

This looks same as #336. Unfortunately the issue is not fixed yet. I think using reflection is needed to fix it because it needs to modify the package private member of RecyclerView#ItemDecoration including the width and height of the decoration depending on whether the item is the first item in a row or not.

Let me see the solution using reflection at this moment.

[eliotjohnson]

Okay, thank you for the update.

As mentioned, using padding or margins on the cells themselves can be used as a workaround, which is what we are doing for the time being.

[ionull]

How is this going on? There is still the same issue on version 2.0.1

[vejei]

@ionull Using same version, but the issue still exists. And, I think the size of your drawable must be large enough, otherwise the issue occur.

Or abandon use the FlexboxItemDecoration, set padding or margin for item layout instead.

[rewgoes]

@ionull Using same version, but the issue still exists. And, I think the size of your drawable must be large enough, otherwise the issue occur.

Or abandon use the FlexboxItemDecoration, set padding or margin for item layout instead.

That is what I've done! I will use this lib to save time, but I will consider replacing this library in the future. Too many unexpected behaviours.

[kaustav07]

Any plan to fix this issue? it still exists in 2.0.1

[erleizh]

it still exists in 3.0.0