6. Jetpack Compose Modifiers

Updated: Sep 30, 2021

What are Modifiers in Jetpack Compose?

Modifier elements decorate or add behavior to Compose UI elements. For example, backgrounds, padding and click event listeners decorate or add behavior to rows, text or buttons.

  1. We can give size and spacing with the help of modifiers.

  2. Arrange the widgets within a layout.

  3. Beautify the widgets.

If you are an Android developer, Most of the xml attributes (id, padding, margin, color, alpha, ratio, elevation...) are used with the help of modifiers.
 

1. Background Color

Text("Text with green background color",
            Modifier.background(color = Color.Green))

2. Padding

Jetpack compose doesn't have a modifier for margin. We should use the padding modifier for both padding and margin.

@Composable
fun TextWidthPadding() {
    Text(
        "Padding and margin!",
        Modifier.padding(32.dp) // Outer padding (margin)
            .background(color = Color.Green) //background color
            .padding(16.dp) // Inner padding
    )
}

3. Width and Height

For width you need to use width(value : Dp)

For height you need to use height(value: Dp)

@Composable
fun WidthAndHeightModifier() {
    Text(
        text = "Width and Height",
        color = Color.White,
        modifier = Modifier
            .background(Color.Blue)
            .width(200.dp)
            .height(300.dp)
    )
}

4. Size

If you need both width and height in same modifier, use Modifier.size().


If both width and height are same, use this Modifier.size(size: Dp). example: Modifier.size(200.dp)


If you want different width and height, use Modifier.size(width: Dp,height:Dp) example: Modifier.size(width=200.dp,height=100.dp)

@Composable
fun SizeModifier() {
    Text(
        text = "Text with Size",
        color = Color.White,
        modifier = Modifier
            .background(Color.Cyan)
            .size(width = 250.dp, height = 100.dp)
    )
}

5. Fill Max Width

You need to pass the fraction size. It should be 0.0 to 1.0.

If you want the width as match_parent you can use 1.0.


Its default value is 1.0. If you call the method without a fraction size, it will set as 1.0

0.0 means 0% 0.1 means 10% 1.0 means 100%

If there is no view in the horizontal area: If you give 1.0 -> it will occupy entire width (match_parent).

If you give any other fraction values -> it will occupy based on the fraction value. For example, if you give 0.75 fraction, it occupies 75% of screen width.

If some views already exist: If you give 1.0 -> it will occupy the rest of the balance space(fill the balance area). If you give any other fractional values -> it will fill the fraction percentage in the balance space.

Composable
fun FillWidthModifier() {
    Text(
        text = "Text Width Match Parent",
        color = Color.White,
        modifier = Modifier
            .background(Color.Gray)
            .padding(Dp(10f))
            .fillMaxWidth(1f))
}


6. Fill Max Height

You need to pass the fraction size. It should be 0.0 to 1.0.

If you want the height as match_parent you can use fillMaxHeight(1.0).

If there is no view in the vertical area: If you give 1.0 -> it will occupy the entire height (match_parent).

If you give any other fraction values -> it will occupy based on the fraction value. For example, if you give 0.75 fraction it will occupy 75% of the screen height . If some views already exist: If you give 1.0 -> it will occupy the rest of the balance space(fill the balance area). If you give any other frictional values -> it will fill the fraction percentage in the balance space.

@Composable
fun FillHeightModifier() {
    Text(
        text = " Text with 75% Height ",
        color = Color.White,
        modifier = Modifier
            .background(Color.Green)
            .fillMaxHeight(0.75f) //75% area fill
    )
}

We can also use the following modifiers:

fun MinWidth(value: Dp): LayoutModifier//Minimum width

fun MaxWidth(value: Dp): LayoutModifier//Maximum width

fun MinHeight(value: Dp): LayoutModifier//Minimum height

fun MaxHeight(value: Dp): LayoutModifier//Maximum height


7. Alpha (Opacitiy)

Alpha is used to set the opacity of the view.

Modifier.alpha(alpha: Float)

You can use 0.1 to 1.0.

0.0 means 0% 0.1 means 10% 1.0 means 100%
@Composable
fun AlphaModifier() {
    Box(
        Modifier
            .size(250.dp)
            .alpha(0.5f)//50% opacity
            .background(Color.Red)
    )
}

8. Rotate

Sets the degrees the view is rotated around the center of the composable. Increasing values result in clockwise rotation. Negative degrees are used to rotate in the counterclockwise direction.

Modifier.rotate(degrees: Float)
@Composable
fun RotateModifier() {
    Box(
        Modifier
            .rotate(45f)
            .size(250.dp)
            .background(Color.Red)
    )
}

9. Scale

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 ScaleModifier() {
    Box(
        Modifier
            .scale(scaleX = 2f, scaleY = 3f)
            .size(200.dp, 200.dp)
    )
}

10. Weight

With weight, you can specify a size ratio between multiple views.

For example: If you add the view1 with weight 1, view2 with weight 1, view3 with weight 2.

It will sum the all weights 1+1+ 2 = 4 and allocate the space for the view based on given weight. View1 gets 25% space --> 1/4*100=25%

View1 gets 25% space --> 1/4*100=25%

View3 gets 50% space --> 2/4*100=50%


Check following code and output for understanding.

@Composable
fun WeightModifier(){
    Row() {
        Column(
            Modifier.weight(1f).background(Color.Red)){
            Text(text = "Weight = 1", color = Color.White)
        }
        Column(
            Modifier.weight(1f).background(Color.Blue)){
            Text(text = "Weight = 1", color = Color.White)
        }
        Column(
            Modifier.weight(2f).background(Color.Green)
        ) {
            Text(text = "Weight = 2")
        }

    }
}
Note: Weight is available from compose 1.0.0 version. If you are using beta version, it is unavailable.

11.Border

You can set the border by the following ways:

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

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

  3. Modifier.border(border: BorderStroke, shape: Shape = RectangleShape)

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

Here the shape parameter is optional. If you do not pass this parameter, it will set a rectangle as a default. This example uses the default:

@Composable
fun BorderModifier() {
    Text(
        text = "Text with Red Border",
        modifier = Modifier
            .padding(10.dp)
            .background(Color.Yellow)
            .border(2.dp,Color.Red)
            .padding(10.dp)
    )
}

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

Here we set the rounded corner shape border.

width - we set 2dp

brush - We use SolidColor()

RoundedCornerShape() - It's inbuilt shape in jetpack compose. We use this shape to achieve the rounded corner border.

@Composable
fun BorderWithShape() {
    Text(
        text = "Text with round border",
        modifier = Modifier
            .padding(10.dp)
            .border(2.dp, SolidColor(Color.Green),                                  RoundedCornerShape(20.dp))
            .padding(10.dp)
    )

}

12.Clip

Clip modifier allows you to clip the existing shape. You can use a default shape or your customized shapes.

Available shapes in Jetpack Compose:

  • RectangleShape

  • CircleShape

  • RoundedCornerShape

  • CutCornerShape

In this example we use the RoundedCornerShape.

@Composable
fun ClipModifier() {
    Text(
        text = "Text with Clipped background",
        color = Color.White,
        modifier = Modifier
            .padding(Dp(10f))
            .clip(RoundedCornerShape(25.dp))
            .background(Color.Blue)
            .padding(Dp(15f))
    )
}


Source code:

https://github.com/JetpackCompose/Jetpack-Compose-Text/blob/master/Compose%20Text/app/src/main/java/net/jetpackcompose/composetext/ModifierSamplesActivity.kt

For more details, refer to the official documentation

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier

4,432 views0 comments

Recent Posts

See All

This site developed for Jetpack Compose tutorial. We will post tutorials frequently. You can also join our community by clicking login. 

  • Twitter
  • LinkedIn

You have any queries contact me. 

Subscribe for latest updates

Thanks for submitting!