border
Compose Modifier
Common
fun Modifier.border(border: BorderStroke, shape: Shape = RectangleShape) =
border(width = border.width, brush = border.brush, shape = shape)
Modify element to add border with appearance specified with a border
and a shape
and clip it.
Parameters
border | BorderStroke class that specifies border appearance, such as size and color |
shape | shape of the border |
Common
fun Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape) =
border(width, SolidColor(color), shape)
Modify element to add border with appearance specified with a width
, a color
and a shape
and clip it.
Parameters
width | width of the border. Use Dp.Hairline for a hairline border. |
color | color to paint the border with |
shape | shape of the border |
Common
fun Modifier.border(width: Dp, brush: Brush, shape: Shape) =
this then BorderModifierNodeElement(width, brush, shape)
Modify element to add border with appearance specified with a width
, a brush
and a shape
and clip it.
Parameters
width | width of the border. Use Dp.Hairline for a hairline border. |
brush | brush to paint the border with |
shape | shape of the border |
Code Examples
BorderSample
@Composable
fun BorderSample() {
Text("Text with square border", modifier = Modifier.border(4.dp, Color.Magenta).padding(10.dp))
}
BorderSampleWithBrush
@Composable
fun BorderSampleWithBrush() {
val gradientBrush =
Brush.horizontalGradient(
colors = listOf(Color.Red, Color.Blue, Color.Green),
startX = 0.0f,
endX = 500.0f,
tileMode = TileMode.Repeated,
)
Text(
"Text with gradient border",
modifier =
Modifier.border(width = 2.dp, brush = gradientBrush, shape = CircleShape).padding(10.dp),
)
}
BorderSampleWithDataClass
@Composable
fun BorderSampleWithDataClass() {
Text(
"Text with gradient border",
modifier =
Modifier.border(border = BorderStroke(2.dp, Color.Blue), shape = CutCornerShape(8.dp))
.padding(10.dp),
)
}
BorderSampleWithDynamicData
@Composable
fun BorderSampleWithDynamicData() {
val widthRange = (1..10)
var width by remember { mutableStateOf((widthRange.random()).dp) }
val shapes = remember { listOf(CutCornerShape(8.dp), CircleShape, RoundedCornerShape(20)) }
var selectedShape by remember { mutableStateOf(shapes.random()) }
val colors =
listOf(
Color.Black,
Color.DarkGray,
Color.Gray,
Color.LightGray,
Color.White,
Color.Red,
Color.Blue,
Color.Green,
Color.Yellow,
Color.Cyan,
Color.Magenta,
)
var gradientBrush by remember {
mutableStateOf(
Brush.horizontalGradient(
colors = listOf(colors.random(), colors.random(), colors.random()),
startX = 0.0f,
endX = 500.0f,
tileMode = TileMode.Repeated,
)
)
}
Column(Modifier.padding(2.dp)) {
Text(text = "Update border with buttons")
Row {
Button(
modifier = Modifier.width(60.dp),
onClick = { width = (widthRange.random()).dp },
) {
Text(fontSize = 8.sp, text = "width")
}
Button(
modifier = Modifier.width(60.dp),
onClick = {
gradientBrush =
Brush.horizontalGradient(
colors = listOf(colors.random(), colors.random(), colors.random()),
startX = 0.0f,
endX = 500.0f,
tileMode = TileMode.Repeated,
)
},
) {
Text(fontSize = 8.sp, text = "brush")
}
Button(
modifier = Modifier.width(60.dp),
onClick = { selectedShape = shapes.random() },
) {
Text(fontSize = 8.sp, text = "shape")
}
}
Text(
"Dynamic border",
modifier =
Modifier.border(width = width, brush = gradientBrush, shape = selectedShape)
.padding(10.dp),
)
}
}