How to outline text in Jetpack Compose

Question

I have a Jetpack Compose Text() element that I'd like to outline in black like so this .
Anyone know how to do this? I've tried using the border() modifier, but that just adds a border around the rectangular area containing the text. I've also tried overlaying two text elements, but that doesn't quite work either.

Gabriele Mariotti · Accepted Answer · 2022-11-29T09:25:09.633

The 1.4.0-alpha01 introduced a DrawStyle parameter to TextStyle function that enables drawing outlined text.

You can use something like:

Text(
    text = "Sample",
    style = TextStyle.Default.copy(
        fontSize = 64.sp,
        drawStyle = Stroke(
            miter = 10f,
            width = 5f,
            join = StrokeJoin.Round
        )
    )
)

Before 1.4.0-alpha01 you can use a Canvas and the drawIntoCanvas function.

Something like:

Canvas(
    modifier = Modifier.fillMaxSize(),
    onDraw = {
                drawIntoCanvas {
                    it.nativeCanvas.drawText(
                        "Sample",
                        0f,
                        120.dp.toPx(),
                        textPaintStroke
                    )
                    it.nativeCanvas.drawText(
                        "Sample",
                        0f,
                        120.dp.toPx(),
                        textPaint
                    )
                }
            }
)

with these Paint:

val textPaintStroke = Paint().asFrameworkPaint().apply {
    isAntiAlias = true
    style = android.graphics.Paint.Style.STROKE
    textSize = 64f
    color = android.graphics.Color.BLACK
    strokeWidth = 12f
    strokeMiter= 10f
    strokeJoin = android.graphics.Paint.Join.ROUND
}

val textPaint = Paint().asFrameworkPaint().apply {
    isAntiAlias = true
    style = android.graphics.Paint.Style.FILL
    textSize = 64f
    color = android.graphics.Color.WHITE
}

do keep in mind using canvas api's directly means we loose many layers of abstraction about placement and measurement a text composable would give us. — TrevJonez, Oct 25 '22 at 19:57
this works but causes the text to go off screen, i've linked a question for it https://stackoverflow.com/questions/74372624/compose-drawtext-going-off-screen — alfietap, Nov 09 '22 at 13:15
Note that as of `1.4.0-alpha02` setting `drawStyle` to `Stroke` will remove the fill color — Eyjafl, Dec 01 '22 at 16:28
Is there any other option to return fill color other than drawing two same lines on each other? This not working for example for bold style and similar situations. Thanks. — Warlock, Aug 06 '23 at 16:46

score 1 · Answer 2 · answered May 02 '23 at 16:27

// Creating a outline text
@Composable
fun OutLineText() {

    // Create a Paint that has black stroke
    val textPaintStroke = Paint().asFrameworkPaint().apply {
        isAntiAlias = true
        style = android.graphics.Paint.Style.STROKE
        textSize = 100f
        color = android.graphics.Color.CYAN
        strokeWidth = 12f
        strokeMiter = 10f
        strokeJoin = android.graphics.Paint.Join.ROUND
    }

    // Create a Paint that has white fill
    val textPaint = Paint().asFrameworkPaint().apply {
        isAntiAlias = true
        style = android.graphics.Paint.Style.FILL
        textSize = 100f
        color = android.graphics.Color.WHITE
    }

    // Create a canvas, draw the black stroke and
    // override it with the white fill
    Canvas(
        modifier = Modifier.fillMaxSize(),
        onDraw = {
            drawIntoCanvas {
                it.nativeCanvas.drawText(
                        "Hello World",
                        200f,
                        200.dp.toPx(),
                        textPaintStroke
                    )

                    it.nativeCanvas.drawText(
                        "Hello World",
                        200f,
                        200.dp.toPx(),
                        textPaint
                    )
                }
            }
        )
}

More detail : https://gist.github.com/Oleur/ca70cd08f51568a0b870333c15ffbca3 https://developer.android.com/jetpack/compose/graphics/draw/overview https://developer.android.com/jetpack/compose/graphics/draw/modifiers

Output :

How to outline text in Jetpack Compose

2 Answers2