Mengaktifkan mode layar penuh

Beberapa konten paling nyaman dinikmati dalam layar penuh, seperti video, game, galeri gambar, buku, dan slide dalam presentasi. Halaman ini menunjukkan kepada Anda cara melibatkan pengguna lebih mendalam dengan konten dalam layar penuh dan melindungi pengguna agar tidak keluar dari aplikasi secara tidak sengaja.

Anda mungkin ingin mengaktifkan mode layar penuh hanya untuk memaksimalkan ruang layar bagi aplikasi Anda. Akan tetapi, perhatikan seberapa sering pengguna masuk dan keluar aplikasi untuk memeriksa notifikasi, melakukan penelusuran dadakan, dan lain-lain. Menggunakan layar penuh akan membuat pengguna kehilangan akses mudah ke navigasi sistem, jadi Anda harus menggunakan mode layar penuh hanya ketika manfaat pengalaman pengguna lebih besar dari sekadar menerima sedikit ruang tambahan (seperti untuk menghindari keluar yang tidak disengaja selama bermain game atau memberikan pengalaman imersif yang berharga untuk gambar, video, dan buku).

Opsi layar penuh

Android menawarkan tiga opsi untuk membuat aplikasi Anda dapat diakses dalam layar penuh: Lean Back, Immersive, dan Immersive Sticky. Dalam ketiga pendekatan tersebut, bilah sistem disembunyikan dan aktivitas Anda terus menerima semua peristiwa sentuh. Perbedaan di antara ketiga opsi tersebut adalah cara pengguna dapat menampilkan kembali kolom sistem ke tampilan.

Berikut adalah deskripsi dari masing-masing opsi tersebut. Untuk mengetahui kode contoh, buka Mengaktifkan mode layar penuh.

Lean back

Mode lean back adalah pengalaman layar penuh di mana pengguna tidak akan banyak berinteraksi dengan layar, seperti saat menonton video.

Saat pengguna ingin mengembalikan kolom sistem, mereka cukup mengetuk layar di mana saja.

Untuk mengaktifkan mode lean back, panggil setSystemUiVisibility(), lalu teruskan SYSTEM_UI_FLAG_FULLSCREEN dan SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Saat kolom sistem muncul kembali, Anda dapat menerima callback untuk melakukan update lain yang sesuai untuk UI Anda. Lihat Merespons Perubahan Visibilitas UI.

Immersive

Mode immersive ditujukan untuk aplikasi di mana pengguna akan sering berinteraksi dengan layar. Misalnya bermain game, melihat gambar di galeri, atau membaca konten berhalaman, seperti buku atau slide dalam presentasi.

Saat pengguna perlu menampilkan kembali bilah sistem, mereka harus menggeser dari tepi mana pun tempat bilah sistem disembunyikan. Dengan meminta gestur yang lebih disengaja ini, interaksi pengguna dengan aplikasi Anda tidak akan terganggu oleh sentuhan dan geseran yang tidak disengaja.

Untuk mengaktifkan mode imersif, panggil setSystemUiVisibility(), lalu teruskan tanda SYSTEM_UI_FLAG_IMMERSIVE bersama dengan SYSTEM_UI_FLAG_FULLSCREEN dan SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Jika aplikasi Anda memiliki kontrol sendiri yang tidak diperlukan saat pengguna sedang menikmati konten, buat kontrol tersebut menghilang dan muncul kembali bersamaan dengan kolom sistem. Rekomendasi ini juga berlaku untuk setiap gestur spesifik aplikasi yang mungkin Anda miliki untuk menyembunyikan dan menunjukkan kontrol aplikasi. Misalnya, jika menyentuh di mana saja di layar akan menampilkan toolbar atau palet, maka tampilan kolom sistem juga harus terlihat.

Saat kolom sistem muncul kembali, Anda dapat menerima callback untuk melakukan update lain yang sesuai untuk UI Anda. Lihat Merespons Perubahan Visibilitas UI.

Sticky immersive

Dalam mode imersif reguler, setiap kali pengguna menggeser dari tepi, sistem menangani penampilan bilah sistem—aplikasi Anda bahkan tidak akan menyadari bahwa gestur tersebut terjadi. Jadi, jika pengguna mungkin benar-benar perlu menggeser dari tepi layar sebagai bagian dari pengalaman aplikasi utama—seperti saat bermain game yang menggunakan banyak geseran atau memakai aplikasi menggambar—Anda harus mengaktifkan mode imersif "sticky".

Saat berada dalam mode sticky immersive, jika pengguna menggeser dari tepi dengan bilah sistem, bilah sistem muncul tetapi bersifat semi-transparan, dan gestur sentuh tetap diteruskan ke aplikasi Anda sehingga aplikasi juga dapat merespons gestur tersebut.

Misalnya, dalam aplikasi menggambar yang menggunakan pendekatan ini, jika pengguna ingin menggambar garis yang dimulai di bagian paling tepi layar, menggeser dari tepi akan menampilkan bilah sistem dan juga mulai menggambar garis yang dimulai di bagian paling ujung. Kolom tersebut secara otomatis menghilang setelah beberapa detik tidak ada interaksi atau segera setelah pengguna menyentuh atau memberi gestur di mana saja di luar kolom sistem.

Untuk mengaktifkan mode imersif yang melekat, panggil setSystemUiVisibility(), lalu teruskan tanda SYSTEM_UI_FLAG_IMMERSIVE_STICKY bersama dengan SYSTEM_UI_FLAG_FULLSCREEN dan SYSTEM_UI_FLAG_HIDE_NAVIGATION.

Dengan imersif yang melekat, Anda tidak dapat menerima callback jika visibilitas sistem UI berubah. Jadi, jika Anda menginginkan perilaku sembunyi otomatis dari mode imersif yang melekat, tetapi tetap ingin mengetahui kapan UI sistem muncul kembali guna menampilkan kontrol UI Anda sendiri, IMMERSIVE gunakan tanda Handler.postDelayed() reguler atau sesuatu yang mirip dengan masuk kembali ke mode imersif setelah beberapa detik.

Mengaktifkan mode layar penuh

Terlepas dari mode layar penuh yang ingin digunakan, Anda harus memanggil setSystemUiVisibility() dan meneruskan SYSTEM_UI_FLAG_HIDE_NAVIGATION, SYSTEM_UI_FLAG_FULLSCREEN, atau keduanya. Anda dapat menyertakan SYSTEM_UI_FLAG_IMMERSIVE (untuk mode imersif reguler) atau SYSTEM_UI_FLAG_IMMERSIVE_STICKY (untuk mode imersif yang melekat), atau mengecualikan keduanya untuk mengaktifkan mode lean back.

Sebaiknya sertakan tanda UI sistem lainnya (seperti SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION dan SYSTEM_UI_FLAG_LAYOUT_STABLE) untuk mencegah perubahan ukuran tata letak saat kolom sistem disembunyikan dan ditampilkan. Anda juga harus memastikan bahwa panel tindakan dan kontrol UI lainnya disembunyikan pada saat yang sama.

Kode berikut menunjukkan cara menyembunyikan dan menampilkan status serta menu navigasi di aktivitas Anda, tanpa mengubah ukuran tata letak Anda sebagai respons terhadap ruang layar yang berubah:

Kotlin

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

    private fun hideSystemUI() {
        // Enables regular immersive mode.
        // For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
        // Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_IMMERSIVE
                // Set the content to appear under the system bars so that the
                // content doesn't resize when the system bars hide and show.
                or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                // Hide the nav bar and status bar
                or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_FULLSCREEN)
    }

    // Shows the system bars by removing all the flags
    // except for the ones that make the content appear under the system bars.
    private fun showSystemUI() {
        window.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
    }

Java

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideSystemUI();
        }
    }

    private void hideSystemUI() {
        // Enables regular immersive mode.
        // For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
        // Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_IMMERSIVE
                // Set the content to appear under the system bars so that the
                // content doesn't resize when the system bars hide and show.
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                // Hide the nav bar and status bar
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN);
    }

    // Shows the system bars by removing all the flags
    // except for the ones that make the content appear under the system bars.
    private void showSystemUI() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    }

Anda mungkin juga ingin mengimplementasikan langkah berikut untuk memberikan pengalaman pengguna yang lebih baik:

  • Untuk memberikan transisi yang lancar dari satu status ke status yang lain, pertahankan agar visibilitas semua kontrol UI tetap selaras dengan kolom sistem. Setelah aplikasi memasuki mode imersif, semua kontrol UI juga harus disembunyikan bersama dengan kolom sistem, dan kemudian juga muncul kembali saat UI sistem muncul kembali. Untuk melakukannya, implementasikan View.OnSystemUiVisibilityChangeListener untuk menerima callback, seperti yang dideskripsikan dalam Menanggapi Perubahan Visibilitas UI.
  • Implementasikan onWindowFocusChanged(). Jika mendapatkan fokus jendela, Anda mungkin perlu menyembunyikan kembali kolom sistem. Jika Anda kehilangan fokus jendela, misalnya karena dialog atau menu pop-up yang muncul di atas aplikasi, Anda mungkin perlu membatalkan operasi "Sembunyikan" yang tertunda dan sebelumnya dijadwalkan dengan Handler.postDelayed() atau yang serupa.
  • Implementasikan GestureDetector yang mendeteksi onSingleTapUp(MotionEvent), agar pengguna dapat beralih visibilitas kolom sistem secara manual dengan menyentuh konten Anda. Pemroses klik sederhana bukanlah solusi terbaik untuk ini karena sifatnya yang mudah dipicu sekalipun pengguna menarik jari ke layar (dengan asumsi target klik menggunakan seluruh layar).

Catatan: Saat Anda menggunakan tanda SYSTEM_UI_FLAG_IMMERSIVE_STICKY, suatu gestur geser akan menyebabkan UI sistem muncul sementara dalam keadaan semi-transparan, namun tidak ada tanda yang dihapus dan pemroses perubahan visibilitas UI sistem tidak dipicu.

Kode contoh tambahan

Untuk melihat penggunaan kode lainnya dalam berbagai mode layar penuh, lihat contoh berikut:

Pertimbangan lainnya

Di Android Automotive OS, pabrikan mobil dapat memblokir mode layar penuh.