constraintlayout
constraintlayout copied to clipboard
Problem with Dimension.Coercible.atLeast(dp: androidx.compose.ui.unit.Dp)
Good bug reports include a layout (and MotionScene if applicable). Bug reports without these or reproduction steps are likely to be closed.
I'm trying to create compose layout that acts like this xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@android:color/black">
<View
android:id="@+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintTop_toBottomOf="@+id/topBar"
app:layout_constraintBottom_toTopOf="@id/bottomBar"
android:background="@android:color/holo_red_dark"
/>
<View
android:id="@+id/topBar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@android:color/holo_blue_bright"
app:layout_constraintTop_toTopOf="parent"
/>
<View
android:id="@+id/placeholder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@android:color/transparent"
app:layout_constraintDimensionRatio="3:4"
app:layout_constraintTop_toBottomOf="@+id/topBar" />
<View
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@android:color/holo_green_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_min="250dp"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="@+id/placeholder" />
</androidx.constraintlayout.widget.ConstraintLayout>
My Composable is this one:
@Composable
@Preview()
fun ComposeContent() {
ConstraintLayout(
modifier = Modifier.fillMaxSize()
) {
val (topBar, bottomBar, placeholder, preview) = createRefs()
Box(
modifier = Modifier
.constrainAs(placeholder) {
top.linkTo(topBar.bottom)
}
.aspectRatio(3f / 4f)
.fillMaxWidth()
.background(Color.Yellow.copy(alpha = 0.5f))
)
Box(
modifier = Modifier
.constrainAs(preview) {
top.linkTo(topBar.bottom)
bottom.linkTo(bottomBar.top)
}
.aspectRatio(3f / 4f)
.fillMaxWidth()
.background(Color.Red.copy(alpha = 0.5f))
)
Box(
modifier = Modifier
.constrainAs(topBar) {
top.linkTo(parent.top)
}
.height(48.dp)
.fillMaxWidth()
.background(Color.Blue.copy(alpha = 0.5f))
)
Box(
modifier = Modifier
.constrainAs(bottomBar) {
linkTo(placeholder.bottom, parent.bottom, 0.dp, 0.dp, 1f)
height = Dimension.preferredWrapContent.atLeast(250.dp)
}
.fillMaxWidth()
.background(Color.Green.copy(alpha = 0.5f))
) {
Box(
modifier = Modifier
.fillMaxHeight()
)
}
}
}
It looks that height = Dimension.preferredWrapContent.atLeast(250.dp) doesn't set the minimal size of the desired composable view.
The idea is that the bottom bar fills all the space that is left. When the space is not enough - topBar and bottomBar overlap equal parts from preview. Placeholder is just a helper view.