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

dimsuz

08/30/2022, 3:36 PM
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.
a

Alejandro Rios

08/30/2022, 3:40 PM
is a different approach
d

dimsuz

08/30/2022, 3:42 PM
that's more promising, thank you!
s

Siyamed

08/30/2022, 7:38 PM
Afaik @Halil Ozercan is working on stroke
[deleted]
c

Colton Idle

08/30/2022, 7:56 PM
Oooh. I need stroke text soon. Hopefully this lands in the next Alpha.
h

Halil Ozercan

08/31/2022, 12:55 PM
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.
Copy code
@Composable
fun FillAndStrokeText(text: String) {
  Box {
    Text(text, style = TextStyle(color = Color.Blue))
    Text(text, style = TextStyle(color = Color.White, drawStyle = Stroke(4f)))
  }
}
c

Colton Idle

08/31/2022, 3:20 PM
😍 Do we know when this stroke api is coming
h

Halil Ozercan

09/01/2022, 8:55 AM
soonish 🙂 🤞
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
2 Views