Instruction

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Exploring Modifiers

Modifiers in Compose tell a UI element how it should layout, display, and behave within its parent’s layout. They’re often referred to as decorators of a composable, that let you:

@Composable  
fun HelloCompose() {  
	Text(  
		"Hello Compose!",  
		fontSize = 24.sp,  
		modifier = Modifier  
			.background(Color.Yellow)  
	)  
}


@Composable  
fun HelloCompose() {  
	Text(  
		"Hello Compose!",  
		fontSize = 24.sp,  
		modifier = Modifier  
			.background(Color.Yellow)  
			.fillMaxWidth()  
			.border(2.dp, Color.Red)  
	)  
}

Ordering Modifiers

When working with modifiers in a chain, one of the most important things to keep in mind is ordering. The order of the modifiers influences the look and behavior.


@Composable  
fun RedCircle() {  
  Box(  
		modifier = Modifier  
			.size(40.dp)  
			.background(Color.Red)  
			.clip(CircleShape)  
	)  
}


@Composable  
fun RedCircle() {  
  Box(  
		modifier = Modifier  
			.size(40.dp)  
			.background(Color.Red)  
			.clip(CircleShape)
			.background(Color.White)    
	)
}


@Composable  
fun RedCircle() {  
  Box(  
		modifier = Modifier  
			.size(40.dp)  
			.clip(CircleShape)  
			.background(Color.Red)  
	)
}

Built-in Modifiers

Jetpack Compose offers a list of built-in modifiers that help you decorate your composables. You can find a full list of these compose modifiers on the Android Developers documentation here.

Sizing

By default, layout composables wrap their children. But you can set a size using the size modifier to override this behavior:

@Composable  
fun Card() {  
  Box(  
		modifier = Modifier  
			.size(width = 400.dp, height = 200.dp)  		
	)  

	/*...*/
}

Padding

To add padding around an element, you can use the padding modifier:

@Composable  
fun HelloCompose() {  
	Text(  
		"Hello Compose!",  
		fontSize = 24.sp,  
		modifier = Modifier  
			.padding(16.dp)  
			.background(Color.Yellow)  
			.fillMaxWidth()  
			.border(2.dp, Color.Red)  
	)  
}


@Composable  
fun HelloCompose() {  
	Text(  
		"Hello Compose!",  
		fontSize = 24.sp,  
		modifier = Modifier  
			.padding(top = 32.dp, start = 24.dp, end = 2.dp, bottom = 4.dp)
			.background(Color.Yellow)  
			.fillMaxWidth()  
			.border(2.dp, Color.Red)  
	)  
}

@Composable  
fun HelloCompose() {  
	Text(  
		"Hello Compose!",  
		fontSize = 24.sp,  
		modifier = Modifier  
			.padding(horizontal = 16.dp, vertical = 8.dp)
			.background(Color.Yellow)  
			.fillMaxWidth()  
			.border(2.dp, Color.Red)  
	)  
}

Clickable

To enable click input in your composables, you can use the clickable modifier.

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

@Composable  
fun RedCircle() {  
  Box(  
		modifier = Modifier  
			.size(40.dp)  
			.clip(CircleShape)  
			.background(Color.Red) 
			.clickable {
				println("Red circle clicked!!")
			}
	)
}

Background

You use the background modifier to draw a shape with a solid color behind it.

Modifier.background(  
  color: Color,  
  shape: Shape = RectangleShape  
)
See forum comments
Download course materials from Github
Previous: Introduction Next: Demo