separator line about flexbox-layout HOT 15 CLOSED

Starting from 0.2.3, dividers are supported between (or the beginning of or the end of) flex lines (or flex items).

You can put any drawable as a divider.
Is that what you are talking about?

from flexbox-layout.

I will try this and update here... Thanks.

from flexbox-layout.

You can see the example in the README around the showDivider section.

Please reopen the issue if it's different from what you mentioned.

from flexbox-layout.

I have checked this feature and it does fulfil my needs but there is one issue. It put empty divider line to fill the remaining space. Is it possible to limit this extended line upto the last flex item only?

from flexbox-layout.

Is it possible to post the screenshot and the xml?
I'd like to know if it's an intended behavior or an issue.

from flexbox-layout.

see the green lines from the readme example which is extending after the flex items on right side.

Here is the screenshot of my working RTL direction app. See the last line in which black line is extending the last item on left side.

from flexbox-layout.

Extended divider is also the way how dividers in LinearLayout works so actually that is an intended behavior.

If you want not to extend it, how about adding a background drawable like this?

from flexbox-layout.

I am using justifyContent with space_between for flexbox. I have tried using background drawable with LinearLayout but the result put gaps in between due to justifyContent and the output is not good unlike above. Isn't it possible to create some disable like feature in flexbox which would not extend the line after last flex item in the row?

Here is my sample layout of above screenshot with background drawable for LinearLayout:

from flexbox-layout.

If possible, I want to keep the API simple. And I think background drawable can fit in your use case.

Can you please post your current xml (simplified version is ok)?
I think you can build the layout like [this] with background drawables and layout_flexGrow set to a positive value for each child.
(https://cloud.githubusercontent.com/assets/1451292/20914746/8fa9a57a-bba3-11e6-9e1a-ea93afa13b06.png)

from flexbox-layout.

Here is my flexbox xml:

<com.google.android.flexbox.FlexboxLayout
        android:id="@+id/ll_w2w"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        android:layoutDirection="rtl"
        app:justifyContent="space_between"
        android:paddingTop="@dimen/space"
        android:paddingBottom="@dimen/space"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"/>

Here is the LinearLayout xml which I use with Flexbox:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/divider_w2w"
    android:paddingLeft="@dimen/space_w2w_left"
    android:paddingBottom="@dimen/space_w2w_bottom">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"/>
    <TextView
           android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"/>
</LinearLayout>

Here is the background drawable divider_w2w I use for above LinearLayout:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1dp" android:color="#000"/>
</shape>

from flexbox-layout.

Btw, I feel like this extended line after last flex-item in a row is useless. :/

from flexbox-layout.

I think you can build with a FlexboxLayout like

I meant the background drawable if for each child, not for the parent container.
And if you want the last item in the new line, you can set app:layout_wrapBefore="true" to force it to be on a new line.

<com.google.android.flexbox.FlexboxLayout
        android:id="@+id/ll_w2w"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:flexWrap="wrap"
        android:layoutDirection="rtl"
        app:justifyContent="space_between"
        android:paddingTop="@dimen/space"
        android:paddingBottom="@dimen/space"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"
            android:background="@drawable/divider_w2w"
            app:layout_flexGrow="1" />

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"
            android:background="@drawable/divider_w2w"
            app:layout_flexGrow="1" />

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"
            android:background="@drawable/divider_w2w"
            app:layout_flexGrow="1" />

   .....
   
    <!-- The last part of the item at the bottom -->
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textDirection="rtl"
            android:layout_gravity="center"
            android:background="@drawable/divider_w2w"
            app:layout_wrapBefore="true"
            />

</com.google.android.flexbox.FlexboxLayout>

from flexbox-layout.

Sorry, this is not going to fulfill my requirements. It will completely change the appearance because my data and width of each textbox is dynamic.

I don't understand the reason behind extending the line after last flex-item in the row.

from flexbox-layout.

Setting the layout_flexGrow="1" make individual item fill the remaining space if there is a positive remaining space. So it should work fine even if the data and width of a TextView is dynamic.

The reasons for extending the divider line are:

• To follow the way how dividers in LinearLayout works
• Background drawables can be used instead if dividers with the same length of an item are needed

from flexbox-layout.

@thagikura Is this extended divider still present in latest version or there is some option now to remove it? Just checking back before updating my app. :)

from flexbox-layout.