Junaidi, M.Kom.

Pemerograman Mobile 1 - PSTI

2016

PERTEMUAN 11 MENU

Praktikum 11.1. Membuat Options Menu

Dalam praktikum ini, akan membuat options menu di aplikasi android. Pada smartphone
Android (terdahulu) pada umumnya terdapat 3 tombol fisik, tapi smartphone Android yang
sekarang udah tidak ada tombol fisiknya. Tombol option di kiri, home di tengah dan back di
kanan. Tombol option dapat diberikan tambahan menu, kalau aplikasi yang sedang di
kembangkan memang mempunyai fitur yang lumayan kompleks. Cara membuatnya cukup
mudah, berikut tutorialnya. Ikutilah instruksional berikut :
1. Aktifkanlah project baru, File New Project Android Application Project

2. Klik button Next, sehingga terlihat tampilan seperti berikut :

3. Klik button Next, selanjutnya layar dialog untuk merubah icon

209 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

4. Klik next untuk pembuatan activity

5. Klik Next

6. Tanpa mengubah apapun klik button Finish, perhatikan project explorer Anda

210 Pertemuan 11 Menu

2016

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

7. Aktifkanlah activity_main.xml, /res/layout/activity_main.xml, seperti berikut :

8. Pada bagian bawah, klik tab activity_main.xml, hapuslah seluruh source code,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world"

211 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

tools:context=".MainActivity" />
</RelativeLayout>

kemudian ganti dengan source code berikut :

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>

Jika dilihat pada kode diatas terdapat tag baru yaitu <TabHost> dan
<TabWidget> kedua tag tersebut yang harus ada untuk membuat Tab

9. Aktifkanlah Graphical Layout, berada pada bagian bawah layar

sehingga terlihat seperti berikut :

10. Tab Menu akan lebih menarik apabila disertai dengan icon, pada directory res
buat directory drawable letakkan icon-icon yang akan digunakan pada tab
didirectory tersebut, karena tema kali ini membuta Tab Bike maka iconnya
juga icon Bike, masing-masing tab terdiri dari 2 icon.

Icon

Normal (selected)

Grey (unselected)

Hill
Touring
BMX
a. Buatlah direktori drawable pada /res/, klik kanan pada /res pilih new
Folder, sehingga terlihat layar dialog New Folder pada folder name
ketik drawable, seperti berikut :
212 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

b. Klik button Finish, sehingga pada direktori drawable sudah ada pada
/res, aktifkanlah folder drawable tersebut

c. Carilah file yang mengusung tema bike (dalam praktikum ini), lihatlah
file image berikut ini :

d. Copy-kanlah ketiga file tersebut ke dalam /res/drawable/,

213 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

Ctrl+C, aktifkan eclipse klik kanan pada /res/drawable :

sehingga file tersebut di copikan pada /workplace/Menu1/res/drawable/

11. Setelah icon di copi, selanjutnya dibuat xml untuk masing-masing tab, dan
simpan semua xmlnya didalam directory drawable:
a. Buatlah file ic_tab_hill, klik kanan pada res/drawable , pilih New File,
pada File Name ketik ic_tab_hill.xml, sehingga terlihat seperti berikut :

214 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

b. Klik button finish, selanjutnya ketik source code xml berikut :

c. Buatlah file ic_tab_bmx, klik kanan pada res/drawable , pilih New

File, pada File Name ketik ic_tab_bmx.xml, sehingga terlihat seperti
berikut :

215 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

d. Klik button finish, selanjutnya ketik source code xml berikut :

e. Buatlah file ic_tab_btouring, klik kanan pada res/drawable , pilih New

File, pada File Name ketik
, sehingga terlihat seperti berikut :

216 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

f. Klik button finish, selanjutnya ketik source code xml berikut :

g. Setelah semua icon dan file-file xml selesai dibuat maka directory
drawable akan terlihat seperti dibawah ini

12. Aktifkanlah /Menu1/src/com.tnt.menu1/, didalam folder tersebut akan dibuat file

hillActivity.java, bmxActivity.java, btouringActivity.java.
217 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

a. Klik kanan pada /src/com.tnt.menu1, pilih New File, pada File name ketik

hillActivity.java

b. klik button Finish, selanjutnya ketik source code java berikut :

c. Klik kanan pada /src/com.tnt.menu1, pilih New File, pada File name
ketik bmxActivity.java

218 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

d. klik button Finish, selanjutnya ketik source code java berikut :

e. Klik kanan pada /src/com.tnt.menu1, pilih New File, pada File name
ketik btouringActivity.java

219 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

f.

klik button Finish, selanjutnya ketik source code java berikut :

13. Setelah menyelesaikan ketiga program diatas, maka

Menu1/src/com.tnt.menu1/ terlihat seperti berikut :

220 Pertemuan 11 Menu

2016

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

14. Sekarang mari menyeselesaikan otak dari aplikasi menu buka kembai file
MainActivity.java kemudian isikan dengan kode dibawah ini

221 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

15. Aktifkan AndroidManifest.xml, dengan cara klik double, sehingga terlihat

seperti berikut :

16. Klik tab AdroidManifest.xml, sehingga terlihat source code dalam xml,
lakukanlah perubahan sehingga terlihat seperti tampilan berikut :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tnt.menu1"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk
android:minSdkVersion="13"
android:targetSdkVersion="15" />
222 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".bmxActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
</activity>
<activity android:name=".hillActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
</activity>
<activity android:name=".btouringActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
</activity>
</application>
</manifest>

17. Simpan project Menu1 dengan cara tekan Ctrl + S, jalankanlah program Anda
dengan cara klik kanan pada Menu1 Run As Android Application, lihatlah
hasilnya pada emulator AVD Manager

18. Perhatikanlah gambar yang terpapar pada layar emulator, klik dan perhatikan
hasilnya masing-masing akan menampilkan teks yang berbeda (masih ingat
dimana teks tersebut berada?), ujilah aplikasi menu ini untuk memperoleh
pemahaman yang lebih baik

Sampai disini Anda telah menyelesaikan praktikum 9.1 dengan menghasilkan satu menu
dengan tampilan yang lumayan bagus.
223 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

Praktikum 9.2. Menu Tab

1. Aktifkanlah project baru, File New Project Android Application Project

2. Klik button Next, sehingga terlihat tampilan seperti berikut :

3. Klik button Next, selanjutnya layar dialog untuk merubah icon

224 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

4. Klik next untuk pembuatan activity

5. Klik Next

6. Tanpa mengubah apapun klik button Finish, perhatikan project explorer Anda

225 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

7. Buatlah folder untuk menyimpan icon pada /res dengan nama drawablesehingga
akan ada /res/drawable, klik kanan pada /res

8. Akan ditampilkan layar dialog New Folder, pada folder name ketik drawable, klik
Finish

226 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

9. Carilah file *.png, untuk di jadikan sebagai icon (find di mydocument, atau di
windows), copy-lah tujuh file ke dalam drawable

Klik kanan pada /res/drawable, pilih paste, sehingga terlihat sebagai berikut :

10. Aktifkanlah activity_main.xml, /res/layout/activity_main.xml, seperti berikut :

11. Pada bagian bawah, klik tab activity_main.xml, hapuslah seluruh source code,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

227 Pertemuan 11 Menu

Junaidi, M.Kom. Pemerograman Mobile 1 - PSTI

2016

android:text="@string/hello_world"
tools:context=".MainActivity" />
</RelativeLayout>

kemudian ganti dengan source code berikut :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Single menu item
Set id, icon and Title for each menu item
-->
<item android:id="@+id/menu_bookmark"
android:icon="@drawable/x1"
android:title="Bookmark" />
<item android:id="@+id/menu_save"
android:icon="@drawable/x2"
android:title="Save" />
<item android:id="@+id/menu_search"
android:icon="@drawable/x3"
android:title="Search" />
<item android:id="@+id/menu_share"
android:icon="@drawable/x4"
android:title="Share" />
<item android:id="@+id/menu_delete"
android:icon="@drawable/x5"
android:title="Delete" />
<item android:id="@+id/menu_preferences"
android:icon="@drawable/x6"
android:title="Preferences" />
</menu>

12. Lakukan update pada R.java, dengan cara simpan terlebih dahulu, kemudian
jalankanlah dengan cara klik kanan pada project Menu2 Run As Android
Application, lihatlah hasilnya

228 Pertemuan 11 Menu