Getting started with jetpack compose – Modifiers

Modifiers are used to modifier 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 composables behaviour 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 chaining 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) )
}
Combine multiple modifiers

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 of what we provided. For example,

@Composable
fun DisplayMessage() {
    Text(text = "Hello World!", modifier = Modifier.size(200.dp, 100.dp)
        .padding(10.dp).background(Color.Gray))
}
Modifier ordering

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 that 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))
}
Display Ordering

Now, I have added 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))
    }
}

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))
    }
}

Width

Modifier.width(width: Dp)

The width modifier is used to set the width for the component.

@Composable
fun SizeModifier() {
    Column(Modifier.width(200.dp)) {
        Text(text = "Hello", modifier = Modifier.size(100.dp,100.dp))
    }
}

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))
    }
}

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))
    }
}

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 below example,

@Composable
fun SizeModifier() {
    Column(Modifier.size(150.dp)) {
        Text(text = "Hello", modifier = Modifier.fillMaxSize(0.5f).background(Color.Gray))
    }
}
Fraction

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))
    }
}

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))
    }
}

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))
}

Padding was added to all the sides of the Text. 30.Dp to Start and End. 10.Dp for top and bottom.

Padding All side

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))
}

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))
}
Padding

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))
}
Aspect ratio

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))
    }
}

This will scale Text in both X and Y-Axis.

Scale

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)
    }
}

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))
}

Parameters

color: Color – color to paint background with

shape: Shape – Set the desired shape of the background. Default RectangleShape.

background color

Modifier.background(brush: Brush,shape: Shape = RectangleShape,alpha: Float = 1.0f): Modifier

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))
}
Background Shape

Border

Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape): Modifier

Border() is used to set the border for the composable. This will take three parameters,

Parametes

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))
}
background Border

Modifier.border(width: Dp, brush: Brush, shape: Shape): Modifier

This border() is used to draw the border using a brush. We can crate brush by using a gradient.

Parametes

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)
    )
}
Border Gradient

Clip

Modifier.clip(shape: Shape): Modifier

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)
    )
}
Clip

ClipToBounds

Modifier.clipToBounds(): Modifier

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)
    )
}

Alpha

Modifier.alpha(alpha: Float): Modifier

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)
    )
}
Alpha

Rotate

Modifier.rotate(degrees: Float): Modifier

Sets the degrees 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)
        )
    }
}

Shadow

Modifier.shadow(elevation: Dp,shape: Shape = RectangleShape,
clip: Boolean = elevation > 0.dp): Modifier

The shadow() is used to adding shadow around the composable.

Parameters
elevation: Dp – The elevation for the shadow in pixels

shape: Shape – RectangleShape(Default) – Defines a 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)
    )
}
Shaow

Gesture Modifiers

Clickable

Modifier.clickable(enabled: Boolean = true, onClickLabel: String? = null, role: Role? = null,
onClick: () -> Unit): Modifier

Configure 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)
    )
}

Selectable

Modifier.selectable(selected: Boolean, enabled: Boolean = true, role: Role? = null,
onClick: () -> Unit): Modifier

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))
}

Swipable

Modifier.swipeable(state: SwipeableState,anchors: Map,orientation: Orientation,enabled: Boolean = true,reverseDirection: Boolean = false,interactionSource: MutableInteractionSource? = null,
thresholds: (from, to) -> ThresholdConfig = { , -> FixedThreshold(56.dp) },
resistance: ResistanceConfig?= resistanceConfig(anchors.keys),velocityThreshold: Dp = VelocityThreshold): @ExperimentalMaterialApi Modifier

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 a left to right swipe will behave like right to left.

interactionSource: MutableInteractionSource? = null – Optional MutableInteractionSource that will 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))

    }
}
Swipeable View

In the above example, First I have created Box 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
        })
}

Thanks for reading. You can download this example from GitHub.

Leave a Reply

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