FlexboxLayoutManager with FlexboxItemDecoration cause item height incorrent

• 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

[kaustav07]

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

[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: