background

Compose Modifier

Common

fun Modifier.background(color: Color, shape: Shape = RectangleShape): Modifier

Draws shape with a solid color behind the content.

Parameters


color	color to paint background with
shape	desired shape of the background

Common

fun Modifier.background(
    brush: Brush,
    shape: Shape = RectangleShape,
    @FloatRange(from = 0.0, to = 1.0) alpha: Float = 1.0f,
) =
    this.then(
        BackgroundElement(
            brush = brush,
            alpha = alpha,
            shape = shape,
            inspectorInfo =
                debugInspectorInfo {
                    name = "background"
                    properties["alpha"] = alpha
                    properties["brush"] = brush
                    properties["shape"] = shape
                },
        )
    )

Draws shape with brush behind the content.

Parameters


brush	brush to paint background with
shape	desired shape of the background
alpha	Opacity to be applied to the `brush`, with `0` being completely transparent and `1` being completely opaque. The value must be between `0` and `1`.

Code Examples

DrawBackgroundColor

@Composable
fun DrawBackgroundColor() {
    Text("Text with background", Modifier.background(color = Color.Magenta).padding(10.dp))
}

DrawBackgroundShapedBrush

@Composable
fun DrawBackgroundShapedBrush() {
    val gradientBrush =
        Brush.horizontalGradient(
            colors = listOf(Color.Red, Color.Blue, Color.Green),
            startX = 0.0f,
            endX = 500.0f,
        )
    Text(
        "Text with gradient back",
        Modifier.background(brush = gradientBrush, shape = CutCornerShape(8.dp)).padding(10.dp),
    )
}