ConstraintLayout View.GONE usage

Question

I recently started using ConstraintLayout. As I discovered, most of the features are pretty straight forward, and well explained in the docs with samples, text and video tutorials and all.

The thing that got in my mind is how to I solve this 'puzzle' as elegant as possible?

As you can see, in the right section of the layout, I have multiple Views aligned left. On the last but one row, there are 3 Views aligned horizontally (they are also aligned TOP between each other). Problem is: if I set first View's visibility from that row as GONE, the other two (in the same row), go left as expected, but the one underneath (last row in the vertical alignment) goes over the row before (because its constraintTop property is set as bottom of the View set as GONE).

The only solution I can think of is using a ViewGroup to group those 3 Views and add the constraint to last row View to it.

Am I missing some property on ConstraintLayout which could help my case? Maybe some sort of fallback (or multiple) constraints if one of them is set on a GONE View?

Sorry if my explanation seem quite abstruse, maybe the pictures will help you more :)

LE: Added layout: https://gist.github.com/DoruAdryan/7e7920a783f07b865489b1af0d933570

Answer 1

You can use the new Barriers feature of ConstraintLayout.

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/iv_item_small_product_image"
            android:layout_width="113dp"
            android:layout_height="113dp"
            android:layout_marginLeft="7dp"
            android:layout_marginStart="7dp"
            android:background="@android:drawable/btn_radio"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/iv_row_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:background="@android:drawable/bottom_bar"
app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ro.emag.android.views.FontTextView
            android:id="@+id/tv_row_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="3dp"
            android:ellipsize="end"
            android:maxLines="2"
            app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/iv_row_1"
            app:layout_goneMarginTop="0dp"
            tools:text="Some text long enough to be split on multiple lines on some devices." />

        <android.support.v7.widget.AppCompatRatingBar
            android:id="@+id/rb_row_3_1"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="9dp"
            android:isIndicator="true"
            android:numStars="5"
            android:stepSize="0.1"
            app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintTop_toBottomOf="@id/tv_row_2" />

        <TextView
            android:id="@+id/tv_row_3_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginStart="6dp"
            android:layout_marginTop="9dp"
            app:layout_constraintLeft_toRightOf="@+id/rb_row_3_1"
            app:layout_constraintTop_toBottomOf="@id/tv_row_2"
            tools:text="106" />

        <TextView
            android:id="@+id/tv_row_3_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginStart="6dp"
            android:layout_marginTop="9dp"
            app:layout_constraintLeft_toRightOf="@+id/tv_row_3_2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_row_2"
            app:layout_goneMarginLeft="0dp"
            app:layout_goneMarginStart="0dp"
            tools:text="Options available" />

        <android.support.constraint.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="rb_row_3_1, tv_row_3_2, tv_row_3_3" />

        <TextView
            android:id="@+id/tv_row_4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="3dp"
            android:ellipsize="end"
            android:maxLines="1"
            app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/barrier"
            tools:text="Some text on last row" />

    </android.support.constraint.ConstraintLayout>

Now, the last row is depending on the barrier instead of one of the views of the third row. As the barrier is depending on the three views of the second row, you won't have the gone margin problem.
Plus, i noticed that you don't need the guideline. The right segment can depend on the imageview directly.

In case you are not familiar with Barriers, here's a link to help you out.

As this feature is available only in the 1.1.0 beta1 release of ConstraintLayout, don't forget to add this line to your build.gradle file.

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

make sure to include maven { url "https://maven.google.com" }