Cara Membuat Status Bar Android Transparan Lollipop

Cara Membuat Staus Bar Android Transparan - Cara membuat status bar andriod hp kitkat, lollipop menjadi transparan sebernarnya cukup mudah,  anda bisa dengan apktool, gravity box, xblast, bisa juga tanpa robot. Beberapa tips akan kita bagi disini untuk anda yang sedang membutuhkan bantuan terkait dengan cara membuat status bar ui agar terlihat transparan.

Sesuatu yang sangat sederhana, namun sangat kompleks. Di sini kita akan berbicara tentang sesuatu yang mirip dengan kegiatan yang terlihat sangat sederhana dari awal tetapi menjadi rumit segera. Kami akan membangun tata letak layar penuh dengan bilah status transparan. Saya tidak akan berbicara tentang mengapa Anda memerlukan tata letak layar penuh dan dalam situasi apa. Itu topik untuk diskusi lain.

Namun, ini kasus penggunaan yang sederhana. Jika Anda pernah melihat aplikasi apa pun dengan peta (seperti aplikasi naik-memanggil), Anda akan melihat bahwa peta tersebut menempati ruang di bawah bilah status juga. Konten tata letak selain peta tidak tumpang tindih dengan ikon bilah sistem. Bukankah itu terlihat manis?

Baca Juga: Cara Membuat Status Bar Transparan

Jadi, kita akan membuat ulang Status Bar UI menjadi seperti ini:

Cara Membuat Status Bar UI Android Transparan

Tetapkan tema untuk Aktivitas, Mari kita mulai dengan dasar-dasarnya (saya anggap Anda telah membuat suatu Aktivitas dengan peta dan beberapa konten) dan karenanya, mari kita tetapkan tema untuk aktivitas kami:

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar"/>

Dan kemudian menerapkan tema ke aktivitas seperti biasa:

<activity android:name="com.my.app.CustomActivity" android:theme="@style/CustomTheme"> </activity>

Peasy mudah !! Mari kita lihat apa yang kita punya. Jadikan UI layar penuh Sekarang, mari kita ke bagian yang menyenangkan. Bagaimana cara membuat tata letak layar penuh dan mengatur warna bilah status? Mari kita langsung menuju kode, mencobanya di perangkat Anda dan kemudian mari kita memahami apa yang sebenarnya terjadi: Untuk perangkat lolipop di atas:

activity.window.apply { clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS) addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS) decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN statusBarColor = Color.TRANSPARENT }

Apa itu Window? Ketika Anda membuka aplikasi standar apa pun, Anda akan melihat bilah status, bilah navigasi, dan aktivitas aktual. Masing-masing komponen memiliki jendela yang berbeda. Masing-masing komponen diberi jendela untuk menggambar diri mereka.

Aktivitas tersebut diberikan jendela tempat ia menggambar hierarki tampilan yang ditentukan oleh kami. Bilah status diberikan jendela di mana sistem menggambar hal-hal seperti waktu, baterai, ikon pemberitahuan dll. Bilah navigasi juga memiliki jendela berbeda di mana ia menarik tombol kembali, tombol beranda dll.

Semua jendela ini pada satu layar dikelola oleh WindowManager. Apa saja flag berbeda yang dapat Anda terapkan ke sebuah jendela? Jika "FLAG_TRANSLUCENT_STATUS" diaktifkan, bilah status  bar transparan akan ditampilkan yang tidak kami inginkan. Jadi, pertama-tama kita hapus bendera ini. Bendera FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS memberi tahu sistem bahwa jendela kita bertanggung jawab untuk menggambar latar belakang bilah sistem.

Apa itu systemUiVisibility? Dengan menggunakan metode ini, kita dapat mengontrol visibilitas UI sistem yang dibuat oleh sistem. Elemen UI sistem adalah elemen seperti bilah status, bilah naviagtion, dll. SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN membantu menjaga konten agar tidak mengubah ukuran ketika bilah sistem bersembunyi dan ditampilkan saat masuk dan keluar dari mode layar penuh. Saya pikir setStatusBarColor () tidak perlu penjelasan.

Namun, API ini tersedia pada atau di atas API 21. Masalah pada perangkat marshmallow dan di atas: Ikon bilah sistem semuanya berwarna putih yang mungkin tidak terlihat bagus jika skema warna umum pada tata letak Anda juga ringan. Bagaimana memperbaikinya? Sekali lagi, setSystemUiVisibility untuk menyelamatkan. SYSTEM_UI_FLAG_LIGHT_STATUS_BAR memastikan bahwa ikon bilah status digambar sedemikian rupa sehingga sepenuhnya terlihat dalam mode cahaya.

window.apply { decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR }

Keren..jadi, sekarang bilah status kami terlihat cukup bagus di sebagian besar level API. Tapi tapi .. ada apa dengan Tombol Aksi Mengambang. Orang ini tumpang tindih dengan ikon bilah sistem dan UI semacam ini membuat saya sebagai pengguna tidak nyaman. 

Jadi, mari kita perbaiki ini: Geser konten Konten aktual tata letak aplikasi Anda perlu digeser ke bawah agar tidak tumpang tindih dengan ikon bilah status. Ok, apa yang kita butuhkan untuk mengubahnya? Margin .. marginTop akan lakukan. Baik? Tapi sekarang muncul pertanyaan jutaan dolar. 

Bagaimana kita tahu berapa banyak marginTop yang perlu kita berikan untuk tampilan konten? Ada banyak cara untuk melakukan itu tetapi saya akan pergi dengan pendekatan paling pasti yang telah bekerja untuk saya di berbagai perangkat. Insets jendela untuk menyelamatkan .... Apa itu inset jendela? Jendela insets memberi kita ukuran tampilan sistem yang kita perlukan di sini. 

Tampilan sistem yang kita bicarakan di sini adalah bilah status. Jadi, inset jendela atas akan memberi kita margin yang perlu kita terapkan pada konten kita. Bagaimana cara mendapatkan inset dari jendela yang terlihat saat ini?

ViewCompat.setOnApplyWindowInsetsListener( findViewById(R.id.content_container)) { _, insets -> Log.d("topInset", insets.systemWindowInsetTop) Log.d("bottomInset", insets.getSystemWindowInsetBottom) //and so on for left and right insets insets.consumeSystemWindowInsets() }

Sekarang, hanya turun untuk mendapatkan tampilan dan mengatur marginTop di atasnya sama dengan setel atas jendela:

ViewCompat.setOnApplyWindowInsetsListener( findViewById(R.id.content_container)) { _, insets -> val menu = findViewById<FloatingActionButton>(R.id.fab_back_or_menu) val menuLayoutParams = menu.layoutParams as ViewGroup.MarginLayoutParams menuLayoutParams.setMargins(0, insets.systemWindowInsetTop, 0, 0) menu.layoutParams = menuLayoutParams insets.consumeSystemWindowInsets() }

Lihat Ekstensi untuk digunakan kembali Biasanya dalam aplikasi besar, hal-hal seperti ini diulang. Jadi, bukankah lebih baik untuk membuat ekstensi kotlin bermanfaat pada Activity yang dapat kita panggil dari aktivitas apa pun daripada mengulangi kode ini di mana-mana?

fun Activity.makeStatusBarTransparent() { if (Build.VERSION.SDK_INT &amp;gt;= Build.VERSION_CODES.LOLLIPOP) { window.apply { clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS) addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS) if (Build.VERSION.SDK_INT &amp;gt;= Build.VERSION_CODES.M) { decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR } else { decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN } statusBarColor = Color.TRANSPARENT } } } fun View.setMarginTop(marginTop: Int) { val menuLayoutParams = this.layoutParams as ViewGroup.MarginLayoutParams menuLayoutParams.setMargins(0, marginTop, 0, 0) this.layoutParams = menuLayoutParams }

Dan semua yang perlu kita lakukan dalam Aktivitas apa pun adalah:

makeStatusBarTransparent() ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.content_container)) { _, insets -> findViewById<FloatingActionButton>(R.id.fab1).setMarginTop(insets.systemWindowInsetTop) findViewById<FloatingActionButton>(R.id.fab2).setMarginTop(insets.systemWindowInsetTop) insets.consumeSystemWindowInsets() }

Contoh aplikasi Android menggunakan konsep-konsep ini dapat ditemukan. Dari kalian sekalian bisa jadi lebih paham terkait dengan pembahasan di atas.  Mungkin sekian yang dapat kami sampaikan terkait dengan Cara Membuat Status Bar Android Transparan. Jika kalian ingin update tentang artikel yang berkaitan dengan teknologi kalian dapat mengunjungi artikel kami yang lainya, sekian dan terimakasih.