Cara Hilangkan Navigasi Bar

Navigation bar, atau bilah navigasi, adalah elemen antarmuka pengguna yang penting untuk membantu pengguna menavigasi aplikasi atau situs web. Namun, dalam beberapa kasus, Anda mungkin ingin menyembunyikan atau menghilangkan navigation bar untuk pengalaman pengguna yang lebih imersif, memaksimalkan ruang layar, atau menciptakan tampilan yang lebih minimalis. Artikel ini akan membahas berbagai cara untuk menghilangkan navigation bar di berbagai platform, termasuk Android, iOS, dan web, dengan penjelasan mendetail dan relevan dari berbagai sumber.

1. Menghilangkan Navigation Bar di Android: Mode Immersive dan Alternatif Lain

Di Android, menghilangkan navigation bar biasanya dilakukan untuk menciptakan pengalaman "immersive," di mana aplikasi menggunakan seluruh layar tanpa gangguan. Ada beberapa cara untuk mencapainya, tergantung pada kebutuhan dan versi Android yang digunakan.

A. Mode Immersive (Fullscreen):

Mode immersive adalah cara yang paling umum dan disarankan untuk menyembunyikan navigation bar di Android. Ini dilakukan melalui kode dalam aplikasi Android yang Anda kembangkan. Ada dua jenis mode immersive:

• Sticky Immersive Mode: Dalam mode ini, navigation bar akan disembunyikan, tetapi pengguna dapat memunculkannya kembali dengan menggesek dari tepi bawah layar. Navigation bar kemudian akan muncul sementara, lalu menghilang lagi setelah beberapa saat tidak aktif. Kode yang digunakan untuk mengaktifkan sticky immersive mode adalah:

View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
               | View.SYSTEM_UI_FLAG_FULLSCREEN
               | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
decorView.setSystemUiVisibility(uiOptions);

decorView.setOnSystemUiVisibilityChangeListener
        (new View.OnSystemUiVisibilityChangeListener() {
    @Override
    public void onSystemUiVisibilityChange(int visibility) {
        // Periksa apakah navigation bar muncul kembali.
        if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
            // Navigation bar muncul kembali, sembunyikan lagi.
            decorView.setSystemUiVisibility(uiOptions);
        }
    }
});

• Immersive Mode Biasa: Dalam mode ini, navigation bar akan disembunyikan sepenuhnya. Pengguna dapat memunculkannya kembali dengan menggesek dari tepi bawah layar, tetapi navigation bar akan tetap terlihat sampai pengguna berinteraksi dengannya atau aplikasi menonaktifkannya. Kode yang digunakan untuk immersive mode biasa adalah:

View decorView = getWindow().getDecorView();
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
               | View.SYSTEM_UI_FLAG_FULLSCREEN
               | View.SYSTEM_UI_FLAG_IMMERSIVE;
decorView.setSystemUiVisibility(uiOptions);

Penjelasan Kode:

• getWindow().getDecorView(): Mengambil tampilan dekorasi jendela, yang merupakan tampilan paling atas yang berisi semua elemen UI aplikasi.
• View.SYSTEM_UI_FLAG_HIDE_NAVIGATION: Menandai bahwa navigation bar harus disembunyikan.
• View.SYSTEM_UI_FLAG_FULLSCREEN: Menandai bahwa status bar (bilah di bagian atas layar yang menampilkan jam, baterai, dll.) juga harus disembunyikan.
• View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY: Untuk sticky immersive mode.
• View.SYSTEM_UI_FLAG_IMMERSIVE: Untuk immersive mode biasa.
• setSystemUiVisibility(uiOptions): Menerapkan opsi yang dipilih ke tampilan dekorasi jendela.
• setOnSystemUiVisibilityChangeListener: Mendeteksi perubahan visibilitas sistem UI (seperti navigation bar muncul kembali) dan menyembunyikannya kembali jika perlu (hanya untuk sticky immersive mode).

B. Menggunakan Aplikasi Pihak Ketiga:

Beberapa aplikasi pihak ketiga di Google Play Store mengklaim dapat menyembunyikan navigation bar. Namun, penggunaan aplikasi semacam ini perlu hati-hati, karena beberapa di antaranya mungkin memerlukan akses root atau memiliki izin yang mencurigakan. Pastikan untuk membaca ulasan dan memahami risiko sebelum menginstal aplikasi semacam itu.

C. Menggunakan ADB (Android Debug Bridge):

Jika Anda adalah seorang pengembang, Anda dapat menggunakan ADB untuk menyembunyikan navigation bar secara sementara. Perintah ADB yang digunakan adalah:

adb shell settings put global policy_control immersive.full=<nama_paket_aplikasi>

Ganti <nama_paket_aplikasi> dengan nama paket aplikasi yang ingin Anda sembunyikan navigation bar-nya. Untuk mengembalikan navigation bar, gunakan perintah:

adb shell settings put global policy_control null*

Peringatan: Metode ADB ini mungkin tidak berfungsi di semua perangkat Android dan mungkin memerlukan akses root.

2. Menghilangkan Navigation Bar di iOS (iPhone/iPad): Potensi dan Batasan

Di iOS, menghilangkan navigation bar (atau Home Indicator, seperti yang disebut di iPhone tanpa tombol Home) tidak sesederhana seperti di Android. Apple membatasi akses ke sistem UI demi keamanan dan konsistensi pengalaman pengguna.

A. Aplikasi Fullscreen (Game):

Untuk aplikasi seperti game yang membutuhkan pengalaman fullscreen, Apple memungkinkan pengembang untuk menyembunyikan Home Indicator sementara. Ini dilakukan melalui kode dalam aplikasi.

override var prefersHomeIndicatorAutoHidden: Bool {
    return true
}

Kode ini, jika ditempatkan di view controller, akan membuat Home Indicator tersembunyi secara otomatis. Namun, pengguna dapat memunculkannya kembali dengan menggesek dari tepi bawah layar. Setelah beberapa saat tidak aktif, Home Indicator akan menghilang lagi.

B. Kiosk Mode (Guided Access):

Fitur Guided Access di iOS memungkinkan Anda untuk mengunci perangkat ke satu aplikasi dan menonaktifkan beberapa fitur sistem, termasuk tombol Home (atau mengunci gestur untuk memunculkan Home Indicator). Ini sering digunakan dalam lingkungan kiosk, seperti pameran atau toko ritel.

Untuk mengaktifkan Guided Access:

1. Buka Pengaturan > Aksesibilitas > Guided Access.
2. Aktifkan Guided Access.
3. Konfigurasikan pengaturan lain seperti batasan waktu dan tombol yang diizinkan.
4. Buka aplikasi yang ingin Anda kunci.
5. Tekan tombol samping (atau tombol Home pada perangkat lama) tiga kali dengan cepat.
6. Gunakan lingkaran di layar untuk menonaktifkan area layar tertentu (seperti bagian atas dan bawah untuk mencegah gestur).
7. Ketuk Mulai di pojok kanan atas.

C. Jailbreak (Tidak Disarankan):

Secara teoritis, jailbreak (membuka kunci sistem operasi iOS) memungkinkan Anda untuk melakukan modifikasi yang lebih mendalam, termasuk menyembunyikan Home Indicator secara permanen. Namun, jailbreak memiliki banyak risiko keamanan dan dapat membatalkan garansi perangkat Anda. Oleh karena itu, jailbreak tidak disarankan.

3. Menghilangkan Navigation Bar di Website: CSS dan JavaScript

Di website, menghilangkan navigation bar (yang dalam konteks ini lebih merujuk pada menu navigasi) adalah hal yang umum dan dapat dilakukan dengan mudah menggunakan CSS dan JavaScript.

A. CSS: display: none; atau visibility: hidden;

Cara paling sederhana untuk menyembunyikan navigation bar adalah dengan menggunakan properti CSS display: none; atau visibility: hidden;.

• display: none; akan menghapus elemen dari tata letak halaman sepenuhnya, seolah-olah elemen tersebut tidak ada.
• visibility: hidden; akan membuat elemen menjadi tidak terlihat, tetapi tetap menempati ruangnya dalam tata letak.

Contoh:

<nav id="navbar">
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang Kami</a></li>
    <li><a href="#">Layanan</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

<style>
#navbar {
  display: none; /* Atau visibility: hidden; */
}
</style>

B. JavaScript: Mengubah Properti CSS Secara Dinamis

Anda dapat menggunakan JavaScript untuk menyembunyikan atau menampilkan navigation bar secara dinamis berdasarkan kondisi tertentu, seperti ukuran layar, status login pengguna, atau interaksi pengguna.

Contoh:

<nav id="navbar">
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang Kami</a></li>
    <li><a href="#">Layanan</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

<script>
window.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    document.getElementById('navbar').style.display = 'none';
  } else {
    document.getElementById('navbar').style.display = 'block';
  }
});
</script>

Kode ini akan menyembunyikan navigation bar saat pengguna menggulir halaman ke bawah lebih dari 100 piksel dan menampilkannya kembali saat pengguna menggulir ke atas.

4. Pertimbangan Desain Pengalaman Pengguna (UX)

Sebelum menghilangkan navigation bar, penting untuk mempertimbangkan dampak pada pengalaman pengguna (UX). Navigation bar adalah alat navigasi yang penting, dan menghilangkannya dapat membuat pengguna kesulitan untuk berpindah antar halaman atau fitur aplikasi/website.

• Pertimbangkan Alternatif: Jika Anda menghilangkan navigation bar, pastikan untuk menyediakan cara alternatif bagi pengguna untuk bernavigasi, seperti tombol kembali, gestur, atau menu hamburger.
• Uji dengan Pengguna: Uji desain Anda dengan pengguna untuk memastikan bahwa mereka dapat bernavigasi dengan mudah tanpa navigation bar.
• Gunakan dengan Bijak: Hilangkan navigation bar hanya jika benar-benar diperlukan untuk meningkatkan pengalaman pengguna, seperti dalam game atau aplikasi media imersif.

5. Menyembunyikan Navigation Bar Secara Bersyarat

Seringkali, Anda mungkin hanya ingin menyembunyikan navigation bar dalam keadaan tertentu. Ini dapat dilakukan dengan kombinasi CSS dan JavaScript. Contohnya, Anda mungkin ingin menyembunyikan navigation bar hanya pada perangkat seluler atau hanya saat aplikasi berada dalam mode fullscreen.

A. Menggunakan Media Queries CSS:

Media queries memungkinkan Anda menerapkan gaya CSS yang berbeda berdasarkan karakteristik perangkat, seperti ukuran layar.

@media (max-width: 768px) { /* Ukuran layar seluler */
  #navbar {
    display: none;
  }
}

B. Menggunakan JavaScript untuk Mendeteksi Ukuran Layar:

Anda dapat menggunakan JavaScript untuk mendeteksi ukuran layar dan menyembunyikan navigation bar jika ukuran layar memenuhi kriteria tertentu.

if (window.innerWidth <= 768) {
  document.getElementById('navbar').style.display = 'none';
}

6. Masalah yang Mungkin Timbul dan Solusinya

Menyembunyikan navigation bar dapat menimbulkan beberapa masalah, terutama terkait dengan navigasi dan aksesibilitas.

• Kehilangan Konteks: Pengguna mungkin kehilangan konteks tentang di mana mereka berada dalam aplikasi/website. Pastikan untuk memberikan umpan balik visual yang jelas tentang posisi pengguna.
• Kesulitan Bernavigasi: Tanpa navigation bar yang jelas, pengguna mungkin kesulitan menemukan cara untuk kembali atau berpindah ke halaman lain. Pastikan untuk menyediakan tombol kembali yang jelas atau mekanisme navigasi alternatif lainnya.
• Masalah Aksesibilitas: Pengguna dengan disabilitas mungkin kesulitan menggunakan aplikasi/website tanpa navigation bar yang jelas. Pastikan untuk menyediakan alternatif yang dapat diakses untuk pengguna dengan disabilitas, seperti navigasi keyboard atau pembaca layar.

Dengan mempertimbangkan masalah-masalah ini dan menerapkan solusi yang tepat, Anda dapat menghilangkan navigation bar tanpa mengorbankan pengalaman pengguna.