Dividers stop being displayed between all visible items once you set visibility as "gone" of one of those items

[jcmontesmartos]

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

Issues and steps to reproduce

1. Code a FlexboxLayout as described below.
2. Set a vertical divider for this flexbox layout.
3. Change the visibility of one of those items in the middle to"gone".

Current behavior

Dividers stop being displayed between all visible items once you set visibility as "gone" of one of those items

Expected behavior

Dividers between all visible items should be shown

Version of the flexbox library

0.3.0

Link to code

Example with the code I have:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    app:flexWrap="wrap"
    app:dividerDrawableVertical="@drawable/divider_flexbox_vertical"
    app:showDividerVertical="middle">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:orientation="vertical">

        ...

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:visibility="gone"
        android:orientation="vertical">

        ...

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:orientation="vertical">

        ...

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:orientation="vertical">

        ...

    </LinearLayout>

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

[jcmontesmartos]

any news? Do you need more info?

[thagikura]

Hi, sorry for the delay.

First of all, thank you very much for filing this issue.
I didn't have time to look at thu issue, but I'll try to have a look anytime soon.

[jcmontesmartos]

No problem, thank to you. If you know more information, just let me know

[thagikura]

I wasn't able to reproduce the issue so far.
Edited the XML from the one you pasted as follows:

• Put TextViews in each LinearLayout
• Add background to each LinearLayout (doesn't affect the layout)
• Changed the drawable for the FlexboxLayout to ic_add_white_24dp (part of the demo-playground app)

But three LinearLayout except the second one that is marked as gone were all visible including their dividers in the middle.

Do you have a complete example of your XML that can reproduce the issue?
Before adding TextViews in each LinearLayout, none of the items were not visible because the layout_height of the FlexboxLayout is set as wrap_content, which was calculated as 0 if none of the items were in any of the LinearLayout.

<com.google.android.flexbox.FlexboxLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:id="@+id/flexbox_layout"
    android:layout_width="wrap_content"
    android:layout_gravity="center_horizontal"
    app:flexWrap="wrap"
    app:dividerDrawableVertical="@drawable/ic_add_white_24dp"
    app:showDividerVertical="middle" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:background="#999"
        android:orientation="vertical">

        <TextView
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:text="text1"
        />
    </LinearLayout>

    <!--android:visibility="gone"-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:visibility="gone"
        android:background="#777"
        android:orientation="vertical">

        <TextView
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:text="text2"
        />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:background="#222"
        android:orientation="vertical">

        <TextView
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:text="text3"
        />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_minWidth="40dp"
        android:background="#666"
        android:orientation="vertical">

        <TextView
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:text="text4"
        />
    </LinearLayout>
</com.google.android.flexbox.FlexboxLayout>

[jcmontesmartos]

I am still able to reproduce this bug even with the example layout you provided me. From your code, I have only replaced the divider: you are using the white add drawable but I am with the black one.
Tested on an emulator with Android Nougat.

This is a full example, as you can see I am using Android Databinding and Support libraries (design, appcompat...)

    <?xml version="1.0" encoding="utf-8"?>
    <layout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

        <data>
            <variable name="inProgress" type="boolean" />

            <import type="android.view.View" />
        </data>

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:popupTheme="@style/ThemeOverlay.AppCompat"
                    app:layout_scrollFlags="scroll|enterAlways|snap" >

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        style="@style/AppTheme.ToolbarTitle"
                        android:text="@string/booking_details"/>

                </android.support.v7.widget.Toolbar>

            </android.support.design.widget.AppBarLayout>

            <android.support.v4.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fillViewport="true"
                android:background="#fff"
                app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

                <!-- @dimen/container_width is 500dp if the smallest width
                is greater or equals than 600dp, else match_parent -->
                <LinearLayout
                    android:layout_width="@dimen/container_width"
                    android:layout_height="wrap_content"
                    android:paddingBottom="16dp"
                    android:orientation="vertical"
                    android:background="#fff">

                    <com.google.android.flexbox.FlexboxLayout
                        android:layout_height="wrap_content"
                        android:id="@+id/flexbox_layout"
                        android:layout_width="wrap_content"
                        android:layout_gravity="center_horizontal"
                        app:flexWrap="wrap"
                        app:dividerDrawableVertical="@drawable/ic_add_black_24dp"
                        app:showDividerVertical="middle" >

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:layout_minWidth="40dp"
                            android:background="#999"
                            android:orientation="vertical">

                            <TextView
                                android:layout_height="100dp"
                                android:layout_width="100dp"
                                android:text="text1"
                                />
                        </LinearLayout>

                        <!--android:visibility="gone"-->
                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:layout_minWidth="40dp"
                            android:visibility="gone"
                            android:background="#777"
                            android:orientation="vertical">

                            <TextView
                                android:layout_height="100dp"
                                android:layout_width="100dp"
                                android:text="text2"
                                />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:layout_minWidth="40dp"
                            android:background="#222"
                            android:orientation="vertical">

                            <TextView
                                android:layout_height="100dp"
                                android:layout_width="100dp"
                                android:text="text3"
                                />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            app:layout_minWidth="40dp"
                            android:background="#666"
                            android:orientation="vertical">

                            <TextView
                                android:layout_height="100dp"
                                android:layout_width="100dp"
                                android:text="text4"
                                />
                        </LinearLayout>
                    </com.google.android.flexbox.FlexboxLayout>

                </LinearLayout>

            </android.support.v4.widget.NestedScrollView>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="@{inProgress ? View.VISIBLE : View.GONE}"
                app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

                <ProgressBar
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    style="?android:attr/progressBarStyleLarge"/>

            </FrameLayout>

        </android.support.design.widget.CoordinatorLayout>

    </layout>

I am using the following libraries and tools:

• Android databinding
• Support libraries 26.1.0
• Build tools 26.0.1
• Compile SDK Version: 26
• Target SDK Version: 25
• Android Studio 3.0.0-beta6

[thagikura]

Oh right. I was able to reproduce it thanks for the clarification.
Investigating the root cause.

[thagikura]

This should be fixed by #361.

[jcmontesmartos]

ok, thank you so much!