I have this in design mockups. How would I go about adding white background to the text? I have tri...

# compose

[dimsuz]

I have this in design mockups. How would I go about adding white background to the text?

I have tried doing two Text composables in the Box, with the former having + 1.sp, but it doesn't align as perfectly as in the screenshot.

[Alejandro Rios]

Maybe this help:
https://stackoverflow.com/a/66958833/3729124

[Alejandro Rios]

is a different approach

[dimsuz]

that's more promising, thank you!

[Siyamed]

Afaik @Halil Ozercan is working on stroke

[Siyamed]

https://android-review.googlesource.com/c/platform/frameworks/support/+/2185559/7

[Siyamed]

[deleted]

[Siyamed]

It will grow into a parameter possibly in TextStyle

https://android-review.googlesource.com/c/platform/frameworks/support/+/2177784/8

[Colton Idle]

Oooh. I need stroke text soon. Hopefully this lands in the next Alpha.

[Halil Ozercan]

Perfectly aligning two texts on top of each other as in the given design, you need to draw the text letter-by-letter not as a whole layout. Neither @Composable Text nor experimental drawText will give you the result that you are expecting.

The upcoming stroke feature may be of help but I'm not sure. Compose DrawStyle can either be Fill or Stroke. This design seems to use white color for stroke, and a dark blue for fill. AFAIK Android platform doesn't support defining different colors for fill and stroke at the same time. You can probably draw stroke'd text on top of fill'ed text with the upcoming API.

@Composable
fun FillAndStrokeText(text: String) {
  Box {
    Text(text, style = TextStyle(color = Color.Blue))
    Text(text, style = TextStyle(color = Color.White, drawStyle = Stroke(4f)))
  }
}

[Colton Idle]

😍 Do we know when this stroke api is coming

[Halil Ozercan]

soonish 🙂 🤞

[Halil Ozercan]

Stroke changes are merged to androidx-main meaning that the next release should introduce DrawStyle in TextStyle https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]ain/java/androidx/compose/foundation/demos/text/StrokeDemo.kt