Beranda
Android Programming

Membuat Statusbar Putih dengan Icon Hitam Pada Android Dengan Native dan Flutter

LATAR BELAKANG

Status bar warna putih dengan icon hitam sering digunakan aplikasi android yang menggunakan style Light UI dipadukan Clean UI ala - ala IOS. Style ini actionbar dan statusbar menggunakan warna yang sama yaitu putih, umumnya android tidak menggunakan style ini karena harusnya statusbar menggunakan warna yang lebih gelap dari actionbar sesuai referensi warnanya yaitu primaryDark. Sebetulnya style ini bisa diterapkan namun terbatas untuk OS minimal Marshmallow.

Setup Android Native Penulis

  1. Menggunakan AndroidX
  2. Menggunakan Material.IO Component bukan Android Design

Setup Flutter Penulis

  1. Menggunakan Flutter 2.10.4
  2. Menggunakan Flutter Material
Agar tidak mengalami masalah sangat disarankan mengikuti setup projek di atas.

PEMBAHASAN

Android Native

Langkah Membuat Statusbar Putih
Caranya sangat mudah ganti warna PrimaryDark menjadi warna putih. Terletak pada colors.xml ubah kode warna menjadi #FFFFFF.
Langkah Membuat Icon Statusbar Hitam

Perlu diingat bahwa cara membuat icon statusbar menjadi hitam diperlukan OS minimal Marshmallow, sehingga cara dibawah ini hanya berlaku untuk OS Marshmallow atau lebih tinggi.

  1. Melalui Java
    Karena hanya bekerja di OS Marshmallow atau lebih tinggi perlu untuk melakukan check version android terlebih dahulu, caranya seperti ini. Pada check version jika OS Marshmallow atau lebih tinggi jalankan kode dibawah ini : 
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
  2. Melalui XML
    Untuk xml gunakan trik folder values dengan tambahan informasi versi, caranya buat folder dengan nama values-v23 kemudian copy-paste file styles.xml ke folder tersebut. Contohnya seperti dibawah ini : 
    Folder Values-V23
    Kemudian pada styles.xml di folder values-v23 tambahkan kode dibawah ini : 
    <item name="android:windowLightStatusBar">true</item>

Android Flutter

Pada Android dengan menggunakan flutter menggunakan code yang sama hanya berbeda penempatan untuk 2 kondisi yaitu dengan AppBar dan tanpa AppBar.

Dengan AppBar
@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            systemOverlayStyle : const SystemUiOverlayStyle(
            statusBarColor: Colors.white,
            statusBarBrightness: Brightness.light,
            statusBarIconBrightness: Brightness.dark,
            ),
        ),
        body : Container();
    );
}
Tanpa AppBar
@override
Widget build(BuildContext context){
    return Scaffold(
        body: AnnotatedRegion<SystemUiOverlayStyle>(
            value: const SystemUiOverlayStyle(
              statusBarColor: Colors.white,
              statusBarBrightness: Brightness.light,
              statusBarIconBrightness: Brightness.dark
            ),
            child : Container()
        )
    );
}

KESIMPULAN

Coba build dan run jika tidak berhasil atau mengalami masalah silakan komen di artikel ini atau hubungi lewat medsos penulis. Sebetulnya value untuk android lolipop ke bawah perlu diatur lagi  agar icon statusbar tidak ilang (warna sama putih dengan statusbar) namun karena tren vendor HP android saat ini mengeluarkan dengan OS terbaru penulis rasa, sekian persen pengguna android Lolipop lupakan saja biarkan icon statusbar ilang.

Saya seorang programmer dengan fokus developer Web dan Android.