Jetpack Compose - Brush (Gradients & Shaders)
Brushes define how shapes, text, and backgrounds are painted in Compose using solid colors, gradients, or shaders.
Common Brushes
Built-in brushes used to apply color styles in drawing areas.
- SolidColor : fills with a single color
- Horizontal Gradient : left → right
- Vertical Gradient : top → bottom
- Linear Gradient : any direction
- Sweep Gradient : circular rotation
- Radial Gradient : center → outer radius
Horizontal Gradient
A smooth color transition from left to right.
Brush.horizontalGradient(listOf(Color.Red, Color.Blue))
Linear Gradient
A gradient drawn between two custom points (any direction).
Brush.linearGradient(listOf(Color.Red, Color.Blue))
Vertical Gradient
Top-to-bottom gradient transition.
Brush.verticalGradient(listOf(Color.Red, Color.Blue))
Sweep Gradient
Rotates colors around the center like a color wheel.
Brush.sweepGradient(listOf(Color.Red, Color.Blue, Color.Red))
Radial Gradient
Center-outward circular gradient.
Brush.radialGradient(listOf(Color.White, Color.Black))
Custom Color Distribution (colorStops)
Control how colors are spaced in the gradient using fractional offsets.
val stops = arrayOf(
0.0f to Color.Yellow,
0.2f to Color.Red,
1f to Color.Blue
)
Repeat a Pattern with TileMode
TileMode defines how the gradient repeats when its size is smaller than the drawing area.
- Repeated – Repeats colors continuously
- Mirror – Mirrors and repeats pattern
- Clamp – Extends last color
- Decal – Draw only within bounds
TileMode: Repeated
Repeats gradient from start to end continuously.
TileMode: Mirror
Mirrors the gradient pattern before repeating.
TileMode: Clamp
Extends the final color across remaining space.
TileMode: Decal
Draws gradient only inside bounds; outside area becomes transparent.
Change Brush Size
Brush size can be controlled using DrawScope.size to match the drawing area.
Shader Size Example
Divide shader width/height to repeat pattern multiple times.
LinearGradientShader(
colors = listColors,
from = Offset.Zero,
to = Offset(size.width / 4f, 0f)
)
Use an Image as a Brush
Images can be used as brushes for backgrounds, shapes, and text.
Image Brush Example
Apply ImageShader as brush for text, backgrounds, and canvas drawings.
ShaderBrush(ImageShader(bitmap))
