Tutorial Android Studio Toolbar dengan Title di Tengah

Bagus Aji Santoso
3 min readJul 26, 2019

--

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.

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.

Title sudah di tengah

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?

--

--

No responses yet