ConstraintLayout Barrier not visible in design view

Question

I'm trying to add a barrier to my ConstraintLayout in Android Studio but it is not showing up the way it should in design view.

I have been following this tutorial , but I can't get things to work properly.

I'm currently using:

• Android Studio 3.1.1
• androidx.constraintlayout:constraintlayout:1.1.3

Things I have tried:

• Invalidate caches/restart
• Removing the attribute tools:layout_editor_absoluteX
• Fiddling around!

Here's my test.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent">

    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"/>
    <Button
            android:text="Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/button" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"/>
    <androidx.constraintlayout.widget.Barrier android:layout_width="wrap_content" android:layout_height="wrap_content"
                                              android:id="@+id/barrier2" app:barrierDirection="end"
                                              app:constraint_referenced_ids="button,button2"
                                              tools:layout_editor_absoluteX="411dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

In design view, it looks like this

The barrier is stuck to the edge of the layout and doesn't move no matter what I do. If I set barrierDirection start or left it is not visible at all. If I set end or right the dashed line shows up but is stuck to the left side of the layout.

Barriers seem to work fine in another project started from scratch, but this uses the android.support.constraint.ConstraintLayout rather than the androidx library's.

Answer 1

升级到版本2.0.0-alpha3为我解决了这个问题。

Answer 2

It just happened to me as well. What fixed it for me was simply closing Android Studio and open it up again.

You can also upgrade to version 2.0.0-alpha3

Answer 3

When I upgraded constraintLayout library from version 2.0.4 to 2.1.3 , the barriers messed up.

I changed the width and height of my barriers as follow and the problem resolved.

Before:

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/myBarrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="textView1,textView2,textView3"
    app:layout_constraintEnd_toEndOf="parent" />

After:

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/myBarrier"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    ...
/>

Answer 4

I couldn't get the barriers to show either, until I took the layout name out of the app:constraint_referenced_ids list. Then the barrier appeared.