androidandroid-layoutandroid-jetpack-compose

Jetpack Compose: How do you position UI elements within their parent with exact (x,y) coordinates?


According to the documentation on custom layouts: "Each UI element has one parent and potentially many children. Each element is also located within its parent, specified as an (x, y) position, and a size, specified as a width and a height."

Let's say I have a Button inside of a Box. How can I specify the exact X and Y position for the Button inside that Box?


Solution

  • By default Box has TopStart alignment, which is the same as android coordinate space start point. To move from that point you can use offset modifier:

    Box {
        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier
                .offset(x = 100.dp, y = 100.dp)
        ) {
    
        }
    }