Jetpack Compose: cómo eliminar el espacio blanco debajo de tu app

Mientras desarrollaba mi app Android encontré un problema visual simple, pero molesto: quedaba un espacio en blanco en la parte inferior de la pantalla.

El problema estaba relacionado con Scaffold, innerPadding y un modificador que no necesitaba.

El problema

La aplicación se veía así:

Cuando empiezas con Jetpack Compose, es común usar Scaffold como estructura principal de una pantalla.

Por ejemplo:

Scaffold(
    modifier = Modifier.fillMaxSize()
) { innerPadding ->

    HomeScreen(
        modifier = Modifier.padding(innerPadding)
    )
}

Scaffold entrega un innerPadding que permite respetar barras del sistema y otros elementos de la interfaz.

El problema aparece cuando agregamos padding adicional sin necesitarlo.

El error: navigationBarsPadding()

En mi caso tenía además:

.navigationBarsPadding()

navigationBarsPadding() agrega espacio para evitar que el contenido quede detrás de la barra de navegación de Android.

Pero mi pantalla ya estaba utilizando el innerPadding de Scaffold.

Eso podía provocar padding adicional y generar ese espacio vacío.

La documentación de Android indica que Scaffold proporciona los insets mediante PaddingValues y recomienda evitar agregar otros manejos de insets innecesarios cuando ya se están consumiendo estos valores.

La solución

En mi caso fue simple:

// Eliminar si ya no es necesario
.navigationBarsPadding()

Después del cambio, la aplicación volvió a utilizar correctamente el espacio disponible.

Plantilla base con Scaffold

Esta es una estructura simple que puedes usar como referencia:

package com.anibalcopitan.aniballinux

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        // Solo si utilizas AdMob
        MobileAds.initialize(this) {}

        setContent {
            MyLinuxTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize()
                ) { innerPadding ->

                    HomeScreen(
                        userName = "",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun HomeScreen(
    userName: String,
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier) {
        // Contenido de tu pantalla
    }
}

@Preview(showBackground = true)
@Composable
fun HomeScreenPreview() {
    MyLinuxTheme {
        HomeScreen(
            userName = "User Name"
        )
    }
}

enableEdgeToEdge() permite que la interfaz pueda dibujarse utilizando toda la ventana y es especialmente importante en las versiones modernas de Android. En Android 15, para apps que apuntan a API 35 o superior, el comportamiento edge-to-edge se aplica por defecto.

Scaffold no era el problema

El detalle importante es este:

Scaffold
   ↓
innerPadding
   ↓
Modifier.padding(innerPadding)

Si después agregas otros paddings relacionados con las barras del sistema sin necesitarlos, puedes terminar creando espacio duplicado.

navigationBarsPadding() no es malo. Su función es agregar espacio para los insets de la barra de navegación.

Simplemente hay que usarlo donde realmente sea necesario.

Conclusión

Si tu app en Jetpack Compose muestra un espacio extraño arriba o abajo, revisa primero tus Modifier.

Especialmente:

padding()
navigationBarsPadding()
statusBarsPadding()
systemBarsPadding()

Si utilizas:

Scaffold { innerPadding ->

comprueba que no estés aplicando los mismos insets dos veces.

En mi caso, eliminar:

navigationBarsPadding()

fue suficiente para corregir el problema.

Si por casualidad quieres ver mi app aqui te dejo el enlacee disponible en Playstore

Autor: Anibal Copitan ( Contactar con Anibal Copitan )