Explore the DrawStyle API for text stroke effects in Jetpack Compose
Jetpack Compose has recently added many new customization options for TextStyle, TextStyle.drawStyle is one of them.
Using it, we can apply stunning stroke effects to text in Jetpack Compose.
In this blog post, we’ll explore how to use the DrawStyle API to create unique and creative stroke effects for text.
So, if you’re ready to take your Jetpack Compose text designs to the next level, let’s dive in and explore the DrawStyle API!
We’ll use Stroke drawStyle, which provides information for drawing content with a stroke.
Let’s first look at what’s in the 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 – configures the pixel width of the stroke
- miter – Sets the stroke miter value. This is used to control the behavior of sharp joins when they are joined. This value must be >= 0
- cap – Returns the endpoints drawn, controls how the start and end of stroked lines and paths are handled. The default value is StrokeCap.Butt.
- join – Sets the handling of joining straight and curved segments on stroked paths. The default value is StrokeJoin.Miter.
- pathEffect – The effect to apply to the stroke, empty means a solid stroked line will be drawn.
Now let’s implement the cool stroke effect.
draws simple stroked text.
Text(
text = "Applying Cool Stroke Effects to Text",
style = LocalTextStyle.current.merge(
TextStyle(
color = Color(0xFFF67C37),
fontSize = 80.sp,
drawStyle = Stroke(width = 6f, join = StrokeJoin.Round)
)
)
)
We simply apply a Stroke with a width of 6 pixels and a StrokeJoin.Round join.
Let’s try different pathEffects to achieve different stroke effects.
Draws stroked text with rounded corners
We’ll use cornerPathEffect to round off sharp corners with a radius. Here is the method,
Text(
text = "Applying Cool Stroke Effects to Text",
style = LocalTextStyle.current.merge(
TextStyle(
color = Color(0xFFF67C37),
fontSize = 80.sp,
drawStyle = Stroke(
width = 6f, join = StrokeJoin. Round,
pathEffect = PathEffect. cornerPathEffect(
radius = 40f
)
)
)
)
)
Draw a dotted line stroke
For dashed stroke we use dashPathEffect which has interval and phase parameters
intervals – array of ‘on’ and ‘off’ distances for dashed line segments
stage – pixel offset to interval array
Text(
text = "Applying Cool Stroke Effects to Text",
style = LocalTextStyle.current.merge(
TextStyle(
color = Color(0xFFF67C37),
fontSize = 80.sp,
drawStyle = Stroke(
width = 6f, join = StrokeJoin. Round,
pathEffect = PathEffect.dashPathEffect(
intervals = floatArrayOf(20f, 10f),
phase = 0f
)
)
)
)
)
preview result
Outline with multiple path effects
We can also apply multiple effects to the outline path using chainPathEffect. Let’s apply the dashed line effect to the rounded path.
@Composable
fun MultiplePathEffectDemo() {<!-- -->
val dashPathEffect = remember {<!-- -->
PathEffect.dashPathEffect(
intervals = floatArrayOf(20f, 10f),
0f
)
}
val cornerPathEffect = remember {<!-- -->
PathEffect.cornerPathEffect(
80f
)
}
Text(
text = "Applying Cool Stroke Effects to Text",
style = LocalTextStyle.current.merge(
TextStyle(
color = Color(0xFFF67C37),
fontSize = 80.sp,
drawStyle = Stroke(
width = 6f, join = StrokeJoin. Round,
pathEffect = PathEffect.chainPathEffect(dashPathEffect, cornerPathEffect)
)
)
)
)
}
Draw a double outline
val customPath = remember {<!-- -->
val p = Path()
p.moveTo(-15f, 6f)
p.lineTo(15f, 6f)
p.lineTo(15f, 2f)
p.lineTo(-15f, 2f)
p. close()
p.moveTo(-15f, -6f)
p.lineTo(15f, -6f)
p.lineTo(15f, -2f)
p.lineTo(-15f, -2f)
p
}
val stampEffect = remember {<!-- -->
PathEffect.stampedPathEffect(
customPath, 40f, 0f, StampedPathEffectStyle.Morph
)
}
Text(
text = "Applying Cool Stroke Effects to Text",
style = LocalTextStyle.current.merge(
TextStyle(
color = Color(0xFFF67C37),
fontSize = 80.sp,
drawStyle = Stroke(
width = 6f, join = StrokeJoin. Round,
pathEffect = stampEffect
)
)
)
)
Draw a gradient stroke
Here we will use the Brush API to add gradient strokes.
@Composable
fun GradientOutlineDemo() {<!-- -->
Text(
text = "Applying Cool Stroke Effects to Text",
style = LocalTextStyle.current.merge(
TextStyle(
fontSize = 80.sp,
brush = Brush. horizontalGradient(
listOf(
Color. Blue,
Color. Magenta,
Color. Red,
Color. Yellow
)
),
drawStyle = Stroke(
width = 6f, join = StrokeJoin. Round,
pathEffect = PathEffect. cornerPathEffect(
80f
)
)
)
)
)
}
Draw a contour with shape
Let’s have fun with stroke effects.
We can draw different shapes using paths and stamp them on outlines using stampedPathEffect.
Example 1 – Curved outline
We’ll draw a semicircle shape and drape it over the outline. Here is how
@Composable
fun CustomOutlineDemo() {<!-- -->
val customPath = Path().apply {<!-- -->
moveTo(-10f, 0f)
arcTo(
Rect(-10f, -10f, 10f, 10f),
180f,
180f,
false
);
}
val stampEffect = remember {<!-- -->
PathEffect.stampedPathEffect(
customPath, 20f, 0f, StampedPathEffectStyle.Morph
)
}
Text(
text = "Jetpack compose",
style = LocalTextStyle.current.merge(
TextStyle(
fontSize = 80.sp,
brush = Brush. horizontalGradient(
listOf(
Color. Blue,
Color. Magenta,
Color. Red,
Color. Yellow
)
),
drawStyle = Stroke(
width = 6f, join = StrokeJoin. Round,
pathEffect = stampEffect
)
)
)
)
}
Example 2 – Heart Outline
@Composable
fun HeartShapeOutlineDemo() {<!-- -->
val heartPath = remember {<!-- -->
Path().apply {<!-- -->
val width = 20f
val height = 20f
moveTo(width / 2, height / 4)
cubicTo(width / 4, 0f, 0f, height / 3, width / 4, height / 2)
lineTo(width / 2, height * 3 / 4)
lineTo(width * 3 / 4, height / 2)
cubicTo(width, height / 3, width * 3 / 4, 0f, width / 2, height / 4)
}
}
val stampEffect = remember {<!-- -->
PathEffect.stampedPathEffect(
heartPath, 20f, 10f, StampedPathEffectStyle.Translate
)
}
Text(
text = "Jetpack compose",
style = LocalTextStyle.current.merge(
TextStyle(
fontSize = 80.sp,
brush = Brush. horizontalGradient(
listOf(
Color. Magenta,
Color. Red,
Color. Yellow
)
),
drawStyle = Stroke(
width = 10f,
pathEffect = stampEffect
)
)
)
)
}
in conclusion
In this blog post, we explored the exciting world of the DrawStyle API in Jetpack Compose and learned how to apply cool stroke effects to text.
We hope this article inspires you to try out the DrawStyle API in your own projects and create stunning text designs that will make your app stand out. Remember, the text styling possibilities with Jetpack Compose are endless, and with the right tools and techniques, you can create designs that are as beautiful as they are functional.
Thanks for reading, and happy coding!
Original link
By Radhika S
I have written a lot of Compose-related cases. If you are interested, the address is here: link