How to Apply Stroke Effects to Text in Jetpack Compose

Jetpack Compose recently added many new customization options to TextStyle and TextStyle.drawStyle is one of them. Using this, we can apply stunning stroke effects to text in Jetpack Compose.

In this blog post, we’ll explore how to use DrawStyle API to create unique and creative stroke effects for texts.

Table of Contents

• Draw Simple outlined text

• Draw round-corner outlined text

• Draw dash stroke

• Draw the outline with multiple path effects

• Draw the double outlines

• Draw Gradient outline

• Draw outlines with shapes

• Example 1 - Curved outline

• Example 2 - Heart shaped outline

• Conclusion

Let's get started.

We’ll use Stroke drawStyle, which provides information for drawing content with a stroke.
Let’s first look at what we have in Stroke API,

class Stroke(
    val width: Float = 0.0f,
    val miter: Float = DefaultMiter,
    val cap: StrokeCap = DefaultCap,
    val join: StrokeJoin = DefaultJoin,
    val pathEffect: PathEffect? = null
) : DrawStyle() { }

• width — Configure the width of the stroke in pixels

• miter — Set the stroke miter value. This is used to control the behavior of miter joins when the joins angle is sharp. This value must be >= 0

• cap — Return the paint’s Cap, controlling how the start and end of stroked lines and paths are treated. The default is StrokeCap.Butt

• join — Set the treatment where lines and curve segments join on a stroked path. The default is StrokeJoin.Miter

• pathEffect — Effect to apply to the stroke, null indicates a solid stroke line is to be drawn

For all the examples with source code, check out canopas blog.