Jetpack Compose: Getting Started
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Rendering items on the screen is only one part of building user interfaces. You also need to be able to customize the appearance and behavior of the items that you render on the screen. So far, we have discussed how to create and render items on the screen, we will dive deeper into how to customize the appearance and behavior of the items that you want to render on the screen.
Modifier Class
Let us add some modifications to our ProfileBar Composable.
@Composable
fun ProfileBar(){
Row(modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
){
Image(
modifier = Modifier.size(50.dp),
painter = painterResource(id = R.drawable.ic_profile),
contentDescription = null,
)
Column(
verticalArrangement = Arrangement.SpaceBetween,
){
Text(
text = "Hello, Kodeco",
style = MaterialTheme.typography.bodyLarge,
)
}
Image(
modifier = Modifier.size(50.dp),
painter = painterResource(id = R.drawable.ic_notifications),
contentDescription = null,
)
}
}
Column(
verticalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.width(200.dp)
.height(100.dp)
.padding(16.dp)
){
Text(
text = "Hello, Kodeco",
style = MaterialTheme.typography.bodyLarge,
)
}
Error: This image is missing a width attribute
Please provide one in the form of
Order of Modifiers
As you continue to chain Modifiers, you will continue noticing the behavior might look different from what you expect. This is because the order in which you chain the modifiers matters. The order in which you chain the modifiers determines the order in which the modifiers are applied to the Composable.
Box(modifier = Modifier
.size(50.dp)
.background(color = Color.Red)
.clip(CircleShape))
Box(modifier = Modifier
.size(50.dp)
.clip(CircleShape)
.background(color = Color.Red))
@Composable
fun HelloBox(){
Box(modifier = Modifier
.padding(10.dp)
.size(200.dp)
.border(width = 2.dp, color = Color.Blue)){
Text(
text = "Hello World",
modifier = Modifier
.padding(10.dp)
.matchParentSize())
}
}
@Composable
fun HelloBox(){
Box(modifier = Modifier
.padding(10.dp)
.size(200.dp)
.border(width = 2.dp, color = Color.Blue)
.matchParentSize()){
Text(
text = "Hello World",
modifier = Modifier.padding(10.dp))
}
}