Une fois que vous avez ciblé le SDK 35 ou une version ultérieure sur un appareil équipé d'Android 15 ou version ultérieure, procédez comme suit : votre application s'affiche bord à bord. La fenêtre s'étend sur toute la largeur et la hauteur de l'écran en dessinant derrière les barres système. Les barres système incluent l'état la barre de sous-titres et la barre de navigation.
De nombreuses applications ont une barre d'application supérieure. La barre d'application supérieure doit s'étirer jusqu'au bord supérieur l'écran et s'afficher derrière la barre d'état. La barre d'application supérieure peut également réduire à la hauteur de la barre d'état lorsque le contenu défile.
De nombreuses applications disposent également d'une barre d'application ou d'une barre de navigation inférieures. Ces barres doivent s'étirent jusqu'au bord inférieur de l'écran et s'affichent derrière la barre de navigation. sur la barre d'adresse. Sinon, les applications doivent afficher du contenu défilant derrière la barre de navigation.
<ph type="x-smartling-placeholder">Lorsque vous implémentez une mise en page bord à bord dans votre application, gardez les éléments suivants dans à l'esprit:
- Activer l'affichage bord à bord
- Gérez les éventuels chevauchements visuels.
- Pensez à montrer des fonds derrière les barres système.
![Exemple d'image derrière la barre d'état](https://developer.android.google.cn/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=5&hl=fr)
Activer l'affichage bord à bord
Si votre application cible le SDK 35 ou une version ultérieure, le bord à bord est automatiquement activé pour Appareils équipés d'Android 15 ou version ultérieure.
Pour activer l'affichage bord à bord sur les versions précédentes d'Android, procédez comme suit:
Ajoutez une dépendance au bibliothèque
androidx.activity
dansbuild.gradle
de votre application ou module: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' }Importer le
enableEdgeToEdge
dans votre application:
Activez manuellement l'affichage bord à bord en appelant enableEdgeToEdge
dans onCreate
de votre Activity
. Elle doit être appelée avant 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); ... }
Par défaut, enableEdgeToEdge()
rend les barres système transparentes, sauf sur
Mode de navigation à trois boutons, avec un fond translucide dans la barre d'état La
les couleurs des icônes système et du fond sont ajustées en fonction du système
un thème clair ou sombre.
La fonction enableEdgeToEdge()
déclare automatiquement que l'application doit être
disposé bord à bord et ajuste
les couleurs des barres système.
Pour activer l'affichage bord à bord dans votre application sans utiliser la
enableEdgeToEdge()
, consultez
Configurez manuellement l'écran bord à bord.
Gérer les chevauchements à l'aide d'encarts
Certaines vues de votre application peuvent s'afficher derrière les barres système, comme illustré dans la figure. 3.
Vous pouvez résoudre les chevauchements en réagissant aux encarts, qui spécifient les parties l'écran présente une intersection avec l'UI du système, comme la barre de navigation ou l'état sur la barre d'adresse. L'intersection peut signifier s'afficher au-dessus du contenu, mais elle peut également informer votre application sur les gestes système.
Les types d'encarts qui s'appliquent à l'affichage de votre application de bord à bord sont les suivants:
Encarts de barre système:idéal pour les vues sur lesquelles il est possible d'appuyer et qui ne doivent pas être obscurcis visuellement par les barres système.
Incrustations de l'encoche:pour les zones où il peut y avoir une encoche en raison de la forme de l'appareil.
Encarts de gestes système:pour les zones de navigation par gestes utilisées par le système. qui prévalent sur votre application.
Encarts de barres système
Les encarts de la barre système sont le type d'encart le plus couramment utilisé. Ils représentent le zone où l'UI du système s'affiche sur l'axe Z au-dessus de votre application. Ils sont les meilleurs utilisées pour déplacer ou remplir des vues dans votre application sur lesquelles il est possible d'appuyer et qui ne doivent pas être visuellement obscurcis par les barres système.
Par exemple, l'action flottante (bouton d'action flottant) de la figure 3 est partiellement masquées par la barre de navigation:
![exemple d'implémentation bord à bord, mais la barre de navigation couvre le bouton d'action flottant](https://developer.android.google.cn/static/images/guide/navigation/e2e-after-implementation.png?authuser=5&hl=fr)
Pour éviter ce type de chevauchement visuel, que ce soit en mode geste ou en mode bouton,
vous pouvez augmenter
les marges de la vue en utilisant
getInsets(int)
par
WindowInsetsCompat.Type.systemBars()
L'exemple de code suivant montre comment implémenter des encarts de barre système:
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 vous appliquez cette solution à l'exemple de la figure 3, vous n'obtiendrez Chevauchement visuel en mode bouton, comme illustré dans la figure 4:
![Une barre de navigation translucide ne recouvrant pas le bouton d'action flottant](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-bars-top.png?authuser=5&hl=fr)
Il en va de même pour le mode de navigation par gestes, comme illustré dans la figure 5:
![bord à bord avec navigation par gestes](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=5&hl=fr)
Encarts de l'encoche
Certains appareils sont dotés d'une encoche. Généralement, l'encoche se trouve en haut et sont incluses dans la barre d'état. Lorsque l'écran de l'appareil est en mode Paysage l'encoche peut se trouver sur le bord vertical. Selon le contenu de votre application s'affiche à l'écran, vous devez implémenter une marge intérieure pour éviter les encoches, par défaut, les applications s'affichent dans l'encoche.
Par exemple, de nombreux écrans d'application affichent une liste d'éléments. Ne pas masquer les éléments de la liste avec l'encoche ou les barres système.
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; });
Déterminez la valeur de WindowInsetsCompat
en utilisant la logique ou de la
les barres système et les types
d'encoches.
Définissez clipToPadding
sur RecyclerView
pour que la marge intérieure défile avec le
éléments de liste. Cela permet aux éléments de passer derrière les barres système lorsque l'utilisateur
défile, comme illustré dans l'exemple suivant.
<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" />
Encarts de gestes système
Les encarts de gestes système représentent les zones de la fenêtre où les gestes système sont prioritaires sur votre application. Ces zones sont représentées en orange dans la figure 6:
![Exemple d'encarts de gestes système](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=5&hl=fr)
Comme pour les encarts de la barre système, vous pouvez éviter de chevaucher les encarts de gestes système.
avec
getInsets(int)
par
WindowInsetsCompat.Type.systemGestures()
Utilisez ces encarts pour déplacer ou compenser les vues à balayer en les éloignant des bords. Utilisation courante
comme les bottom sheets,
le balayage dans les jeux et les carrousels
implémentés à l'aide de
ViewPager2
Sur Android 10 ou version ultérieure, les encarts de gestes système contiennent un encart inférieur pour geste d'accueil, et un encart à gauche et à droite pour les gestes Retour:
![Exemple de mesures d'encarts de gestes système](https://developer.android.google.cn/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=5&hl=fr)
L'exemple de code suivant montre comment implémenter des encarts de gestes système:
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; });
Composants Material
De nombreux composants Android Material basés sur les vues
(com.google.android.material){:.external} gère automatiquement les encarts, y compris
BottomAppBar
,
BottomNavigationView
,
NavigationRailView
et NavigationView
Toutefois, AppBarLayout
ne gère pas automatiquement les encarts. Ajouter
android:fitsSystemWindows="true"
pour gérer les encarts supérieurs ou utiliser setOnApplyWindowInsetsListener
.
Découvrez comment gérer les encarts avec Composants Material dans Compose
Mode immersif
Certains contenus sont mieux adaptés au plein écran, car l'utilisateur bénéficie
une expérience immersive. Vous pouvez masquer les barres système et activer le mode immersif en utilisant
la WindowInsetsController
et
WindowInsetsControllerCompat
bibliothèques:
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());
Consultez Masquer les barres système pour le mode immersif. pour en savoir plus sur l'implémentation de cette fonctionnalité.
Ressources supplémentaires
Consultez les références suivantes pour en savoir plus sur WindowInsets
, le geste
la navigation et le fonctionnement des encarts:
- WindowInsets : écouteurs de mises en page
- Navigation par gestes: encarts
- Comment les encarts fonctionnent-ils sur Android ?