offset

Modifier in Compose Foundation Layout

Offset the content by ([x] dp, [y] dp). The offsets can be positive as well as non-positive. Applying an offset only changes the position of the content, without interfering with its size measurement.

This modifier will automatically adjust the horizontal offset according to the layout direction: when the layout direction is LTR, positive [x] offsets will move the content to the right and when the layout direction is RTL, positive [x] offsets will move the content to the left. For a modifier that offsets without considering layout direction, see [absoluteOffset].

Last updated: 2024-10-22 13:47

Installation

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

Overloads

@Stable
fun Modifier.offset(x: Dp = 0.dp, y: Dp = 0.dp)

fun Modifier.offset(offset: Density.() -> IntOffset)

Code Examples

OffsetModifier

@Composable
fun OffsetModifier() {
    // This text will be offset (10.dp, 20.dp) from the center of the available space. In the
    // right-to-left context, the offset will be (-10.dp, 20.dp).
    Text(
        "Layout offset modifier sample",
        Modifier.fillMaxSize().wrapContentSize(Alignment.Center).offset(10.dp, 20.dp)
    )
}

OffsetPxModifier

@Composable
fun OffsetPxModifier() {
    // This text will be offset in steps of 10.dp from the top left of the available space in
    // left-to-right context, and from top right in right-to-left context.
    var offset by remember { mutableStateOf(0) }
    Text(
        "Layout offset modifier sample",
        Modifier.clickable { offset += 10 }.offset { IntOffset(offset, offset) }
    )
}