How to give this kind of Starting Border to a view in compose , the front Border height depends on t...

# compose

[Prateek Kumar]

How to give this kind of Starting Border to a view in compose , the front Border height depends on the contents on the right?

[Prateek Kumar]

Tried using IntrinsicSize.Max but didn't work,
Ended up using something like:-

[MR3Y]

A better solution would be:

Card(
    modifier = Modifier
    .border(width = 4.dp, color = MarrowTheme.colors.onSurfaceBlue)
    .padding(start = 4.dp)
    .fillMaxWidth()
) {
   // card content...
}

your current solution is considered an anti-pattern called "Recomposition loop" because it wastes at least 1 frame.
Read more about it in the documentation: https://developer.android.com/jetpack/compose/phases#recomp-loop

[Prateek Kumar]

I get it but given solution applies border all around , i need to only apply it at the start.

[Stylianos Gakis]

I would try having this as a normal item inside the card instead of a border. Wouldn’t this work just by itself?

Card() {
  Row(fillMaxSize) {
    Box(fillMaxHeight.width(4.dp).background(Color.Blue)
    YourCardContent()
  }
}

[MR3Y]

@Prateek Kumar Oh sorry, this is because border is applying some paddings/offsets internally, I think if you want one side border, you would do it manually using one of drawX modifiers:

val borderColor = MarrowTheme.colors.onSurfaceBlue
val borderWidth = with(LocalDensity.current) {
    4.dp.toPx()
}
Card(
    modifier = modifier
    .fillMaxSize()
    .drawWithCache {
         onDrawBehind {
             drawRect(color = borderColor, size = Size(width = borderWidth, size.height))
         }
    }
    .padding(start = 4.dp)
    .fillMaxWidth()
) {
   // card content...
}

haven't tested it, but I think it should achieve the desired result

[MR3Y]

@Stylianos Gakis I agree, I think it would also work

[Stylianos Gakis]

Yes, but it does mess with the paddings potentially if you aren't careful to consider the extra 4dp. I like your drawBehind approach more for that reason.

[Prateek Kumar]

@Stylianos Gakis well if u give fill max height, it takes the entire layout but the same combination works in XML, just have parent with wrap_content and child with match_parent

[Prateek Kumar]

@MR3Y That solution works and i like the approach, Thanks