padding

Modifier in Compose Foundation Layout

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: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.8.0-alpha01")
}

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
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
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
fun PaddingAllModifier() {
    Box(Modifier.background(color = Color.Gray)) {
        Box(Modifier.padding(all = 20.dp).size(50.dp).background(Color.Blue))
    }
}

PaddingValuesModifier

@Composable
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))
    }
}