You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

状态栏与导航栏设计:如何设置状态栏透明并隐藏导航栏?

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)
}

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.15 07:43:55