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

Prateek Kumar

03/21/2023, 5:53 PM
How to give this kind of Starting Border to a view in compose , the front Border height depends on the contents on the right?
Tried using IntrinsicSize.Max but didn't work, Ended up using something like:-
m

MR3Y

03/21/2023, 6:30 PM
A better solution would be:
Copy code
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
p

Prateek Kumar

03/21/2023, 7:10 PM
I get it but given solution applies border all around , i need to only apply it at the start.
s

Stylianos Gakis

03/21/2023, 9:17 PM
I would try having this as a normal item inside the card instead of a border. Wouldn’t this work just by itself?
Copy code
Card() {
  Row(fillMaxSize) {
    Box(fillMaxHeight.width(4.dp).background(Color.Blue)
    YourCardContent()
  }
}
m

MR3Y

03/21/2023, 10:31 PM
@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:
Copy code
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
@Stylianos Gakis I agree, I think it would also work
s

Stylianos Gakis

03/21/2023, 10:38 PM
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.
p

Prateek Kumar

03/22/2023, 2:23 AM
@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
@MR3Y That solution works and i like the approach, Thanks