https://kotlinlang.org logo
#compose
Title
# compose
c

Can Korkmaz

07/19/2022, 1:58 PM
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.
Copy code
<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"
c

chatterInDaSkull

07/19/2022, 4:20 PM
what is the layout? Generally you can achieve this without having to use a barrier
c

Can Korkmaz

07/19/2022, 4:50 PM
It's constraint layout at xml, I'm tasked to migrate code to compose and I'm using compose constraint layout.
c

chatterInDaSkull

07/19/2022, 4:52 PM
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
1
c

Chris Sinco [G]

07/19/2022, 6:53 PM
What is the barrier being used for from the UI conceptual perspective?
c

Can Korkmaz

07/20/2022, 6:59 AM
Made this look with brush.verticalGradient(), still can't get something like the original barrier gradient look. here is the code I used:
Copy code
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
                )
            )
        )
10 Views