Tutorial Membuat Option Bar dan Menu Dropdown di Android Studio

 Mengenal Komponen Toolbar

    Tentu anda sudah tidak asing dengan istilah Toolbar. Pastinya anda yang berkecimpung di dunia per softwera apalagi korban ngoding pasti mengenal baik dengan istilah ini. Istilah ini sering di jumpai di hampir setiap software. Tapi, tahukah anda apa sebenarnya toolbar itu? Yap, Toolbar di android biasa teletak pada bagian header atau footer sebuah desain.

     Toolbar merupakan kumpulan tombol-tombol, icon-icon dan bilah-bilah alat yang dikemas didalam sebuah komponen.  Toolbar biasanya diletakkan pada samping sebuah software. Kebanyakan software meletakkan toolbar di bagian atas, sedangkan pada desain halaman mobile toolbar tidak menutup kemungkinan diletakkan pada bagian bawah, hal ini di maksudkan agar mempermudah user di dalam mengakses menu-menu tool bar tersebut.

 Toolbar di Di Dalam GUI Android

    Android studio telah menyediakan satu komponen yang berfungsi sebagai toolbar pada versi lolipop 21 ke atas. Toolbar merupakan generasi penerus dari ActionBar yang berupa ViewGroup. Jadi dapat diletakkan di mana saja di dalam layout. 

    Penulisan komponen tersebut dapat dilihat seperti berikut:

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
</android.support.v7.widget.Toolbar>

    

    Untuk memasang toolbar ini pastikan android studio sudah support dengan v7.

Persiapan

    Kali ini kita akan membuat sebuah toolbar. Jadi silahkan buat projek baru di android Studio dengan ketentuan seperti berikut

    template projek : Empty Views Activity

    Name Projek : LatihanToolBar

    Language : JAVA/KOTLIN

   Minimum SKD : API 24

    

    Langkah selanjutnya kita akan menonaktifakn ActionBar bawaan android studio. Anda masuk ke root  App->res->value->themes->themes.xml. Buka file themes.xml tambahkan script berikut:

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Base.Theme.LatihanToolBar" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Customize your light theme here. -->
<!-- <item name="colorPrimary">@color/my_light_primary</item> -->
</style>

<style name="Theme.LatihanToolBar" parent="Theme.AppCompat.Light.DarkActionBar"/>
</resources>

    Nah, perhatikan pada bagian Desain , apakah toolbar sudah muncul atau belum? Jika belum anda dapat memunculkannya dengan cara klik icon mata kemudian centang Show System UI. Perhatikan gambar Berikut. 

    NB: Disini saya setting toolbar dengan nama Buku. Anda dapat mengabaikan tampilan buku tersebut.

    Sampai disini kita telah selesai melakukan konfigurasi pada toolbar. Langkah selanjutnya kita akan membuat desain toolbar. Ada beberapa jenis atau cara untuk membuat toolbar seperti berikut:

Membuat Header dengan ToolBar

Nah langkah awal mari kita coba membuat toolbar terletak pada bagian atas halaman mobile kita.  Oke, silahkan ikuti langkah-langkah berikut ini:

1. Pertama-tama buat projek baru dengan name:LatihanToolbar atau apapun yang anda suka. dan language:kotlin /JAVA. Terserah anda sajalah.

2. Sekarang mari kita fokus ke halaman activity_mainnya. Di halaman activity_main.xml tambahkan komponen toolbar seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_light"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

    Di sini kita tambahkan satu komponen dengan nama Toolbar dan kita beri id=toolbar. ID ini akan di panggil pada MainActivity.

3. Selanjutnya tambahkan icon, Title dan Subtitle di dalam toolbar tadi. Lihat scriptnya di bawah ini:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/holo_orange_light"
    app:layout_constraintTop_toTopOf="parent"
    app:navigationIcon="@mipmap/icon"
    app:title="BARINTEK"
    app:subtitle="https://barintek.blogspot.com"/>

    navigationIcon, merupakan attribut yang mengambil sebuah gambar. Di sini kita beri gambar kita dengan nama "icon". Pastikan anda sudah upload sebuah gambar. Langkahnya silahkan lihat tutorial sebelumnya di sini:

    Sedangkan title dan sub Title merupakan attribut yang menampilkan Tema dan sub Tema dan Toolbar kita. Anda dapat merubah jenis warna tulisannya dengan menambahkan perintah berikut:

app:titleTextColor="@color/design_default_color_error"
app:subtitleTextColor="@color/white"

    Bukan hanya warna, font, margin, padding dan lain sebagainya juga dapat anda setting.

    Selain langkah yang ke 3 di atas, anda juga dapat men settingnya di program java/kotlin. Anda dapat melakukan langkah ke 1 dan dua kemudian lakukan langkah berikut:

        Masuk ke halaman MainActivity.java. Di method utama tambahkan beberapa code seperti berikut:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    getSupportActionBar().setTitle("BARINTEK ");
    toolbar.setSubtitle("https://barintek.blogspot.com");
    toolbar.setLogo(R.mipmap.icon);
}

    Sedangkan untuk bahassa kotlin dapat ditulis sebagai berikut:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    setSupportActionBar(toolbar)
    toolbar?.title="BARINTEK"
    toolbar?.subtitle="https//barintek.blogspot.com"
    //jika icon berada di mipmap
    toolbar?.navigationIcon= ContextCompat.getDrawable(this, R.mipmap.icon);
    //Jika disimpan di drawble
    toolbar?.navigationIcon= ContextCompat.getDrawable(this, androidx.core.R.drawable.icon)
}

Jalankan Program. Berikut hasilnya di emulator:

2. Membuat Icon Di Toolbar sebagai Menu

    Salah satu keunggulan dari toolbar adalah menampilkan berbagai icon sebagai menu. Untuk membuat icon sebagai menu silahkan ikuti langkah berikut:

1. Siapkan beberapa icon. Anda dapat menggunakan gambar vector yang sudah disediakan oleh android studio. Langkahnya bisa dilihat pada tutorial upload gambar. Gambar yang disiapkan berupa gambar home, vidio, notife dan profil.

2. Buatlah folder baru di dalam folder res dengan cara klik kanan App->res, pilih New->directory. jika anda menggunakan JAVA, Jika anda menggunakan kotlin anda dapat masuk ke root App=>Res. Klik kanan folder Res => New=> Android Resource Directory.

  

    Isikan nama directory dengan "menu".

3. Klik kanan pada folder menu yang baru anda dibuat kemudain pilih New-> Menu Resource File. Pada halaman Resource silahkan isi File name: "icon_menu" . Kemudian klik OK

    Nah perhatikan pada folder res anda yang ada di sebelah kiri tadi sudah terdapat satu directory bernama menu. Coba klik folder menu tersebut dan akan anda dapati sebuah file bernama icon_menu. Berikut isi dari code icon_menu:

    <?xml version="1.0" encoding="utf-8"?>
        <menu xmlns:android="http://schemas.android.com/apk/res/android">

    </menu>

4. Selanjutnya kita akan menambahkan gambar icon yang sudah kita persiapkan tadi. Di sini kita akan membuat empat buah menu yang terdiri dari menu Home, Vidio, Notive dan profil. Pembuatan masing-masing menu di apit oleh scirpt <item>.  Silahkan lengkapi file icon_menu seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        app:showAsAction="always"
        android:title="Home">
    </item>
    <item
        android:id="@+id/vidio"
        android:icon="@drawable/ic_vidio"
        app:showAsAction="always"
        android:title="Vidio">
    </item>
    <item
        android:id="@+id/notive"
        android:icon="@drawable/ic_notife"
        app:showAsAction="always"
        android:title="Profile">
    </item>
    <item
        android:id="@+id/user"
        android:icon="@drawable/ic_user"
        app:showAsAction="always"
        android:title="Profile">
    </item>
</menu>

    

    showAsACtion merupakan bentuk tampilan dari menu tadi. Apakah menu ditampilkan atau disembunyikan. Ada 3 jenis nilai yang dikandungnya:

• - always => Menu selalu ditampilkan
• - nevers => Menu di tampilkan di dalam bentuk dropdown
• - ifRoom => Jika memungkinkan, maka menu ditampilkan jika tidak di tampilkan dalam bentuk dropdown

    Anda dapat mengganti nilainya dengan salah satu yang disebutkan diatas.

5. Kita akan akses file icon_menu.xml. Silahkan masuk ke  MainActivity. Tambahkan code berikut untuk kode java di dalam method utama:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    getSupportActionBar().setTitle("BARINTEK ");
    toolbar.setSubtitle("https://barintek.blogspot.com");
    toolbar.setLogo(R.drawable.logo);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.icon_menu, menu);
    return true;
}

   

Sedangkan untuk Kotlin:

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.icon_menu, menu)
    return true
}

 Code getMenuInflater().inflate(R.menu.icon_menu, menu);  merupakan perintah untuk mengakses file icon_menu yang ada didalam folder menu. Jika folder yang anda buat bukan dengan nama menu anda dapat mengganti menuadi ...(R.menu.icon_menu, namaFolder).

   6. Terakhir jalankan program. Berikut hasilnya:

Membuat Dropdown Menu di Toolbar

    Pernah lihat tanda titik 3 di bagian samping sebuah toolbar. Bagaimana cara membuatnya? Itu gampang. anda masuk kembali ke file icon_menu.xml. cari atribut  app:showAsAction="always". Ganti nilai always menjadi never. Contoh disini kita akan menjadikan vidio, notife dan profil sebagai menu dropdown. jadi code seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        app:showAsAction="always"
        android:title="Home">
    </item>
    <item
        android:id="@+id/vidio"
        android:icon="@drawable/ic_vidio"
        app:showAsAction="never"
        android:title="Vidio">
    </item>
    <item
        android:id="@+id/notive"
        android:icon="@drawable/ic_notife"
        app:showAsAction="never"
        android:title="Profile">
    </item>
    <item
        android:id="@+id/profil"
        android:icon="@drawable/ic_user"
        app:showAsAction="never"
        android:title="Profile">
    </item>
</menu>

Membuat Link Menus

    Nah, Setelah selesai kita membahas tentang interface toolbar, selanjutnya mari kita bahas tentang cara membuat linknya. Di sini saya contohkan satu saja yaitu di kotlin. Ingatnya di directory menu kita memiliki item dengan id home, vidio, notife dan user. Id item tersebut akan kita panggil kembali. Silahkan tambahkan script program berikut di MainActivity.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    val id = item.getItemId()
    when(id) {
        R.id.home->Toast.makeText(this, "Anda Memilih Home", Toast.LENGTH_LONG).show()
        R.id.vidio->Toast.makeText(this, "Anda Memilih Vidio", Toast.LENGTH_LONG).show()
        R.id.notive->Toast.makeText(this, "Anda Memilih Notive", Toast.LENGTH_LONG).show()
        else->Toast.makeText(this, "Anda Memilih User", Toast.LENGTH_LONG).show()
   }
    return super.onOptionsItemSelected(item)
}

    Selanjutnya bagi anda yang menggunakan java, silahkan ganti when dengan switch Case.

Nah, Itu sekilas tentang Toolbar. Tinggal anda memodivikasi sesuai dengan selera masing-masing.