Jetpack Compose Modifier

in this article we are going to discuss the following :

I. what is Modifier

II. usages of Modifier.

III. Order of Modifiers matters

IV. padding and margin in Modifier

what is Modifier?

is an OBJECT used to modify certain aspects of composable ,so composable needs to accept a modifier as a parameter.

Column(modifier = Modifier.height(500.dp).padding(100.dp)) {
    Text("Hello")
}

as you see , we are using modifier to set height to 500 and padding to 100

usages of Modifier:

Modifiers let you do these sorts of things:

. Change the composable’s size, layout, behavior, and appearance

. Add information, like accessibility labels

. Process user input

. Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable

it is very important object to learn about if you are start with jetpack compose

Box(modifier = Modifier.height(60.dp).width(120.dp).padding(10.dp)
.background(Color.Magenta)
.clickable{

println("Hello Kururu")  // 
}


) {
    Text("Hello")
}

Modifiers are standard Kotlin objects. Create a modifier by calling one of the Modifier class functions.

bellow some of modifiers:

. Modifier.width()

to set a width to composable

. Modifier.height()

to set height

. Modifier.fillMaxHeight()

fill max size of parent of this composable , same to MATCH_PARENT from class way of imperative UI.

this function also can accept fraction of type float to set how much height composable can take from its parent if you don’t fill the whole height

fillMaxHeight(fraction=.5f) // to take half of parent height

. Modifier.fillMaxWidth()

to take full width of parent , also can use fraction here

. Modifier.fillMaxSize()

take maximum width/height of parent

. Modifier.padding()

You can use Modifier.padding to set padding to Composables that take a modifier as an argument.

. Modifier.background()

to set background color of composable , you can use Color class to set color

. Modifier.clip()

This modifier can clip the Composable to rectangle, rounded, or circle

. Modifier.clickable{}

to add click event to compose if you want do something on click

. Modifier.draggable

You can use this to make a Composable draggable

and more usages , check official docs

Order of Modifiers matters:

the order of modifier functions is very important , because every function will make changes to modifier return by previous function . so take care of functions order when you are using modifier.because the sequence affects the final result

Modifier.functon1

.function2

.function3

.function3 // this will affect function 2, function 1

we will see examples of how order of modifiers is important:

Box(  modifier = Modifier
                            .size(50.dp)
                            .clip(CircleShape)                       // clip to the circle shape
                            .border(0.3.dp, Color.Gray, CircleShape))

here clip must be call before border , otherwise , border will not follow the roundedCorners(clip)

 Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(40.dp)
                .clip(
                    RoundedCornerShape(10.dp)
                )
                .background(Color.Green) ){...}

here background should be after clip because if background set before clip the rounded corners will not appear

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}

in this example the whole area will be clickable because you set clickable before padding. so you can see the click effect cover all area because the padding is setting after.

from all above , we can sum up that The order of modifier functions is significant

padding and margin in Modifier :

padding is internal space in composable , while margin is outside space around composable.

padding is an inner space while margin is an outer space

modifier object already has padding function . but how to set margin between composables?

well , there is no margin function in modifier ,hence , you have to use some techniques to achieve a margin.:

1- in column you can use space attribute in verticalArrangement to set space between children

Column(

        verticalArrangement = Arrangement.spacedBy(
            space = 10.dp, //space
            alignment = Alignment.CenterVertically
        )
    ) {
        Text(text = "Ahmed")
        Text(text = "Adam")
        Text(text = "Ali")
        Text(text = "Hassan")
    }
}

2- inside layouts (row, column) use Spacer with Modifirer.size() to set space horizontally and vertically

Colum(
   
) {
    Text(text = "Text 1")

    Spacer(modifier = Modifier.size(size = 100.dp))  //this with add margin between text1 and text2

    Text(text = "Text 2")
}

tell me in the comment section the others ways to make a margin in compose :)

thanks for reading

please don’t forget to support me by clapping or commenting:)

references:

How to Set Padding & Margin in Android Jetpack Compose

Modifier - Jetpack Compose Playground

Compose modifiers | Jetpack Compose | Android Developers