androidkotlinandroid-jetpack-composeandroid-wrap-content

Wrap Content in Jetpack Compose


How to make the parent layout - Box wrap its content in Jetpack compose? The current implementation below fills the entire screen, I only want the Box to wrap around its child - Switch. How do I define wrap content for the Box?

@Composable
fun TestScreen(modifier: Modifier = Modifier) {
    Box(modifier = Modifier.background(Color.Yellow)){
        val switchState = remember { mutableStateOf(true) }
        Switch(
            checked = switchState.value,
            enabled= true,
            onCheckedChange = { switchState.value = it }
        )
    }
}

A Switch inside a Box


Solution

  • Box covers entire screen is probably something more sneaky because of Surface with Modifier.fillMaxSize() updates minimum Constraints of TestScreen because it is direct descendent of Surface.

    Surface is a Box with propagateMinConstraints: Boolean = true which forces minimum width and height to its direct descendent. This answer explains with examples how it works.

    Your Composable is actually as this when parent is not Surface as i mentioned above.

    Surface(
        modifier = Modifier.fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(10.dp)
        ) {
            TestScreen()
        }
    }
    

    enter image description here