android/codelab-constraint-layout

Constraint Layout Codelab

Constraint Layout Codelab

This folder contains the source code for the ConstraintLayout codelab

License

Copyright 2016 Google, Inc.

Licensed to the Apache Software Foundation (ASF) under one or more contributor
license agreements. See the NOTICE file distributed with this work for
additional information regarding copyright ownership. The ASF licenses this
file to you under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.

codelab-constraint-layout's Issues

Gradle Sync button doesn't seem to exist

The instructions in Step 3 say click the Gradle sync button. I don't find this button in version 2.2 and I'm told it doesn't exist in that version.

I'm able to bring in the code and look at the constraint view, though it doesn't seem to look right.

Misaligned views in Advanced Arrangement

Hello,
please see ConstraintLayout sample Advanced Arrangement - landscape - screen (Pixel 2 XL):

Strange behavior of Barrier

There is a layout markup:

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

<ImageView
    android:id="@+id/test_top_image"
    android:background="@color/bean_red"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    />"

<android.support.constraint.Barrier
    android:id="@+id/test_barrier"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="test_top_image"
    />

<ImageView
    android:id="@+id/test_bottom_image"
    android:background="@color/blue"
    android:layout_width="match_parent"
    android:layout_marginRight="24dp"
    android:layout_height="16dp"
    app:layout_constraintTop_toBottomOf="@+id/test_barrier"
    />

Three elements: red top_image , the barrier under red top_image and blue bottom_image under the barrier. I'm waiting for this picture:

but I have something other:

Looks like the barrier was moved up at height of blue image.
What's wrong ?
Thank you !

ConstraintLayout inside NestedScrollView

ConstraintLayout inside NestedScrollView add a space, example if you create a views inside your layout the height of all the views is the space added in the below of that constraint. Can explain why is this happening ? And what is the workaround to this issue.

This is same with this one : https://stackoverflow.com/q/43501646/4439129

This is over a year ago and still not yet fixed.

constraint-layout dependencies error

With the "constraint-layout:1.0.0-alpha2" the project cannot compile through, gives the output:

Error:(22, 13) Failed to resolve: com.android.support.constraint:constraint-layout:1.0.0-alpha2
Install artifact and sync project
Show in File
Show in Project Structure dialog

when change to "constraint-layout:1.0.0-alpha1" it worked.

Show completed tutorials as "completed" on home page

I have completed constraint layout tutorial, but it is not saving the progress when I reopen it and there is no indication of completion on the home page.

Margin when gone doesn't work for last view in vertical chain

I have three views chained together vertically. I assign a layout_goneMarginBottom value to the last item (id:tvStore). When I set its visibility to GONE, the bottom margin I assigned doesn't work.

<android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <TextView
            android:id="@+id/tvHeader"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/tvDescription"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <TextView
            android:id="@+id/tvDescription"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/tvStore"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvHeader" />

        <TextView
            android:id="@+id/tvStore"
            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/tvDescription"
            app:layout_goneMarginBottom="30dp" />

</android.support.constraint.ConstraintLayout>

gone margin end not set when using clone() method

I have set app:layout_goneMarginEnd on my view and when I clone the ConstraintSet gone margins are not cloned. I've found my view by its id in the ConstraintSet and all gone margins are set to -1.

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/icon"
        app:layout_constraintStart_toEndOf="@+id/icon"
        app:layout_constraintTop_toTopOf="@+id/background"
        app:layout_goneMarginEnd="@dimen/gone_margin"/>

Constraint constraintSet = new ConstraintSet();
constraintSet.clone(this);

When I set it manually it works fine

constraintSet.setGoneMargin(title.getId(), ConstraintSet.END, goneMargin);

text show error

TextView show error in version 1.1.0, that's not happen in version 1.0.2.
xml is like:

<android.support.constraint.ConstraintLayout
        android:id="@+id/sortContainer"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#66000000"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/llSortTitle"
        tools:visibility="visible">

        <LinearLayout
            android:id="@+id/llSort"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/tvSortBook"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableRight="@drawable/icon_analysis_sort_select"
                android:gravity="center_vertical"
                android:paddingBottom="10dp"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="30dp"
                android:text="@string/analysis_student_sort_book"
                android:textColor="@color/color_ff7400"
                android:textSize="13sp" />

            <TextView
                android:id="@+id/tvSortLevel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:paddingBottom="30dp"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="10dp"
                android:text="@string/analysis_student_sort_level"
                android:textColor="@color/color_666666"
                android:textSize="13sp" />

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>

when i set text color and the visibility of right drawable to "tvSortBook" and "tvSortLevel", they not show all words in horizontal line.

they should be

RecyclerView strange behavior : match_constraint work when row_cell reloads

Screenshot will explain all of it --

Code is at this StackOverflow link

View width become zero when chain is used in ContraintLayout

I have two TextViews that are horizontally chained and displayed in a DialogFragment. That two TextView's visiblity set by dynamically, ie, sometimes tvA will be visible and sometimes tvB or both will display.

Here is my xml

<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="match_parent"
android:background="@color/app_background_color"
android:minWidth="250dp">

<TextView
    android:id="@+id/tvElement"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/shape_back"
    android:gravity="center"
    android:padding="10dp"
    android:text="@string/elements"
    android:textColor="@color/item_view_color"
    app:layout_constraintEnd_toStartOf="@+id/tvSensor"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tvSensor"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/shape_back"
    android:gravity="center"
    android:padding="10dp"
    android:text="@string/sensors"
    android:textColor="@color/item_view_color"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/tvElement"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintBottom_toTopOf="@+id/rv_channel"
    app:layout_constraintGuide_begin="62dp"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_channel"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toTopOf="@+id/btn_ok"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_min="250dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/guideline" />

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn_ok"
    android:layout_width="wrap_content"
    android:layout_height="25dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:background="@drawable/global_button_selector_3"
    android:text="@string/ok"
    android:textColor="@drawable/global_button_txt_selector_3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/rv_channel" />
</android.support.constraint.ConstraintLayout>

And the result will be

And the layout inspector shows

I have two problems

1. When this code run on a real device the corresponding TexView's width became zero and it is not visible anymore. But when I removed the chain It is working as it is.

2. It is based on the RecyclerView if it's height given match_contraints value it will shrink to the one cell height irrespective of how many items are there, but when I gave match_parent, it is wrapped to the items presented in it.

Please not that this view is inflated in DialogFragment

Here is my stackoverflow link

No match_constraint value

There is no match_constraint value in AS as described at bullet point 5 here:
https://codelabs.developers.google.com/codelabs/constraint-layout/#9

It's misleading for the reader. The equivalent value should be specified 0dp.

Line meaning not clear - missing words

https://codelabs.developers.google.com/codelabs/constraint-layout/#7

7.After adding the baseline constraint, the bottom constraint but the Discard button is automatically removed.

The meaning of the 7th point in the above link is not clear.

Constraint-layout with gradle 2.2.0-rc

Error on sync project when installing constraint-layout with gradle 2.2.0-rc, and android studio given't install graddle 2.2.0-alphaX

Travis CI failed with constraint layout

You have not accepted the license agreements of the following SDK components:
[ConstraintLayout for Android 1.0.0-alpha7, Solver for ConstraintLayout 1.0.0-alpha7].
Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

selectableItemBackgroundBorderless issue in ConstraintLayout

selectableItemBackgroundBorderless is not working if ImageButton or Button is placed inside a View with a background, but selectableItemBackground still works.

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:background="@color/colorAccent">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/previous_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_previous"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintEnd_toStartOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/play_ib"
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintStart_toEndOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />

</android.support.constraint.ConstraintLayout>

The ripple effects are gone.

Which attribute replace for “relativePercent” at Constraint-Layout alpha7

I used constraint layout Android Studio 2.2 with "constraint-layout:1.0.0-alpha3" dependency before, but now i am using constraint-layout:1.0.0-alpha7, "relativePercent" attribute is not exists. Which attribute replace for "relativePercent"?

In Android Studio 2.3, `Autoconnect` only works with parents

The codelabs is incorrect because instruction is to use AutoConnect to neighboring views.

Error while Launching activity

Unexpected error while executing: am start -n "com.google.googleio/com.google.googleio.MainActivity" -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Error while Launching activity

Can not duplicate a constraint-layout with guidelines

Duplicating a constraint-layout with guidelines (or just a single guideline) will cause the layout/guideline to have the same relative guidelines. Moving a guideline of one layout will break the other layout (the guidelines are using the same reference IDs).

Test:

Duplicate a layout with guidelines, change guidelines of one layout and see the other layout break.

Self fix:

Change IDs of all guidelines of duplicated layout.

Proposed fix:

Quick & easy: throw warning or error if guidelines do not have unique IDs

Advanced: (either should work)

1. Guidelines that are copy/pasted should generate a unique ID
2. Guidelines should be unique to their layout, and should not use global IDs like all other elements. (caveat: if in the future, programmatically calling guidelines is a thing, this would not be an ideal solution)

connection reset

on importing its showing connection reset. here is the link of log file https://drive.google.com/file/d/1W1mGmIc67baZb4C5nGGecWm15ggB0Wp5/view?usp=sharing

ScrollView as Parent?

In example

everything looks good when using portrait orientation, but on landscape constraint-layout cuts off description textView.

In Android studio 2.3.3 there are no attributes pane

It's mentioned at #7 as "attributes" but in studio is called "properties" pane

[Feature Request] Add an alignment attribute for constraints to be used in Styles.xml

Hi Team,
I'm enjoying using Constraint Layout.
Today, I came across a scenario while using styles.xml in one of my projects while creating styles for constraint layouts.
Since there are multiple constraints eg. constraint_lefttoLeftof, constraintEndToEndOf, etc. for aligning a given widget in XML.
So a common attribute for defining the above constraints at once would really help, similar to what we have with android:textAppearance attribute which can be used to define textcolor, textsize, textStyle,etc properties at once in styles.xml.

Constraint Layout returns wrong id in the hierarchy

the second Image Button write over the first one here's the full details: still not solved for me while i said i hacked it but not for all devices:
using version 1.1.2 and checked 1.1.3 has same issue
https://stackoverflow.com/questions/53918658/constraint-layout-returns-wrong-id-in-the-hierarchy

exception using layout

Exception using a specific layout

Process: com.google.googleio, PID: 8100
java.lang.NoClassDefFoundError: Failed resolution of: Ljava/awt/Rectangle;
at android.support.constraint.solver.widgets.Guideline.(Guideline.java:43)
at android.support.constraint.ConstraintLayout.setChildrenConstraints(ConstraintLayout.java:128)
at android.support.constraint.ConstraintLayout.updateHierarchy(ConstraintLayout.java:106)
at android.support.constraint.ConstraintLayout.onFinishInflate(ConstraintLayout.java:87)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:867)
at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821)
at android.view.LayoutInflater.inflate(LayoutInflater.java:518)
at android.view.LayoutInflater.inflate(LayoutInflater.java:426)
at android.view.LayoutInflater.inflate(LayoutInflater.java:377)
at com.android.internal.policy.PhoneWindow.setContentView(PhoneWindow.java:414)
at android.app.Activity.setContentView(Activity.java:2424)
at com.google.googleio.MainActivity.onCreate(MainActivity.java:25)
at android.app.Activity.performCreate(Activity.java:6669)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1118)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2578)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2686)
at android.app.ActivityThread.-wrap12(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1440)
at android.os.Handler.dispatchMessage(Handler.java:102)

-- layout file --

<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="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="72dp"
android:id="@+id/constraintLayout">

<ImageView
    android:src="@drawable/singapore"
    android:layout_width="136dp"
    android:layout_height="139dp"
    tools:layout_editor_absoluteX="109dp"
    tools:layout_editor_absoluteY="100dp"
    android:id="@+id/imageView2"
    android:contentDescription="@string/dummy"
    android:scaleType="center"
    app:layout_constraintLeft_toLeftOf="@+id/constraintLayout"
    android:layout_marginStart="16dp"
    tools:layout_constraintLeft_creator="0"
    app:layout_constraintRight_toRightOf="@+id/constraintLayout"
    android:layout_marginEnd="16dp"
    tools:layout_constraintRight_creator="0"
    app:layout_constraintHorizontal_bias="0.22" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    app:orientation="horizontal"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="20dp"
    app:relativeBegin="20dp" />

<TextView
    android:text="TextViewTextViewTextViewTextViewTextView"
    android:layout_width="178dp"
    android:layout_height="90dp"
    tools:layout_editor_absoluteX="285dp"
    tools:layout_editor_absoluteY="118dp"
    android:id="@+id/textView4"
    app:layout_constraintLeft_toRightOf="@+id/imageView2"
    android:layout_marginStart="40dp"
    tools:layout_constraintLeft_creator="0"
    app:layout_constraintTop_toTopOf="@+id/imageView2"
    tools:layout_constraintTop_creator="0"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    tools:layout_constraintBottom_creator="0"
    app:layout_constraintVertical_bias="0.38" />

</android.support.constraint.ConstraintLayout>

Rendering problems of the initial file

Hello,
the preview of the activity_main_done doesn't work on my Android Studio (version 2.2.3).
I have tried to change the library into compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' but it shows error in the xml file and when I upgrade to recommended version it changed the ConstraintLayout library in build.gradle back to com.android.support.constraint:constraint-layout:1.0.0.

I have tried Invalidate Caches and restarting the project.

Nothing worked. Can anybody help me?

Thanks in advance
Magda

Project takes forever to open

The project has been stuck on this screen for the past hour

After updating to 1.1.3, chained views alignment for RTL is not applied

After updating to 1.1.3, chained views alignment for RTL is not applied.
I also set the horizontal-bias 0 or 1, but chained views are not aligned as I set.
If I set bias 0 for chained views, the view should be on the right side automatically in RTL mode.
But, it was not like that at all. (It worked well before)

The Infer Constraints functionality is not working

I am using Android Studio 3.1.2 for Windows.

When reproducing step 9 of the codelab I faced the following. After pressing Infer Constraints button the constraints are visually drawn in designer but nothing is written into xml file. After closing the page all constraints are gone.
This happens in this particular activity_main_inference.xml file. If I try the same functionality in some newly created layout it works.

Wrong Icon

It seems that the infer constraints icon has changed in Android Studio.

exception using layout

java.lang.NoSuchMethodError: android.support.constraint.solver.widgets.ConstraintWidget.setHorizontalMatchStyle(III)V
at android.support.constraint.ConstraintLayout.setChildrenConstraints(ConstraintLayout.java:853)
at android.support.constraint.ConstraintLayout.updateHierarchy(ConstraintLayout.java:631)
at android.support.constraint.ConstraintLayout.onMeasure_Original(ConstraintLayout.java:971)
at android.support.constraint.ConstraintLayout.onMeasure(ConstraintLayout.java)
at android.view.View.measure(View.java:22035)
at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6622)
at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
at android.view.View.measure(View.java:22035)
at android.widget.RelativeLayout.measureChildHorizontal(RelativeLayout.java:715)
at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:461)
at android.view.View.measure(View.java:22035)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.measureView(RenderSessionImpl.java:590)
at com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:343)
at com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:384)
at com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:193)
at com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:547)
at com.android.tools.idea.rendering.RenderTask.lambda$inflate$3(RenderTask.java:681)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)

favourite image overlapping singapore image not explained how to do it

In 9.Pack elements and infer constraints It is not explained how half imageview(favorite) is placed on bottom border of imageview (singapore), just adding bottom constraint to two imageviews is not working

activity_main_barriers.xml issue

I found the subject file did not represent the example in the CodeLab; both EditText views were not visible in the Blueprint. I eventually found them barely visible at the right margin. I was not able to successfully adjust and then complete this step.

I found the same problem with activity_main_chains.xml.

constraint:constraint-layout:1.1.0 java.lang.AssertionError: LEFT at android.support.constraint.solver.widgets.Guideline.getAnchor(Guideline.java:159)

with

implementation "com.android.support.constraint:constraint-layout:1.1.0"
implementation "com.android.support.constraint:constraint-layout-solver:1.1.0"

getting a run time error:

 Process: com.example.derek.trademeapi, PID: 14475
    java.lang.AssertionError: LEFT
        at android.support.constraint.solver.widgets.Guideline.getAnchor(Guideline.java:159)
        at android.support.constraint.solver.widgets.ConstraintWidget.immediateConnect(ConstraintWidget.java:1578)
        at android.support.constraint.ConstraintLayout.setChildrenConstraints(ConstraintLayout.java:978)
        at android.support.constraint.ConstraintLayout.updateHierarchy(ConstraintLayout.java:793)
        at android.support.constraint.ConstraintLayout.onMeasure(ConstraintLayout.java:1540)
        at android.view.View.measure(View.java:22944)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:6729)
        at android.widget.FrameLayout.onMeasure(FrameLayout.java:185)
        at android.support.v7.widget.CardView.onMeasure(CardView.java:258)
        at android.view.View.measure(View.java:22944)
        at android.support.v7.widget.RecyclerView$LayoutManager.measureChildWithMargins(RecyclerView.java:8994)
        at android.support.v7.widget.LinearLayoutManager.layoutChunk(LinearLayoutManager.java:1585)
        at android.support.v7.widget.LinearLayoutManager.fill(LinearLayoutManager.java:1519)
        at android.support.v7.widget.LinearLayoutManager.onLayoutChildren(LinearLayoutManager.java:614)
        at android.support.v7.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3812)
        at android.support.v7.widget.RecyclerView.dispatchLayout(RecyclerView.java:3529)
        at android.support.v7.widget.RecyclerView.onLayout(RecyclerView.java:4082)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.support.design.widget.HeaderScrollingViewBehavior.layoutChild(HeaderScrollingViewBehavior.java:132)
        at android.support.design.widget.ViewOffsetBehavior.onLayoutChild(ViewOffsetBehavior.java:42)
        at android.support.design.widget.AppBarLayout$ScrollingViewBehavior.onLayoutChild(AppBarLayout.java:1361)
        at android.support.design.widget.CoordinatorLayout.onLayout(CoordinatorLayout.java:894)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1790)
        at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1634)
        at android.widget.LinearLayout.onLayout(LinearLayout.java:1543)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1790)
        at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1634)
        at android.widget.LinearLayout.onLayout(LinearLayout.java:1543)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
        at com.android.internal.policy.DecorView.onLayout(DecorView.java:757)
        at android.view.View.layout(View.java:20449)
        at android.view.ViewGroup.layout(ViewGroup.java:6174)
        at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2761)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2288)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1441)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7076)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:935)
        at android.view.Choreographer.doCallbacks(Choreographer.java:747)
        at android.view.Choreographer.doFrame(Choreographer.java:682)
2018-05-02 01:32:23.588 14475-14475/? E/AndroidRuntime:     at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:921)
        at android.os.Handler.handleCallback(Handler.java:819)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:164)
        at android.app.ActivityThread.main(ActivityThread.java:6656)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:823)

dependency graph:

debug
debugCompileClasspath - Dependencies for compilation
+--- com.android.databinding:adapters:3.2.0-alpha12@aar
+--- com.android.databinding:library:3.2.0-alpha12@aar
+--- com.android.databinding:baseLibrary:3.2.0-alpha12@jar
+--- com.squareup.leakcanary:leakcanary-android:1.5.4@aar
+--- org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.2.41@jar
+--- com.squareup.moshi:moshi-kotlin:1.5.0@jar
+--- org.jetbrains.kotlin:kotlin-reflect:1.2.41@jar
+--- androidx.core:core-ktx:0.3@aar
+--- com.android.support.constraint:constraint-layout:1.1.0@aar
+--- com.android.support:cardview-v7:27.1.1@aar
+--- com.google.dagger:dagger-android-support:2.15@aar
+--- com.jakewharton.rxbinding2:rxbinding-appcompat-v7-kotlin:2.1.1@aar
+--- com.jakewharton.rxbinding2:rxbinding-appcompat-v7:2.1.1@aar
+--- com.jakewharton.rxbinding2:rxbinding-design-kotlin:2.1.1@aar
+--- com.jakewharton.rxbinding2:rxbinding-design:2.1.1@aar
+--- com.android.support:design:27.1.1@aar
+--- com.android.support:appcompat-v7:27.1.1@aar
+--- com.android.support:gridlayout-v7:27.1.1@aar
+--- com.android.support:support-v13:27.1.1@aar
+--- com.android.support:support-v4:27.1.1@aar
+--- com.android.support:animated-vector-drawable:27.1.1@aar
+--- com.github.bumptech.glide:glide:4.7.1@aar
+--- com.android.support:support-fragment:27.1.1@aar
+--- com.android.support:recyclerview-v7:27.1.1@aar
+--- com.android.support:support-core-ui:27.1.1@aar
+--- com.android.support:support-core-utils:27.1.1@aar
+--- com.jakewharton.timber:timber:4.7.0@aar
+--- com.jakewharton.rxbinding2:rxbinding-kotlin:2.1.1@aar
+--- com.jakewharton.rxbinding2:rxbinding:2.1.1@aar
+--- io.reactivex.rxjava2:rxandroid:2.0.2@aar
+--- com.squareup.retrofit2:adapter-rxjava2:2.4.0@jar
+--- io.reactivex.rxjava2:rxjava:2.1.13@jar
+--- com.google.dagger:dagger-android:2.15@aar
+--- com.google.dagger:dagger:2.15@jar
+--- com.squareup.okhttp3:logging-interceptor:3.10.0@jar
+--- com.squareup.retrofit2:converter-moshi:2.4.0@jar
+--- com.squareup.retrofit2:retrofit:2.4.0@jar
+--- com.squareup.okhttp3:okhttp:3.10.0@jar
+--- com.android.support:support-media-compat:27.1.1@aar
+--- com.android.support:support-vector-drawable:27.1.1@aar
+--- com.android.support:transition:27.1.1@aar
+--- com.android.support:support-compat:27.1.1@aar
+--- android.arch.lifecycle:runtime:1.1.0@aar
+--- com.squareup.leakcanary:leakcanary-analyzer:1.5.4@aar
+--- org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.2.41@jar
+--- org.jetbrains.kotlin:kotlin-stdlib:1.2.41@jar
+--- com.github.bumptech.glide:gifdecoder:4.7.1@aar
+--- android.arch.lifecycle:livedata-core:1.1.0@aar
+--- android.arch.lifecycle:common:1.1.0@jar
+--- android.arch.core:runtime:1.1.0@aar
+--- android.arch.core:common:1.1.0@jar
+--- com.android.support:support-annotations:27.1.1@jar
+--- com.android.support.constraint:constraint-layout-solver:1.1.0@jar
+--- com.github.bumptech.glide:disklrucache:4.7.1@jar
+--- com.github.bumptech.glide:annotations:4.7.1@jar
+--- javax.inject:javax.inject:1@jar
+--- com.squareup.moshi:moshi:1.5.0@jar
+--- com.squareup.okio:okio:1.14.0@jar
+--- com.squareup.leakcanary:leakcanary-watcher:1.5.4@jar
+--- com.squareup.haha:haha:2.0.3@jar
+--- org.jetbrains:annotations:13.0@jar
+--- org.reactivestreams:reactive-streams:1.0.2@jar
\--- android.arch.lifecycle:viewmodel:1.1.0@aar

layout.xml is a view holder for a recyclerview

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="listing"
            type="com.example.derek.trademeapi.model.Listing" />
    </data>

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:cardCornerRadius="4dp">

        <android.support.constraint.ConstraintLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/item_image_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minWidth="90dp"
                android:minHeight="90dp"
                android:scaleType="fitXY"
                app:imageUrl="@{listing.pictureHref}"
                app:layout_constraintBottom_toTopOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent" />

            <android.support.constraint.Guideline
                android:id="@+id/item_text_guide_line"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintBottom_toTopOf="@id/item_id_text_view"
                app:layout_constraintLeft_toLeftOf="@id/item_image_view"
                app:layout_constraintRight_toRightOf="@id/item_image_view"
                />

            <TextView
                android:id="@+id/item_id_text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minWidth="40dp"
                android:text="@{Integer.toString(listing.listingId)}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/item_text_guide_line" />

            <TextView
                android:id="@+id/item_title_text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{listing.title}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintRight_toRightOf="@id/item_id_text_view"
                app:layout_constraintTop_toBottomOf="@+id/item_text_guide_line" />

        </android.support.constraint.ConstraintLayout>

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>

</layout>

ConstraintLayout ignores forceLayout()

ConstraintLayout doesn't clear its mLastMeasure* cached fields on forceLayout() but clears those in requestLayout():

public void requestLayout() { super.requestLayout(); this.mDirtyHierarchy = true; this.mLastMeasureWidth = -1; this.mLastMeasureHeight = -1; this.mLastMeasureWidthSize = -1; this.mLastMeasureHeightSize = -1; this.mLastMeasureWidthMode = 0; this.mLastMeasureHeightMode = 0; }

This leads to wrong values after measuring ConstraintLayout if size of any of its children has changed.

Version: com.android.support.constraint:constraint-layout:1.1.2

how Constraint Layout Dynamically add view programmably

private ConstraintLayout.LayoutParams setLayoutConstraint(ConstraintLayout.LayoutParams param, LayoutConfig config) {
        param.topToBottom = parseConstraintLayoutId(config.topToBottom);
        param.topToTop = parseConstraintLayoutId(config.topToTop);
        param.bottomToBottom = parseConstraintLayoutId(config.bottomToBottom);
        param.bottomToTop = parseConstraintLayoutId(config.bottomToTop);

        param.leftToLeft = parseConstraintLayoutId(config.leftToLeft);
        param.leftToRight = parseConstraintLayoutId(config.leftToRight);
        param.rightToLeft = parseConstraintLayoutId(config.rightToLeft);
        param.rightToRight = parseConstraintLayoutId(config.rightToRight);
        param.verticalWeight = config.verticalWeight;
        param.horizontalWeight = config.horizontalWeight;

        return param;
    }

ViewGroup viewGroup = (ViewGroup) LayoutInflater.from(this).inflate(ResourceUtils.getLayoutResIdByName(this, layoutConfig.itemLayout), null);
            int viewId = parseViewId(layoutConfig.itemId);
            viewGroup.setId(viewId);
            viewGroup.setLayoutParams(setLayoutConstraint(new ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.MATCH_CONSTRAINT, ConstraintLayout.LayoutParams.MATCH_CONSTRAINT), layoutConfig));

I use it ,and found that horizontalWeight/verticalWeight does't work. Every item become wrap_content.

barrierDirection attribute doesn't appear in Attributes pane

Noticed issued during Step #11, setting barrierDirection. Added a barrier, dragged the 2 TextViews onto it in the Component Tree, then went to Attributes pane to edit the barrierDirection. Attributes pane does not display any attributes for Barrier. Tried "View All Attributes" and that shows zero attributes. (It does appear in the XML tab and I can edit it there, but there seems to be a problem in the Design tab's Attributes pane for Barrier class). Using Android Studio 3.1.

error message from barriers

Error Message from AS
Missing Constraint in ConstraintLayout for
activity_main_barriers.xml
activity_main_chains.xml

_barriers.xml (with error)
<android.support.constraint.Barrier android:id="@+id/barrier3" android:layout_width="0dp" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="settingsLabel,cameraLabel" tools:layout_editor_absoluteX="384dp" />

with setting the layout_width to
match_constraint and set the left and right side to 0 in the design view it work.
(It's not automatically and not in the documentation)
.xml "output" from the design
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"

activity_main_chains.xml
ID "cameraType" is constraint to the ID "cameraLabel"
and not constraint to the barrier.
barrierDirection is set on left

_chains.xml (with error)
<android.support.constraint.Barrier android:id="@+id/barrier" android:layout_width="0dp" android:layout_height="wrap_content" app:barrierDirection="start" app:constraint_referenced_ids="settings,cameraType" tools:layout_editor_absoluteX="72dp" />

delete barrier and constraint between cameraType and CameraLabel
get new barrier, set layout_width to match_constraint, set the left and right side to 0

Hopefully it helps

Constraint-layout lib update from 1.0.2 to 1.1.0 got error (Guideline.getAnchor)

I currently using constraint-layout by the following lib

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

By update warning in the android studio, I Update this to

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

Then I got the following issue (See stack trace)

java.lang.AssertionError: TOP at android.support.constraint.solver.widgets.Guideline.getAnchor(Guideline.java:159) at android.support.constraint.solver.widgets.ConstraintWidget.immediateConnect(ConstraintWidget.java:1579) at android.support.constraint.ConstraintLayout.setChildrenConstraints(ConstraintLayout.java:1012) at android.support.constraint.ConstraintLayout.updateHierarchy(ConstraintLayout.java:793) at android.support.constraint.ConstraintLayout.onMeasure(ConstraintLayout.java:1540) at android.view.View.measure(View.java:18804) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954) at android.widget.FrameLayout.onMeasure(FrameLayout.java:194) at android.view.View.measure(View.java:18804) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954) at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1465) at android.widget.LinearLayout.measureVertical(LinearLayout.java:748) at android.widget.LinearLayout.onMeasure(LinearLayout.java:630) at android.view.View.measure(View.java:18804) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5954) at android.widget.FrameLayout.onMeasure(FrameLayout.java:194) at com.android.internal.policy.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2643) at android.view.View.measure(View.java:18804) at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2112) at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1228) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1464) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1119) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6060) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:858) at android.view.Choreographer.doCallbacks(Choreographer.java:670) at android.view.Choreographer.doFrame(Choreographer.java:606) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844) at android.os.Handler.handleCallback(Handler.java:746) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:148) at android.app.ActivityThread.main(ActivityThread.java:5443) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:728) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)

Also got the issue as,
E/CrashlyticsCore: Failed to execute task. java.util.concurrent.TimeoutException at java.util.concurrent.FutureTask.get(FutureTask.java:177) at com.crashlytics.android.core.CrashlyticsBackgroundWorker.submitAndWait(CrashlyticsBackgroundWorker.java:41) at com.crashlytics.android.core.CrashlyticsController.handleUncaughtException(CrashlyticsController.java:320) at com.crashlytics.android.core.CrashlyticsController$6.onUncaughtException(CrashlyticsController.java:300) at com.crashlytics.android.core.CrashlyticsUncaughtExceptionHandler.uncaughtException(CrashlyticsUncaughtExceptionHandler.java:42) at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:693) at java.lang.ThreadGroup.uncaughtException(ThreadGroup.java:690)

If I revert this back to 1.0.2 version work fine. Is this a noticed bug or not?. How to fix this?
I raise this question in StackOverflow

Barrier

Barrier does not display when we right click on the blue print.

@string/camera_settings at https://codelabs.developers.google.com/codelabs/constraint-layout/#8

https://codelabs.developers.google.com/codelabs/constraint-layout/#8
The instruction reads:
The settingsEdit element showing "f/4 16s ISO 200" is an EditText that uses the string resource @string/settings_value.
while in the resource file:
@string/camera_settings

Settings text view jumps to top

I have an issue with activity_main_done.xml. The lint says that this text view

<TextView
        android:text="@string/settings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_editor_absoluteX="16dp"
        app:layout_editor_absoluteY="238dp"
        android:id="@+id/settingsLabel"
        android:labelFor="@+id/settings"
        app:layout_constraintLeft_creator="1"
        app:layout_constraintBaseline_creator="1"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="241dp"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main_done"
        android:layout_marginStart="16dp"
        tools:layout_constraintLeft_creator="0" />

This view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint.
And here are some behaviour this layout at preview device and at geny motion virtual device

Take a look at Settings, where it places at the preview and where I actually get it at the virtual device.
If you need more specific information - feel free to contact me.

XML code not scrollable on mobile

I am trying to study on the go.

The sample XML for the layout goes by far out of the text box and there's no way to scroll it to see the rightmost part. That'd be helpful for who reads on a mobile device. Thanks

Chained views alignment is not same for LTR and RTL

I have created horizontal chain of 3 views with chaining style packed , For LTR languages everything works as expected but for RTL language views were spreading even though chain style is packed.

Remove a word

"After adding the baseline constraint, the bottom constraint but the Discard button is automatically removed." remove the "but" from lesson 8, step 7.

constraint-layout:1.0.0-alpha2 not resolved

When adding:
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
to the build.gradle file, you will receive an error stating that the dependency could not be resolved.
The 1.0.0-alpha2 version of the dependency doesn't appear to exist on jcenter. 1.0.0-alpha1 works fine though.

Typo: vertical bias at 18% not at 81%.

In Step 9:

ImageViews for the @drawable/singapore and @drawable/ic_star. The ic_star image has already been constrained to have a vertical bias at 81%.

in sample project vertical bias at 18%
just simple typo.

changing from design view to blue print view create some strange behaviour in Editor

missing constraintLayout id

please add id of ConstraintLayout in activity_main_start.xml
or I want in addition to the procedure in codeLabs.