Modifiers are used to modify certain aspects of how the component is displayed on the screen. The Modifier itself is an interface, so we don’t directly instantiate an instance of that – instead, we use the provided subclasses to decorate our component in some way.
If you’re new to Compose, I highly recommend going through the following articles:
Getting started with jetpack compose – Basic components
Getting started with jetpack compose – Layouts
Getting started with jetpack compose – ConstraintLayout
Getting started with jetpack compose – Scaffold layout
Getting started with jetpack compose – Theming
And when it comes to applying these modifiers, we can supply either a single modifier for our component or chain multiple modifiers together to apply multiple decorations to view components.
Modifiers let you,
- Change the composable behavior and appearance
- Add information like accessibility labels
- Process user input
- Add high-level interactions like making an element clickable, scrollable, draggable, or zoomable.
Combine Modifier
We can chain multiple modifiers at a time to the composable.
@Composable
fun CombinedModifier() {
Text(text = "Jetpack compose", modifier = Modifier
.size(200.dp,100.dp)
.background(Color.Black).padding(10.dp) )
}Code language: JavaScript (javascript)
In the above code, we are adding a size modifier, background modifier, and padding modifier. We can add any modifiers like this.
Modifier Ordering
Modifiers will be executed in the order that we provided. For example,
@Composable
fun DisplayMessage() {
Text(text = "Hello World!", modifier = Modifier.size(200.dp, 100.dp)
.padding(10.dp).background(Color.Gray))
}Code language: JavaScript (javascript)
In the modifiers, we are setting padding first, after that we are setting the grey background. that is why you can able to see the padding applied to the full view after the grey background is added.
@Composable
fun DisplayMessage() {
Text(text = "Hello World!", modifier = Modifier.size(200.dp, 100.dp)
.background(Color.Gray).padding(10.dp))
}Code language: JavaScript (javascript)
Now, I have added the background first in the modifier. So that the grey background was added to the view first, then the padding was applied.
Size Modifier
The Size modifier allows us to set an exact value for both the width and the height of the desired component.
size
Modifier.size(size: Dp)
Used to set the same width and height for the composable element.
@Composable
fun SizeModifier() {
Column(Modifier.size(200.dp)) {
Text(text = "Hello", modifier = Modifier.size(100.dp,100.dp))
}
}Code language: JavaScript (javascript)Modifier.size(width: Dp, height: Dp)
This modifier is used to set the different Widths and heights for the composable element.
@Composable
fun SizeModifier() {
Column(Modifier.size(200.dp, 100.dp)) {
Text(text = "Hello", modifier = Modifier.size(100.dp,100.dp))
}
}Code language: JavaScript (javascript)Width
Modifier.width(width: Dp)
The width modifier is used to set the width of the component.
@Composable
fun SizeModifier() {
Column(Modifier.width(200.dp)) {
Text(text = "Hello", modifier = Modifier.size(100.dp,100.dp))
}
}Code language: JavaScript (javascript)Height
Modifier.height(height: Dp)
Declare the preferred height of the content to be exactly.
@Composable
fun SizeModifier() {
Column(Modifier.height(200.dp)) {
Text(text = "Hello", modifier = Modifier.size(100.dp,100.dp))
}
}Code language: JavaScript (javascript)FillMaxSize
Modifier.fillMaxSize(fraction: Float = 1f)
This will set the height/width of the Composable to the maximum available height/width.
@Composable
fun SizeModifier() {
Column(Modifier.size(150.dp)) {
Text(text = "Hello", modifier = Modifier.fillMaxSize().background(Color.Gray))
}
}Code language: JavaScript (javascript)FillMaxSize accepts one parameter.
fraction – The fraction of the maximum size to use, between 0 and 1, inclusive. by default fraction 1.0f. so the composable will take full width and height. But If the fraction is 0.5f. then the composable will take half of the width and height. check the below example,
@Composable
fun SizeModifier() {
Column(Modifier.size(150.dp)) {
Text(text = "Hello", modifier = Modifier.fillMaxSize(0.5f).background(Color.Gray))
}
}Code language: JavaScript (javascript)
FillMaxHeight
Modifier.fillMaxHeight(fraction: Float = 1f)
This will set the height of the Composable to the maximum available height.
This will accept one parameter fraction.
@Composable
fun SizeModifier() {
Row(Modifier.size(150.dp)) {
Text(text = "Hello", modifier = Modifier.fillMaxHeight().background(Color.Gray))
}
}Code language: JavaScript (javascript)FillMaxWidth
Modifier.fillMaxWidth(fraction: Float)
This will set the width of the Composable to the maximum available width.
@Composable
fun SizeModifier() {
Row(Modifier.size(150.dp)) {
Text(text = "Hello", modifier = Modifier.fillMaxWidth().background(Color.Gray))
}
}Code language: JavaScript (javascript)Padding
Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier
Apply additional space along each edge of the content in Dp: start, top, end, and bottom.
@Composable
fun PaddingAllSide() {
Text(text = "Jetpack Padding", Modifier.padding(30.dp,10.dp,30.dp,10.dp))
}Code language: JavaScript (javascript)Padding was added to all the sides of the Text. 30.dp to Start and End. 10.dp for top and bottom.
Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier
Apply horizontal dp space along the left and right edges of the content, and vertical dp space along the top and bottom edges.
@Composable
fun PaddingVerticalAndHorizontal() {
Text(text = "Jetpack Padding", Modifier.padding(30.dp,10.dp))
}Code language: JavaScript (javascript)Modifier.padding(all: Dp): Modifier
Apply all dp of additional space along each edge of the content, left, top, right, and bottom.
@Composable
fun PaddingAll() {
Text(text = "Jetpack Padding", Modifier.padding(30.dp))
}Code language: JavaScript (javascript)
Modifier.aspectRatio(ratio: Float,matchHeightConstraintsFirst: Boolean = false): Modifier
Using the aspect ratio modifier allows us to enforce a ratio for the sizing of our component, meaning that our component’s height and width will expand to fill the specified aspect ratio.
For example, if we wished to use the 1(height):2(Width) aspect ratio then we could pass the corresponding float value for that ratio :
@Composable
fun AspectRadio() {
Text(text = "Jetpack Padding", Modifier.aspectRatio(2f))
}Code language: JavaScript (javascript)
Scale
Modifier.scale(scale: Float): Modifier
Scale the contents of both the horizontal and vertical axis uniformly by the same scale factor.
@Composable
fun ScaleAll() {
Box(Modifier.size(200.dp)) {
Text(text = "Compose Scale", Modifier
.background(Color.Gray)
.scale(2f))
}
}Code language: JavaScript (javascript)This will scale Text in both X and Y-Axis.
Modifier.scale(scaleX: Float, scaleY: Float): Modifier
Scale the contents of the composable by the following scale factors along the horizontal and vertical axis respectively. Negative scale factors can be used to mirror content across the corresponding horizontal or vertical axis.
@Composable
fun ScaleAxis() {
Box(Modifier.size(200.dp)) {
Text(text = "Compose Scale", Modifier
.background(Color.Gray)
.scale(1f,2f)
}
}Code language: JavaScript (javascript)Draw Modifiers
background
Modifier.background(color: Color, shape: Shape = RectangleShape): Modifier
With this modifier, you can set a background color/shape for the Composable.
@Composable
fun BackgroundModifier() {
Text(text = "Hello Jetpack Compose", Modifier.background(Color.Red))
}Code language: JavaScript (javascript)Parameters
color: Color – color to paint background with
shape: Shape – Set the desired shape of the background. Default RectangleShape.
Modifier.background(brush: Brush,shape: Shape = RectangleShape,alpha: Float = 1.0f): ModifierCode language: HTTP (http)With this modifier, we can set the background color for View and Share. Also, we can adjust the opacity of the background.
Parameters
brush: Brush – brush to paint background with
shape: Shape – set the desired shape of the background
alpha: Float – Default 1.0f – 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.
@Composable
fun BackgroundWithShapeModifier() {
val gradientBrush = Brush.horizontalGradient(
colors = listOf(Color.Gray, Color.DarkGray),
startX = 0.0f,
endX = 500.0f
)
Text(text = "Hello Jetpack Compose", Modifier
.padding(20.dp)
.background(gradientBrush, CutCornerShape(8.dp),1.0f)
.padding(20.dp))
}Code language: JavaScript (javascript)
Border
Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape): ModifierCode language: HTTP (http)Border() is used to set the border for the composable. This will take three parameters,
Parameters
width: Dp – width of the border
color: Color – Color of the border
shape: Shape – RectangleShape (Default) – the shape of the border
@Composable
fun BorderModifier() {
Text(text = "Hello Jetpack Compose", Modifier
.padding(20.dp)
.border(4.dp, Color.DarkGray)
.padding(20.dp))
}Code language: JavaScript (javascript)
Modifier.border(width: Dp, brush: Brush, shape: Shape): ModifierCode language: CSS (css)This border() is used to draw the border using a brush. We can create a brush by using a gradient.
Parameters
width: Dp – width of the border
brush: Brush – brush to paint the border with
shape: Shape – RectangleShape (Default) – the shape of the border
@Composable
fun BorderWithBrush() {
val gradientBrush = Brush.horizontalGradient(
colors = listOf(Color.Red, Color.Blue, Color.Green),
startX = 0.0f,
endX = 500.0f,
tileMode = TileMode.Repeated
)
Text(
"Hello Jetpack Compose",
modifier = Modifier
.padding(10.dp)
.border(width = 2.dp, brush = gradientBrush, shape = CircleShape)
.padding(10.dp)
)
}Code language: JavaScript (javascript)
Clip
Modifier.clip(shape: Shape): ModifierCode language: CSS (css)Clip the content to the desired shape (RectangleShape, CircleShape).
@Composable
fun ClipModifier() {
Text(
"Hello Jetpack Compose",
modifier = Modifier
.padding(10.dp)
.clip(CircleShape)
.background(Color.Gray)
.padding(10.dp)
)
}Code language: JavaScript (javascript)
ClipToBounds
Modifier.clipToBounds(): ModifierCode language: CSS (css)Clip the content to the bounds of a layer defined at this modifier.
@Composable
fun ClipModifier() {
Text(
"Hello Jetpack Compose",
modifier = Modifier
.padding(10.dp)
.clipToBounds()
.background(Color.Gray)
.padding(10.dp)
)
}Code language: JavaScript (javascript)Alpha
Modifier.alpha(alpha: Float): ModifierCode language: CSS (css)Draw content with modified visibility. The range will be 0f to 1f.
@Composable
fun AlphaModifier() {
Text(
"Hello Jetpack Compose",
modifier = Modifier
.padding(10.dp)
.alpha(0.7f)
.background(Color.Gray)
.padding(10.dp)
)
}Code language: JavaScript (javascript)
Rotate
Modifier.rotate(degrees: Float): ModifierCode language: CSS (css)Sets the degrees at the view is rotated around the center of the composable.
@Composable
fun RotateModifier() {
Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
Text(
"Hello Jetpack Compose",
modifier = Modifier
.padding(10.dp)
.rotate(45f)
.background(Color.Gray)
.padding(10.dp)
)
}
}Code language: JavaScript (javascript)Shadow
Modifier.shadow(elevation: Dp,shape: Shape = RectangleShape,<br>clip: Boolean = elevation > 0.dp): ModifierCode language: HTML, XML (xml)The shadow() is used to add a shadow around them composable.
Parameters
elevation: Dp – The elevation for the shadow in pixels
shape: Shape – RectangleShape(Default) – Defines the shape of the physical object
clip: Boolean – elevation > 0.dp (Default) – When active, the content drawing clips to the shape.
@Composable
fun ShadowModifier() {
Text(
"Hello Jetpack Compose",
modifier = Modifier
.padding(10.dp)
.shadow(4.dp, CircleShape)
.padding(10.dp)
)
}Code language: JavaScript (javascript)
Gesture Modifiers
Clickable
Modifier.clickable(enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null, <br>onClick: () -> Unit): ModifierCode language: JavaScript (javascript)Configure the component to receive clicks via input or accessibility “click” event.
Parameters
enabled: Boolean – true (Default)- Controls the enabled state. When false, onClick, and this modifier will appear disabled for accessibility services
onClickLabel: String? = null (Default)– semantic / accessibility label for the onClick action
role: Role? = null (Default)- the type of user interface element. Accessibility services might use this to describe the element or do customizations
onClick: () -> Unit – will be called when the user clicks on the element
@Composable
fun ClickableModifier() {
val context = LocalContext.current
Text(
text = "Hello Jetpack Compose", Modifier
.clickable {
Toast
.makeText(context, "Clicked", Toast.LENGTH_SHORT)
.show()
}
.padding(8.dp)
)
}Code language: JavaScript (javascript)Selectable
Modifier.selectable(selected: Boolean, enabled: Boolean = true, role: Role? = null,<br>onClick: () -> Unit): ModifierCode language: JavaScript (javascript)Configure components to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time.
Parameters
selected: Boolean – whether or not this item is selected in a mutual exclusion set
enabled: Boolean – true (Default) – whether or not this selectable will handle input events and appear enabled from a semantics perspective
role: Role? = null (Default) – the type of user interface element. Accessibility services might use this to describe the element or do customizations
onClick: () -> Unit – callback to invoke when this item is clicked
@Composable
fun SelectableModifier() {
var selected by remember {
mutableStateOf(false)
}
val selectedColor = if (selected) Color.Black else Color.Gray
Text(text = "Jetpack compose", color = selectedColor, modifier = Modifier.selectable(
selected = selected,onClick = {
selected = !selected
}
)
.padding(8.dp))
}Code language: JavaScript (javascript)Swipable
Modifier.swipeable(state: SwipeableState,anchors: Map,orientation: Orientation,enabled: Boolean = true,reverseDirection: Boolean = false,interactionSource: MutableInteractionSource? = null,<br>thresholds: (from, to) -> ThresholdConfig = { <em>,</em> -> FixedThreshold(56.dp) }, <br>resistance: ResistanceConfig?= resistanceConfig(anchors.keys),velocityThreshold: Dp = VelocityThreshold): @ExperimentalMaterialApi ModifierCode language: JavaScript (javascript)Enable swipe gestures between a set of predefined states.
Parameters
state: SwipeableState – The state of the swipeable.
anchors: Map – Pairs of anchors and states, used to map anchors to states and vice versa.
orientation: Orientation – The orientation in which the swipeable can be swiped.
enabled: Boolean = true – Whether this swipeable is enabled and should react to the user’s input.
reverseDirection: Boolean = false – Whether to reverse the direction of the swipe, so a top to bottom swipe will behave like bottom to top and left to right swipe will behave like a right-left.
interactionSource: MutableInteractionSource? = null – Optional MutableInteractionSource that will be passed on to the internal Modifier.draggable.
thresholds: (from, to) -> ThresholdConfig = { , -> FixedThreshold(56.dp) } – Specifies where the thresholds between the states are. The thresholds will be used to determine which state to animate to when swiping stops. This is represented as a lambda that takes two states and returns the threshold between them in the form of a ThresholdConfig. Note that the order of the states corresponds to the swipe direction.
resistance: ResistanceConfig? = resistanceConfig(anchors.keys) – Controls how much resistance will be applied when swiping past the bounds.
velocityThreshold: Dp = VelocityThreshold – The threshold (in dp per second) that the end velocity has to exceed in order to animate to the next state, even if the positional thresholds have not been reached.
@Composable
fun SwipeableModifier() {
val width = 320.dp
val squareSize = 50.dp
val barSize = 20.dp
val swipeableState = rememberSwipeableState("A")
val sizePx = with(LocalDensity.current) { (width - squareSize).toPx() }
val anchors = mapOf(0f to "A", sizePx / 2 to "B", sizePx to "C")
Column {
Box(
modifier = Modifier
.fillMaxWidth()
.height(squareSize)
.swipeable(
state = swipeableState,
anchors = anchors,
thresholds = { _, _ -> FractionalThreshold(0.5f) },
orientation = Orientation.Horizontal
)
) {
Text(text = "", Modifier.width(width).height(barSize)
.background(Color.Black, shape = CircleShape).align(Alignment.CenterStart))
Box(
Modifier
.offset { IntOffset(swipeableState.offset.value.roundToInt() , 0) }
.size(squareSize)
.background(Color.Blue,shape = CircleShape), contentAlignment = Alignment.Center
) {
Text(swipeableState.currentValue, color = Color.White, fontSize = 24.sp)
}
}
Spacer(modifier = Modifier.padding(20.dp))
}
}Code language: JavaScript (javascript)
In the above example, First I created a Box to view and make it swipeable. On top of it, I have added another Box view for the Swipe handler. Now the View on top of the swipe view is swipeable.
onKeyEvent
Modifier.onKeyEvent(onKeyEvent: (KeyEvent) -> Boolean): Modifier
Adding this modifier to the modifier parameter of a component will allow it to intercept hardware key events when it (or one of its children) is focused.
@Composable
fun OnKeyEventModifier() {
var name by remember {
mutableStateOf("")
}
TextField(value = name, onValueChange = {name = it},
Modifier.onKeyEvent {
if (it.key.keyCode == Key.Enter.keyCode) {
name = ""
}
return@onKeyEvent true
})
}Code language: JavaScript (javascript)Thanks for reading. You can download this example from GitHub.
