New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation Layout

padding

Common

Apply additional space along each edge of the content in [Dp]: [start], [top], [end] and [bottom]. The start and end edges will be determined by the current [LayoutDirection]. Padding is applied before content measurement and takes precedence; content may only be as large as the remaining space.

Negative padding is not permitted — it will cause [IllegalArgumentException]. See [Modifier.offset].

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.7.0-beta04")
}

Overloads

@Stable
fun Modifier.padding(
    start: Dp = 0.dp,
    top: Dp = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
)
@Stable
fun Modifier.padding(
    horizontal: Dp = 0.dp,
    vertical: Dp = 0.dp
)
@Stable
fun Modifier.padding(all: Dp)
@Stable
fun Modifier.padding(paddingValues: PaddingValues)

Code Examples

PaddingModifier

@Composable
@Sampled
fun PaddingModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(
            Modifier.padding(start = 20.dp, top = 30.dp, end = 20.dp, bottom = 30.dp)
                .size(50.dp)
                .background(Color.Blue)
        )
    }
}

SymmetricPaddingModifier

@Composable
@Sampled
fun SymmetricPaddingModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(
            Modifier
                .padding(horizontal = 20.dp, vertical = 30.dp)
                .size(50.dp)
                .background(Color.Blue)
        )
    }
}

PaddingAllModifier

@Composable
@Sampled
fun PaddingAllModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(Modifier.padding(all = 20.dp).size(50.dp).background(Color.Blue))
    }
}

PaddingValuesModifier

@Composable
@Sampled
fun PaddingValuesModifier() {
    val innerPadding = PaddingValues(top = 10.dp, start = 15.dp)
    Box(Modifier.background(color = Color.Gray)) {
        Box(Modifier.padding(innerPadding).size(50.dp).background(Color.Blue))
    }
}