Menggunakan ActionBar di Android

Pendahuluan

ActionBar, kini dikenal dengan nama App Bar, adalah elemen navigasi konsisten yang menjadi standar aplikasi Android modern. ActionBar dapat terdiri dari:

• Sebuah ikon aplikasi
• Sebuah "tombol kembali"
• Nama activity atau aplikasi
• Ikon untuk sebuah activity
• Navigasi konsisten (termasuk navigation drawer)

Perlu di catat sebelum version 3.0, belum ada ActionBar. Pada tahun 2013, Google mengumumkan sebuah support library yang memberikan compatibility lebih baik untuk versi lama serta dukungan untuk antarmuka menggunakan tab. Karena contoh-contoh di bawah ini akan bergantung pada support library, pastikan untuk mengimpor AppCompat library.

Belajar Membuat Aplikasi Android dari 10 Aplikasi Open Source Ini

Dasar-dasar ActionBar

Setiap aplikasi akan memiliki ActionBar (kecuali jika memang ditiadakan) secara otomatis. Saat ini, ActionBar otomatis sudah memberikan nama Activity yang aktif di judulnya.

Mengubah Judul ActionBar dengan Nama Activity

Judul ActionBar yang ditampilkan di atas layar diatur oleh AndroidManifest.xml. Pada contoh di bawah ini, activity bernama "FirstActivity" memiliki sebuah ActionBar dengan nilai yang ada di @string/activity_name. Jika nilai dari string tersebut adalah "Foo", maka judul yang ditampilkan di ActionBar untuk activity ini akan menajdi "Foo". Perhatikan bahwa elemen application dapat diberikan atribut android:label yang akan memberikan judul default jika activity atau komponen lain tidak meiliki label.

<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
        <activity
            android:name="com.codepath.example.simpleapp.FirstActivity"
            android:label="@string/activity_name" >
        </activity>
</application>

Ubah android:label atau android:icon untuk mengatur judul atau ikon ActionBar untuk activity yang aktif atau untuk aplikasi secara keseluruhan. Di file Java activity, kita juga dapat memanggil getSupportActionBar() untuk mengambil referensi ke ActionBar dengan memodifikasi atau mengakses properti ActionBar saat program berjalan:

ActionBar actionBar = getSupportActionBar(); // or getActionBar();
getSupportActionBar().setTitle("My new title"); // set the top title
String title = actionBar.getTitle().toString(); // get the title
actionBar.hide(); // or even hide the actionbar

Menampilkan Gambar Ikon ActionBar

Di material design guidelines Android 5.0, penggunaan ikon di ActionBar sudah tidak disarankan lagi. Meskipun kita masih bisa menampilkannya dengan cara:

getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);
getSupportActionBar().setDisplayUseLogoEnabled(true);

Yang menghasilkan:

Menambahkan Action Items

Untuk menambahkan action ke Actionbar, kita perlu menambahkannya di menu activity dan bila sudah diatur dengan bear, maka ia akan tampil sebagai ikon di kanan atas.

Sebuah activity akan mengisi ActionBar dari dalam method onCreateOptionsMenu():

public class MainActivity extends AppCompatActivity {
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Membaca file menu dan menambahkan isinya ke action bar jika ada.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
}

Isi dari sebuah ActionBar pada umumnya disebut action. Gunakan method di atas berikut untuk membuat action dari menu yang ada di dalam fileres/menu/menu_main.xml:

<!-- Menu file for `activity_movies.xml` is located in a file 
     such as `res/menu/menu_movies.xml`  -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/miCompose"
        android:icon="@drawable/ic_compose"
        app:showAsAction="ifRoom"
        android:title="Compose">
    </item>
    <item
        android:id="@+id/miProfile"
        android:icon="@drawable/ic_profile"
        app:showAsAction="ifRoom|withText"
        android:title="Profile">
    </item>
</menu>

Perhatikan juga bahwa kita perlu menambah namespace xmlns:app agar dapat menggunakan atribut showAsAction. Alasannya karena compatibility library digunakan agar opsi showAsAction="ifRoom" dapat bekerja. Opsi ini dibutuhkan untuk menampilkan action sebagai sebuah ikon. Jika tidak ada ruangan yang cukup untuk ditampilkan di actionbar, ia akan tampil di menu overflow (titik tiga). Apabila kita juga memberikan atribut withText maka akan muncul teks bersamaan dengan ikon yang ditampilkan.

Kode di atas akan menampilkan dua ikon:

Catatan: kode xml di atas membaca gambar dari @drawable/ic_compose dan @drawable/ic_profile sehingga kedua gambar tersebut harus ada agar program berjalan. Untuk membuat gambar ikon ActionBar, pastikan untuk menggunakan Asset Studio di Android Studio. Klik kanan pada folder res/drawable/ lalu pilih New > Image Asset.

Menangani Klik di ActionBar

Ada dua cara untuk menangani klik pada sebuah item ActionBar. Cara pertama menggunakan android:onClick di menu XML seperti saat menambahkan klik pada Button:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item1"
        android:icon="@drawable/ic_compose"
        android:onClick="onComposeAction"
        app:showAsAction="ifRoom"
        android:title="Compose">
    </item>
</menu>

Lalu membuat method onComposeAction di activity yang membaca file menu tersebut:

public class MainActivity extends AppCompatActivity {
  public void onComposeAction(MenuItem mi) {
     // pengecekannya di sini
  }
}

Cara yang kedua ialah dengan menggunakan method onOptionsItemSelected(). Memanfaatkan obyek MenuItem yang dikirim ke method ini, kita bisa menentukan item apa yang diklik dengan memeriksa nilai getItemId(). Method ini mengembalikan ID unik dari atribut id di menu XML sehingga kita bisa melakukan aksi tertentu saat salah satu id menu dipilih:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items
    switch (item.getItemId()) {
        case R.id.miCompose:
            composeMessage();
            return true;
        case R.id.miProfile:
            showProfileView();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

Mengenal ToolBar

ToolBar dipekenalkan saat Android Lollipop versi API 21 dirilis sebagai penerus ActionBar. ToolBar adalah sebuah ViewGroup yang dapat ditempatkan di mana saja di dalam sebuah layout. Tampilan ToolBar dapat diatur dengan lebih mudah dibanding ActionBar.

ToolBar bekerja dengan sangat baik untuk aplikasi yang menargetkan API 21 ke atas. Meskipun begitu, Android telah memperbarui AppCompat support libraries sehingga ToolBar dapat dipakai di sistem operasi Android versi lama. Artikel selanjutnya akan membahas ToolBar dan perbedaan-perbedaannya dengan ActionBar.

Diterjemahkan dari Defining The ActionBarEdit PagePage History