Se usó la API de Cloud Translation para traducir esta página.

Cómo mostrar el contenido de borde a borde en la app

Una vez que segmentes el SDK 35 o versiones posteriores en un dispositivo con Android 15 o versiones posteriores, tu app se muestre de borde a borde. La ventana abarca todo el ancho y todo el alto. de la pantalla dibujando detrás de las barras del sistema. Las barras del sistema incluyen el estado barra de subtítulos, de subtítulos y de navegación.

Muchas apps tienen una barra superior. La barra superior de la aplicación debe estirarse hasta el borde superior de la pantalla y se muestran detrás de la barra de estado. De forma opcional, la barra superior de la app puede reducirse a la altura de la barra de estado cuando se desplace el contenido.

Muchas apps también tienen una barra inferior de la aplicación o de navegación. Estas barras deben Estirarse hasta el borde inferior de la pantalla y mostrarse detrás de la barra de navegación . De lo contrario, las apps deberían mostrar contenido desplazable detrás de la barra de navegación.

Figura 1: Barras del sistema en un diseño de borde a borde

Cuando implementes un diseño de borde a borde en tu app, ten en cuenta lo siguiente en mente:

Cómo habilitar una pantalla de borde a borde
Controla las superposiciones visuales.
Considera mostrar láminas detrás de las barras del sistema.

un ejemplo de imágenes detrás de la barra de estado — **Figura 2:** Ejemplo de imágenes detrás de la barra de estado.

Cómo habilitar la pantalla de borde a borde

Si tu app está orientada al SDK 35 o versiones posteriores, la opción de borde a borde se habilitará automáticamente para Dispositivos con Android 15 o versiones posteriores

Para habilitar la función de borde a borde en versiones anteriores de Android, haz lo siguiente:

Agrega una dependencia al Biblioteca de androidx.activity en la build.gradle de tu app o módulo:

Kotlin

dependencies {
    val activity_version = activity_version
    // Java language implementation
    implementation("androidx.activity:activity:$activity_version")
    // Kotlin
    implementation("androidx.activity:activity-ktx:$activity_version")
}

Groovy

dependencies {
    def activity_version = activity_version
    // Java language implementation
    implementation 'androidx.activity:activity:$activity_version'
    // Kotlin
    implementation 'androidx.activity:activity-ktx:$activity_version'
}

Importa enableEdgeToEdge función de extensión en tu app:

Llama a enableEdgeToEdge para habilitar manualmente el borde a borde. en onCreate de tu Activity. Se debe llamar antes de setContentView.

Kotlin

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

Java

     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
       EdgeToEdge.enable(this);
       super.onCreate(savedInstanceState);
       ...
     }

De forma predeterminada, enableEdgeToEdge() hace que las barras del sistema sean transparentes, excepto en Modo de navegación con 3 botones en el que la barra de estado obtiene una lámina translúcida. El los colores de los íconos del sistema y la lámina se ajustan según el sistema con el tema oscuro o claro.

La función enableEdgeToEdge() declara automáticamente que la app debe se posiciona de borde a borde y ajusta los colores de las barras del sistema.

Para habilitar la pantalla de borde a borde en tu app sin usar el Función enableEdgeToEdge(), consulta Configura la pantalla de borde a borde de forma manual.

Cómo controlar las superposiciones con inserciones

Es posible que algunas vistas de tu app se dibujen detrás de las barras del sistema, como se muestra en la figura. 3)

Puedes abordar las superposiciones reaccionando a las inserciones, que especifican qué partes la pantalla se cruzan con la IU del sistema, como la barra de navegación o el estado . Una intersección puede significar mostrar arriba del contenido, pero también tu app sobre los gestos del sistema.

Los tipos de inserciones que se aplican para mostrar tu app de borde a borde son los siguientes:

Inserciones de barras del sistema: La mejor opción para las vistas que se pueden presionar y que no se deben realizar. oscurecer visualmente las barras del sistema.
Inserciones de corte de pantalla: Para áreas en las que podría haber un corte de pantalla debido a la forma del dispositivo.
Inserciones de gestos del sistema: Para las áreas de navegación por gestos que usa el sistema que tienen prioridad sobre tu aplicación.

Inserciones de barras del sistema

Las inserciones de la barra del sistema son el tipo de inserciones más utilizado. Representan el área donde la IU del sistema se muestra en el eje Z sobre tu app. Son los mejores que se usan para mover o rellenar vistas en tu app que se pueden presionar y que no deben oscurecido visualmente por las barras del sistema.

Por ejemplo, la acción flotante botón (BAF) en la figura 3 está parcialmente oscurecidas por la barra de navegación:

un ejemplo de implementación de borde a borde, pero la barra de navegación cubre el BAF — **Figura 3:** La barra de navegación se superpone a un BAF en un diseño de borde a borde.

Para evitar este tipo de superposición visual, ya sea en el modo de gestos o del botón, puedes puedes aumentar los márgenes de la vista usando getInsets(int) con WindowInsetsCompat.Type.systemBars()

En el siguiente ejemplo de código, se muestra cómo implementar las inserciones de barra del sistema:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left,
      bottomMargin = insets.bottom,
      rightMargin = insets.right,
  }

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Si aplicas esta solución al ejemplo que se muestra en la figura 3, no obtendrás ningún resultado superposición visual en el modo de botones, como se muestra en la figura 4:

una barra de navegación translúcida que no cubre el BAF — **Figura 4:** Resuelve la superposición visual en el botón .

Lo mismo se aplica al modo de navegación por gestos, como se muestra en la figura 5:

de borde a borde con navegación por gestos — **Figura 5:** Cómo resolver la superposición visual en gestos modo de navegación.

Inserciones de corte de pantalla

Algunos dispositivos tienen cortes de pantalla. Por lo general, el corte está en la parte superior de y se incluyen en la barra de estado. Cuando la pantalla del dispositivo está en posición horizontal es posible que el corte esté en el borde vertical. Según el contenido de la app muestra en la pantalla, deberías implementar relleno para evitar cortes de pantalla, ya que de forma predeterminada, las apps se dibujarán en el corte de la pantalla.

Por ejemplo, muchas pantallas de la app muestran una lista de elementos. No ocultes los elementos de la lista con el corte de pantalla o las barras del sistema.

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  WindowInsetsCompat bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

Determina el valor de WindowInsetsCompat tomando el valor lógico or de la las barras del sistema y los tipos de corte de pantalla.

Establece clipToPadding en RecyclerView para que el padding se desplace con el valor elementos de lista. Esto permite que los elementos vayan detrás de las barras del sistema cuando el usuario los desplazamientos, como se muestra en el siguiente ejemplo.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

Inserciones de gestos del sistema

Las inserciones de gestos del sistema representan las áreas de la ventana en las que el sistema tienen prioridad sobre tu aplicación. Estas áreas se muestran en naranja en la figura 6:

Al igual que con las inserciones de la barra del sistema, puedes evitar la superposición de las inserciones de gestos del sistema. mediante getInsets(int) con WindowInsetsCompat.Type.systemGestures()

Usa estas inserciones para mover o rellenar las vistas deslizables hacia afuera de los bordes. Uso común incluyen las hojas inferiores, deslizar en juegos y carruseles implementados mediante ViewPager2

En Android 10 o versiones posteriores, las inserciones de gestos del sistema contienen una inserción inferior para el gesto de inicio y una inserción de izquierda y derecha para los gestos de retroceso:

un ejemplo de mediciones de inserción de gestos del sistema — **Figura 7:** Mediciones de inserción de gestos del sistema.

En el siguiente ejemplo de código, se muestra cómo implementar las inserciones de gestos del sistema:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Componentes de Material

Muchos componentes de Material de Android basados en vistas (com.google.android.material){:.external} administra automáticamente las inserciones, lo que incluye BottomAppBar, BottomNavigationView, NavigationRailView y NavigationView

Sin embargo, AppBarLayout no controla automáticamente las inserciones. Agrega android:fitsSystemWindows="true" para manejar las inserciones superiores, o bien usa setOnApplyWindowInsetsListener.

Lee cómo manejar las inserciones con Componentes de Material en Compose.

Modo envolvente

Algunos contenidos se disfrutan mejor en pantalla completa, lo que le brinda al usuario una experiencia envolvente. Puedes ocultar las barras del sistema para el modo envolvente con el WindowInsetsController y WindowInsetsControllerCompat bibliotecas:

Kotlin

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

Consulta Cómo ocultar las barras del sistema para el modo envolvente. para obtener más información sobre la implementación de esta función.

Recursos adicionales

Consulta las siguientes referencias para obtener más información sobre WindowInsets, gestos la navegación y cómo funcionan las inserciones: