BAB 4 Menu 69
4.1 Tujuan Pembelajaran 1. Memahami tentang Menu, baik Option maupun Context Menu dan bagaimana penggunaannya. 4.2 Dasar Teori Sebagaimana halnya aplikasi-aplikasi untuk desktop dan beberapa sistem operasi pada mobile, Android mendukung activity dengan menu-menu aplikasi. Pada Android, ini disebut option menu. Beberapa telepon Android akan memiliki sebuah kunci khusus untuk melakukan pop menu dari option menu, dan beberapa yang lainnya akan menawarkan alternatif untuk men-trigger menu agar muncul, seperti on-screen button, dan sebagainya. Di samping itu, sebagaimana GUI toolkit, Anda dapat membuat context menu untuk aplikasi Android. Pada perangkat mobile, context menu biasanya muncul saat user melakukan tap (mengetuk) dan hold (menahan) pada widget tertentu. 4.2.1 Option Menu Option menu menampilkan informasi yang berhubungan di dalam activity. Menu ini beroperasi dalam satu ataupun dua mode, yaitu icon dan expand. Saat user pertama kali menekan tombol Menu, icon mode akan muncul, menampilkan enam buah menu pilihan yang terletak pada bagian bawah layar. Jika menu memiliki lebih dari enam buah pilihan, maka tombol keenam akan diberi label More. Memilih pilihan More akan mengarah ke mode expand, menunjukkan pilihan yang tersedia tidak terlihat pada menu reguler. Menu tersebut dapat terlihat jika user menggeser pilihan menu reguler. 4.2.2 Context Menu Context menu akan terlihat saat dilakukan tap-and hold pada widget. Berbeda dengan Option Menu (yang dieksekusi hanya sekali dalam satu activity), 70
Context Menu dihilangkan setelah selesai dipanggil atau digunakan. Oleh karena itu, Anda tidak mungkin untuk menahan (hold) pada objek Context Menu secara terus menerus, hanya terdapat satu kesempatan untuk membuild kembali menu tersebut untuk melengkapi kebutuhan activity berbasis on-demand. 71
Workshop 5 Option dan Context Menu A. Tujuan 1. Memahami macam-macam variasi dari XML Layout 2. Memahami penggunaan dari Basic Widget B. Tugas Pendahuluan 1. Pelajari Option dan Context Menu Android C. Percobaan a. Percobaan 1: Menggunakan Option dan Context Menu Langkah 1: Buat project Android baru pada Eclipse Langkah 2: Ketikan kode berikut pada main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <EditText android:id="@+id/edtmess1" android:text="hello World" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="5dp" /> <EditText android:id="@+id/edtmess2" android:text="welcome" android:layout_width="fill_parent" android:layout_height="wrap_content" 72
android:layout_margin="5dp" /> /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="press the MENU key or Long press text-boxes" android:gravity="center_vertical" /> </LinearLayout> Langkah 3: Tambahkan statement berikut pada MenuActivity.java package com.example.menu; import android.app.activity; import android.os.bundle; import android.text.html; import android.text.spanned; import android.view.contextmenu; import android.view.contextmenu.contextmenuinfo; import android.view.menu; import android.view.menuitem; import android.view.view; import android.widget.edittext; import android.widget.textview; public class MenuActivity extends Activity { /** Called when the activity is first created. */ EditText edt1, edt2; Integer[] arraypointsize = {10, 20, 30, 40, 50; @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); edt1 = (EditText)findViewById(R.id.edtMess1); edt2 = (EditText)findViewById(R.id.edtMess2); // you may register an individual context menu for each view registerforcontextmenu(edt1); registerforcontextmenu(edt2); public boolean oncreateoptionmenu(menu menu){ // only one Option menu per activity populatemyfirstmenu(menu); return super.oncreateoptionsmenu(menu); // detect what view is calling and create its context menu 73
@Override public void oncreatecontextmenu(contextmenu menu, View v, ContextMenuInfo menuinfo) { super.oncreatecontextmenu(menu, v, menuinfo); // decide what context menu needs to be made if(v.getid() == edt1.getid()) // create a menu for etmessage1 box populatemyfirstmenu(menu); if(v.getid() == edt2.getid()){ // create a menu for etmessage2 box populatemysecondmenu(menu); private void populatemyfirstmenu(menu menu){ int groupid= 0; int order= 0; //arguments: groupid, optionid, order, title menu.add(groupid, 1, 1, "10 points"); menu.add(groupid, 2, 2, "20 points"); menu.add(groupid, 3, 3, "30 points"); menu.add(groupid, 4, 4, "40 points"); menu.add(groupid, 5, 5, "50 points"); menu.add(groupid, 6, 8, "Red text"); menu.add(groupid, 7, 7, "Green Text"); menu.add(groupid, 8, 6, "Blue text"); //populatemymenu private void populatemysecondmenu(menu menu){ int groupid= 0; int order= 0; //arguments: groupid, optionid, order, title menu.add(groupid, 9, 1, "Bold"); menu.add(groupid, 10, 2, "Italic"); menu.add(groupid, 11, 3, "Normal"); //populatemysecondmenu @Override public boolean oncontextitemselected(menuitem item) { return(applymenuoption(item)); @Override public boolean onoptionsitemselected(menuitem item) { return(applymenuoption(item)); private boolean applymenuoption(menuitem item){ int menuitemid= item.getitemid(); // 1, 2, 3,...11 String strmsg2 = edt2.gettext().tostring(); if(menuitemid<= 5) { // first five option are for setting text size int newpointsize= arraypointsize[menuitemid-1]; edt1.settextsize(newpointsize); 74
edt2.settextsize(newpointsize); else{ // either change color on text1 or style on text2 if(menuitemid== 6) edt1.settextcolor(0xffff0000); // red else if(menuitemid== 7) edt1.settextcolor(0xff00ff00); // green else if(menuitemid== 8) edt1.settextcolor(0xff0000ff); // blue else if(menuitemid== 9) edt2.settext(beautify(strmsg2, "BOLD")); //bold else if(menuitemid== 10) edt2.settext(beautify(strmsg2, "ITALIC")); //italic else if(menuitemid== 11) edt2.settext(beautify(strmsg2, "NORMAL")); //normal return false; //applymenuoption // changing text style using HTML formatting // Spanned is text to which you could add formatting features private Spanned beautify (String originaltext, String selectedstyle){ Spanned answer = null; if(selectedstyle.equals("bold")) answer = Html.fromHtml("<b>"+ originaltext+"</b"); else if(selectedstyle.equals("italic")) answer = Html.fromHtml("<i>"+ originaltext+"</i>"); else if(selectedstyle.equals("normal")) answer = Html.fromHtml("<normal>"+ originaltext+"</normal"); return answer; //beautify Langkah 4: Tekan F11 untuk mendebug aplikasi pada emulator Android Langkah 5: Kemudian, akan muncul output sebagai berikut : 75
Gambar 26 Tampilan Option dan Context Menu Langkah 6 : Lakukan click pada text box atau click [Menu] pada hardware keyboard, maka outputnya adalah : Pada textbox Hello World Pada textbox Welcome Gambar 27 Contoh Tampilan Menu 76
b. Percobaan 2: Menggunakan Option dan Context Menu (lanjut) Langkah 1: Gunakan project Menu pada percobaan sebelumnya Langkah 2: Lakukan replace pada method populatemyfirstmenu() menjadi seperti berikut ini : private void populatemyfirstmenu(menu menu){ int groupid= 0; //arguments: groupid, optionid, order, title MenuItem item1 = menu.add(groupid, 1, 1, "10 points"); MenuItem item2 = menu.add(groupid, 2, 2, "20 points"); MenuItem item3 = menu.add(groupid, 3, 3, "30 points"); MenuItem item4 = menu.add(groupid, 4, 4, "40 points"); //MenuItem item5 = menu.add(groupid, 5, 5, "50 points"); MenuItem item6 = menu.add(groupid, 6, 8, "Red text"); MenuItem item7 = menu.add(groupid, 7, 7, "Green Text"); MenuItem item8 = menu.add(groupid, 8, 6, "Blue text"); item1.seticon(r.drawable.emo_im_angel); item2.seticon(r.drawable.emo_im_cool); item3.seticon(r.drawable.emo_im_crying); item4.seticon(r.drawable.emo_im_foot_in_mouth); // shortcuts using device s keyboard-keypad // on a G1 open slide open the keyboard and // type letter u (same as pressing menu UNO) item1.setshortcut('1', '1'); item2.setshortcut('2', '2'); item3.setshortcut('3', '3'); item4.setshortcut('4', '4'); // adding a sub-menu as fifth entry of this menu //.addsubmenu(intgroupid, intitemid, intorder, CharSequencetitle) int smgroupid= 0; // don't care, same as Menu.NONE int smitemid= 5; // fifth element int smorder= 5; // don't care, same as Menu.NONE SubMenu mysubmenu5 = menu.addsubmenu(smgroupid, smitemid, smorder, "Sub-Menu-CINCO"); mysubmenu5.setheadericon(r.drawable.btn_rating_star_on_pressed); mysubmenu5.seticon(r.drawable.btn_rating_star_on_normal); //.add(intgroupid, intitemid, intorder, CharSequencetitle) MenuItem sub51 = mysubmenu5.add(smgroupid,5,1,"sub Menu 5-1"); MenuItem sub52 = mysubmenu5.add(smgroupid,5,2,"sub Menu 5-2"); MenuItem sub53 = mysubmenu5.add(smgroupid,5,3,"sub Menu 5-3"); //populatemymenu 77
Langkah 5: Kemudian, akan muncul output sebagai berikut : Gambar 28 Contoh Tampilan Awal Menu Langkah 6 : Click pada text box atau click [Menu] pada hardware keyboard, maka outputnya adalah : 78
Gambar 29 Tampilan pilhan menu Langkah 6 : Click pada salah satu menu, misalnya pada [10 points], maka font dalam text box berubah ukurannya sesuai dengan menu : Gambar 30 Tampilan Setelah pilihan menu 79
Langkah 7 : kemudian, terdapat Sub-Menu-Cinco, click, maka akan muncul output sebagai berikut : Gambar 31 Tampilan Submenu Langkah 8 : jika di-click Blue Text, maka teks akan berubah warna menjadi biru, outputnya : Gambar 32 Tampilan setelah pilihan menu 80