diff --git a/constraintlayout/constraintlayout/src/main/java/androidx/constraintlayout/motion/widget/MotionScene.java b/constraintlayout/constraintlayout/src/main/java/androidx/constraintlayout/motion/widget/MotionScene.java index 785273227..e65ad80e3 100644 --- a/constraintlayout/constraintlayout/src/main/java/androidx/constraintlayout/motion/widget/MotionScene.java +++ b/constraintlayout/constraintlayout/src/main/java/androidx/constraintlayout/motion/widget/MotionScene.java @@ -1271,7 +1271,7 @@ private void load(Context context, int resourceId) { break; case ONCLICK_TAG: if (transition != null) { - if (mMotionLayout.isInEditMode()) { + if (!mMotionLayout.isInEditMode()) { transition.addOnClick(context, parser); } } diff --git a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/ConstraintSetParser.java b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/ConstraintSetParser.java index 7f0d9333e..3346ad86a 100644 --- a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/ConstraintSetParser.java +++ b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/ConstraintSetParser.java @@ -514,6 +514,16 @@ public static void parseJSON(String content, State state, case "barrier": parseBarrier(state, elementName, (CLObject) element); break; + case "vChain": + case "hChain": + parseChainType( + type, + state, + elementName, + layoutVariables, + (CLObject) element + ); + break; } } else { parseWidget(state, layoutVariables, @@ -726,6 +736,110 @@ static void parseChain(int orientation, State state, } } + private static float toPix(State state, float dp){ + return state.getDpToPixel().toPixels(dp); + } + /** + * Support parsing Chain in the following manner + * chainId : { + * type:'hChain' // or vChain + * contains: ['id1', 'id2', 'id3' ] + * contains: [['id', weight, marginL ,marginR], 'id2', 'id3' ] + * start: ['parent', 'start',0], + * end: ['parent', 'end',0], + * top: ['parent', 'top',0], + * bottom: ['parent', 'bottom',0], + * style: 'spread' + * } + + * @throws CLParsingException + */ + private static void parseChainType(String orientation, + State state, + String chainName, + LayoutVariables margins, + CLObject object) throws CLParsingException { + + ChainReference chain = (orientation.charAt(0) == 'h') + ? state.horizontalChain() : state.verticalChain(); + chain.setKey(chainName); + + for (String params : object.names()) { + switch (params) { + case "contains": + CLElement refs = object.get(params); + if (!(refs instanceof CLArray) || ((CLArray) refs).size() < 1) { + System.err.println( + chainName + " contains should be an array \"" + refs.content() + + "\""); + return; + } + for (int i = 0; i < ((CLArray) refs).size(); i++) { + CLElement chainElement = ((CLArray) refs).get(i); + if (chainElement instanceof CLArray) { + CLArray array = (CLArray) chainElement; + if (array.size() > 0) { + String id = array.get(0).content(); + chain.add(id); + float weight = Float.NaN; + float preMargin = Float.NaN; + float postMargin = Float.NaN; + switch (array.size()) { + case 2: // sets only the weight + weight = array.getFloat(1); + break; + case 3: // sets the pre and post margin to the 2 arg + weight = array.getFloat(1); + postMargin = preMargin = toPix(state, array.getFloat(2)); + break; + case 4: // sets the pre and post margin + weight = array.getFloat(1); + preMargin = toPix(state, array.getFloat(2)); + postMargin = toPix(state, array.getFloat(3)); + break; + } + chain.addChainElement(id, weight, preMargin, postMargin); + } + } else { + chain.add(chainElement.content()); + } + } + break; + case "start": + case "end": + case "top": + case "bottom": + case "left": + case "right": + parseConstraint(state, margins, object, chain, params); + break; + case "style": + + CLElement styleObject = object.get(params); + String styleValue; + if (styleObject instanceof CLArray && ((CLArray) styleObject).size() > 1) { + styleValue = ((CLArray) styleObject).getString(0); + float biasValue = ((CLArray) styleObject).getFloat(1); + chain.bias(biasValue); + } else { + styleValue = styleObject.content(); + } + switch (styleValue) { + case "packed": + chain.style(State.Chain.PACKED); + break; + case "spread_inside": + chain.style(State.Chain.SPREAD_INSIDE); + break; + default: + chain.style(State.Chain.SPREAD); + break; + } + + break; + } + } + } static void parseGuideline(int orientation, State state, CLArray helper) throws CLParsingException { @@ -738,7 +852,6 @@ static void parseGuideline(int orientation, parseGuidelineParams(orientation, state, guidelineId, (CLObject) params); } - static void parseGuidelineParams( int orientation, State state, @@ -980,10 +1093,8 @@ static void parseWidget( } } - } - static void parseCustomProperties( CLObject element, ConstraintReference reference, @@ -1019,7 +1130,6 @@ private static int indexOf(String val, String... types) { return -1; } - /** * parse the motion section of a constraint * 
diff --git a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/ChainReference.java b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/ChainReference.java
index 548aaa797..7ef280f62 100644
--- a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/ChainReference.java
+++ b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/ChainReference.java
@@ -19,9 +19,15 @@
 import androidx.constraintlayout.core.state.HelperReference;
 import androidx.constraintlayout.core.state.State;
 
+import java.util.HashMap;
+
 public class ChainReference extends HelperReference {
 
     protected float mBias = 0.5f;
+    protected HashMap mMapWeights;
+    protected HashMap mMapPreMargin;
+    protected HashMap mMapPostMargin;
+
     protected State.Chain mStyle = State.Chain.SPREAD;
 
     public ChainReference(State state, State.Helper type) {
@@ -40,6 +46,52 @@ public ChainReference style(State.Chain style) {
         return this;
     }
 
+    public void addChainElement(String id, float weight, float preMargin, float  postMargin ) {
+        super.add(id);
+        if (!Float.isNaN(weight)) {
+            if (mMapWeights == null) {
+                mMapWeights = new HashMap<>();
+            }
+            mMapWeights.put(id, weight);
+        }
+        if (!Float.isNaN(preMargin)) {
+            if (mMapPreMargin == null) {
+                mMapPreMargin = new HashMap<>();
+            }
+            mMapPreMargin.put(id, preMargin);
+        }
+        if (!Float.isNaN(postMargin)) {
+            if (mMapPostMargin == null) {
+                mMapPostMargin = new HashMap<>();
+            }
+            mMapPostMargin.put(id, postMargin);
+        }
+    }
+
+  protected float getWeight(String id) {
+       if (mMapWeights == null) {
+           return -1;
+       }
+       if (mMapWeights.containsKey(id)) {
+           return mMapWeights.get(id);
+       }
+       return 1;
+    }
+
+    protected float getPostMargin(String id) {
+        if (mMapPostMargin != null  && mMapPostMargin.containsKey(id)) {
+            return mMapPostMargin.get(id);
+        }
+        return 0;
+    }
+
+    protected float getPreMargin(String id) {
+        if (mMapPreMargin != null  && mMapPreMargin.containsKey(id)) {
+            return mMapPreMargin.get(id);
+        }
+        return 0;
+    }
+
     public float getBias() {
         return mBias;
     }
diff --git a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/HorizontalChainReference.java b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/HorizontalChainReference.java
index 7208b0209..082a2966c 100644
--- a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/HorizontalChainReference.java
+++ b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/HorizontalChainReference.java
@@ -39,6 +39,7 @@ public void apply() {
 
         for (Object key : mReferences) {
             ConstraintReference reference = mState.constraints(key);
+
             if (first == null) {
                 first = reference;
                 if (mStartToStart != null) {
@@ -55,13 +56,17 @@ public void apply() {
                     first.startToEnd(mLeftToRight).margin(mMarginLeft).marginGone(mMarginLeftGone);
                 } else {
                     // No constraint declared, default to Parent.
-                    first.startToStart(State.PARENT);
+                    String refKey = reference.getKey().toString();
+                    first.startToStart(State.PARENT).margin(getPreMargin(refKey));
                 }
             }
             if (previous != null) {
-                previous.endToStart(reference.getKey());
-                reference.startToEnd(previous.getKey());
+                String preKey = previous.getKey().toString();
+                String refKey = reference.getKey().toString();
+                previous.endToStart(reference.getKey()).margin(getPostMargin(preKey));
+                reference.startToEnd(previous.getKey()).margin(getPreMargin(refKey));
             }
+            reference.setHorizontalChainWeight(getWeight(key.toString()));
             previous = reference;
         }
 
@@ -78,7 +83,8 @@ public void apply() {
                 previous.endToEnd(mRightToRight).margin(mMarginRight).marginGone(mMarginRightGone);
             } else {
                 // No constraint declared, default to Parent.
-                previous.endToEnd(State.PARENT);
+                String preKey = previous.getKey().toString();
+                previous.endToEnd(State.PARENT).margin(getPostMargin(preKey));
             }
         }
 
diff --git a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/VerticalChainReference.java b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/VerticalChainReference.java
index ebaa44059..8e2c92f1e 100644
--- a/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/VerticalChainReference.java
+++ b/constraintlayout/core/src/main/java/androidx/constraintlayout/core/state/helpers/VerticalChainReference.java
@@ -47,13 +47,17 @@ public void apply() {
                     first.topToBottom(mTopToBottom).margin(mMarginTop).marginGone(mMarginTopGone);
                 } else {
                     // No constraint declared, default to Parent.
-                    first.topToTop(State.PARENT);
+                    String refKey = reference.getKey().toString();
+                    first.topToTop(State.PARENT).margin(getPreMargin(refKey));
                 }
             }
             if (previous != null) {
-                previous.bottomToTop(reference.getKey());
-                reference.topToBottom(previous.getKey());
+                String preKey = previous.getKey().toString();
+                String refKey = reference.getKey().toString();
+                previous.bottomToTop(reference.getKey()).margin(getPostMargin(preKey));
+                reference.topToBottom(previous.getKey()).margin(getPreMargin(refKey));
             }
+            reference.setVerticalChainWeight(getWeight(key.toString()));
             previous = reference;
         }
 
@@ -68,7 +72,8 @@ public void apply() {
                         .marginGone(mMarginBottomGone);
             } else {
                 // No constraint declared, default to Parent.
-                previous.bottomToBottom(State.PARENT);
+                String preKey = previous.getKey().toString();
+                previous.bottomToBottom(State.PARENT).margin(getPostMargin(preKey));
             }
         }
 
diff --git a/demoProjects/ComposeConstraintLayoutDemo/.gitignore b/demoProjects/ComposeConstraintLayoutDemo/.gitignore
new file mode 100644
index 000000000..aa724b770
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/.gitignore
@@ -0,0 +1,15 @@
+*.iml
+.gradle
+/local.properties
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
+.DS_Store
+/build
+/captures
+.externalNativeBuild
+.cxx
+local.properties
diff --git a/demoProjects/ComposeConstraintLayoutDemo/.idea/.gitignore b/demoProjects/ComposeConstraintLayoutDemo/.idea/.gitignore
new file mode 100644
index 000000000..26d33521a
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/.gitignore b/demoProjects/ComposeConstraintLayoutDemo/app/.gitignore
new file mode 100644
index 000000000..42afabfd2
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/build.gradle b/demoProjects/ComposeConstraintLayoutDemo/app/build.gradle
new file mode 100644
index 000000000..f01125839
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/build.gradle
@@ -0,0 +1,64 @@
+plugins {
+    id 'com.android.application'
+    id 'org.jetbrains.kotlin.android'
+}
+
+android {
+    namespace 'androidx.demo.motiondemos'
+    compileSdk 32
+
+    defaultConfig {
+        applicationId "androidx.demo.motiondemos"
+        minSdk 21
+        targetSdk 32
+        versionCode 1
+        versionName "1.0"
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary true
+        }
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion '1.1.1'
+    }
+    packagingOptions {
+        resources {
+            excludes += '/META-INF/{AL2.0,LGPL2.1}'
+        }
+    }
+}
+
+dependencies {
+
+    implementation 'androidx.core:core-ktx:1.7.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
+    implementation 'androidx.activity:activity-compose:1.3.1'
+    implementation 'androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha01'
+    implementation "androidx.compose.ui:ui:$compose_ui_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
+    implementation 'androidx.compose.material:material:1.1.1'
+    testImplementation 'junit:junit:4.13.2'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
+}
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/proguard-rules.pro b/demoProjects/ComposeConstraintLayoutDemo/app/proguard-rules.pro
new file mode 100644
index 000000000..481bb4348
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/androidTest/java/androidx/demo/motiondemos/ExampleInstrumentedTest.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/androidTest/java/androidx/demo/motiondemos/ExampleInstrumentedTest.kt
new file mode 100644
index 000000000..23a5ffa21
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/androidTest/java/androidx/demo/motiondemos/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package androidx.demo.motiondemos
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("androidx.demo.motiondemos", appContext.packageName)
+    }
+}
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/AndroidManifest.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/AndroidManifest.xml
new file mode 100644
index 000000000..047c50111
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/AndroidManifest.xml
@@ -0,0 +1,28 @@
+
+
+
+    
+        
+            
+                
+
+                
+            
+        
+    
+
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/MainActivity.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/MainActivity.kt
new file mode 100644
index 000000000..2eb7a9b88
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/MainActivity.kt
@@ -0,0 +1,294 @@
+@file:OptIn(ExperimentalMotionApi::class)
+
+package androidx.demo.motiondemos
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PaintingStyle.Companion.Stroke
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.ConstraintSet
+import androidx.constraintlayout.compose.ExperimentalMotionApi
+import androidx.demo.motiondemos.ui.theme.MotionDemosTheme
+
+class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            MotionDemosTheme {
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    ProductScreen( )
+                }
+            }
+        }
+    }
+}
+
+
+
+@Preview(group = "foo")
+@Composable
+public fun ProductScreen() {
+    ConstraintLayout(
+        ConstraintSet("""
+{
+    Helpers: [
+        ['hChain', ['topButton0','topButton1','topButton2','topButton3','topButton4'], {
+            start: ['parent', 'start',132], end: ['search', 'start'], style: 'spread'}],
+        ['vChain', ['pitch','pitchSub','addToCart'], {
+            style: 'packed'}],
+            ['hChain', ['baseCard1','baseCard2','baseCard3'], {
+            start: ['parent', 'start',0], end: ['parent', 'end',0], style: 'spread'}],
+        ],
+    menu: { helper: 'hChain', ref: ['topButton0','topButton1','topButton2','topButton3','topButton4'],}, 
+ 
+    
+    topButton0: {   top: ['getStarted', 'top'], bottom: ['getStarted', 'bottom'] },
+    topButton1: {   top: ['topButton0', 'top'],  },
+    topButton2: {   top: ['topButton1', 'top'],  },
+    topButton3: {   top: ['topButton2', 'top'],  },
+    topButton4: {   top: ['topButton3', 'top'],  },
+    topLogo: {
+        width: 'wrap', height: 'wrap',
+        start: ['parent', 'start',32],
+        top: ['getStarted', 'top'], 
+        bottom: ['getStarted', 'bottom'],
+        rotationX: 360,
+        
+    },
+    getStarted: { 
+        width: 'wrap', height: 'wrap',
+        end: ['parent', 'end', 32],
+        top: ['parent', 'top', 16],
+    },     
+    cart : {
+        end: ['getStarted', 'start'],
+        top: ['getStarted', 'top'],
+        bottom: ['getStarted', 'bottom'],
+    },
+    search : {
+        width: 'wrap', height: 'wrap',
+        end: ['cart', 'start'],
+        top: ['cart', 'top'],
+    },
+     pitch : {start: ['parent', 'start',44] },
+     pitchSub : {start: ['pitch', 'start']} ,
+     addToCart : {start: ['pitchSub', 'start']},
+     iconicImage : {start: ['addToCart', 'end',10], centerVertically: 'addToCart'},
+     details : {start: ['iconicImage', 'end',10], centerVertically: 'addToCart'},
+     background:  {  center: 'parent',scaleX: 0.8, scaleY: 0.8, translationX:36, rotationZ: 39 ,alpha: 0.5},
+     product:  {  center: 'parent' },
+     examples: { 
+        width: 132,
+        height: 132,
+        end: ['parent' , 'end',64],
+        top: ['arrow', 'bottom'],
+        bottom: ['arrow', 'bottom']
+    },
+    arrow: {
+        width: 'spread',
+        height: 50,
+        start: ['product','end'] ,
+        top: ['product','bottom'],
+        end: ['examples', 'start']
+           
+    },
+    review: { 
+    width: 200,
+     height: 90,
+     bottom: ['examples', 'top'],
+      top: ['getStarted', 'bottom'],
+        end: ['examples', 'end']
+    },
+    baseCard1: {bottom: ['parent' , 'bottom',32]},
+    baseCard2: {bottom: ['baseCard1' , 'bottom']},
+    baseCard3: {bottom: ['baseCard2' , 'bottom']},
+   
+     
+}   
+        """),
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+    ) {
+        val icons = arrayOf( R.drawable.top_logo, R.drawable.search, R.drawable.cart)
+        val iconsId = arrayOf( "topLogo", "search", "cart")
+        val description = arrayOf( "top Logo", "search", "cart")
+
+        for (i in 0..2) {
+            Icon(
+                modifier = Modifier.layoutId(iconsId[i]),
+                painter = painterResource(id = icons[i]),
+                contentDescription = description[i]
+            )
+        }
+        Button( modifier = Modifier.layoutId("getStarted"),
+            onClick = { /*TODO*/ }) {
+            Text(text = "Get Started")
+            
+        }
+        val topButton = arrayOf("Home", "About", "Products", "doc", "support")
+
+        for (i in 0..4) {
+            Text( modifier = Modifier.layoutId("topButton$i"),text = topButton[i])
+        }
+
+        Image(
+            modifier = Modifier.layoutId("background"),
+            painter = painterResource(id = R.drawable.g_flame),
+            contentDescription = "flame"
+        )
+
+        Image( modifier = Modifier.layoutId("product"),
+            painter = painterResource(id = R.drawable.cl_icon),
+            contentDescription = ""
+        )
+
+        // ========================= Pitch
+        Text(
+            modifier = Modifier.layoutId("pitch"),
+            fontSize = 32.sp,
+            text = "State of art \nRelational Layout \nManagement ")
+
+        Text( modifier = Modifier.layoutId("pitchSub"),
+            fontSize = 22.sp,
+            text = "The ui possibilities are \nendless")
+
+        Button( modifier = Modifier.layoutId("addToCart"),
+            onClick = { /*TODO*/ }) {
+            Icon(
+                painter = painterResource(id = R.drawable.cart),
+                contentDescription = "cart"
+            )
+            Text(text = "Add To Cart")
+        }
+
+
+        Icon(
+            modifier = Modifier.layoutId("iconicImage"),
+            painter = painterResource(id = R.drawable.cart),
+            contentDescription = "cart"
+        )
+
+        Text( modifier = Modifier.layoutId("details"),
+            fontSize = 22.sp,
+            fontWeight = FontWeight.Bold,
+            text = "details >"
+        )
+
+        Canvas(modifier =  Modifier.layoutId("arrow")) {
+            val w = size.width
+            val h = size.height
+            val arrowSize = 40;
+            val arrowPath = Path();
+            arrowPath.moveTo(0f,0f);
+            arrowPath.cubicTo(w/6,w/6, 0f,h,w,h)
+            arrowPath.lineTo(w-arrowSize,h-arrowSize)
+            arrowPath.lineTo(w,h)
+            arrowPath.lineTo(w-arrowSize,h+arrowSize)
+            drawPath(
+                path=arrowPath,
+                color = Color.Blue,
+                style =  Stroke(10f),
+            )
+        }
+        Surface(
+            contentColor = Color(0xFFFFFFFF),
+            modifier = Modifier.layoutId("examples"),
+            elevation = 18.dp,
+            shape = RoundedCornerShape(8.dp)
+        ) {
+
+        }
+        Surface(
+
+            modifier = Modifier.layoutId("review"),
+            elevation = 18.dp,
+            shape = RoundedCornerShape(8.dp)
+        ) {
+            Column( modifier = Modifier.fillMaxWidth()
+                .padding(12.dp))  {
+                Text(
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Bold,
+                    text = "Best Layout Engine"
+                )
+                Text(
+                    fontSize = 14.sp,
+                    text = "Compose + ConstraintLayout\nMakes Life easy"
+                )
+            }
+
+        }
+
+        CallOut( "baseCard1", "Excellent support", "Twitter, Stack overflow, github")
+        CallOut("baseCard2","Open Source", "Developed on github" )
+        CallOut("baseCard3","Compose or ViewGroup","Committed to evolving both")
+//        Icon(
+//            modifier = Modifier.layoutId("product"),
+//            painter = painterResource(id = R.drawable.buds),
+//            contentDescription = "buds"
+//        )
+
+    }
+}
+
+@Composable
+public fun CallOut(id:String, feature:String,sub:String) {
+    Row(modifier=Modifier.layoutId(id),verticalAlignment  = Alignment.CenterVertically)  {
+        Box(modifier = Modifier.background(Color.Yellow)) {
+            Icon(
+                modifier = Modifier.layoutId("iconicImage"),
+                painter = painterResource(id = R.drawable.cart),
+                contentDescription = "cart"
+            )
+        }
+
+    Column( modifier = Modifier
+        .padding(12.dp))  {
+        Text(
+            fontSize = 20.sp,
+            fontWeight = FontWeight.Bold,
+            text = feature
+        )
+        Text(
+            fontSize = 14.sp,
+            text = sub
+        )
+    }
+    }
+}
+
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/MainActivity_start.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/MainActivity_start.kt
new file mode 100644
index 000000000..3265dc4da
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/MainActivity_start.kt
@@ -0,0 +1,178 @@
+@file:OptIn(ExperimentalMotionApi::class)
+
+package androidx.demo.motiondemos
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ExperimentalMotionApi
+import androidx.constraintlayout.compose.MotionLayout
+import androidx.constraintlayout.compose.MotionLayoutDebugFlags
+import androidx.constraintlayout.compose.MotionScene
+import androidx.demo.motiondemos.ui.theme.MotionDemosTheme
+import java.util.*
+
+class MainActivity_start : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            MotionDemosTheme {
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    CycleScale( )
+                }
+            }
+        }
+    }
+}
+
+
+
+@Preview(group = "motion8")
+@Composable
+public fun CycleScale() {
+    var animateToEnd by remember { mutableStateOf(false) }
+
+    val progress by animateFloatAsState(
+        targetValue = if (animateToEnd) 1f else 0f,
+        animationSpec = tween(6000)
+    )
+    Column {
+        MotionLayout(
+            modifier = Modifier
+                .width(300.dp)
+                .height(300.dp)
+                .background(Color.White),
+            motionScene = MotionScene("""{
+                   Debug: {
+                  name: 'Cycle30'
+                },
+                ConstraintSets: {
+                  start: {
+                    cover: {
+                      width: 'spread',
+                      height: 'spread',
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16]
+                    },
+                 run: {
+                      width: 'spread',
+                      height: 'spread',
+                      start: ['parent', 'start', 64],
+                      bottom: ['parent', 'bottom', 64],
+                         end: ['parent', 'end', 64],
+                      top: ['parent', 'top', 64]
+                    },
+                  edge: {
+                     width: 'spread',
+                      height: 14,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                        alpha: 0,
+                    },
+                    },
+                  end: {
+                    cover: {
+                      width: 'spread',
+                      height: 'spread',
+                      rotationX: -90,
+                      pivotX: 0.5,
+                      pivotY: 0,
+                      end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                    },
+                     run: {
+                      width: 'spread',
+                      height: 'spread',
+                      start: ['parent', 'start', 64],
+                      bottom: ['parent', 'bottom', 64],
+                         end: ['parent', 'end', 64],
+                      top: ['parent', 'top', 64]
+                    },
+                  edge: {
+                       width: '50%',
+                      height: 14,
+                      start: ['parent', 'start', 16],
+                    
+                         end: ['parent', 'end', 16],
+                          top: ['parent', 'top', 16],
+                          alpha: 0,
+                  }
+                  }
+                },
+                Transitions: {
+                  default: {
+                    from: 'start',
+                    to: 'end',
+                  onSwipe: {
+                  mode: 'spring',
+                direction: 'up',
+                   anchor: 'edge',
+                side: 'top',
+                springBoundary: 'down',
+                springStiffness: 800,
+                springDamping: 32
+                  },
+                  
+                  }
+                }
+            }"""),
+            debug = EnumSet.of(MotionLayoutDebugFlags.SHOW_ALL),
+            progress = progress) {
+            Button(modifier = Modifier
+                .layoutId("run"),
+                onClick = { /*TODO*/ },
+                        shape = RoundedCornerShape(40)
+            ) {
+                Text(text = "Start\nEngine")
+
+            }
+            Box(modifier = Modifier
+                .layoutId("cover")
+                .clip(RoundedCornerShape(
+                bottomEnd = 32.dp, bottomStart = 32.dp))
+                .background(Color.Red))
+
+            Box(modifier = Modifier
+                .layoutId("edge")
+                .background(Color.Green))
+
+        }
+
+        Button(onClick = { animateToEnd = !animateToEnd }) {
+            Text(text = "Run")
+        }
+    }
+}
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Color.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Color.kt
new file mode 100644
index 000000000..73b3043d0
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Color.kt
@@ -0,0 +1,8 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple200 = Color(0xFFBB86FC)
+val Purple500 = Color(0xFF6200EE)
+val Purple700 = Color(0xFF3700B3)
+val Teal200 = Color(0xFF03DAC5)
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Shape.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Shape.kt
new file mode 100644
index 000000000..2670e9eb1
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Shape.kt
@@ -0,0 +1,11 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.ui.unit.dp
+
+val Shapes = Shapes(
+    small = RoundedCornerShape(4.dp),
+    medium = RoundedCornerShape(4.dp),
+    large = RoundedCornerShape(0.dp)
+)
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Theme.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Theme.kt
new file mode 100644
index 000000000..5bc559968
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Theme.kt
@@ -0,0 +1,44 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+
+private val DarkColorPalette = darkColors(
+    primary = Purple200,
+    primaryVariant = Purple700,
+    secondary = Teal200
+)
+
+private val LightColorPalette = lightColors(
+    primary = Purple500,
+    primaryVariant = Purple700,
+    secondary = Teal200
+
+    /* Other default colors to override
+    background = Color.White,
+    surface = Color.White,
+    onPrimary = Color.White,
+    onSecondary = Color.Black,
+    onBackground = Color.Black,
+    onSurface = Color.Black,
+    */
+)
+
+@Composable
+fun MotionDemosTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+    val colors = if (darkTheme) {
+        DarkColorPalette
+    } else {
+        LightColorPalette
+    }
+
+    MaterialTheme(
+        colors = colors,
+        typography = Typography,
+        shapes = Shapes,
+        content = content
+    )
+}
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Type.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Type.kt
new file mode 100644
index 000000000..c73382902
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/java/androidx/demo/motiondemos/ui/theme/Type.kt
@@ -0,0 +1,28 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.material.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Set of Material typography styles to start with
+val Typography = Typography(
+    body1 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    )
+    /* Other default text styles to override
+    button = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        fontSize = 14.sp
+    ),
+    caption = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 12.sp
+    )
+    */
+)
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
new file mode 100644
index 000000000..2b068d114
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@@ -0,0 +1,30 @@
+
+    
+        
+            
+                
+                
+            
+        
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/buds.png b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/buds.png
new file mode 100644
index 000000000..4248ce297
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/buds.png differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/cart.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/cart.xml
new file mode 100644
index 000000000..ba0b4714b
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/cart.xml
@@ -0,0 +1,5 @@
+
+    
+
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/cl_icon.png b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/cl_icon.png
new file mode 100644
index 000000000..9e748fd6a
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/cl_icon.png differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/flame.png b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/flame.png
new file mode 100644
index 000000000..772c3fa7c
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/flame.png differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/g_flame.png b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/g_flame.png
new file mode 100644
index 000000000..71d571550
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/g_flame.png differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/ic_launcher_background.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/ic_launcher_background.xml
new file mode 100644
index 000000000..07d5da9cb
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/ic_launcher_background.xml
@@ -0,0 +1,170 @@
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/phone.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/phone.webp
new file mode 100644
index 000000000..3a01ef572
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/phone.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/search.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/search.xml
new file mode 100644
index 000000000..a5687c639
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/search.xml
@@ -0,0 +1,5 @@
+
+    
+
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/top_logo.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/top_logo.xml
new file mode 100644
index 000000000..fe5123074
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/drawable/top_logo.xml
@@ -0,0 +1,5 @@
+
+    
+
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
new file mode 100644
index 000000000..eca70cfe5
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+
+
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
new file mode 100644
index 000000000..eca70cfe5
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -0,0 +1,5 @@
+
+
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-hdpi/ic_launcher.webp
new file mode 100644
index 000000000..c209e78ec
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-hdpi/ic_launcher.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..b2dfe3d1b
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-mdpi/ic_launcher.webp
new file mode 100644
index 000000000..4f0f1d64e
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-mdpi/ic_launcher.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..62b611da0
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
new file mode 100644
index 000000000..948a3070f
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xhdpi/ic_launcher.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..1b9a6956b
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
new file mode 100644
index 000000000..28d4b77f9
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..9287f5083
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
new file mode 100644
index 000000000..aa7d6427e
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..9126ae37c
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/colors.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/colors.xml
new file mode 100644
index 000000000..f8c6127d3
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/colors.xml
@@ -0,0 +1,10 @@
+
+
+    #FFBB86FC
+    #FF6200EE
+    #FF3700B3
+    #FF03DAC5
+    #FF018786
+    #FF000000
+    #FFFFFFFF
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/strings.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/strings.xml
new file mode 100644
index 000000000..4216dfb16
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/strings.xml
@@ -0,0 +1,3 @@
+
+    MotionDemos
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/themes.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/themes.xml
new file mode 100644
index 000000000..b1503fe07
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/values/themes.xml
@@ -0,0 +1,7 @@
+
+
+
+    
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/xml/backup_rules.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/xml/backup_rules.xml
new file mode 100644
index 000000000..fa0f996d2
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/xml/backup_rules.xml
@@ -0,0 +1,13 @@
+
+
+    
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/xml/data_extraction_rules.xml b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/xml/data_extraction_rules.xml
new file mode 100644
index 000000000..9ee9997b0
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/main/res/xml/data_extraction_rules.xml
@@ -0,0 +1,19 @@
+
+
+    
+        
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/app/src/test/java/androidx/demo/motiondemos/ExampleUnitTest.kt b/demoProjects/ComposeConstraintLayoutDemo/app/src/test/java/androidx/demo/motiondemos/ExampleUnitTest.kt
new file mode 100644
index 000000000..030493784
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/app/src/test/java/androidx/demo/motiondemos/ExampleUnitTest.kt
@@ -0,0 +1,17 @@
+package androidx.demo.motiondemos
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/build.gradle b/demoProjects/ComposeConstraintLayoutDemo/build.gradle
new file mode 100644
index 000000000..d572ba3c4
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/build.gradle
@@ -0,0 +1,10 @@
+buildscript {
+    ext {
+        compose_ui_version = '1.1.1'
+    }
+}// Top-level build file where you can add configuration options common to all sub-projects/modules.
+plugins {
+    id 'com.android.application' version '7.3.0-alpha08' apply false
+    id 'com.android.library' version '7.3.0-alpha08' apply false
+    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
+}
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/gradle.properties b/demoProjects/ComposeConstraintLayoutDemo/gradle.properties
new file mode 100644
index 000000000..cd0519bb2
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/gradle.properties
@@ -0,0 +1,23 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app"s APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Kotlin code style for this project: "official" or "obsolete":
+kotlin.code.style=official
+# Enables namespacing of each library's R class so that its R class includes only the
+# resources declared in the library itself and none from the library's dependencies,
+# thereby reducing the size of the R class for that library
+android.nonTransitiveRClass=true
\ No newline at end of file
diff --git a/demoProjects/ComposeConstraintLayoutDemo/gradle/wrapper/gradle-wrapper.jar b/demoProjects/ComposeConstraintLayoutDemo/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 000000000..e708b1c02
Binary files /dev/null and b/demoProjects/ComposeConstraintLayoutDemo/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/demoProjects/ComposeConstraintLayoutDemo/gradle/wrapper/gradle-wrapper.properties b/demoProjects/ComposeConstraintLayoutDemo/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 000000000..72651f3e4
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,6 @@
+#Fri May 20 10:57:37 PDT 2022
+distributionBase=GRADLE_USER_HOME
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-bin.zip
+distributionPath=wrapper/dists
+zipStorePath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
diff --git a/demoProjects/ComposeConstraintLayoutDemo/gradlew b/demoProjects/ComposeConstraintLayoutDemo/gradlew
new file mode 100644
index 000000000..4f906e0c8
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/gradlew
@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed 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
+#
+#      https://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.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"
diff --git a/demoProjects/ComposeConstraintLayoutDemo/gradlew.bat b/demoProjects/ComposeConstraintLayoutDemo/gradlew.bat
new file mode 100644
index 000000000..107acd32c
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/gradlew.bat
@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/demoProjects/ComposeConstraintLayoutDemo/settings.gradle b/demoProjects/ComposeConstraintLayoutDemo/settings.gradle
new file mode 100644
index 000000000..ecee1bd3a
--- /dev/null
+++ b/demoProjects/ComposeConstraintLayoutDemo/settings.gradle
@@ -0,0 +1,16 @@
+pluginManagement {
+    repositories {
+        gradlePluginPortal()
+        google()
+        mavenCentral()
+    }
+}
+dependencyResolutionManagement {
+    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+rootProject.name = "ComposeConstraintLayoutDemo"
+include ':app'
diff --git a/demoProjects/ComposeDemos/app/src/main/java/androidx/demo/composedemos/MainActivity.kt b/demoProjects/ComposeDemos/app/src/main/java/androidx/demo/composedemos/MainActivity.kt
index e01fa6eca..a978f0b28 100644
--- a/demoProjects/ComposeDemos/app/src/main/java/androidx/demo/composedemos/MainActivity.kt
+++ b/demoProjects/ComposeDemos/app/src/main/java/androidx/demo/composedemos/MainActivity.kt
@@ -61,7 +61,6 @@ fun DefaultPreview() {
 }
 
 @OptIn(ExperimentalMotionApi::class)
-@Preview(group = "motion8")
 @Composable
 public fun  Login(name: String) {
     var animateToEnd by remember { mutableStateOf(false) }
diff --git a/demoProjects/MotionDemos/.gitignore b/demoProjects/MotionDemos/.gitignore
new file mode 100644
index 000000000..aa724b770
--- /dev/null
+++ b/demoProjects/MotionDemos/.gitignore
@@ -0,0 +1,15 @@
+*.iml
+.gradle
+/local.properties
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
+.DS_Store
+/build
+/captures
+.externalNativeBuild
+.cxx
+local.properties
diff --git a/demoProjects/MotionDemos/.idea/.gitignore b/demoProjects/MotionDemos/.idea/.gitignore
new file mode 100644
index 000000000..26d33521a
--- /dev/null
+++ b/demoProjects/MotionDemos/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/demoProjects/MotionDemos/.idea/inspectionProfiles/Project_Default.xml b/demoProjects/MotionDemos/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 000000000..7c45e3614
--- /dev/null
+++ b/demoProjects/MotionDemos/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,29 @@
+
+  
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/.gitignore b/demoProjects/MotionDemos/app/.gitignore
new file mode 100644
index 000000000..42afabfd2
--- /dev/null
+++ b/demoProjects/MotionDemos/app/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/build.gradle b/demoProjects/MotionDemos/app/build.gradle
new file mode 100644
index 000000000..f01125839
--- /dev/null
+++ b/demoProjects/MotionDemos/app/build.gradle
@@ -0,0 +1,64 @@
+plugins {
+    id 'com.android.application'
+    id 'org.jetbrains.kotlin.android'
+}
+
+android {
+    namespace 'androidx.demo.motiondemos'
+    compileSdk 32
+
+    defaultConfig {
+        applicationId "androidx.demo.motiondemos"
+        minSdk 21
+        targetSdk 32
+        versionCode 1
+        versionName "1.0"
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        vectorDrawables {
+            useSupportLibrary true
+        }
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+    buildFeatures {
+        compose true
+    }
+    composeOptions {
+        kotlinCompilerExtensionVersion '1.1.1'
+    }
+    packagingOptions {
+        resources {
+            excludes += '/META-INF/{AL2.0,LGPL2.1}'
+        }
+    }
+}
+
+dependencies {
+
+    implementation 'androidx.core:core-ktx:1.7.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
+    implementation 'androidx.activity:activity-compose:1.3.1'
+    implementation 'androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha01'
+    implementation "androidx.compose.ui:ui:$compose_ui_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
+    implementation 'androidx.compose.material:material:1.1.1'
+    testImplementation 'junit:junit:4.13.2'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
+}
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/proguard-rules.pro b/demoProjects/MotionDemos/app/proguard-rules.pro
new file mode 100644
index 000000000..481bb4348
--- /dev/null
+++ b/demoProjects/MotionDemos/app/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/androidTest/java/androidx/demo/motiondemos/ExampleInstrumentedTest.kt b/demoProjects/MotionDemos/app/src/androidTest/java/androidx/demo/motiondemos/ExampleInstrumentedTest.kt
new file mode 100644
index 000000000..23a5ffa21
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/androidTest/java/androidx/demo/motiondemos/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package androidx.demo.motiondemos
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("androidx.demo.motiondemos", appContext.packageName)
+    }
+}
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/AndroidManifest.xml b/demoProjects/MotionDemos/app/src/main/AndroidManifest.xml
new file mode 100644
index 000000000..047c50111
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/AndroidManifest.xml
@@ -0,0 +1,28 @@
+
+
+
+    
+        
+            
+                
+
+                
+            
+        
+    
+
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/MainActivity.kt b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/MainActivity.kt
new file mode 100644
index 000000000..01d4564d5
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/MainActivity.kt
@@ -0,0 +1,205 @@
+@file:OptIn(ExperimentalMotionApi::class)
+
+package androidx.demo.motiondemos
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ExperimentalMotionApi
+import androidx.constraintlayout.compose.MotionLayout
+import androidx.constraintlayout.compose.MotionLayoutDebugFlags
+import androidx.constraintlayout.compose.MotionScene
+import androidx.demo.motiondemos.ui.theme.MotionDemosTheme
+import java.util.*
+
+class MainActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            MotionDemosTheme {
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    Carsoul( )
+                }
+            }
+        }
+    }
+}
+
+
+
+@Preview(group = "motion8")
+@Composable
+public fun Carsoul() {
+    var animateToEnd by remember { mutableStateOf(false) }
+    var offset by remember { mutableStateOf(0.1f) }
+
+    val progress by animateFloatAsState(
+        targetValue = if (animateToEnd) 1f else 0f,
+        animationSpec = tween(6000)
+    )
+    Column {
+        MotionLayout(
+
+            modifier = Modifier.clipToBounds()
+                .width(300.dp)
+                .height(300.dp)
+                .background(Color.White),
+            motionScene = MotionScene("""{
+                   Debug: {
+                  name: 'Cycle30'
+                },
+                ConstraintSets: {
+                  onLeft: {
+                    c1: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : -0.50,
+                      custom: {
+                         pos: 0.0
+                      }
+                    },
+                     c2: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 0.0,
+                    },
+                     c3: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 0.50,
+                    },
+                   c4: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 1,
+                    },
+  
+                    },
+                  toRight: {
+                    c1: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 0,
+                      custom: {
+                         pos: 0.0
+                      }
+                    },
+                     c2: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 0.50,
+                    },
+                     c3: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 1,
+                    },
+                   c4: {
+                      width: 50,
+                      height: 50,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      hBias : 1.50,
+                    },
+                 }
+                },
+                Transitions: {
+                  default: {
+                    from: 'start',
+                    to: 'end',
+                  onSwipe: {
+                  mode: 'spring',
+                direction: 'right',
+                   anchor: 'c3',
+                side: 'top',
+                springBoundary: 'down',
+                springStiffness: 800,
+                springDamping: 32
+                  },
+                  
+                  }
+                }
+            }"""),
+            debug = EnumSet.of(MotionLayoutDebugFlags.SHOW_ALL),
+            progress = progress) {
+            val f =  motionProperties("c1").value.float("pos")
+
+            for (i in 1..4) {
+                Button(modifier = Modifier
+                    .layoutId("c$i"),
+                    onClick = { /*TODO*/ },
+                    shape = RoundedCornerShape(40)
+                ) {
+                    Text(text = "$i")
+
+                }
+
+            }
+
+
+        }
+
+        Button(onClick = { animateToEnd = !animateToEnd }) {
+            Text(text = "Run")
+        }
+    }
+}
diff --git a/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/MainActivity_start.kt b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/MainActivity_start.kt
new file mode 100644
index 000000000..3265dc4da
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/MainActivity_start.kt
@@ -0,0 +1,178 @@
+@file:OptIn(ExperimentalMotionApi::class)
+
+package androidx.demo.motiondemos
+
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ExperimentalMotionApi
+import androidx.constraintlayout.compose.MotionLayout
+import androidx.constraintlayout.compose.MotionLayoutDebugFlags
+import androidx.constraintlayout.compose.MotionScene
+import androidx.demo.motiondemos.ui.theme.MotionDemosTheme
+import java.util.*
+
+class MainActivity_start : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            MotionDemosTheme {
+                // A surface container using the 'background' color from the theme
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    CycleScale( )
+                }
+            }
+        }
+    }
+}
+
+
+
+@Preview(group = "motion8")
+@Composable
+public fun CycleScale() {
+    var animateToEnd by remember { mutableStateOf(false) }
+
+    val progress by animateFloatAsState(
+        targetValue = if (animateToEnd) 1f else 0f,
+        animationSpec = tween(6000)
+    )
+    Column {
+        MotionLayout(
+            modifier = Modifier
+                .width(300.dp)
+                .height(300.dp)
+                .background(Color.White),
+            motionScene = MotionScene("""{
+                   Debug: {
+                  name: 'Cycle30'
+                },
+                ConstraintSets: {
+                  start: {
+                    cover: {
+                      width: 'spread',
+                      height: 'spread',
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16]
+                    },
+                 run: {
+                      width: 'spread',
+                      height: 'spread',
+                      start: ['parent', 'start', 64],
+                      bottom: ['parent', 'bottom', 64],
+                         end: ['parent', 'end', 64],
+                      top: ['parent', 'top', 64]
+                    },
+                  edge: {
+                     width: 'spread',
+                      height: 14,
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                         end: ['parent', 'end', 16],
+                        alpha: 0,
+                    },
+                    },
+                  end: {
+                    cover: {
+                      width: 'spread',
+                      height: 'spread',
+                      rotationX: -90,
+                      pivotX: 0.5,
+                      pivotY: 0,
+                      end: ['parent', 'end', 16],
+                      top: ['parent', 'top', 16],
+                      start: ['parent', 'start', 16],
+                      bottom: ['parent', 'bottom', 16],
+                    },
+                     run: {
+                      width: 'spread',
+                      height: 'spread',
+                      start: ['parent', 'start', 64],
+                      bottom: ['parent', 'bottom', 64],
+                         end: ['parent', 'end', 64],
+                      top: ['parent', 'top', 64]
+                    },
+                  edge: {
+                       width: '50%',
+                      height: 14,
+                      start: ['parent', 'start', 16],
+                    
+                         end: ['parent', 'end', 16],
+                          top: ['parent', 'top', 16],
+                          alpha: 0,
+                  }
+                  }
+                },
+                Transitions: {
+                  default: {
+                    from: 'start',
+                    to: 'end',
+                  onSwipe: {
+                  mode: 'spring',
+                direction: 'up',
+                   anchor: 'edge',
+                side: 'top',
+                springBoundary: 'down',
+                springStiffness: 800,
+                springDamping: 32
+                  },
+                  
+                  }
+                }
+            }"""),
+            debug = EnumSet.of(MotionLayoutDebugFlags.SHOW_ALL),
+            progress = progress) {
+            Button(modifier = Modifier
+                .layoutId("run"),
+                onClick = { /*TODO*/ },
+                        shape = RoundedCornerShape(40)
+            ) {
+                Text(text = "Start\nEngine")
+
+            }
+            Box(modifier = Modifier
+                .layoutId("cover")
+                .clip(RoundedCornerShape(
+                bottomEnd = 32.dp, bottomStart = 32.dp))
+                .background(Color.Red))
+
+            Box(modifier = Modifier
+                .layoutId("edge")
+                .background(Color.Green))
+
+        }
+
+        Button(onClick = { animateToEnd = !animateToEnd }) {
+            Text(text = "Run")
+        }
+    }
+}
diff --git a/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Color.kt b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Color.kt
new file mode 100644
index 000000000..73b3043d0
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Color.kt
@@ -0,0 +1,8 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple200 = Color(0xFFBB86FC)
+val Purple500 = Color(0xFF6200EE)
+val Purple700 = Color(0xFF3700B3)
+val Teal200 = Color(0xFF03DAC5)
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Shape.kt b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Shape.kt
new file mode 100644
index 000000000..2670e9eb1
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Shape.kt
@@ -0,0 +1,11 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.ui.unit.dp
+
+val Shapes = Shapes(
+    small = RoundedCornerShape(4.dp),
+    medium = RoundedCornerShape(4.dp),
+    large = RoundedCornerShape(0.dp)
+)
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Theme.kt b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Theme.kt
new file mode 100644
index 000000000..5bc559968
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Theme.kt
@@ -0,0 +1,44 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+
+private val DarkColorPalette = darkColors(
+    primary = Purple200,
+    primaryVariant = Purple700,
+    secondary = Teal200
+)
+
+private val LightColorPalette = lightColors(
+    primary = Purple500,
+    primaryVariant = Purple700,
+    secondary = Teal200
+
+    /* Other default colors to override
+    background = Color.White,
+    surface = Color.White,
+    onPrimary = Color.White,
+    onSecondary = Color.Black,
+    onBackground = Color.Black,
+    onSurface = Color.Black,
+    */
+)
+
+@Composable
+fun MotionDemosTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+    val colors = if (darkTheme) {
+        DarkColorPalette
+    } else {
+        LightColorPalette
+    }
+
+    MaterialTheme(
+        colors = colors,
+        typography = Typography,
+        shapes = Shapes,
+        content = content
+    )
+}
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Type.kt b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Type.kt
new file mode 100644
index 000000000..c73382902
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/java/androidx/demo/motiondemos/ui/theme/Type.kt
@@ -0,0 +1,28 @@
+package androidx.demo.motiondemos.ui.theme
+
+import androidx.compose.material.Typography
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+// Set of Material typography styles to start with
+val Typography = Typography(
+    body1 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    )
+    /* Other default text styles to override
+    button = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        fontSize = 14.sp
+    ),
+    caption = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 12.sp
+    )
+    */
+)
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/demoProjects/MotionDemos/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
new file mode 100644
index 000000000..2b068d114
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@@ -0,0 +1,30 @@
+
+    
+        
+            
+                
+                
+            
+        
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/drawable/ic_launcher_background.xml b/demoProjects/MotionDemos/app/src/main/res/drawable/ic_launcher_background.xml
new file mode 100644
index 000000000..07d5da9cb
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/drawable/ic_launcher_background.xml
@@ -0,0 +1,170 @@
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/demoProjects/MotionDemos/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
new file mode 100644
index 000000000..eca70cfe5
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+
+
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/demoProjects/MotionDemos/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
new file mode 100644
index 000000000..eca70cfe5
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@@ -0,0 +1,5 @@
+
+
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-hdpi/ic_launcher.webp
new file mode 100644
index 000000000..c209e78ec
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-hdpi/ic_launcher.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..b2dfe3d1b
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-mdpi/ic_launcher.webp
new file mode 100644
index 000000000..4f0f1d64e
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-mdpi/ic_launcher.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..62b611da0
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
new file mode 100644
index 000000000..948a3070f
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-xhdpi/ic_launcher.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..1b9a6956b
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
new file mode 100644
index 000000000..28d4b77f9
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..9287f5083
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
new file mode 100644
index 000000000..aa7d6427e
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
new file mode 100644
index 000000000..9126ae37c
Binary files /dev/null and b/demoProjects/MotionDemos/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp differ
diff --git a/demoProjects/MotionDemos/app/src/main/res/values/colors.xml b/demoProjects/MotionDemos/app/src/main/res/values/colors.xml
new file mode 100644
index 000000000..f8c6127d3
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/values/colors.xml
@@ -0,0 +1,10 @@
+
+
+    #FFBB86FC
+    #FF6200EE
+    #FF3700B3
+    #FF03DAC5
+    #FF018786
+    #FF000000
+    #FFFFFFFF
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/values/strings.xml b/demoProjects/MotionDemos/app/src/main/res/values/strings.xml
new file mode 100644
index 000000000..4216dfb16
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/values/strings.xml
@@ -0,0 +1,3 @@
+
+    MotionDemos
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/values/themes.xml b/demoProjects/MotionDemos/app/src/main/res/values/themes.xml
new file mode 100644
index 000000000..b1503fe07
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/values/themes.xml
@@ -0,0 +1,7 @@
+
+
+
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/xml/backup_rules.xml b/demoProjects/MotionDemos/app/src/main/res/xml/backup_rules.xml
new file mode 100644
index 000000000..fa0f996d2
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/xml/backup_rules.xml
@@ -0,0 +1,13 @@
+
+
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/main/res/xml/data_extraction_rules.xml b/demoProjects/MotionDemos/app/src/main/res/xml/data_extraction_rules.xml
new file mode 100644
index 000000000..9ee9997b0
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/main/res/xml/data_extraction_rules.xml
@@ -0,0 +1,19 @@
+
+
+    
+        
+    
+    
+
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/app/src/test/java/androidx/demo/motiondemos/ExampleUnitTest.kt b/demoProjects/MotionDemos/app/src/test/java/androidx/demo/motiondemos/ExampleUnitTest.kt
new file mode 100644
index 000000000..030493784
--- /dev/null
+++ b/demoProjects/MotionDemos/app/src/test/java/androidx/demo/motiondemos/ExampleUnitTest.kt
@@ -0,0 +1,17 @@
+package androidx.demo.motiondemos
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/build.gradle b/demoProjects/MotionDemos/build.gradle
new file mode 100644
index 000000000..d572ba3c4
--- /dev/null
+++ b/demoProjects/MotionDemos/build.gradle
@@ -0,0 +1,10 @@
+buildscript {
+    ext {
+        compose_ui_version = '1.1.1'
+    }
+}// Top-level build file where you can add configuration options common to all sub-projects/modules.
+plugins {
+    id 'com.android.application' version '7.3.0-alpha08' apply false
+    id 'com.android.library' version '7.3.0-alpha08' apply false
+    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
+}
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/gradle.properties b/demoProjects/MotionDemos/gradle.properties
new file mode 100644
index 000000000..cd0519bb2
--- /dev/null
+++ b/demoProjects/MotionDemos/gradle.properties
@@ -0,0 +1,23 @@
+# Project-wide Gradle settings.
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app"s APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Kotlin code style for this project: "official" or "obsolete":
+kotlin.code.style=official
+# Enables namespacing of each library's R class so that its R class includes only the
+# resources declared in the library itself and none from the library's dependencies,
+# thereby reducing the size of the R class for that library
+android.nonTransitiveRClass=true
\ No newline at end of file
diff --git a/demoProjects/MotionDemos/gradle/wrapper/gradle-wrapper.jar b/demoProjects/MotionDemos/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 000000000..e708b1c02
Binary files /dev/null and b/demoProjects/MotionDemos/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/demoProjects/MotionDemos/gradle/wrapper/gradle-wrapper.properties b/demoProjects/MotionDemos/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 000000000..72651f3e4
--- /dev/null
+++ b/demoProjects/MotionDemos/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,6 @@
+#Fri May 20 10:57:37 PDT 2022
+distributionBase=GRADLE_USER_HOME
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-bin.zip
+distributionPath=wrapper/dists
+zipStorePath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
diff --git a/demoProjects/MotionDemos/gradlew b/demoProjects/MotionDemos/gradlew
new file mode 100644
index 000000000..4f906e0c8
--- /dev/null
+++ b/demoProjects/MotionDemos/gradlew
@@ -0,0 +1,185 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed 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
+#
+#      https://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.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"
diff --git a/demoProjects/MotionDemos/gradlew.bat b/demoProjects/MotionDemos/gradlew.bat
new file mode 100644
index 000000000..107acd32c
--- /dev/null
+++ b/demoProjects/MotionDemos/gradlew.bat
@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/demoProjects/MotionDemos/settings.gradle b/demoProjects/MotionDemos/settings.gradle
new file mode 100644
index 000000000..69f227f83
--- /dev/null
+++ b/demoProjects/MotionDemos/settings.gradle
@@ -0,0 +1,16 @@
+pluginManagement {
+    repositories {
+        gradlePluginPortal()
+        google()
+        mavenCentral()
+    }
+}
+dependencyResolutionManagement {
+    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+rootProject.name = "MotionDemos"
+include ':app'
diff --git a/desktop/ValidationTool/src/main/java/androidx/constraintlayout/validation/DeviceConnection.java b/desktop/ValidationTool/src/main/java/androidx/constraintlayout/validation/DeviceConnection.java
index 34512c1bb..a1bb690c0 100644
--- a/desktop/ValidationTool/src/main/java/androidx/constraintlayout/validation/DeviceConnection.java
+++ b/desktop/ValidationTool/src/main/java/androidx/constraintlayout/validation/DeviceConnection.java
@@ -82,6 +82,7 @@ public DeviceConnection() {
             reader = new Reader(socket.getInputStream());
             writer = new Writer(socket.getOutputStream());
         } catch (IOException e) {
+            System.err.println("Did you \"adb forward tcp:4242 tcp:4242\"");
             e.printStackTrace();
         }
     }
diff --git a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
index 9fa8c248b..6e18d1fe0 100644
--- a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
+++ b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
@@ -37,7 +37,7 @@ import com.google.accompanist.coil.rememberCoilPainter
 class MainActivity : AppCompatActivity() {
     private var mFrameLayout: FrameLayout? = null
     private var composeNum = 0
-    private val START_NUMBER = 50
+    private val START_NUMBER = 6
     private var demos:ArrayList = ArrayList()
     var map = HashMap();
     val linkServer = LinkServer()
@@ -102,6 +102,11 @@ class MainActivity : AppCompatActivity() {
         demos.add(object : CompFunc { @Composable override fun Run() { ScreenExample4() } })
         demos.add(object : CompFunc { @Composable override fun Run() { ScreenExample5() } })
         demos.add(object : CompFunc { @Composable override fun Run() { ScreenExample6() } })
+        demos.add(object : CompFunc { @Composable override fun Run() { ChainNew1() } })
+        demos.add(object : CompFunc { @Composable override fun Run() { ChainNew2() } })
+        demos.add(object : CompFunc { @Composable override fun Run() { ChainNew3() } })
+        demos.add(object : CompFunc { @Composable override fun Run() { ChainNew4() } })
+
         demos.add(object : CompFunc { @Composable override fun Run() { ScreenExample7() } })
         demos.add(object : CompFunc { @Composable override fun Run() { ScreenExample8() } })
         demos.add(object : CompFunc { @Composable override fun Run() { ScreenExample9() } })
diff --git a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/test.kt b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/test.kt
index 75b6f2158..5cc3956e0 100644
--- a/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/test.kt
+++ b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/test.kt
@@ -16,23 +16,37 @@
 
 package com.example.constraintlayout
 
-import androidx.compose.animation.core.*
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import androidx.compose.material.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.compose.*
-import java.util.*
+import java.util.EnumSet
 
 @Preview
 @Composable
@@ -962,15 +976,51 @@ public fun ScreenExample11() {
                 .fillMaxSize()
                 .background(Color.White)
         ) {
-            Box(modifier = Modifier.layoutId("h1").width(100.dp).height(60.dp).background(Color.Red))
-            Box(modifier = Modifier.layoutId("h2").width(100.dp).height(60.dp).background(Color.Green))
-            Box(modifier = Modifier.layoutId("h3").width(100.dp).height(60.dp).background(Color.Blue))
-            Box(modifier = Modifier.layoutId("h4").width(100.dp).height(60.dp).background(Color.Gray))
-            Box(modifier = Modifier.layoutId("h5").width(100.dp).height(60.dp).background(Color.Yellow))
-            Box(modifier = Modifier.layoutId("h6").width(100.dp).height(60.dp).background(Color.Cyan))
-            Box(modifier = Modifier.layoutId("h7").width(100.dp).height(60.dp).background(Color.Magenta))
-            Box(modifier = Modifier.layoutId("h8").width(100.dp).height(60.dp).background(Color.Red))
-            Box(modifier = Modifier.layoutId("h9").width(100.dp).height(60.dp).background(Color.DarkGray))
+            Box(modifier = Modifier
+                .layoutId("h1")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Red))
+            Box(modifier = Modifier
+                .layoutId("h2")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Green))
+            Box(modifier = Modifier
+                .layoutId("h3")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Blue))
+            Box(modifier = Modifier
+                .layoutId("h4")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Gray))
+            Box(modifier = Modifier
+                .layoutId("h5")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Yellow))
+            Box(modifier = Modifier
+                .layoutId("h6")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Cyan))
+            Box(modifier = Modifier
+                .layoutId("h7")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Magenta))
+            Box(modifier = Modifier
+                .layoutId("h8")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.Red))
+            Box(modifier = Modifier
+                .layoutId("h9")
+                .width(100.dp)
+                .height(60.dp)
+                .background(Color.DarkGray))
         }
     }
 }
@@ -1502,29 +1552,41 @@ public fun ScreenExample19() {
 public fun ScreenExample21() {
     ConstraintLayout {
         val (image, text1, text2, text3) = createRefs()
-        Box(Modifier.size(50.dp)
-            .background(Color.Blue).constrainAs(image) {
-            start.linkTo(parent.start, margin = 16.dp)
-            centerVerticallyTo(parent)
-        })
-        Box(Modifier.size(100.dp, 30.dp)
-            .background(Color.Blue).constrainAs(text1) {
-            top.linkTo(parent.top)
-            linkTo(image.end, parent.end, 16.dp, 16.dp)
-            width = Dimension.preferredWrapContent
-        })
-        Box(Modifier.size(200.dp, 30.dp)
-            .background(Color.Blue).constrainAs(text2) {
-            top.linkTo(text1.bottom, margin = 16.dp)
-            linkTo(image.end, parent.end, 16.dp, 16.dp)
-            width = Dimension.preferredWrapContent
-        })
-        Box(Modifier.size(300.dp, 30.dp)
-            .background(Color.Blue).constrainAs(text3) {
-            top.linkTo(text2.bottom, margin = 16.dp)
-            linkTo(image.end, parent.end, 16.dp, 16.dp)
-            width = Dimension.preferredWrapContent
-        })
+        Box(
+            Modifier
+                .size(50.dp)
+                .background(Color.Blue)
+                .constrainAs(image) {
+                    start.linkTo(parent.start, margin = 16.dp)
+                    centerVerticallyTo(parent)
+                })
+        Box(
+            Modifier
+                .size(100.dp, 30.dp)
+                .background(Color.Blue)
+                .constrainAs(text1) {
+                    top.linkTo(parent.top)
+                    linkTo(image.end, parent.end, 16.dp, 16.dp)
+                    width = Dimension.preferredWrapContent
+                })
+        Box(
+            Modifier
+                .size(200.dp, 30.dp)
+                .background(Color.Blue)
+                .constrainAs(text2) {
+                    top.linkTo(text1.bottom, margin = 16.dp)
+                    linkTo(image.end, parent.end, 16.dp, 16.dp)
+                    width = Dimension.preferredWrapContent
+                })
+        Box(
+            Modifier
+                .size(300.dp, 30.dp)
+                .background(Color.Blue)
+                .constrainAs(text3) {
+                    top.linkTo(text2.bottom, margin = 16.dp)
+                    linkTo(image.end, parent.end, 16.dp, 16.dp)
+                    width = Dimension.preferredWrapContent
+                })
     }
 }
 
@@ -1603,11 +1665,394 @@ public fun ScreenExample22() {
     }
 }
 
+@Preview(group = "new4")
+@Composable
+public fun ChainNew1() {
+    ConstraintLayout(
+        ConstraintSet("""
+            {
+              Variables: {
+                bottom: 20
+              },
+              Helpers: [
+ 
+                ['vGuideline', {
+                  id: 'leftGuideline1', start: 100
+                }],
+                ['hGuideline', {
+                  id: 'topGuideline1', percent: 0.5
+                }]
+              ],
+              chain1: { 
+                type: 'hChain',
+                contains: ['a','b','c'],
+                start: ['leftGuideline1', 'start'],
+                style: 'packed'
+              },
+              chain2: { 
+                type: 'hChain',
+                contains: ['d','e','f'],
+              },
+               chain3: { 
+                type: 'vChain',
+                contains: ['d','e','f'],
+                 bottom: ['topGuideline1', 'top']
+              },             
+              
+              a: {
+                bottom: ['b', 'top', 'bottom']
+              },
+              b: {
+                width: '30%',
+                height: '1:1',
+                centerVertically: 'parent'
+              },
+              c: {
+                top: ['b', 'bottom']
+              }
+            }
+        """),
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        Text(text = "chain2.0!")
+        Button(
+            modifier = Modifier.layoutId("a"),
+            onClick = {},
+        ) {
+            Text(text = "A")
+        }
+        Button(
+            modifier = Modifier.layoutId("b"),
+            onClick = {},
+        ) {
+            Text(text = "B")
+        }
+        Button(
+            modifier = Modifier.layoutId("c"),
+            onClick = {},
+        ) {
+            Text(text = "C")
+        }
+        Button(
+            modifier = Modifier.layoutId("d"),
+            onClick = {},
+        ) {
+            Text(text = "D")
+        }
+        Button(
+            modifier = Modifier.layoutId("e"),
+            onClick = {},
+        ) {
+            Text(text = "E")
+        }
+        Button(
+            modifier = Modifier.layoutId("f"),
+            onClick = {},
+        ) {
+            Text(text = "F")
+        }
+    }
+}
 
+@Preview(group = "new4")
+@Composable
+public fun ChainNew2() {
+    ConstraintLayout(
+        ConstraintSet("""
+            {
+              Variables: {
+                bottom: 20
+              },
+              Helpers: [
+ 
+                ['vGuideline', {
+                  id: 'leftGuideline1', start: 100
+                }],
+                ['hGuideline', {
+                  id: 'topGuideline1', percent: 0.5
+                }]
+              ],
+              chain1: { 
+                type: 'hChain',
+                contains: [['a',2,0],['b',0.3,70,3],'c'],
+                start: ['leftGuideline1', 'start'],
+                style: 'packed',
+                  end: ['parent', 'end',32],
+              },
+              chain2: { 
+                type: 'hChain',
+                contains: ['d','e','f'],
+              },
+               chain3: { 
+                type: 'vChain',
+                contains: ['d','e','f'],
+                 bottom: ['topGuideline1', 'top']
+              },             
+              
+              a: {
+              width: 'spread',
+                bottom: ['b', 'bottom' ]
+              },
+              b: {
+               width: 'spread',
+                centerVertically: 'parent'
+              },
+              c: {
+               width: 'spread',
+                 bottom: ['b', 'bottom' ]
+              }
+            }
+        """),
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        Text(text = "chain2.1!")
+        Button(
+            modifier = Modifier.layoutId("a"),
+            onClick = {},
+        ) {
+            Text(text = "A")
+        }
+        Button(
+            modifier = Modifier.layoutId("b"),
+            onClick = {},
+        ) {
+            Text(text = "B")
+        }
+        Button(
+            modifier = Modifier.layoutId("c"),
+            onClick = {},
+        ) {
+            Text(text = "C")
+        }
+        Button(
+            modifier = Modifier.layoutId("d"),
+            onClick = {},
+        ) {
+            Text(text = "D")
+        }
+        Button(
+            modifier = Modifier.layoutId("e"),
+            onClick = {},
+        ) {
+            Text(text = "E")
+        }
+        Button(
+            modifier = Modifier.layoutId("f"),
+            onClick = {},
+        ) {
+            Text(text = "F")
+        }
+    }
+}
 
 
+@Preview(group = "new4")
+@Composable
+public fun ChainNew3() {
+    ConstraintLayout(
+        ConstraintSet("""
+            {
+              Variables: {
+                bottom: 20
+              },
+              Helpers: [
+ 
+                ['vGuideline', {
+                  id: 'leftGuideline1', start: 100
+                }],
+                ['hGuideline', {
+                  id: 'topGuideline1', percent: 0.5
+                }]
+              ],
+              chain1: { 
+                type: 'hChain',
+                contains: ['a1','b1','c1','d1'],
+                start: ['leftGuideline1', 'start'],
+                style: 'spread',
+                  end: ['parent', 'end',32],
+              },
+               chain2: { 
+                type: 'hChain',
+                contains: ['a2','b2','c2','d2'],
+    
+                style: 'spread_inside',
+           
+              },
+             
+              a1: { centerVertically: 'parent' ,vBias: 0.0 },
+              b1: { centerVertically: 'a1' },
+              c1: { centerVertically: 'a1' },
+              d1: { centerVertically: 'a1' },
+              
+              a2: { centerVertically: 'parent',vBias: 0.3 },
+              b2: { centerVertically: 'a2' },
+              c2: { centerVertically: 'a2' },
+              d2: { centerVertically: 'a2' }, 
+              
+             chain3: { 
+                type: 'hChain',
+                contains: [ ['a3',2,6,23],['b3',3,23],'c3',['d3',1,32]],
+              },
+              a3: { width:'spread', centerVertically: 'parent',vBias: 0.6},
+              b3: { width:'spread',centerVertically: 'a3' },
+              c3: { width:'spread', centerVertically: 'a3' },
+              d3: { width:'spread',centerVertically: 'a3' }, 
+              
+             chain4: { 
+                type: 'hChain',
+                contains: ['a4','b4','c4','d4'],
+                
+                style: 'packed',
 
+              },
+              a4: {width:'spread', centerVertically: 'parent',vBias: 0.8},
+              b4: { centerVertically: 'a4' },
+              c4: {width:'spread', centerVertically: 'a4' },
+              d4: { centerVertically: 'a4' }, 
+              
+                           chain5: { 
+                type: 'hChain',
+                contains: ['a5','b5','c5','d5'],
+                start: ['leftGuideline1', 'start'],
+                style: 'packed',
 
+              },
+              a5: { centerVertically: 'parent',vBias: 0.9},
+              b5: { centerVertically: 'a5' },
+              c5: { centerVertically: 'a5' },
+              d5: { centerVertically: 'a5' }, 
+              
+            }
+        """
+         ),
+        modifier = Modifier
+            .fillMaxSize().background(Color.LightGray)
+    ) {
+        Text(text = "chain2.3!")
+        for (k in 1..5) {
+            for (i in 0..3) {
+                val title = ('a' + i).toString() + k;
+                val c = Color(0f, 0.4f + i / 10f, i / 10f)
+
+                Button(
+                    modifier = Modifier.layoutId(title),
+                    colors = ButtonDefaults.buttonColors(backgroundColor = c),
+                    onClick = {},
+                ) {
+                    Text(text = title)
+                }
+            }
+        }
+
+    }
+}
+
+
+
+
+
+@Preview(group = "new4")
+@Composable
+public fun ChainNew4() {
+    ConstraintLayout(
+        ConstraintSet("""
+            {
+              Variables: {
+                bottom: 20
+              },
+              Helpers: [
+ 
+                ['hGuideline', {
+                  id: 'leftGuideline1', start: 100
+                }],
+                ['hGuideline', {
+                  id: 'topGuideline1', percent: 0.5
+                }]
+              ],
+              chain1: { 
+                type: 'vChain',
+                contains: ['a1','b1','c1','d1'],
+                start: ['leftGuideline1', 'start'],
+                style: 'spread',
+                  end: ['parent', 'end',32],
+              },
+               chain2: { 
+                type: 'vChain',
+                contains: ['a2','b2','c2','d2'],
+    
+                style: 'spread_inside',
+           
+              },
+             
+              a1: { centerHorizontally: 'parent' ,hBias: 0.0 },
+              b1: { centerHorizontally: 'a1' },
+              c1: { centerHorizontally: 'a1' },
+              d1: { centerHorizontally: 'a1' },
+              
+              a2: { centerHorizontally: 'parent',hBias: 0.3 },
+              b2: { centerHorizontally: 'a2' },
+              c2: { centerHorizontally: 'a2' },
+              d2: { centerHorizontally: 'a2' }, 
+              
+             chain3: {
+                type: 'vChain',
+                contains: [ ['a3',2,6,1],['b3',3,23],'c3',['d3',1,32]],
+              },
+              a3: { height:'spread', centerHorizontally: 'parent',hvBias: 0.6},
+              b3: { height:'spread',centerHorizontally: 'a3' },
+              c3: { height:'spread', centerHorizontally: 'a3' },
+              d3: { height:'spread',centerHorizontally: 'a3' }, 
+              
+             chain4: { 
+                type: 'vChain',
+                contains: [['a4',2,6,4],'b4','c4','d4'],
+                
+                style: 'packed',
+
+              },
+              a4: {height:'spread', centerHorizontally: 'parent',hBias: 0.8},
+              b4: { centerHorizontally: 'a4' },
+              c4: {height:'spread', centerHorizontally: 'a4' },
+              d4: { centerHorizontally: 'a4' }, 
+              
+                           chain5: { 
+                type: 'vChain',
+                contains: ['a5','b5','c5','d5'],
+                top: ['leftGuideline1', 'top'],
+                style: 'packed',
+
+              },
+              a5: { centerHorizontally: 'parent',hBias: 0.9},
+              b5: { centerHorizontally: 'a5' },
+              c5: { centerHorizontally: 'a5' },
+              d5: { centerHorizontally: 'a5' }, 
+              
+            }
+        """
+        ),
+        modifier = Modifier
+            .fillMaxSize().background(Color.LightGray)
+    ) {
+        Text(text = "chain2.3!")
+        for (k in 1..5) {
+            for (i in 0..3) {
+                val title = ('a' + i).toString() + k;
+                val c = Color(0f, 0.4f + i / 10f, i / 10f)
+
+                Button(
+                    modifier = Modifier.layoutId(title),
+                    colors = ButtonDefaults.buttonColors(backgroundColor = c),
+                    onClick = {},
+                ) {
+                    Text(text = title)
+                }
+            }
+        }
+
+    }
+}