How to create a Text with a certain color with out...

# compose

[aj]

How to create a Text with a certain color with outside stroke of a different color?

[Karen Frangulyan]

That’s an ideal question to ask chatGPT, you’ll get working code within seconds 🙂

[aj]

Already tried that, and only got hallucinations as usual.

[aj]

and from basic research, most examples highlights only text strokes without a defined text body color

[Karen Frangulyan]

I just tried (I’m using the paid version 4), and in the beginning it also gave me something that was not compiling. But you have to talk to it, tell it what’s wrong, it might take couple of tries… here is what it gave me and I tried it out:

@Composable
fun StrokedText(
text: String,
modifier: Modifier = Modifier,
textColor: Color = Color.Black,
strokeColor: Color = Color.White,
strokeW: Float = 4f,
fontSize: Int = 16
) {
Canvas(modifier = modifier) *{*
val paint = _Paint_().asFrameworkPaint()._apply_ *{*
_isAntiAlias_ = true
_style_ = android.graphics.Paint.Style._FILL_AND_STROKE_
_textSize_ = fontSize._sp_._toPx_()
_color_ = textColor._toArgb_()
}

val strokePaint = _Paint_().asFrameworkPaint()._apply_ *{*
_isAntiAlias_ = true
_style_ = android.graphics.Paint.Style._STROKE_
_textSize_ = fontSize._sp_._toPx_()
_strokeWidth_ = strokeW
_color_ = strokeColor._toArgb_()
}

// Calculate text size to position it in the center
val textBounds = android.graphics.Rect()
paint.getTextBounds(text, 0, text.length, textBounds)

drawContext.canvas._nativeCanvas_.drawText(
text,
size.width / 2 - textBounds.exactCenterX(),
size.height / 2 - textBounds.exactCenterY(),
strokePaint
)

drawContext.canvas._nativeCanvas_.drawText(
text,
size.width / 2 - textBounds.exactCenterX(),
size.height / 2 - textBounds.exactCenterY(),
paint
)
}
}

@Preview
@Composable
fun CustomStrokedTextExample() {
StrokedText(
text = "Hello, World!",
modifier = Modifier
._fillMaxWidth_()
._height_(100._dp_),
textColor = Color.Black,
strokeColor = Color.Red,
strokeW = 4f,
fontSize = 24
)
}

At least the preview in Android Studio looks good to me

[Karen Frangulyan]

I didn’t check the solution, to be honest, just copy-pasted to a compose file I have. In general, we need to learn to use AI, which means it is always a conversation, sometimes a long one, before it reaches to a solution that you need.

[Stylianos Gakis]

Poor fella just asked a question, not an AI sales pitch 😅

[aj]

Exactly 🙂

[Karen Frangulyan]

back in the day there was a website called ‘lmgtfy’, we need a new one for chatgpt 😉

[Karen Frangulyan]

but I didn’t get any reaction if the solution was correct or not 🙂

[MR3Y]

As far as I remember, it is not possible due to platform limitation:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1684235707481289?thread_ts=1684222532.838899&cid=CJLTWPH7S. There is a workaround though: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1684235822030089?thread_ts=1684222532.838899&cid=CJLTWPH7S

[Colton Idle]

I think i asked about this once and got an answer from halil. try searching for my name and stroke text? if i get a chance later on desktop ill try to search myself since im on mobile right now

[MR3Y]

@Colton Idle the link I posted right above your message leads to exactly what you're talking about.

[Karen Frangulyan]

Am I misunderstanding the requirements, isn’t this what’s needed? Seems like chatGPT gave me the solution that @Halil Ozercan mentioned as our best bet.

[aj]

@Karen Frangulyan its much more complex than what an AI can propose or do.

There are multiple workarounds, or implementations that end with an illusion of a stroke but an outer stroke implementation that is implemented the right way. And none of the available options ends up with a visually accurate output.

[Karen Frangulyan]

@aj bro in 2 minutes AI gave the same answer as was mentioned by a google developer working on text to be the best possible solution at the moment. AI also added that it is not directly supported and this is a workaround. So AI found theoretically best answer to this question that exists across the multiverse 😀