android / codelab-constraint-layout

Constraint Layout Codelab
https://codelabs.developers.google.com/codelabs/constraint-layout/
Apache License 2.0
471 stars 242 forks source link

Barriers don't align with the constrained views, but keep sticking to the edges of Constraint layout #62

Open Damanjeet88 opened 5 years ago

Damanjeet88 commented 5 years ago

I don't know if anyone has opened a similar issue, but I couldn't find one. I also searched on the Internet, but I found no solution to this problem. I'm new to Android Development and working my way through Layouts. I'm following the Constraint Layout tutorial for beginners on CodeLabs and a Live session done by Rebecca Franks (riggaroo) here: https://www.youtube.com/watch?v=h1LHzObflwo The issue I came across is regarding an odd behaviour of Barriers. I have Android Studio 3.3 installed. I followed the exact steps to use Barriers, but the barriers don't appear on the expected spot on the Activity. If I use a Vertical Barrier, it keeps sticking to the left most edge of the layout. Similarly, if I use a Horizontal Barrier, it is stuck at the top most edge. I even tried changing the barrier direction but to no avail. Thereafter, when I try to constrain other view to that barrier, they fly all the way to the top edge as well, following the Barrier, producing a totally unexpected result on the viewport. (plz refer Screenshot 1) However, the emulator still solves it to show the correct expected result. This makes it very difficult for me to keep guessing the outcome.(plz refer Screenshot 2) Please guide me if I'm missing an Android Studio setting or a point. Pardon my English (not a native :) ) I'm attaching the screenshots of the files provided by Rebecca from her Live Session running on my Android Studio and the outcome on the emulator. Img. 1 The viewport Img.2 The outcome on emulator androidstudio screenshot1 androidstudio screenshot2

Thanks.

callmemaxi commented 5 years ago

I have the same problem.

e1337us3r commented 5 years ago

I also have the same issue with AS 3.3 & Constraintlayout 1.1.3. A work around is to use Constraintlayout 2.0.0-alpha3 atm.

niemandkun commented 5 years ago

Got the same problem with Android Studio 3.3.2 and ConstraintLayout 1.1.3.

Android Studio 3.3.2
Build #AI-182.5107.16.33.5314842, built on February 16, 2019
JRE: 1.8.0_152-release-1248-b01 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Linux 4.15.0-46-generic

My XML contains single Barrier, ImageView and TextView above Barrier and single TextView below:

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

    <ImageView
        android:id="@+id/upperImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/upperTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/upperTextView" />

    <TextView
        android:id="@+id/upperTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/upperImageView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <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="upperImageView,upperTextView" />

    <TextView
        android:id="@+id/bottomTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier" />

</android.support.constraint.ConstraintLayout>

Barrier is broken in AS preview, but on a real device or AVD everything works as expected. With ConstraintLayout 2.0.0-alpha3 preview works.

mahozad commented 2 years ago

Does this solution fix your problem?