Tutorial Android Studio Toolbar dengan Title di Tengah
Saat membuat aplikasi Android dengan Android Studio, kebanyakan aplikasi akan menggunakan komponen Toolbar
untuk menampilkan identitas aplikasi tersebut seperti nama atau gambar ikon. Toolbar
juga menjadi sarana untuk memanfaatkan teknik navigasi Navigation Drawer juga untuk menampilkan options menu.
Saat komponen Toolbar
digunakan, ia akan menampilkan title atau nama aplikasi di bagian sebelah kiri.
Terkadang, ada kebutuhan dimana klien ingin menampilkan nama aplikasi di tengah Toobar
.
Di artikel ini, kita akan belajar bagaimana memenuhi permintaan tersebut.
Menggunakan TextView
Komponen Toolbar
sejatinya adalah kelas yang meng-extends ViewGroup
artinya ia mirip dengan FrameLayout
, LinearLayout
, atau RelativeLayout
yaitu bisa memiliki child view alias anak view. oleh karena itu, kita bisa menyisipkan TextView ke dalam komponen ini.
Sekarang, modifikasi penulisan Toolbar yang tadinya:
menjadi:
Perhatikan dimana />
di tag pembuka di hapus lalu menambah </androidx.appcompat.widget.Toolbar>
di bawah. Selanjutnya kita bisa menuliskan komponen TextView
di dalam nya. Coba run aplikasi untuk melihat hasilnya.
Jika teman-teman perhatikan, kita memiliki dua buah title di sini, satu bawaan Toolbar
dan satu lagi dari TextView
yang baru saja kita tambahkan. Sekarang mari kita sembunyikan title bawaan Toolbar
.
Buka Activity
yang Toolbar
-nya sudah kita modifikasi. Di contoh ini, penulis menggunakan MainActivity
.
Perhatikan kode di baris 10. Kita memanggil method setDisplayShowTitleEnabled
untuk mengatur apakah ingin menampilkan title bawaan Toolbar
atau tidak. Nilai false
akan menyembunyikan dan true
akan menampilkannya.
Meskipun sudah tampil, akan tetapi title yang kita miliki belum tampil layaknya sebuah title. Mari kita perbarui deklarasi XML-nya agar tampil seperti title pada umumnya.
Beruntung, Android sudah memiliki style bawaan yang bisa langsung diterapkan ke TextView
sebelumnya.
Perhatikan baris 8 dimana kita mengaplikasikan style bawaan Android yaituActionBar.Title
untuk mendapatkan ukuran dan gaya teks yang sama seperti title bawaan Toolbar
.
Mudah bukan?