Curved text Jetpack compose

Question

I want to create curved text in Jetpack Compose like it was in "Material You". But how? Example:

Answer 1

You can do this using Canvas. Compose itself does not have a function to draw a curved text (afaik in rc-01). But using drawIntoCanvas function you can use the nativeCanvas which provides drawTextOnPath where you can draw a text in a Path. In this Path you add an arc, so your text is drawn in this path.

Canvas(
    modifier = Modifier
        .size(300.dp)
        .background(Color.Gray)
) {
    drawIntoCanvas {
        val textPadding = 48.dp.toPx()
        val arcHeight = 400.dp.toPx()
        val arcWidth = 300.dp.toPx()
        val path = Path().apply {
            addArc(0f, textPadding, arcWidth, arcHeight, 180f, 180f)
        }
        it.nativeCanvas.drawTextOnPath(
            "Curved Text with Jetpack Compose",
            path,
            0f,
            0f,
            Paint().apply {
                textSize = 16.sp.toPx()
                textAlign = Paint.Align.CENTER
            }
        )
    }
}

Here's the result: