Gdy aplikacja będzie korzystać z pakietu SDK 35 lub nowszego, wyświetlanie bez ramki będzie wymuszane. Pasek stanu systemu i paski nawigacji przy użyciu gestów są przezroczyste, ale pasek nawigacji przy użyciu 3 przycisków jest półprzezroczysty. Zadzwoń pod numer enableEdgeToEdge, aby ustawić zgodność wsteczną.
Jednak domyślne ustawienia systemu mogą nie działać w przypadku wszystkich zastosowań. Zapoznaj się ze wskazówkami dotyczącymi projektowania pasków systemowych na Androidzie i wskazówkami dotyczącymi projektowania od krawędzi do krawędzi, aby dowiedzieć się, kiedy warto rozważyć użycie przezroczystych lub półprzezroczystych pasków systemowych.
Tworzenie przezroczystych pasków systemowych
Utwórz przezroczysty pasek nawigacyjny gestami, kierując aplikację na Androida 15 lub nowszego albo wywołując metodę enableEdgeToEdge() z argumentami domyślnymi w przypadku starszych wersji. W przypadku 3-przyciskowego paska nawigacyjnego ustaw wartość Window.setNavigationBarContrastEnforced na false. W przeciwnym razie zostanie zastosowana półprzezroczysta zasłona.
Tworzenie półprzezroczystych pasków systemowych
Aby utworzyć półprzezroczysty pasek stanu, utwórz niestandardowy komponent kompozycyjny, który nakłada się na główną treść i rysuje gradient w obszarze pokrytym wstawkami.
class SystemBarProtectionSnippets : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true // which is used to add a translucent scrim to three-button navigation enableEdgeToEdge() setContent { MyTheme { // Main content MyContent() // After drawing main content, draw status bar protection StatusBarProtection() } } } } @Composable private fun StatusBarProtection( color: Color = MaterialTheme.colorScheme.surfaceContainer, heightProvider: () -> Float = calculateGradientHeight(), ) { Canvas(Modifier.fillMaxSize()) { val calculatedHeight = heightProvider() val gradient = Brush.verticalGradient( colors = listOf( color.copy(alpha = 1f), color.copy(alpha = .8f), Color.Transparent ), startY = 0f, endY = calculatedHeight ) drawRect( brush = gradient, size = Size(size.width, calculatedHeight), ) } } @Composable fun calculateGradientHeight(): () -> Float { val statusBars = WindowInsets.statusBars val density = LocalDensity.current return { statusBars.getTop(density).times(1.2f) } }
W przypadku aplikacji adaptacyjnych wstaw niestandardowy komponent, który pasuje do kolorów każdego panelu, jak widać w projekcie od krawędzi do krawędzi. Aby utworzyć półprzezroczysty pasek nawigacyjny, ustaw wartość Window.setNavigationBarContrastEnforced na true.