Flexbox not respecting children margins

[schybo]

We're on 0.2.2. We had wanted a slight margin (4dp) in between items in the flexbox, as well as between the lines when the flexbox wrapped the items. However, after trying multiple variations of applying margin to the items in the flexbox it did not seem to comply. Is this possible? We resorted to using another FrameLayout around the LinearLayout for padding, but what wondering if this is a bug or just not supported functionality within flexbox?

For example here is the item we were using in the flexbox. It was not respecting the layout_marginBottom or layout_marginRight on the LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:cropToPadding="false"
       android:clipToPadding="false"
       android:clipChildren="false"
       android:layout_height="32dp"
       android:layout_width="wrap_content"
       android:layout_marginBottom="10dp"
       android:layout_marginRight="10dp">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_gravity="center_vertical"
        app:srcCompat="@drawable/ic_tag"
        android:tint="@color/bluey_grey"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingEnd="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingStart="8dp"
        android:textColor="@color/bluey_grey"
        android:textSize="14sp"
        tools:text="Conversations"/>

    <ImageView
        android:id="@+id/delete_icon"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        app:srcCompat="@drawable/ic_delete"/>

</LinearLayout>

[thagikura]

layout_marginTop and layout_marginBottom should be taken into account.

Could you also share the enclosing FlexboxLayout's xml and if possible, screenshot of the result (it will be more clear if you check "Show layout bounds" in the developer options)?

[thagikura]

Also it's not related to the issue, but I recommend removing the LinearLayout. Instead I recommend to make its children (TextView, ImageView) become direct children of the FlexboxLayout if possible. Because it reduces the nested view group, it will gain performance improvement.

If you set layout_wrapBefore to true for a child, the child will become the first item of a flex line (line wrapping is forced). So it can be treated as if a new line (new LinearLayout) is added.

[thagikura]

Hi, any updates on this one?

Is the issue still persistent?

[thagikura]

Please reopen it if the issue is still persistent.

[lukasz-gosiewski]

Hello. It seems to me that I encountered the same problem. I've got flexbox layout as a container and I'm adding TextViews to it. However, despite setting margins programmatically they won't appear in the layout. When switching to LinearLayout margins are working without problems. Is there any solution?

[liepang]

@lukasz-gosiewski @thagikura hi, i have the same issue too when i adding the button with margin programmatically, the margins wont appear in layout.

[barnaclejive]

I am having the same margin problem on programmatically generated child elements of FlexBoxLayout. I have opened a new issue #356

[AndriiBibik]

How about using couple of '...xml' layouts for your TextView with different margins -> And then just inflate appropriate '...xml' accordingly to situation? I'm just trying to implement...