Box doesn't fill max size - Jetpack Compose

Question

My PersonalDataBox() doesn't fill max available space even if there is .fillMaxSize()

There is a empty space between my box and the bottom of the screen. I want to fill my whole screen with Box(). It looks like my box has .fillWrapHeight(). Parent of the box is also .fillMaxSize() and it works correctly - fills max height.

@Composable
private fun PersonalDataBox(user: User) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(vertical = 10.dp)
            .clip(RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp))
            .background(Color.Red)
            .padding(horizontal = 25.dp, vertical = 15.dp)
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            Text(
                text = stringResource(R.string.personal_data),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 10.dp),
                fontSize = 16.sp,
                fontWeight = FontWeight.SemiBold,
                color = MaterialTheme.colors.primary
            )
            listOf(
                Pair(stringResource(R.string.name), user.name),
                Pair(stringResource(R.string.surname), user.surname),
                Pair(stringResource(R.string.e_mail), user.email),
            ).forEach {
                InputField(it)
            }
        }
    }
}

user_8106988 · Answer

I pulled down your code and it actually renders in the whole screen just fine--so I'm assuming you have your PersonalDatabox in a compose view with infinite height such as a LazyColumn.

Check out the documentation about constraints here

Specifically:

Most commonly, when measured with unbounded Constraints, these children will fallback to size themselves to wrap their content, instead of expanding to fill the available space (this is not always true as it depends on the child layout model, but is a common behavior for core layout components).

In other words, if the constraint is infinite, then .fillMaxSize will default to wrapping content.

To get around this, you can make the constraint equal to the height of the Lazy Column by using fillParentMaxHeight.

This only works if you're using a LazyColumn, though. Otherwise, if you set the height specifically or measure the screen you can accomplish the same thing.

Here's an example of what that might look like.

LazyColumn() {
            item {
                Column(modifier = Modifier.fillParentMaxHeight(1f)) {
                    PersonalDataBox(User(name = "John", surname = "Robless", "coolemail@email.com"))
                }
            }
        }

user_1843737 · Answer

Your Box has the following modifiers:

modifier = Modifier
            .fillMaxSize()
            .padding(vertical = 10.dp)
            .clip(RoundedCornerShape(topStart = 10.dp, topEnd = 10.dp))
            .background(Color.Red)
            .padding(horizontal = 25.dp, vertical = 15.dp)

The important ones are

.padding(vertical = 10.dp)
.padding(horizontal = 25.dp, vertical = 15.dp)

There are two padding modifiers adding a total of 25.dp padding to the top and bottom of your Box, remove these and it should fix your issue

Box doesn't fill max size - Jetpack Compose

2 Answers