I'm working on creating a navigation bar for my app, but I've noticed an issue when the phone switches to landscape mode. In landscape view, the icons in the navigation bar behave unexpectedly, appearing smaller or misaligned. However, when I remove the navigationBarPadding(), the navigation bar displays correctly without any unusual behavior. Why is navigationBarPadding() causing this issue in landscape mode?

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
    Row(
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .background(MaterialTheme.colorScheme.onBackground),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            Modifier
                .size(60.dp)
                .navigationBarsPadding() // causing issues
                .padding(8.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(color = MaterialTheme.colorScheme.onPrimaryContainer)
                .padding(4.dp),
            contentAlignment = Alignment.Center
        ) {
            Column(
                Modifier.wrapContentSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(R.drawable.home),
                    contentDescription = "home",
                    tint = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier.size(28.dp)
                )
                Text(
                    "Home", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
        }

        Box(
            Modifier
                .size(60.dp)
                .navigationBarsPadding() // causing issues
                .padding(8.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(color = MaterialTheme.colorScheme.onPrimaryContainer)
                .padding(4.dp),
            contentAlignment = Alignment.Center
        ) {
            Column(
                Modifier.wrapContentSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(R.drawable.info),
                    contentDescription = "Info",
                    tint = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier.size(28.dp)
                )
                Text(
                    "Info", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onPrimary
                )

            }
        }
    }
}

       

I'm working on creating a navigation bar for my app, but I've noticed an issue when the phone switches to landscape mode. In landscape view, the icons in the navigation bar behave unexpectedly, appearing smaller or misaligned. However, when I remove the navigationBarPadding(), the navigation bar displays correctly without any unusual behavior. Why is navigationBarPadding() causing this issue in landscape mode?

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
    Row(
        Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .background(MaterialTheme.colorScheme.onBackground),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            Modifier
                .size(60.dp)
                .navigationBarsPadding() // causing issues
                .padding(8.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(color = MaterialTheme.colorScheme.onPrimaryContainer)
                .padding(4.dp),
            contentAlignment = Alignment.Center
        ) {
            Column(
                Modifier.wrapContentSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(R.drawable.home),
                    contentDescription = "home",
                    tint = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier.size(28.dp)
                )
                Text(
                    "Home", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onPrimary
                )
            }
        }

        Box(
            Modifier
                .size(60.dp)
                .navigationBarsPadding() // causing issues
                .padding(8.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(color = MaterialTheme.colorScheme.onPrimaryContainer)
                .padding(4.dp),
            contentAlignment = Alignment.Center
        ) {
            Column(
                Modifier.wrapContentSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Icon(
                    painter = painterResource(R.drawable.info),
                    contentDescription = "Info",
                    tint = MaterialTheme.colorScheme.onPrimary,
                    modifier = Modifier.size(28.dp)
                )
                Text(
                    "Info", style = MaterialTheme.typography.labelSmall,
                    color = MaterialTheme.colorScheme.onPrimary
                )

            }
        }
    }
}

       

• kotlin
• android-jetpack-compose

2 Answers 2

I could not reproduce your exact issue, but please try to move the navigationsBarsPadding Modifier to the parent Row:

Row(
    Modifier.fillMaxWidth()
        .wrapContentHeight()
        .navigationBarsPadding(),
    horizontalArrangement = Arrangement.SpaceEvenly,
    verticalAlignment = Alignment.CenterVertically
) {
    //...
}

You usually apply this Modifier on a common parent Composable, and not on individual nested Composables.

navigationsBarsPaddingModificador al padre Row:Row(

    Modifier.fillMaxWidth()

        .wrapContentHeight()

        .navigationBarsPadding(),

    horizontalArrangement = Arrangement.SpaceEvenly,

    verticalAlignment = Alignment.CenterVertically

) {

    //...

}