Exploring Jetpack Compose: Border



This image has an empty alt attribute; its file name is banner.png

This post is sponsored by Practical Jetpack Compose.


When it comes to decorating views within Jetpack Compose, some components allow the use of a Border reference to outline a given component. Currently, the use of a Border reference is not too extensive and requires minimal effort to get in place.

There are currently two ways to instantiate a Border reference. The first being directly via the Border class:

@Immutable
data class BorderStroke(val width: Dp, val brush: Brush)

When using the Border class directly we are required to pass two properties:

  • width – the thickness of the border
    • required
  • brush – a reference to a Brush instance, used for the styling of the border
    • required

The second way of creating a borer is by using the provided function, this creates a new instance of the Border class using the provided color:

fun BorderStroke(width: Dp, color: Color) = Border(size, SolidColor(color))

When calling the Border function we are required to pass two properties:

  • width – the thickness of the border
    • required
  • color – the Color to be used for the border
    • required

When it comes to applying a Border, let’s take a look at using the function from above to do so. Here we’ll create a new border reference and set it to the border property of our Box component:

Box(
    modifier = Modifier.border(BorderStroke(2.dp, Color.Red))
)

As well as using the Border function, we can currently access the Border class directly. As seen above, this class takes a reference to a Brush implementation. We’ll look at the Brush in more depth in another post, but for this example we’ll make use of its SolidColor class to create a brush from our provided color. Here we’ll use this create a new border reference and set it to the border property of our Box component:

Box(
    modifier = Modifier.border(BorderStroke(2.dp, SolidColor(Color.Red))
)

In this post we’ve taken a quick dive into the Border component from Jetpack Compose. Stay tuned for the next post and in the meantime, subscribe to updates on my Jetpack Compose book 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *