Brush
-
Cmn
sealed class Brush
ShaderBrush |
Brush implementation that wraps and applies a the provided shader to a |
SolidColor |
LinearGradient |
Brush implementation used to apply a linear gradient on a given |
RadialGradient |
Brush implementation used to apply a radial gradient on a given |
SweepGradient |
Brush implementation used to apply a sweep gradient on a given |
Summary
Public companion functions |
||
|---|---|---|
Brush |
Creates a composited result between 2 |
Cmn
|
Brush |
horizontalGradient(Creates a horizontal gradient with the given colors dispersed at the provided offset defined in the colorstop pair. |
Cmn
|
Brush |
Creates a horizontal gradient with the given colors evenly dispersed within the gradient |
Cmn
|
Brush |
linearGradient(Creates a linear gradient with the provided colors along the given start and end coordinates. |
Cmn
|
Brush |
Creates a linear gradient with the provided colors along the given start and end coordinates. |
Cmn
|
Brush |
radialGradient(Creates a radial gradient with the given colors at the provided offset defined in the colorstop pair. |
Cmn
|
Brush |
Creates a radial gradient with the given colors evenly dispersed within the gradient |
Cmn
|
Brush |
sweepGradient(vararg colorStops: Pair<Float, Color>, center: Offset)Creates a sweep gradient with the given colors dispersed around the center with offsets defined in each colorstop pair. |
Cmn
|
Brush |
sweepGradient(colors: List<Color>, center: Offset)Creates a sweep gradient with the given colors dispersed evenly around the center. |
Cmn
|
Brush |
verticalGradient(Creates a vertical gradient with the given colors at the provided offset defined in the Pair |
Cmn
|
Brush |
Creates a vertical gradient with the given colors evenly dispersed within the gradient Ex: |
Cmn
|
Protected constructors |
|
|---|---|
Brush() |
Cmn
|
Public companion functions
composite
fun composite(dstBrush: Brush, srcBrush: Brush, blendMode: BlendMode): Brush
Creates a composited result between 2 Brush instances and the specified BlendMode. The specified destination and source Brush inputs will be consumed as the source and destination images for the corresponding blending algorithm.
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.size import androidx.compose.ui.Modifier import androidx.compose.ui.draw.drawWithCache import androidx.compose.ui.graphics.BlendMode import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Canvas import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.ImageShader import androidx.compose.ui.graphics.ShaderBrush import androidx.compose.ui.graphics.drawscope.CanvasDrawScope import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.unit.dp Box( modifier = Modifier.size(120.dp).drawWithCache { val bitmap = ImageBitmap(size.width.toInt(), size.height.toInt()) CanvasDrawScope().draw(this, layoutDirection, Canvas(bitmap), size) { drawRect(Color.Black, style = Stroke(20.dp.toPx())) } val bitmapBrush = ShaderBrush(ImageShader(bitmap)) val sweepBrush = Brush.sweepGradient(listOf(Color.Red, Color.Blue, Color.Cyan, Color.Green)) val compositeBrush = Brush.composite(bitmapBrush, sweepBrush, BlendMode.SrcIn) onDrawBehind { drawRect(brush = compositeBrush) } } )
| Parameters | |
|---|---|
dstBrush: Brush |
ShaderBrush used as the destination content |
srcBrush: Brush |
ShaderBrush used as the source content |
blendMode: BlendMode |
BlendMode used to composite the source against the destination shader |
| See also | |
|---|---|
BlendMode |
horizontalGradient
fun horizontalGradient(
vararg colorStops: Pair<Float, Color>,
startX: Float = 0.0f,
endX: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a horizontal gradient with the given colors dispersed at the provided offset defined in the colorstop pair.
Ex:
Brush.horizontalGradient(
0.0f to Color.Red,
0.3f to Color.Green,
1.0f to Color.Blue,
startX = 0.0f,
endX = 100.0f
)
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.horizontalGradient( 0.0f to Color.Red, 0.3f to Color.Green, 1.0f to Color.Blue, startX = 0.0f, endX = 100.0f, )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
vararg colorStops: Pair<Float, Color> |
Colors and offsets to determine how the colors are dispersed throughout the vertical gradient |
startX: Float = 0.0f |
Starting x position of the horizontal gradient. Defaults to 0 which represents the left of the drawing area |
endX: Float = Float.POSITIVE_INFINITY |
Ending x position of the horizontal gradient. Defaults to |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
horizontalGradient
fun horizontalGradient(
colors: List<Color>,
startX: Float = 0.0f,
endX: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a horizontal gradient with the given colors evenly dispersed within the gradient
Ex:
Brush.horizontalGradient(
listOf(Color.Red, Color.Green, Color.Blue),
startX = 10.0f,
endX = 20.0f
)
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.horizontalGradient( listOf(Color.Red, Color.Green, Color.Blue), startX = 10.0f, endX = 20.0f, )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
colors: List<Color> |
colors Colors to be rendered as part of the gradient |
startX: Float = 0.0f |
Starting x position of the horizontal gradient. Defaults to 0 which represents the left of the drawing area |
endX: Float = Float.POSITIVE_INFINITY |
Ending x position of the horizontal gradient. Defaults to |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
linearGradient
fun linearGradient(
vararg colorStops: Pair<Float, Color>,
start: Offset = Offset.Zero,
end: Offset = Offset.Infinite,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a linear gradient with the provided colors along the given start and end coordinates. The colors are dispersed at the provided offset defined in the colorstop pair.
Brush.linearGradient(
0.0f to Color.Red,
0.3f to Color.Green,
1.0f to Color.Blue,
start = Offset(0.0f, 50.0f),
end = Offset(0.0f, 100.0f)
)
import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.linearGradient( 0.0f to Color.Red, 0.3f to Color.Green, 1.0f to Color.Blue, start = Offset(0.0f, 50.0f), end = Offset(0.0f, 100.0f), )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
vararg colorStops: Pair<Float, Color> |
Colors and their offset in the gradient area |
start: Offset = Offset.Zero |
Starting position of the linear gradient. This can be set to |
end: Offset = Offset.Infinite |
Ending position of the linear gradient. This can be set to |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
linearGradient
fun linearGradient(
colors: List<Color>,
start: Offset = Offset.Zero,
end: Offset = Offset.Infinite,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a linear gradient with the provided colors along the given start and end coordinates. The colors are
Brush.linearGradient(
listOf(Color.Red, Color.Green, Color.Blue),
start = Offset(0.0f, 50.0f),
end = Offset(0.0f, 100.0f)
)
import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.linearGradient( listOf(Color.Red, Color.Green, Color.Blue), start = Offset(0.0f, 50.0f), end = Offset(0.0f, 100.0f), )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
colors: List<Color> |
Colors to be rendered as part of the gradient |
start: Offset = Offset.Zero |
Starting position of the linear gradient. This can be set to |
end: Offset = Offset.Infinite |
Ending position of the linear gradient. This can be set to |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
radialGradient
fun radialGradient(
vararg colorStops: Pair<Float, Color>,
center: Offset = Offset.Unspecified,
radius: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a radial gradient with the given colors at the provided offset defined in the colorstop pair.
Brush.radialGradient(
0.0f to Color.Red,
0.3f to Color.Green,
1.0f to Color.Blue,
center = Offset(side1 / 2.0f, side2 / 2.0f),
radius = side1 / 2.0f,
tileMode = TileMode.Repeated
)
import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.TileMode val side1 = 100 val side2 = 200 Brush.radialGradient( 0.0f to Color.Red, 0.3f to Color.Green, 1.0f to Color.Blue, center = Offset(side1 / 2.0f, side2 / 2.0f), radius = side1 / 2.0f, tileMode = TileMode.Repeated, )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
vararg colorStops: Pair<Float, Color> |
Colors and offsets to determine how the colors are dispersed throughout the radial gradient |
center: Offset = Offset.Unspecified |
Center position of the radial gradient circle. If this is set to |
radius: Float = Float.POSITIVE_INFINITY |
Radius for the radial gradient. Defaults to positive infinity to indicate the largest radius that can fit within the bounds of the drawing area |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
radialGradient
fun radialGradient(
colors: List<Color>,
center: Offset = Offset.Unspecified,
radius: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a radial gradient with the given colors evenly dispersed within the gradient
Brush.radialGradient(
listOf(Color.Red, Color.Green, Color.Blue),
center = Offset(side1 / 2.0f, side2 / 2.0f),
radius = side1 / 2.0f,
tileMode = TileMode.Repeated
)
import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.TileMode val side1 = 100 val side2 = 200 Brush.radialGradient( listOf(Color.Red, Color.Green, Color.Blue), center = Offset(side1 / 2.0f, side2 / 2.0f), radius = side1 / 2.0f, tileMode = TileMode.Repeated, )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
colors: List<Color> |
Colors to be rendered as part of the gradient |
center: Offset = Offset.Unspecified |
Center position of the radial gradient circle. If this is set to |
radius: Float = Float.POSITIVE_INFINITY |
Radius for the radial gradient. Defaults to positive infinity to indicate the largest radius that can fit within the bounds of the drawing area |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
sweepGradient
fun sweepGradient(
vararg colorStops: Pair<Float, Color>,
center: Offset = Offset.Unspecified
): Brush
Creates a sweep gradient with the given colors dispersed around the center with offsets defined in each colorstop pair. The sweep begins relative to 3 o'clock and continues clockwise until it reaches the starting position again.
Ex:
Brush.sweepGradient(
0.0f to Color.Red,
0.3f to Color.Green,
1.0f to Color.Blue,
center = Offset(0.0f, 100.0f)
)
import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.sweepGradient( 0.0f to Color.Red, 0.3f to Color.Green, 1.0f to Color.Blue, center = Offset(0.0f, 100.0f), )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
vararg colorStops: Pair<Float, Color> |
Colors and offsets to determine how the colors are dispersed throughout the sweep gradient |
center: Offset = Offset.Unspecified |
Center position of the sweep gradient circle. If this is set to |
sweepGradient
fun sweepGradient(colors: List<Color>, center: Offset = Offset.Unspecified): Brush
Creates a sweep gradient with the given colors dispersed evenly around the center. The sweep begins relative to 3 o'clock and continues clockwise until it reaches the starting position again.
Ex:
Brush.sweepGradient(
listOf(Color.Red, Color.Green, Color.Blue),
center = Offset(10.0f, 20.0f)
)
import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.sweepGradient(listOf(Color.Red, Color.Green, Color.Blue), center = Offset(10.0f, 20.0f))
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
colors: List<Color> |
List of colors to fill the sweep gradient |
center: Offset = Offset.Unspecified |
Center position of the sweep gradient circle. If this is set to |
verticalGradient
fun verticalGradient(
vararg colorStops: Pair<Float, Color>,
startY: Float = 0.0f,
endY: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a vertical gradient with the given colors at the provided offset defined in the Pair
Ex:
Brush.verticalGradient(
0.1f to Color.Red,
0.3f to Color.Green,
0.5f to Color.Blue,
startY = 0.0f,
endY = 100.0f
)
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.verticalGradient( 0.1f to Color.Red, 0.3f to Color.Green, 0.5f to Color.Blue, startY = 0.0f, endY = 100.0f, )
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
vararg colorStops: Pair<Float, Color> |
Colors and offsets to determine how the colors are dispersed throughout the vertical gradient |
startY: Float = 0.0f |
Starting y position of the vertical gradient. Defaults to 0 which represents the top of the drawing area |
endY: Float = Float.POSITIVE_INFINITY |
Ending y position of the vertical gradient. Defaults to |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
verticalGradient
fun verticalGradient(
colors: List<Color>,
startY: Float = 0.0f,
endY: Float = Float.POSITIVE_INFINITY,
tileMode: TileMode = TileMode.Clamp
): Brush
Creates a vertical gradient with the given colors evenly dispersed within the gradient Ex:
Brush.verticalGradient(
listOf(Color.Red, Color.Green, Color.Blue),
startY = 0.0f,
endY = 100.0f
)
import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color Brush.verticalGradient(listOf(Color.Red, Color.Green, Color.Blue), startY = 0.0f, endY = 100.0f)
import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.unit.dp Column(modifier = Modifier.fillMaxSize().wrapContentSize()) { // Create a linear gradient that shows red in the top left corner // and blue in the bottom right corner val linear = Brush.linearGradient(listOf(Color.Red, Color.Blue)) Box(modifier = Modifier.size(120.dp).background(linear)) Spacer(modifier = Modifier.size(20.dp)) // Create a radial gradient centered about the drawing area that is green on // the outer // edge of the circle and magenta towards the center of the circle val radial = Brush.radialGradient(listOf(Color.Green, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(radial)) Spacer(modifier = Modifier.size(20.dp)) // Create a sweep gradient centered about the drawing area that is cyan at // the start angle and magenta towards the end angle. val sweep = Brush.sweepGradient(listOf(Color.Cyan, Color.Magenta)) Box(modifier = Modifier.size(120.dp).background(sweep)) }
| Parameters | |
|---|---|
colors: List<Color> |
colors Colors to be rendered as part of the gradient |
startY: Float = 0.0f |
Starting y position of the vertical gradient. Defaults to 0 which represents the top of the drawing area |
endY: Float = Float.POSITIVE_INFINITY |
Ending y position of the vertical gradient. Defaults to |
tileMode: TileMode = TileMode.Clamp |
Determines the behavior for how the shader is to fill a region outside its bounds. Defaults to |
Protected constructors
Public properties
intrinsicSize
open val intrinsicSize: Size
Return the intrinsic size of the Brush. If the there is no intrinsic size (i.e. filling bounds with an arbitrary color) return Size.Unspecified. If there is no intrinsic size in a single dimension, return Size with Float.NaN in the desired dimension.