I am experiencing a few bugs in the current MotionLayout,

• I have set a touchAnchorId (Have the drag act as if it is moving the "touchAnchorSide" of this object), but the AnchorView moves faster than my finger
• I have set a touchRegionId (Limits the region that the touch can be start in to the bounds of this view (even if the view is invisible)), but after the first touch up, the whole MotionLayout reacts to the swipe
• WRAP_CONTENT doesn't work for TextViews

I already tried using app:dragScale="1", but it had no effect. Also, I tried app:motionInterpolator="linear" on the Transition, but it didn't have an effect either.

This happens on ConstraintLayout version 2.1.0-beta02. The stable version 2.0.4 works fine.

The MotionScene is quite big. This is the relevant Transition:

    <Transition
        android:id="@+id/transitionDrag"
        app:constraintSetEnd="@id/stateDragEnd"
        app:constraintSetStart="@id/stateDragStart"
        app:motionInterpolator="linear">

        <OnSwipe
            app:autoCompleteMode="spring"
            app:dragDirection="dragEnd"
            app:dragScale="1"
            app:dragThreshold="1"
            app:onTouchUp="autoCompleteToStart"

            app:springBoundary="bounceStart"
            app:springDamping="40"
            app:springMass="1"
            app:springStiffness="750"
            app:springStopThreshold="5"

            app:touchAnchorId="@id/dragHandle"
            app:touchAnchorSide="middle"
            app:touchRegionId="@id/dragHandle" />
    </Transition>

Edit: layout_width="wrap_content" doesn't work in this scenario either. ("Quick Buy" should be a single line)

Hi. How do i run ConstrainLayout Link desktop app?

"run your app and your phone or emulator and the live inspector app on your desktop"

got constrain layout project opened but how do i build this app

This PR implements a number of improvements in the Gradle build. It's largely a code cleanup, making sure that the build scripts of each project are declarative only. All build logic has been moved in its own subproject.

It was quite hard to follow what you've done before, but I think I managed to reproduce the previous behavior, in particular with where the artifacts are built (outside of the normal build directories).

I have migrated everything to the lazy APIs and I also made use of the new Maven Publish plugin. A side effect is that the core project now publishes javadocs and sources. By the way, the javadocs are full of errors which would need to be fixed.

I don't know how to produce docs for the Android projects, since I'm not an expert, but there was a lot of commented out code in the build that I just removed: for external folks like me it doesn't really make sense to have commented out code: either the code is useful in which case it shouldn't be commented out, but potentially activated by some flags, or it should be removed.

Here's a build scan after calling dist with this PR: https://scans.gradle.com/s/lst5evsi2rr3k

And the resulting output directory layout:

Please make sure to review the generated artifacts as I may have made some mistakes in the transition. I'm happy to answer questions on the new build layout if needed.

I am trying to upgrade from 1.1.3 to 2.0.* but keeps getting those errors. Have tried with multiple versions but only 1.1.3 seems to compile. First/main error seems to be this:

AAPT: error: duplicate value for resource 'attr/defaultState' with config ''

It relates to this line in values.xml: <declare-styleable name="StateSet"><attr format="reference" name="defaultState"/></declare-styleable>

> Task :app:mergeDevelopmentResources
AGPBI: {"kind":"error","text":"Android resource compilation failed","sources":[{"file":"C:\\Users\\xxx\\.gradle\\caches\\transforms-2\\files-2.1\\ac7a3722485ab8c9a6b5e513552ba699\\constraintlayout-2.0.4\\res\\values\\values.xml","position":{"startLine":340,"startColumn":4,"startOffset":35314,"endColumn":105,"endOffset":35415}}],"original":"C:\\Users\\xxx\\.gradle\\caches\\transforms-2\\files-2.1\\ac7a3722485ab8c9a6b5e513552ba699\\constraintlayout-2.0.4\\res\\values\\values.xml:341:5-106: AAPT: error: duplicate value for resource 'attr/defaultState' with config ''.\n    ","tool":"AAPT"}
AGPBI: {"kind":"error","text":"Android resource compilation failed","sources":[{"file":"C:\\Users\\xxx\\.gradle\\caches\\transforms-2\\files-2.1\\ac7a3722485ab8c9a6b5e513552ba699\\constraintlayout-2.0.4\\res\\values\\values.xml","position":{"startLine":340,"startColumn":4,"startOffset":35314,"endColumn":105,"endOffset":35415}}],"original":"C:\\Users\\xxx\\.gradle\\caches\\transforms-2\\files-2.1\\ac7a3722485ab8c9a6b5e513552ba699\\constraintlayout-2.0.4\\res\\values\\values.xml:341:5-106: AAPT: error: resource previously defined here.\n    ","tool":"AAPT"}
AGPBI: {"kind":"error","text":"Android resource compilation failed","sources":[{"file":"C:\\Code\\xxx\\app\\build\\intermediates\\incremental\\mergeDevelopmentResources\\merged.dir\\values\\values.xml"}],"original":"C:\\Code\\xxx\\app\\build\\intermediates\\incremental\\mergeDevelopmentResources\\merged.dir\\values\\values.xml: AAPT: error: file failed to compile.\n    ","tool":"AAPT"}

Any one that could see what could cause this issue? It could seem to be some kind of denpendency versions conflict, but still can't get why this would end up in something like this.

Edit: I found out that the material dependency is part of the problem:

implementation 'com.google.android.material:material:1.2.0-beta01'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

When ever I either upgrade that material to latest version or constraintlayout to 2.0.* it results in the above error, also if both are upgraded. Only with the versions above does it work. How could this be?

I add a new attribute to configure the infinite carousel. app:carousel_infinite="true" With this attribute, transition backwardTransition andforwardTransition are enabled always. The iteration of the items is given in the same way as the following sequence: [1, 2, 3, 4, 5, 1, 2, 3, 4, 5].

Demos

| Demo name | Normal | Infinite | | ------------- |:-------------:|:-----:| | Demo 010 carousel | | | | Demo 020 carousel | | | | Demo 030 carousel | | | | Demo 040 carousel | | | | Demo 060 carousel | | | | Demo colors carousel | | |

There is an inconsistent bug in ConstraintLayout 2.0.2 that sometimes completely misrenders UI elements. The problem is described in the thread here: https://kotlinlang.slack.com/archives/C0B8M7BUY/p1602767125009100

Switching back to 1.1.3 fixed my issues.

CircularFlow

I add a class called CircularFlow which allows us to group views with circular references.

constraint_referenced_ids : It receives id's of the views that will add the references (Eg. "view2, view3, view4,view5,view6").

circularflow_viewCenter : It receives the id of the view of the center where the views received in constraint_referenced_ids (Eg. "view1")

circularflow_angles : Receive the angles that you will assign to each view (Eg. "45,90,135,180,225")

circularflow_radiusInDP : Receive the radios in DP that you will assign to each view (Eg. "90,100,110,120,130")

How add a view at runtime?

With method addViewToCircularFlow you can add new views to CircularFlow.

 /**
 * Add a view to the CircularFlow. The referenced view need to be a child of the container parent.
 * The view also need to have its id set in order to be added.
 * The views previous need to have its radius and angle set in order to be added correctly a new view.
 * @param view
 * @param radius
 * @param angle
 * @return
 */

Eg.

findViewById<View>(R.id.view7).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).addViewToCircularFlow(
                it, 140, 200F
            )
        }

Demo add view in emulator

https://user-images.githubusercontent.com/24611045/107442324-ad3eee80-6b15-11eb-89b5-7f3221f2295d.mp4

How remove a view at runtime?

With method removeViewFromCircularFlow you can remove a view from CircularFlow.

 /**
     * Remove a given view from the CircularFlow.
     *
     * @param view
     */

Eg.

findViewById<View>(R.id.view2).setOnClickListener {
            findViewById<CircularFlow>(R.id.circularFlow).removeViewFromCircularFlow(
                it
            )
        }

Demo remove view in emulator

https://user-images.githubusercontent.com/24611045/107656012-80e4b880-6c62-11eb-924f-b0fa1244a2bf.mp4

Demos in AS:

https://user-images.githubusercontent.com/24611045/106652697-9aa44280-6574-11eb-819b-cb09f012f748.mov

https://user-images.githubusercontent.com/24611045/106653120-25853d00-6575-11eb-86ab-dca1a1c85ed9.mov

When I use motion layout in scaffold content, I can't open drawer content with scrolling. If I try to open drawer content, the motion layout will be worked. I know it is working well in XML but I can't find a solution to this problem.

This is my motion scene: https://gist.github.com/YusufbekIbragimov/aca18bd871468fa0372eb44346a7c6c0 This is my motion file: https://gist.github.com/YusufbekIbragimov/750a766eb3629b2b3b583d6fc58488ed This is mu my main screen file: https://gist.github.com/YusufbekIbragimov/9030b17cc5ccc98aae5a2bd7cda61099

As is explained here, i am using a Constraint layout helper to group view, in order to set a11y for view, the things is that starting from Constaintlayout 2.0.2

Here is the link in Google Issue Tracker but it looks like there is no proiority for it setted. https://issuetracker.google.com/issues/189350496

compile with 'androidx.constraintlayout:constraintlayout:2.0.4'

runs error:

Attribute "android:alpha" has already been defined Attribute "android:translationX" has already been defined Attribute "android:translationY" has already been defined Attribute "android:translationZ" has already been defined

If a TextVIew is being resizing during a transition, and the layout_width or layout_height was set to wrap_content, then the widget is not resized well, most of the time the widget flick showing only a part of the component Tested with constraintlayout v2.0.1

This add a toolsAndroid directory for small code tools that people can use to gain insight into ConstraintLayout related stuff. (toolsDesktop to follow) Also updates ConstraintSet JSON writer

JSON produced by ConstraintSet$WriteJsonEngine from method ConstraintSet#writeState(0) does not follows RFC 8259 or 4627 standards.

For example in WriteJsonEngine as key punctuators used single quote but expected double quote.

I don't know how but the constraint layout's chains are not working with latest version of compose (1.4 -alpha2).

Here is the code

private val HeaderArtWorkShape = RoundedCornerShape(20) context(TracksViewModel) @Composable fun Header( modifier: Modifier = Modifier ) { ConstraintLayout(modifier = modifier) {

    val meta by header
    val title = stringResource(value = title)
    val (Artwork, Play, Title, Subtitle, Share, Shuffle, Sort, Divider) = createRefs()

    // create the chain
    // this will determine the size of the
    // Header
    constrain(
        ref = createVerticalChain(Artwork, Share, Divider, chainStyle = ChainStyle.Packed),
        constrainBlock = {
            // Divider will act as the center anchor of Play Button
            top.linkTo(parent.top, ContentPadding.normal)
            bottom.linkTo(parent.bottom, ContentPadding.large)
        }
    )

    Surface(
        shape = HeaderArtWorkShape,
        elevation = ContentElevation.high,

        content = {
            val artwork = meta?.artwork
            Image(data = artwork)
        },

        modifier = Modifier
            .constrainAs(Artwork) {
                start.linkTo(parent.start, ContentPadding.normal)
                width = Dimension.value(76.dp)
                height = Dimension.ratio("0.61")
            },
    )

    val context = LocalContext.current
    val channel = LocalSnackDataChannel.current
    val enabled by remember { derivedStateOf { selected.size > 0 } }
    //Share
    IconButton(
        onClick = { share(context, channel) },
        imageVector = Icons.TwoTone.Share,
        contentDescription = null,
        enabled = enabled,
        modifier = Modifier
            .padding(top = ContentPadding.large)
            .constrainAs(Share) {}
    )

    // Divider
    Divider(
        modifier = Modifier
            .constrainAs(Divider) {}
    )


    // line 2 is the line of Button aligned with share
    constrain(
        ref = createHorizontalChain(Share, Shuffle, Sort, chainStyle = ChainStyle.Packed(0f)),
        constrainBlock = {
            start.linkTo(Artwork.start)
        }
    )

    //Shuffle
    IconButton(
        imageVector = Icons.TwoTone.Shuffle,
        contentDescription = null,

        onClick = { onRequestPlay(context, true, channel = channel) },

        modifier = Modifier.constrainAs(Shuffle) {
            bottom.linkTo(Share.bottom)
        }
    )

    // Sort
    var show by rememberState(initial = false)
    IconButton(
        onClick = { show = true },

        modifier = Modifier.constrainAs(Sort) {
            bottom.linkTo(Share.bottom)
        },

        content = {
            Icon(imageVector = Icons.TwoTone.Sort, contentDescription = null)
            SortBy(expanded = show) {
                show = false
            }
        }
    )

    // Play Button
    NeumorphicButton(
        shape = CircleShape,
        onClick = { onRequestPlay(context, false, null, channel = channel) },

        colors = NeumorphicButtonDefaults.neumorphicButtonColors(
            lightShadowColor = Material.colors.lightShadowColor,
            darkShadowColor = Material.colors.darkShadowColor
        ),

        modifier = Modifier
            .constrainAs(Play) {
                top.linkTo(Divider.top)
                bottom.linkTo(Divider.bottom)
                end.linkTo(parent.end, ContentPadding.large)
                width = Dimension.value(60.dp)
                height = Dimension.value(60.dp)
            },

        content = {
            Icon(
                painter = painterResource(id = R.drawable.ic_play_arrow),
                contentDescription = null,
                modifier = Modifier.requiredSize(20.dp)
            )
        }
    )


    // Title
    Header(
        text = title,
        style = Material.typography.h5,
        maxLines = 2,
        textAlign = TextAlign.Start,

        modifier = Modifier.constrainAs(Title) {
            start.linkTo(Artwork.end, ContentPadding.normal)
            end.linkTo(parent.end, ContentPadding.normal)
            top.linkTo(Artwork.top)
            width = Dimension.fillToConstraints
        }
    )

    // Subtitle
    val subtitle = stringResource(value = meta?.subtitle) ?: AnnotatedString("")
    Label(
        text = subtitle,
        textAlign = TextAlign.Start,
        style = Material.typography.caption2,
        fontWeight = FontWeight.SemiBold,
        color = LocalContentColor.current.copy(ContentAlpha.medium),
        maxLines = 2,
        modifier = Modifier
            .constrainAs(Subtitle) {
                end.linkTo(parent.end, ContentPadding.normal)
                top.linkTo(Title.bottom)
                start.linkTo(Title.start)
                width = Dimension.fillToConstraints
            },
    )

    // line 3 of details
    val (Duration, Divider1, Tracks, Divider2, Size) = createRefs()
    constrain(
        ref = createHorizontalChain(
            Duration,
            Divider1,
            Tracks,
            Divider2,
            Size,
            chainStyle = ChainStyle.SpreadInside
        ),

        constrainBlock = {
            start.linkTo(Title.start)
            end.linkTo(parent.end, ContentPadding.normal)
        }
    )

    //Duration
    val duration = Util.formatAsDuration((meta?.duration ?: 0).toLong())
    Text(
        reference = Duration,
        value = duration,
        title = "Duration",

        block = {
            top.linkTo(Subtitle.bottom, ContentPadding.normal)
        }
    )

    // Divider 1
    Divider(
        modifier = Modifier.constrainAs(Divider1) {
            top.linkTo(Duration.top, -ContentPadding.small)
            height = Dimension.value(56.dp)
            width = Dimension.value(1.dp)
        }
    )

    //Tracks
    val count = meta?.cardinality ?: 0
    Text(
        reference = Tracks,
        value = "$count",
        title = "Tracks",

        block = {
            top.linkTo(Duration.top)
        },
    )

    //Divider 2
    Divider(
        modifier = Modifier.constrainAs(Divider2) {
            height = Dimension.value(56.dp)
            top.linkTo(Duration.top, -ContentPadding.small)
            width = Dimension.value(1.dp)
        }
    )

    // Size
    val size = FileUtils.toFormattedDataUnit(context, meta?.size ?: 0L)
    Text(
        reference = Size,
        value = size,
        title = "Size",
        block = {
            top.linkTo(Duration.top)
        },
    )
}

}

Note: The code was working properly in 1.3.0-beta01. Here the chains logic is all messed up.

I have a horizontal chain flow of programatically added items (key-value pairs).

        <androidx.constraintlayout.helper.widget.Flow
            android:id="@+id/flow"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:orientation="horizontal"
            app:flow_horizontalAlign="start"
            app:flow_horizontalBias="0"
            app:flow_horizontalGap="8dp"
            app:flow_horizontalStyle="packed"
            app:flow_verticalGap="8dp"
            app:flow_wrapMode="chain"
            app:layout_constraintEnd_toEndOf="@id/endGuideline"
            app:layout_constraintStart_toStartOf="@id/startGuideline"
            app:layout_constraintTop_toBottomOf="@id/title" />

Each item is added with the following layout params:

ConstraintLayout.LayoutParams(
    ConstraintLayout.LayoutParams.WRAP_CONTENT,
    ConstraintLayout.LayoutParams.WRAP_CONTENT
).apply {
    constrainedWidth = true
    constrainedHeight = true
}

When I add an item with a lot of text, the view is being clipped at the bottom (screenshot 1).

Everything is working fine if a flow has no horizontal paddings/margins, and horizontally constrained to the parent (Screenshot 2).

Seems like large views are getting measured wrong.

Demo project: constraint-layout-issue activity_main.xml item_view.xml MainActivity.kt

❌ Screenshot 1 – flow constrained to guidelines (start/end=16dp), large views getting clipped.

✅ Screenshot 2 – flow constrained to the parent, everything is fine.

Fatal Exception: java.lang.IndexOutOfBoundsException: Index: 2, Size: 2
       at java.util.ArrayList.get(ArrayList.java:437)
       at androidx.constraintlayout.core.widgets.analyzer.BasicMeasure.measureChildren(BasicMeasure.java:79)
       at androidx.constraintlayout.core.widgets.analyzer.BasicMeasure.solverMeasure(BasicMeasure.java:278)
       at androidx.constraintlayout.core.widgets.ConstraintWidgetContainer.measure(ConstraintWidgetContainer.java:120)
       at androidx.constraintlayout.widget.ConstraintLayout.resolveSystem(ConstraintLayout.java:1594)
       at androidx.constraintlayout.widget.ConstraintLayout.onMeasure(ConstraintLayout.java:1708)
       at android.view.View.measure(View.java:27129)
       at androidx.viewpager.widget.ViewPager.onMeasure(ViewPager.java:1638)
       at com.baselibrary.view.RtlViewPager.onMeasure(RtlViewPager.java:221)
       at android.view.View.measure(View.java:27129)
       at android.widget.LinearLayout.measureVertical(LinearLayout.java:995)
       at android.widget.LinearLayout.onMeasure(LinearLayout.java:721)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7980)
       at android.widget.FrameLayout.onMeasure(FrameLayout.java:197)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChild(ViewGroup.java:7951)
       at com.baselibrary.view.statelayout.LayoutLevelView.mc(LayoutLevelView.java:105)
       at com.baselibrary.view.statelayout.LayoutLevelView.onMeasure(LayoutLevelView.java:86)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7980)
       at android.widget.FrameLayout.onMeasure(FrameLayout.java:197)
       at androidx.appcompat.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:145)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7980)
       at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1552)
       at android.widget.LinearLayout.measureVertical(LinearLayout.java:842)
       at android.widget.LinearLayout.onMeasure(LinearLayout.java:721)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7980)
       at android.widget.FrameLayout.onMeasure(FrameLayout.java:197)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7980)
       at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1552)
       at android.widget.LinearLayout.measureVertical(LinearLayout.java:842)
       at android.widget.LinearLayout.onMeasure(LinearLayout.java:721)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7980)
       at android.widget.FrameLayout.onMeasure(FrameLayout.java:197)
       at com.android.internal.policy.DecorView.onMeasure(DecorView.java:1277)
       at android.view.View.measure(View.java:27129)
       at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:4536)
       at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:3228)
       at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:3533)
       at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:2919)
       at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:10491)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1108)
       at android.view.Choreographer.doCallbacks(Choreographer.java:866)
       at android.view.Choreographer.doFrame(Choreographer.java:797)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1092)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loopOnce(Looper.java:226)
       at android.os.Looper.loop(Looper.java:313)
       at android.app.ActivityThread.main(ActivityThread.java:8663)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:567)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135)

Have not idea if this is the bug of BasicMeasure

Experimental Work to understand the flow of Core Helper -> Compose Split is used to split Btn1 and Btn2

Orientation: 0 -> Horizontal

Orientation: 1 -> Vertical