Cách ẩn thanh điều hướng (Navigation Bar) ở dưới màn hình Android

Giới thiệu

Bài viết hướng dẫn cách ẩn thanh điều hướng hệ thống (nút Back, Home, Recent) để ứng dụng chạy toàn màn hình (fullscreen immersive mode). Cách làm thay đổi tùy theo phiên bản Android.

Các bước thực hiện

Bước 1: Tạo project mới

Android Studio → File → New Project → Empty Activity.

Bước 2: Giao diện đơn giản (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#000000">

    <DigitalClock
        android:id="@+id/digitalClock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="48sp"
        android:textColor="#FFFFFF" />

</LinearLayout>

Bước 3: Code ẩn Navigation Bar (MainActivity.kt)

package com.example.hidenavbar

import android.os.Build
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.WindowCompat
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        hideSystemBars()
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)
        if (hasFocus) hideSystemBars()
    }

    private fun hideSystemBars() {
        // Ẩn ActionBar/Toolbar nếu có
        supportActionBar?.hide()

        // Cách hiện đại (API 30+ / Android 11+)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            window.setDecorFitsSystemWindows(false)
            window.insetsController?.apply {
                hide(android.view.WindowInsets.Type.navigationBars())
                systemBarsBehavior = android.view.WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
            }
        }
        // Cách cũ (API 16 - 29)
        else {
            window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_FULLSCREEN)
        }
    }
}

Giải thích các flag quan trọng

• SYSTEM_UI_FLAG_IMMERSIVE_STICKY: Thanh điều hướng ẩn, xuất hiện lại khi vuốt từ mép màn hình rồi tự ẩn sau vài giây.
• SYSTEM_UI_FLAG_HIDE_NAVIGATION: Ẩn thanh điều hướng.
• SYSTEM_UI_FLAG_FULLSCREEN: Ẩn thanh trạng thái (status bar).
• SYSTEM_UI_FLAG_LAYOUT_*: Cho phép layout vẽ dưới các thanh hệ thống.

Cách hiện đại với WindowInsetsController (API 30+)

// Trong Activity hoặc Fragment
val insetsController = window.insetsController
insetsController?.hide(WindowInsets.Type.navigationBars())
insetsController?.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE

Lưu ý

• Trên Android 11+, SYSTEM_UI_FLAG_* bị deprecated, phải dùng WindowInsetsController.
• Chế độ immersive sticky cho phép người dùng vuốt từ mép để hiện thanh điều hướng tạm thời.
• Nếu dùng Theme.MaterialComponents.DayNight.NoActionBar thì không cần ẩn ActionBar thủ công.