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.
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](https://developer.android.com/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=9&hl=es)
Habilita 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 labuild.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](https://developer.android.com/static/images/guide/navigation/e2e-after-implementation.png?authuser=9&hl=es)
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](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-top.png?authuser=9&hl=es)
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](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=9&hl=es)
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:
![Ejemplo de inserciones de gestos del sistema](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=9&hl=es)
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](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=9&hl=es)
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:
- WindowInsets: objetos de escucha para los diseños
- Navegación por gestos: Inserciones
- ¿Cómo funcionan las inserciones en Android?