Ketika kita membuat sebuah proyek baru dengan pola Empty Activity, Blank Activity, atau Blank Activity with Fragment, Eclipse akan secara otomatis menambahkan metode untuk mengelola menu, sekaligus membuatkan sebuah berkas xml untuk desain menu, yang dapat Anda lihat di <nama_proyek>\res\menu\main.xml pada panel Package Explorer.
Menu pada Package Explorer
Silakan Anda buka berkas main.xml.
<menu 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"
tools:context="com.myapp.latihan4.MainActivity" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never"/>
</menu>
Secara default, Eclipse sudah membuatkan sebuah menu utama saat proyek dibuat, yaitu menu action_settings. Hanya saja menu ini diset untuk tidak ditampilkan (sembunyi), ini bisa Anda lihat pada pengaturan atribut app:showAsAction=”never”. Mari kita ubah sedikit skripmain.xml ini.
<menu 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"
tools:context="com.myapp.latihan4.MainActivity" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
android:icon="@drawable/abc_ic_menu_moreoverflow_normal_holo_dark"
app:showAsAction="ifRoom"/>
</menu>
Bisa Anda lihat bahwa saya mengubah nilai atribut app:showAsAction dari never menjadi ifRoom. Tersedia lima buah konstanta nilai yang dapat Anda gunakan, yaitu:
- never, menu tidak akan ditampilkan
- always, menu akan selalu ditampilkan
- ifRoom, menu akan ditampilkan jika tersedia ruang untuk menampilkan menu pada ActionBar
- withText, menu (khusus menu utama) ditampilkan dengan dilengkapi teks.
- collapseActionView, menu dapat diperluas (expand) dan dipersempit (collapse), ini biasanya digunakan untuk menu pencarian, di mana aplikasi akan menampilkan kotak teks saat menu diklik
Kedua konstanta terakhir (withText dan collapseActionView) merupakan konstanta opsional yang tidak dapat digunakan sendirian. Artinya Anda harus mengkombinasikan konstanta ini dengan konstanta lain, misalnya: app:showAsAction=”ifRoom|withText” atauapp:showAsAction=”always| collapseActionView”. Kombinasi tidak berlaku untuk konstanta never. Android menganjurkan untuk menggunakan konstanta ifRoom ketimbang menggunakan always, kita ikuti saja.
Bagaimana untuk melihat perubahannya? Silakan jalankan aplikasi Anda!
Tampilan Menu pada Aplikasi
Bisa Anda lihat di ujung kanan atas sudah terdapat ikon berbentuk batang membujur. Itulah menu utama yang baru saja kita tambahkan. Sekarang bagaimana caranya menambahkan sub-sub menu di bawah menu utama? Silakan modifikasi kembali berkas main.xml Anda.
<menu 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"
tools:context="com.myapp.latihan4.MainActivity" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
android:icon="@drawable/abc_ic_menu_moreoverflow_normal_holo_dark"
app:showAsAction="ifRoom" >
<!-- Sub Menu untuk menu Utama 1 -->
<menu>
<item
android:id="@+id/action_open"
android:orderInCategory="100"
android:icon="@android:drawable/ic_input_get"
android:title="Buka"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_add"
android:orderInCategory="100"
android:icon="@android:drawable/ic_input_add"
android:title="Tambah"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_help"
android:orderInCategory="100"
android:icon="@android:drawable/ic_menu_help"
android:title="Bantuan"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_exit"
android:orderInCategory="100"
android:icon="@android:drawable/ic_lock_power_off"
android:title="Keluar"
app:showAsAction="ifRoom" />
</menu>
</item>
</menu>
Jalankan aplikasi untuk melihat hasilnya.
Sub Menu pada Aplikasi
Saat Anda mengklik menu utama, akan ditampilkan empat buah sub menu yaitu Buka, Tambah, Bantuan, dan Keluar. Untuk sementara, saya menggunakan ikon menu bawaan dari Android. Anda bisa saja mengubah ikon menu tersebut dengan ikon yang sesuai dengan keiinginan Anda. Caranya, baca kembali cara menambahkan berkas ikon/gambar pada proyek yang sudah saya bahas pada pembahasan membuat baris pada ListView pada pertemuan sebelumnya. Selanjutnya, ubah atribut android:icon dari tiap-tiap item menu dengan nama berkas ikon/gambar yang sudah Anda tambahkan pada proyek, misalnya: android:icon=”@drawable/icon_1″.
Untuk sementara juga, saya menentukan judul menu dengan cara hardcode (menulis teks langsung), ini bisa Anda lihat pada satu contoh:android:title=”Buka”. Seperti sudah dibahas pada pertemuan sebelumnya, hal ini tidak disarankan oleh Android. Sebaiknya Anda menuliskan tiap-tiap string/teks pada berkas referensi string (strings.xml) kemudian memanggilnya sebagai link referensi.
Selanjutnya, saya ingin mengubah sub menu Bantuan agar memiliki sub-sub menu lain diantaranya: Bantuan dan Tentang. Silakan modifikasi kembali berkas main.xml.
<menu 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"
tools:context="com.myapp.latihan4.MainActivity" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
android:icon="@drawable/abc_ic_menu_moreoverflow_normal_holo_dark"
app:showAsAction="ifRoom" >
<!-- Sub Menu untuk menu Utama 1 -->
<menu>
<item
android:id="@+id/action_open"
android:orderInCategory="100"
android:icon="@android:drawable/ic_input_get"
android:title="Buka"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_add"
android:orderInCategory="100"
android:icon="@android:drawable/ic_input_add"
android:title="Tambah"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_help"
android:orderInCategory="100"
android:icon="@android:drawable/ic_menu_help"
android:title="Bantuan"
app:showAsAction="ifRoom" >
<menu>
<item
android:id="@+id/action_help_help"
android:orderInCategory="100"
android:icon="@android:drawable/ic_menu_help"
android:title="Bantuan"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_help_about"
android:orderInCategory="100"
android:icon="@android:drawable/ic_menu_info_details"
android:title="Tentang"
app:showAsAction="ifRoom" />
</menu>
</item>
<item
android:id="@+id/action_exit"
android:orderInCategory="100"
android:icon="@android:drawable/ic_lock_power_off"
android:title="Keluar"
app:showAsAction="ifRoom" />
</menu>
</item>
</menu>
Kita uji coba lagi! Silakan klik menu utama, kemudian klik menu Bantuan.
Tampilan Sub Menu Bantuan pada Aplikasi
Bagaimana, sudah paham cara mendesain menu? Bila sudah, mari kita lanjutkan bagaimana cara mengaktifkan penggunaan menu-menu tersebut. Silakan Anda buka berkas MainActivity.java. Perhatikan penggalan kode berikut yang terdapat di dalam kelas MainActivity.
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
Terdapat dua buah metode untuk memanfaatkan menu pada suatu activity, yaitu:
- onCreateOptionsMenu, digunakan untuk menghubungkan activity dengan berkas desain menu (dalam hal ini main.xml).
- onOptionsItemSelected, digunakan untuk menentukan tindakan yang dilakukan saat menu dipilih/diklik.
Kita akan melakukan perubahan pada metode onOptionsItemSelected, silakan modifikasi kode sumber menjadi seperti di bawah ini.
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//Menentukan aksi saat suatu menu diklik
switch (id){
case R.id.action_help_about:
Dialog dialog = new Dialog(this);
dialog.setTitle("Dibuat oleh Novian Agung");
dialog.show();
return true;
case R.id.action_exit:
//metode untuk mengakhiri aplikasi
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
Untuk sementara, saya baru menambahkan aksi untuk dua buah menu yaitu action_help_about dan action_exit. Saat mengklik menuBantuan->Tentang, saya ingin menampilkan dialog dengan judul Dibuat oleh Novian Agung. Sedangkan saat mengklik menu Keluar, saya ingin mengakhiri aplikasi.
Bila Anda mendapatkan kesalahan saat menuliskan kode, khususnya saat deklarasi variable dialog, silakan lakukan apa yang semestinya Anda lakukan seperti yang sudah sering dibahas pada pertemuan yang lalu.
Mari kita uji coba lagi! Silakan klik menu Bantuan kemudian klik menu Tentang.
Dialog Saat Mengklik Menu Bantuan->Tentang pada Aplikasi
Untuk menutup dialog, klik di sembarang tempat. Coba pula untuk mengklik menu Keluar. Masih ada beberapa menu yang belum kita tambahkan aksi.Kita akan bahas pada artikel selanjutnya sekaligus melanjukan pemrograman database.