Cara Mengatasi Bug Ukuran AppBar & Teks Selalu Muncul pada Scrolling Layout

Ketika menggunakan template Scrolling Views Activity pada Android Studio terbaru, by default kalian akan menemukan bug seperti ini.

Ukuran App Bar terpotong sehingga kelihatan aneh. Nah, bagaimana cara mengatasinya, checkitout~

Fix Ukuran App Bar

Untuk mengetasinya cukup simpel, problem ini terjadi karena ada attribute fitSystemWindow yang bernilai true. fitSystemWindow adalah attribute yang digunakan supaya komponen bisa memenuhi layar, untuk itulah kalau kita lihat ukuran dari App Bar sudah benar, hanya saja diukur dari status bar. Alhasil tampilannya jadi aneh.

Nah, untuk memgatasinya, cukup bah fitSystemWindow menjadi false

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:context=".ui.detail.DetailEventActivity">

Alhasil tampilan menjadi seperti ini.

Ukuran app bar sudah normal dan teks judul sudah terpotong. Yeay!

Selanjutnya, kalau dilihat dilihat tampilan tersebut kurang estetik, karena ada judul yang menutupi gambar yang rame juga sehingga informasi tidak terbaca. Nah, sebagai bonus, kita akan mencoba membuat teks tersebut tidak ada ketika di-expand. Let’s go!

Menghilangkan Teks Judul

Di awal, mungkin kamu berpikir cukup dengan mengubah judulnya aja seperti ini

binding.toolbarLayout.title = " "

Jika seperti itu, judul memang muncul, tapi dalam semua kondisi :p

Lalu, bagaimana mengatasinya? Untuk mengatur sesuai kondisi, kita perlu menggunakan addOnOffsetChangedListener untuk membaca posisi appbar seperti ini

var isShow = true
var scrollRange = -1

binding.appBar.addOnOffsetChangedListener { barLayout, verticalOffset ->
   if (scrollRange == -1) {
         scrollRange = barLayout?.totalScrollRange!!
   }
   if (scrollRange + verticalOffset == 0) {
         binding.toolbarLayout.title = user.name.toString()
         isShow = true
   } else if (isShow) {
         binding.toolbarLayout.title = " "
         isShow = false
   }
}

Jadi, ketika scrollRange + verticalOffset = 0 (baca: pas pada posisi seharusnya), maka judul ditampilkan dan selain itu judul akan diganti dengan “ “ .

Alhasil, tampilannya jadi seperti ini.

Okay, sudah sesuai harapan. Mantap!

Semoga bermanfaat ya!

“Even in the Darkest Times, There’s Always Light Waiting to Shine Through” — Fitria Widyani