Enables creating complex, responsive layouts by positioning UI elements relative to each other, improving code readability and alignment efficiency across multiple platforms.
ConstraintLayout is a layout that allows you to place composables relative to other composables on the screen. It is an alternative to using multiple nested Row, Column, Box and other custom layout elements. ConstraintLayout is useful when implementing larger layouts with more complicated alignment requirements.
Consider using ConstraintLayout in the following scenarios:
The androidx.constraintlayout:constraintlayout-compose library is available for Jetpack Compose, but it is not currently available for Compose Multiplatform. This library changes that, by providing the ConstraintLayout for many of the platforms supported by Compose Multiplatform.
| Platform | Supported |
|---|---|
| Android |
Usage is very simple:
import androidx.constraintlayout.compose.ConstraintLayout
@Composable
fun ConstraintLayoutContent() {
ConstraintLayout {
(button, text) = createRefs()
Button(
onClick = { },
modifier = Modifier.constrainAs(button) {
top.linkTo(parent.top, margin = dp)
}
) {
Text()
}
Text(
,
Modifier.constrainAs(text) {
top.linkTo(button.bottom, margin = dp)
}
)
}
}
You'll note that I have kept the package name the same as that in AndroidX. This is to enable easy migration for when support is added to Compose Multiplatform.
val commonMain by getting {
dependencies {
/// Compose 1.11.0+
implementation("tech.annexflow.compose:constraintlayout-compose-multiplatform:0.8.2")
}
}
If the androidx.constraintlayout package names clash with something else on your classpath — most
often the real androidx.constraintlayout:constraintlayout-compose on Android — pick a relocated
flavour instead. All three are built from the same sources and released under the same version.
/// Everything relocated — the flavour to reach for when you hit a clash
implementation("tech.annexflow.compose:constraintlayout-compose-multiplatform-shaded:0.8.2")
Two caveats:
-shaded-compose relocates only the Compose layer and still ships the solver as
androidx.constraintlayout.core, so it does not resolve a clash with
androidx.constraintlayout:constraintlayout-core. Use -shaded for that.Before 0.8.0 the flavours were published as version suffixes on a single artifact. They are separate
artifacts now, because a shared artifact id let Gradle's version-conflict resolution silently swap
one flavour for another: 0.8.0-shaded becomes -shaded:0.8.0, and 0.8.0-shaded-core — which
despite its name relocated the Compose layer, not the solver — becomes -shaded-compose:0.8.0.
Thanks to Chris Banes for the initial structure of the project.
Copyright 2026 The Android Open Source Project
Portions 2026 Sergei Gagarin
Licensed under the Apache License, Version 2.0 (the "License");
you may use except compliance the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
| ✅ |
| iOS | ✅ |
| Desktop (JVM) | ✅ |
| Desktop (Mac) | ✅ (experimental) |
| Web | ✅ (experimental) |
| Artifact | Packages it ships |
|---|
constraintlayout-compose-multiplatform | androidx.constraintlayout.compose + androidx.constraintlayout.core |
constraintlayout-compose-multiplatform-shaded | tech.annexflow.constraintlayout.compose + tech.annexflow.constraintlayout.core |
constraintlayout-compose-multiplatform-shaded-compose | tech.annexflow.constraintlayout.compose + androidx.constraintlayout.core |
Surfaced from shared tags and platforms — no rankings paid for.