All about Padding and Margin In Jetpack Compose.

Photo by Utsman Media on Unsplash

In this article we will learn about padding and margin in jetpack compose. And the interesting thing is that both Padding and Margin is given through padding() modifier 😄.

Margins

@Composable
fun MarginDemo(
    modifier: Modifier = Modifier
) {
    Button(onClick = {}, modifier = modifier.padding(20.dp)) {
        Text(text = stringResource(R.string.margin_demo))
    }
}

In the above code , we have a button and provided 20.dp space from all the side that is called margin.

But If wrap the above button’s code inside any composable function(Box) then that’s called padding.

Paddings

@Composable
fun PaddingDemo(
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier) {
        Button(onClick = {}, modifier = Modifier.padding(20.dp)) {
            Text(text = stringResource(R.string.margin_demo))
        }
    }
}

So If we add padding modifier to outside composable function then that is your Margin otherwise padding .

Let’s learn more about the padding modifier’s parameter