状态栏与导航栏设计:如何设置状态栏透明并隐藏导航栏?
Hey there! Let's break down how to handle status bar transparency and navigation bar hiding on Android—these are super common tweaks for building sleek, immersive UIs. I'll walk you through practical, tested solutions with code examples you can drop right into your project.
You've got two main approaches here: static configuration via XML, or dynamic setup using code (great for switching based on app state).
1. XML静态配置(推荐固定场景)
This works if you want the transparent status bar for an entire activity or your whole app. Adjust your styles.xml based on the Android version:
For Android 10 (API 29) and above
<style name="AppTheme.TransparentStatusBar" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- Make status bar fully transparent --> <item name="android:statusBarColor">@android:color/transparent</item> <!-- Let your layout extend into the status bar area --> <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> <item name="android:windowTranslucentStatus">false</item> <!-- Optional: Use dark status bar text for light backgrounds --> <item name="android:windowLightStatusBar">true</item> </style>
For Android 9 (API 28) and below
Older versions use a translucent flag instead:
<style name="AppTheme.TransparentStatusBar" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <!-- Optional: Dark text for light status bar --> <item name="android:windowLightStatusBar">true</item> </style>
Then apply this theme to your activity in AndroidManifest.xml:
<activity android:name=".MainActivity" android:theme="@style/AppTheme.TransparentStatusBar"/>
Pro tip: Avoid setting fitsSystemWindows="true" on your root layout—this will push your content below the status bar. If you need specific views to avoid the status bar (like a top app bar), set fitsSystemWindows="true" on that individual view instead.
2. 代码动态设置(灵活场景)
Use this if you need to toggle transparency based on user actions or screen state (e.g., entering fullscreen mode). Here's a Kotlin example:
private fun setupTransparentStatusBar() { window.apply { when { Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP -> { // API 21+ statusBarColor = Color.TRANSPARENT // Extend layout into status bar decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN } Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT -> { // API 19-20 addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS) } } // Optional: Switch to dark status bar text (for light backgrounds) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { decorView.systemUiVisibility = decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR } } }
Call this method in your activity's onCreate() (after setContentView()).
Again, two main use cases: temporary hiding (user touch brings it back) or immersive mode (persistent fullscreen with gesture-based access).
1. 临时隐藏(触摸即恢复)
Perfect for scenarios like fullscreen videos where you want quick access to system UI. Use this Kotlin snippet:
private fun hideNavigationBarTemporarily() { window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN }
Tapping anywhere on the screen will bring back the navigation bar and status bar immediately.
2. 沉浸模式(持久全屏)
For true immersive experiences (e.g., games, photo viewers), use immersive mode. There are two flavors:
Non-sticky immersive mode
The system UI stays visible once the user touches the screen—you'll need to hide it again manually:
private fun enterNonStickyImmersiveMode() { window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN) }
Sticky immersive mode (recommended)
The system UI shows briefly when the user swipes from the edge, then automatically hides again:
private fun enterStickyImmersiveMode() { window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN) }
Android 11+ 推荐新方式
Google introduced WindowInsetsController for more control over system UI. This is the modern approach:
// Hide status bar and navigation bar private fun hideSystemUI() { val controller = window.insetsController controller?.hide(WindowInsets.Type.statusBars() or WindowInsets.Type.navigationBars()) // Set sticky behavior: swipe edge to show transiently controller?.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE } // Restore system UI visibility private fun showSystemUI() { val controller = window.insetsController controller?.show(WindowInsets.Type.statusBars() or WindowInsets.Type.navigationBars()) }
Pro tip: Handle configuration changes (like screen rotation) by re-applying these settings in onResume()—otherwise, the system UI might pop back up after rotation.
内容的提问来源于stack exchange,提问作者Jim

