Penggunaan Action Bar dan Toolbar di Android

Action bar adalah istilah bagi komponen yang berada dibagian atas sebuah Activity. Di komponen ini kita bisa menginformasikan nama aplikasi, apa halaman yang sedang aktif, terkadang tombol untuk melakukan berbagai aksi seperti kembali ke halaman sebelumnya, atau mengakses fitur lain. Bentuk Action Bar bisa terlihat pada gambar di bawah ini.

Sumber: Stackoverflow
Sumber: Stackoverflow

Kemudian pada rilis Android Lollipop yang mengenalkan konsep Material Design, Google merilis Toolbar. Secara umum Toolbar memiliki konsep yang sama dengan Action Bar namun dengan banyak opsi yang lebih kaya, diantaranya:

  • Navigation button: Bisa berupa up arrow, navigation drawer hamburger button, dll.
  • Logo: Gambar logo yang bisa ditambahkan dan menyesuaikan tinggi Toolbar.
  • Title dan Subtitle: Subtitle bisa menambahkan deskripsi yang lebih lengkap tentang Activity yang aktif.
  • Custom View: Toolbar bisa memiliki custom view di dalamnya, misalnya gambar yang akan menghilang saat aplikasi di scroll.
  • Action menu: Menu yang terletak di ujung Toolbar untuk melakukan aksi yang dinilai penting atau sering dilaukan (filter, search, dsb.)
Sumber: Android Developer
Sumber: Android Developer

Cara Menggunakan Toolbar

Untuk menggunakan Toolbar, tambahkan kode berikut ke layout milik Activity.

<androidx.appcompat.widget.Toolbar
   android:id="@+id/toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Atribut elevation akan memberikan sedikit shadow di bawah Toolbar sehingga membuatnya sedikit melayang. Selanjutnya, panggil method setSupportActionBar() dari dalam method onCreate() Activity yang bersangkutan.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    setSupportActionBar(findViewById(R.id.toolbar))
}

Toolbar secara otomatis akan menggunakan project name yang ada di atribut label di dalam file AndroidManifest.xml.

Jika ingin mengganti title nya, tambahkan kode berikut:

setContentView(R.layout.activity_main)
setSupportActionBar(findViewById(R.id.toolbar))

// tambahkan baris berikut
supportActionBar?.title = "Custom Title"

Comments

Leave a Reply

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