Cómo configurar la pantalla de borde a borde manualmente

Para habilitar la pantalla de borde a borde en tu app, llama a enableEdgeToEdge. Esto debería ser suficiente para la mayoría de las apps. En esta guía, se describe cómo habilitar el modo de pantalla completa si tu app necesita hacerlo sin usar enableEdgeToEdge.

Diseña tu app en pantalla completa

Usa WindowCompat.setDecorFitsSystemWindows(window, false) para diseñar tu app detrás de las barras del sistema, como se muestra en el siguiente ejemplo de código:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  WindowCompat.setDecorFitsSystemWindows(window, false)
}

Java

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

Cómo cambiar el color de las barras del sistema

Cuando funciona en un diseño de borde a borde, la app debe cambiar los colores de las barras del sistema para que el contenido debajo sea visible. Después de que tu app realice este paso, el sistema controlará toda la protección visual de la interfaz de usuario en el modo de navegación por gestos y en el modo de botones.

  • Modo de navegación por gestos: El sistema aplica una adaptación de color dinámica en la que el contenido de las barras del sistema cambia de color según el contenido que se encuentra detrás de ellas. En el siguiente ejemplo, el control de la barra de navegación cambia a un color oscuro cuando está sobre contenido claro y a un color claro cuando está sobre contenido oscuro.
Figura 1. Cambios de color en el modo de navegación por gestos
  • Modo de botones: El sistema aplica una cortina translúcida detrás de las barras del sistema (para el nivel de API 29 o versiones posteriores) o una barra del sistema transparente (para el nivel de API 28 o versiones anteriores).
Una imagen que muestra barras del sistema translúcidas
Figura 2: Lámina translúcida detrás de las barras del sistema
  • Color del contenido de la barra de estado: Controla el color del contenido de la barra de estado, como la hora y los íconos.
Imagen que muestra el color del contenido de la barra de estado
Figura 3: Es el color del contenido de la barra de estado.

Puedes editar el archivo themes.xml para establecer el color de la barra de navegación y, de manera opcional, establecer la barra de estado como transparente y el color del contenido de la barra de estado como oscuro.

<!-- values-v29/themes.xml -->
<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set to transparent if your app is drawing behind the status bar. -->
  <item name="android:statusBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set for a light status bar with dark content. -->
  <item name="android:windowLightStatusBar">
    true
  </item>
</style>

Puedes usar la API de WindowInsetsController directamente, pero te recomendamos que, siempre que sea posible, uses la biblioteca de asistencia WindowInsetsControllerCompat. Puedes usar la API de WindowInsetsControllerCompat en lugar de theme.xml para controlar el color del contenido de la barra de estado. Para ello, usa la función setAppearanceLightNavigationBars() y pasa true para cambiar el color de primer plano de la navegación a un color claro o false para volver al color predeterminado.

Kotlin

val windowInsetsController =
      ViewCompat.getWindowInsetsController(window.decorView)

windowInsetsController?.isAppearanceLightNavigationBars = true

Java

WindowInsetsControllerCompat windowInsetsController =
      ViewCompat.getWindowInsetsController(getWindow().getDecorView());
if (windowInsetsController == null) {
    return;
}

windowInsetsController.setAppearanceLightNavigationBars(true);