Tutorial Android Studio Toolbar dengan Title di Tengah

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 Drawerjuga untuk menampilkan options menu.

Saat komponen Toolbardigunakan, 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 ViewGroupartinya ia mirip dengan FrameLayoutLinearLayout, atau RelativeLayoutyaitu bisa memiliki child view alias anak view. oleh karena itu, kita bisa menyisipkan TextView ke dalam komponen ini.

Kelas Toolbar meng-extends ViewGroup

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.

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?

Leave a Reply

Your email address will not be published. Required fields are marked *