Anyways to make the ConstraintLayout barrier in th...

# compose

[Can Korkmaz]

Anyways to make the ConstraintLayout barrier in the Compose? I want to make this layout without using box with linearGradent(didn't succeed). Compose CL barrier doesn't have the barrierDirection parameter. Bottom is Divider, and the top is barrier. I attached the xml to thread.

[Can Korkmaz]

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/assetImageAndTickerBarrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scrollbarThumbHorizontal="?android:attr/scrollbarThumbHorizontal"
    app:barrierDirection="bottom"

[chatterInDaSkull]

what is the layout? Generally you can achieve this without having to use a barrier

[Can Korkmaz]

It's constraint layout at xml, I'm tasked to migrate code to compose and I'm using compose constraint layout.

[chatterInDaSkull]

ConstraintLayout was introduced because nesting views where expensive. That problem doesn’t really exist with composables. You should try building it without constraint layouts if possible. You might be able to achieve it easier than trying to force in a barrier

[Chris Sinco [G]]

What is the barrier being used for from the UI conceptual perspective?

[Can Korkmaz]

Made this look with brush.verticalGradient(), still can't get something like the original barrier gradient look. here is the code I used:

val gradientBoxRef = createRef() //todo: fix the gradient
Box(
    Modifier
        .fillMaxWidth()
        .height(16.dp)
        .constrainAs(gradientBoxRef) {
            top.linkTo(assetImagaeRef.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
        .background(
            brush = Brush.verticalGradient(
                listOf(
                    Color(R.color.colorBackground),
                    Color(0x84ffffff),// scrollbar_handle_material.xml color
                )
            )
        )