How to handle missing/"gone" view when using Compose ConstraintLayout

Question

I'm trying to use the Jetpack Compose ConstraintLayout, and if all the views are visible, it is working great. But if one of these views is missing, the sandcastle falls down.

For example, if a view is optional, I would manage it this way :

val (text1, text2) = createRefs()

ConstraintLayout {
    if (myTextStr.isNotEmpty()) {
        Text(
            text = myTextStr,
            modifier = Modifier
                .constrainAs(text1) {
                    start.linkTo(parent.start)
                    bottom.linkTo(parent.bottom)
                })
    }
    Text(
        text = myTextStr2,
        modifier = Modifier
            .constrainAs(text2) {
                start.linkTo(parent.start)
                bottom.linkTo(text1.top)
            })
}

But then all the layout is broken if the first Text element is missing, since the second Text position is depending on it.

One possibility is to keep the Text view, but setting the height to 0.dp if the myTextStr is null or empty. But I wanted to be sure that the Compose ConstraintLayout is not offering a cleaner way to achieve this

Conk

Simply not using a ref should not be a problem. Are you sure you are not linking any other view to this myTextRef when the string is empty? Please provide a minimal reproducible example – Laryngology

Yes, other view are linked to the missing one, that's why everything collapse. I will rephrase my question to make it clearer – Conk

@Mathieu Did you find any solution for this? – Care

I kept the proposition I made on the end of my question : keeping the view but setting a height of 0dp when the view should be gone. – Conk

Have you tried the visibility property inside the constrainAs. constrain(title) { bottom.linkTo(profilePic.top, margin = 16.dp) start.linkTo(parent.start) visibility = if (isTitleVisible) Visibility.Visible else Visibility.Gone } – Disputatious

@Disputatious thanks, you saved my day! Works perfectly with Compose 1.2.1 and Constraint layout (for Compose) 1.0.1 – Chainplate

@Disputatious Please make this a real answer. – Glorygloryofthesnow

Answer 1

Have you tried the visibility property inside the constrainAs.

// ...
Modifier
  .constrainAs(title) { 
      bottom.linkTo(profilePic.top, margin = 16.dp) 
      start.linkTo(parent.start) 
      visibility = if (isTitleVisible) Visibility.Visible else Visibility.Gone 
}
// ...

Disputatious

Looks like the field visibility is no longer available? – Saraisaraiya

I ended up using "height = if (show) Dimension.fillToConstraints else Dimension.value(0.dp)" – Saraisaraiya

Answer 2

This is how ConstraintLayout is supposed to work and what View.GONE means.

If you want Constraints respect the view even if it is not "visible" use View.INVISIBLE.

Azotic

Answer 3

wrote a small function which adds a zero space and handles constraint even if target is gone. Just pass the constraint and logic to show or not.

@Composable
inline fun <T : Any?> T?.ConditionalConstraintChildView(
    constraintModifier: Modifier,
    noinline doShow: (() -> Boolean) = { true },
    crossinline content: @Composable (T) -> Unit
) {
    val value = this
    Box(modifier = constraintModifier, contentAlignment = Alignment.CenterStart) {
        if (value == null || !doShow.invoke()) {
            Spacer(Modifier.size(0.dp))
        } else {
            content(value)
        }
    }
}

Triphammer

Answer 4

There is a miss in your code.

val (text1, text2) = createRefs()

This should be inside ContsrainLayout {} block, else it will refer createRef from focusRequester because it also exposes same method.

Nautilus