Channels
#compose
Title
s
sindrenm
10/08/2020, 7:11 AMHow would I go about constraining the top of one composable to the (vertical) center of another composable? I don't initially know the size of any of them. Is there a way to get the size of a composable post-measure? Thanks. simple smile
j
Jamie Craane
10/08/2020, 7:23 AMYou can get the size of a component using this: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1602027690117600
Have you tried https://foso.github.io/Jetpack-Compose-Playground/layout/constraintlayout/ for your use-case?
s
sindrenm
10/08/2020, 8:33 AMThanks! I managed to get it to work with the
onSizeChangedConstraintLayoutz
Zach Klippenstein (he/him) [MOD]
10/08/2020, 10:42 AMI believe using onSizeChanged will result in a frame delay, might just be simpler to make a custom layout if you don't have to manage too many other children. But yea this sounds like exactly the sort of thing constraint layout was designed for
s
sindrenm
10/08/2020, 11:02 AMIf there was a way to do
top.linkTo(otherComposable.verticalCenter)ConstraintLayout.javaWait … there is such a thing. Let me try that real quick. I must've been blind the first time. 😕
Hmm … maybe I'm missing something, but this was harder than I thought. 😅
What I'm trying to achieve is something like the attached screenshot, which I've managed to do with this code right here:
Copy code
@Composable
@Preview
fun Test() {
Box(Modifier.fillMaxSize()) {
ConstraintLayout(Modifier.align(Alignment.Center)) {
val (redBoxInTheBack, gradientBoxOnTop) = createRefs()
Box(modifier = Modifier
.height(200.dp)
.width(200.dp)
.background(Color.Red)
.constrainAs(redBoxInTheBack) {
top.linkTo(<http://parent.top|parent.top>)
start.linkTo(parent.start)
end.linkTo(parent.end)
}
)
Box(modifier = Modifier
.height(50.dp)
.width(100.dp)
.background(VerticalGradient(listOf(Color.Green, Color.Blue), startY = 0f, endY = 100f))
.constrainAs(gradientBoxOnTop) {
centerAround(<http://parent.top|parent.top>)
start.linkTo(redBoxInTheBack.start)
}
)
}
}
}z
Zach Klippenstein (he/him) [MOD]
10/08/2020, 11:56 AMCan you post a sketch of the result you’re trying to get? I’m not sure what that is.
Do you want the gradient box to be top-start-aligned?
s
sindrenm
10/08/2020, 12:05 PMYeah, I want basically exactly what's in the first screenshot, but without having to explicitly add spacing around the composable itself for the gradient box to be fully visible, if that makes sense. Without a padding, the composable seems to only have the size of the red box, and thus clipping the gradient box (as you can see in the second screenshot, where only half of the gradient box is visible).
In screenshot #1, the gradient box is fully visible only because there's space around the
ConstraintLayoutBoxBoxModifier.fillMaxSize()Modifier.fillMaxSize()j
Jamie Craane
10/08/2020, 12:33 PMYou might want to check a custom layout in this case. As an example, the following code:
Copy code
setContent {
MyApplicationTheme {
Box(modifier = Modifier.height(200.dp).width(200.dp).background(Color.Gray)) {
Layout(children = {
Box(modifier = Modifier.height(150.dp).width(150.dp).background(Color.Red))
Box(modifier = Modifier.height(50.dp).width(100.dp).background(Color.Green))
}) { measurables, constraints ->
val placeables = measurables.map { measurable ->
measurable.measure(constraints)
}
layout(constraints.maxWidth, constraints.maxHeight) {
val second = placeables[1]
val first = placeables.first()
first.placeRelative(0, second.height / 2)
second.placeRelative(0, 0)
}
}
}
}
}z
Zach Klippenstein (he/him) [MOD]
10/08/2020, 12:38 PMYea, I would probably just use a custom layout. Seems like ConstraintLayout should be able to handle this, but the DSL doesn’t support all the CL features yet?
j
Jamie Craane
10/08/2020, 12:49 PMI am not sure if ConstraintLayout supports this, I do not see a relative positioning to position a view relative to the center of another view: https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#RelativePositioning
z
Zach Klippenstein (he/him) [MOD]
10/08/2020, 12:52 PMCouple notes about that code snippet though, you need to adjust the constraints to account for your extra height, and the dimensions passed to
layout()j
Jamie Craane
10/08/2020, 12:55 PMYes, that is correct! (it really was a quick and dirty mockup of how this could be used). Nice additions!
z
Zach Klippenstein (he/him) [MOD]
10/08/2020, 12:55 PMTo do this with XML CL, I think you’d need to create a guide/barrier or something that is centered in the badge, and then align the top of the main one to that?
j
Jamie Craane
10/08/2020, 12:58 PMI don’t think placement order changes the z-index. It seems placements of the children affects z-order. It might be handy if one can explicitly define (an optional) z-order when placing a placeable.
s
sindrenm
10/08/2020, 1:17 PMOh, nice! Thanks a ton, folks, I wasn't aware of
LayoutI was looking for a way to put a guideline in the vertical center of the badge there, but I couldn't find a way to do just that. Not sure if you can in XML either, though? Not that it matters, Compose all the way, d00ds. 😎
z
Zach Klippenstein (he/him) [MOD]
10/08/2020, 1:59 PMThere was a recent CL to make placement order affect drawing order, but I don’t think it made it into alpha13.
https://android-review.googlesource.com/c/platform/frameworks/support/+/1435797
j
Jamie Craane
10/08/2020, 2:00 PMGood to know!
2 Views