diff --git a/projects/ComposeConstraintLayout/.gitignore b/projects/ComposeConstraintLayout/.gitignore
new file mode 100644
index 000000000..aa724b770
--- /dev/null
+++ b/projects/ComposeConstraintLayout/.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/projects/ComposeConstraintLayout/.idea/.gitignore b/projects/ComposeConstraintLayout/.idea/.gitignore
new file mode 100644
index 000000000..26d33521a
--- /dev/null
+++ b/projects/ComposeConstraintLayout/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/projects/ComposeConstraintLayout/app/.gitignore b/projects/ComposeConstraintLayout/app/.gitignore
new file mode 100644
index 000000000..42afabfd2
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/projects/ComposeConstraintLayout/app/build.gradle b/projects/ComposeConstraintLayout/app/build.gradle
new file mode 100644
index 000000000..ae42efc0a
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/build.gradle
@@ -0,0 +1,79 @@
+plugins {
+ id 'com.android.application'
+ id 'kotlin-android'
+}
+
+def compose_version = '1.0.0-beta02'
+
+android {
+ compileSdkVersion 30
+ buildToolsVersion "30.0.3"
+
+ defaultConfig {
+ applicationId "androidx.constaitnlayout.experiments.template"
+ minSdkVersion 21
+ targetSdkVersion 30
+ versionCode 1
+ versionName "1.0"
+
+ testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+ }
+
+ buildTypes {
+ release {
+ minifyEnabled false
+ proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+ }
+ }
+ compileOptions {
+ sourceCompatibility JavaVersion.VERSION_1_8
+ targetCompatibility JavaVersion.VERSION_1_8
+ }
+
+ buildFeatures {
+ compose true
+ buildConfig false
+ }
+
+ packagingOptions {
+ exclude 'META-INF/AL2.0'
+ exclude 'META-INF/LGPL2.1'
+ }
+
+ kotlinOptions {
+ jvmTarget = JavaVersion.VERSION_1_8.toString()
+ useIR = true
+ }
+
+ composeOptions {
+ kotlinCompilerVersion "1.4.31"
+ kotlinCompilerExtensionVersion compose_version
+ }
+
+}
+
+dependencies {
+
+ implementation project(':core')
+ implementation project(':compose')
+
+ implementation "androidx.activity:activity-compose:1.3.0-alpha04"
+
+ implementation "androidx.compose.material:material:$compose_version"
+ implementation "androidx.compose.ui:ui:$compose_version"
+ implementation "androidx.compose.ui:ui-unit:$compose_version"
+ implementation "androidx.compose.ui:ui-util:$compose_version"
+ implementation "androidx.compose.foundation:foundation-layout:$compose_version"
+ implementation "androidx.compose.foundation:foundation:$compose_version"
+ implementation "androidx.compose.ui:ui-test:$compose_version"
+
+ implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+ implementation 'androidx.core:core-ktx:1.3.1'
+ implementation 'androidx.appcompat:appcompat:1.2.0'
+ implementation 'com.google.android.material:material:1.2.1'
+ implementation project(path: ':constraintlayout')
+ implementation 'androidx.compose.ui:ui-tooling:1.0.0-beta02'
+ testImplementation 'junit:junit:4.13'
+ androidTestImplementation 'androidx.test.ext:junit:1.1.2'
+ androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
+}
\ No newline at end of file
diff --git a/projects/ComposeConstraintLayout/app/proguard-rules.pro b/projects/ComposeConstraintLayout/app/proguard-rules.pro
new file mode 100644
index 000000000..481bb4348
--- /dev/null
+++ b/projects/ComposeConstraintLayout/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/projects/ComposeConstraintLayout/app/src/androidTest/java/com/example/constraintlayout/ExampleInstrumentedTest.kt b/projects/ComposeConstraintLayout/app/src/androidTest/java/com/example/constraintlayout/ExampleInstrumentedTest.kt
new file mode 100644
index 000000000..a3a0b6b2e
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/src/androidTest/java/com/example/constraintlayout/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package com.example.constraintlayout
+
+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("com.example.developertemplate", appContext.packageName)
+ }
+}
\ No newline at end of file
diff --git a/projects/ComposeConstraintLayout/app/src/main/AndroidManifest.xml b/projects/ComposeConstraintLayout/app/src/main/AndroidManifest.xml
new file mode 100644
index 000000000..55a65db6e
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/src/main/AndroidManifest.xml
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
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
new file mode 100644
index 000000000..b4feedb0c
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/MainActivity.kt
@@ -0,0 +1,15 @@
+package com.example.constraintlayout
+
+import androidx.appcompat.app.AppCompatActivity
+import android.os.Bundle
+import androidx.activity.compose.setContent
+import androidx.constraintlayout.compose.Screen2
+
+class MainActivity : AppCompatActivity() {
+ override fun onCreate(savedInstanceState: Bundle?) {
+ super.onCreate(savedInstanceState)
+ setContent {
+ Screen2()
+ }
+ }
+}
\ No newline at end of file
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
new file mode 100644
index 000000000..06b4b2d0b
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/src/main/java/com/example/constraintlayout/test.kt
@@ -0,0 +1,352 @@
+package androidx.constraintlayout.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+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.ui.layout.layoutId
+import androidx.compose.ui.tooling.preview.Preview
+import com.example.constraintlayout.R
+
+@Preview
+@Composable
+public fun Screen() {
+ ConstraintLayout(
+ modifier = Modifier
+ .fillMaxSize()
+ ) {
+ val (image, header, tag1, tag2, tag3, bSignup, bLogin, disclaimer) = createRefs()
+ val g1 = createGuidelineFromStart(44.dp)
+ val g2 = createGuidelineFromEnd(44.dp)
+ Image(
+ modifier = Modifier.constrainAs(image) {
+ width = Dimension.value(201.dp)
+ height = Dimension.value(179.dp)
+ top.linkTo(parent.top, 32.dp)
+ start.linkTo(g1)
+ },
+ painter = painterResource(id = R.drawable.intercom_snooze),
+ contentDescription = null
+ )
+ Text(
+ modifier = Modifier.constrainAs(header) {
+ top.linkTo(image.bottom, 32.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ text = stringResource(id = R.string.welcome_header),
+ style = MaterialTheme.typography.h5,
+ )
+ Text(
+ modifier = Modifier.constrainAs(tag1) {
+ top.linkTo(header.bottom, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ text = stringResource(id = R.string.welcome_tagline1)
+ )
+ Text(
+ modifier = Modifier.constrainAs(tag2) {
+ top.linkTo(tag1.bottom, 8.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ text = stringResource(id = R.string.welcome_tagline2)
+ )
+ Text(
+ modifier = Modifier.constrainAs(tag3) {
+ top.linkTo(tag2.bottom, 8.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ text = stringResource(id = R.string.welcome_tagline3)
+ )
+ Button(
+ modifier = Modifier.constrainAs(bSignup) {
+ bottom.linkTo(bLogin.top, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ onClick = {}
+ ) {
+ Text(text = stringResource(id = R.string.sign_up))
+ }
+ Button(
+ modifier = Modifier.constrainAs(bLogin) {
+ bottom.linkTo(disclaimer.top, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ onClick = {},
+ ) {
+ Text(text = stringResource(id = R.string.log_in))
+ }
+ Text(
+ modifier = Modifier.constrainAs(disclaimer) {
+ bottom.linkTo(parent.bottom, 8.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ text = stringResource(id = R.string.trial_disclaimer),
+ style = MaterialTheme.typography.caption,
+ )
+ }
+}
+
+@Preview
+@Composable
+public fun Screen2() {
+ ConstraintLayout(
+ modifier = Modifier
+ .fillMaxSize()
+ ) {
+ val bLogin = createRef()
+ val g1 = createGuidelineFromStart(44.dp)
+ val g2 = createGuidelineFromEnd(44.dp)
+ Button(
+ modifier = Modifier.constrainAs(bLogin) {
+ bottom.linkTo(parent.bottom, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ },
+ onClick = {},
+ ) {
+ Text(text = stringResource(id = R.string.log_in))
+ }
+ }
+}
+
+@Preview
+@Composable
+public fun Screen3() {
+ ConstraintLayout(
+ modifier = Modifier
+ .fillMaxSize()
+ ) {
+ val bLogin = createRef()
+ val g1 = createGuidelineFromTop(44.dp)
+ val g2 = createGuidelineFromBottom(44.dp)
+ Button(
+ modifier = Modifier.constrainAs(bLogin) {
+ top.linkTo(g1)
+ bottom.linkTo(g2)
+ height = Dimension.fillToConstraints
+ },
+ onClick = {},
+ ) {
+ Text(text = stringResource(id = R.string.log_in))
+ }
+ }
+}
+
+@Preview
+@Composable
+public fun Screen4() {
+ ConstraintLayout(
+ ConstraintSet {
+ val image = createRefFor("image")
+ val header = createRefFor("header")
+ val tag1 = createRefFor("tag1")
+ val tag2 = createRefFor("tag2")
+ val tag3 = createRefFor("tag3")
+ val bSignup = createRefFor("bSignup")
+ val bLogin = createRefFor("bLogin")
+ val disclaimer = createRefFor("disclaimer")
+
+ val g1 = createGuidelineFromStart(44.dp)
+ val g2 = createGuidelineFromEnd(44.dp)
+
+ constrain(image) {
+ width = Dimension.value(201.dp)
+ height = Dimension.value(179.dp)
+ top.linkTo(parent.top, 32.dp)
+ start.linkTo(g1)
+ }
+
+ constrain(header) {
+ top.linkTo(image.bottom, 32.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+
+ constrain(tag1) {
+ top.linkTo(header.bottom, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+
+ constrain(tag2) {
+ top.linkTo(tag1.bottom, 8.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+
+ constrain(tag3) {
+ top.linkTo(tag2.bottom, 8.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+
+ constrain(bSignup) {
+ bottom.linkTo(bLogin.top, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+
+ constrain(bLogin) {
+ bottom.linkTo(disclaimer.top, 16.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+
+ constrain(disclaimer) {
+ bottom.linkTo(parent.bottom, 8.dp)
+ start.linkTo(g1)
+ end.linkTo(g2)
+ width = Dimension.fillToConstraints
+ }
+ },
+ modifier = Modifier
+ .fillMaxSize()
+ ) {
+ Image(modifier = Modifier.layoutId("image"),
+ painter = painterResource(id = R.drawable.intercom_snooze),
+ contentDescription = null
+ )
+ Text(modifier = Modifier.layoutId("header"),
+ text = stringResource(id = R.string.welcome_header),
+ style = MaterialTheme.typography.h5,
+ )
+ Text(modifier = Modifier.layoutId("tag1"),
+ text = stringResource(id = R.string.welcome_tagline1)
+ )
+ Text(modifier = Modifier.layoutId("tag2"),
+ text = stringResource(id = R.string.welcome_tagline2)
+ )
+ Text(modifier = Modifier.layoutId("tag3"),
+ text = stringResource(id = R.string.welcome_tagline3)
+ )
+ Button(modifier = Modifier.layoutId("bSignup"),
+ onClick = {}
+ ) {
+ Text(text = stringResource(id = R.string.sign_up))
+ }
+ Button(modifier = Modifier.layoutId("bLogin"),
+ onClick = {},
+ ) {
+ Text(text = stringResource(id = R.string.log_in))
+ }
+ Text(modifier = Modifier.layoutId("disclaimer"),
+ text = stringResource(id = R.string.trial_disclaimer),
+ style = MaterialTheme.typography.caption,
+ )
+ }
+}
+
+@Preview
+@Composable
+public fun Screen5() {
+ val cs = """
+ {
+ g1 : { type: 'guideline', at: ['start', 44] },
+ g2 : { type: 'guideline', at: ['end', 44] },
+ image: {
+ width: 201, height: 179,
+ top: ['parent','top', 32],
+ start: ['g1']
+ },
+ header: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ top: ['image','bottom', 32]
+ },
+ tag1: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ top: ['header','bottom', 16]
+ },
+ tag2: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ top: ['tag1','bottom', 8]
+ },
+ tag3: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ top: ['tag2','bottom', 8]
+ },
+ bSignup: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ bottom: ['bLogin','top', 16]
+ },
+ bLogin: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ bottom: ['disclaimer','top', 16]
+ },
+ disclaimer: {
+ width: 'match_constraints',
+ start: ['g1'], end: ['g2'],
+ bottom: ['parent','bottom', 8]
+ },
+ }
+ """
+ ConstraintLayout(
+ ConstraintSet {},
+ modifier = Modifier
+ .fillMaxSize()
+ ) {
+ Image(modifier = Modifier.layoutId("image"),
+ painter = painterResource(id = R.drawable.intercom_snooze),
+ contentDescription = null
+ )
+ Text(modifier = Modifier.layoutId("header"),
+ text = stringResource(id = R.string.welcome_header),
+ style = MaterialTheme.typography.h5,
+ )
+ Text(modifier = Modifier.layoutId("tag1"),
+ text = stringResource(id = R.string.welcome_tagline1)
+ )
+ Text(modifier = Modifier.layoutId("tag2"),
+ text = stringResource(id = R.string.welcome_tagline2)
+ )
+ Text(modifier = Modifier.layoutId("tag3"),
+ text = stringResource(id = R.string.welcome_tagline3)
+ )
+ Button(modifier = Modifier.layoutId("bSignup"),
+ onClick = {}
+ ) {
+ Text(text = stringResource(id = R.string.sign_up))
+ }
+ Button(modifier = Modifier.layoutId("bLogin"),
+ onClick = {},
+ ) {
+ Text(text = stringResource(id = R.string.log_in))
+ }
+ Text(modifier = Modifier.layoutId("disclaimer"),
+ text = stringResource(id = R.string.trial_disclaimer),
+ style = MaterialTheme.typography.caption,
+ )
+ }
+}
\ No newline at end of file
diff --git a/projects/ComposeConstraintLayout/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/projects/ComposeConstraintLayout/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
new file mode 100644
index 000000000..2b068d114
--- /dev/null
+++ b/projects/ComposeConstraintLayout/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@@ -0,0 +1,30 @@
+
+
+
+
+