MEMBANGUN GRAPHICAL USER INTERFACE

•  Membangun Aplikasi Pengalih Mode Silent 
•  Merancang Layout 
•  Membangun Antarmuka Pengguna 
•  Menambahkan Image dan Button
--------------------------------------------------------------------------------------------------------------------------

1.  Buatlah sebuah project android baru dengan aturan sebagai berikut:
Project Name  : PengalihModeSilent
Application Name : PengalihModeSilent  
Contents    : default
Build Target  : Android 2.2
Package Name  : emha.android.pengalihmodesilent
Create Activity  : MainActivity
Min SDK Version  : 8

2.  Buka file main.xml di folder res -> layout

Default-nya  yang  akan  muncul  adalah  Visual  Designer  dari  main.xml,  klik  pada  tab
main.xml dibagian bawah.

Default Deklarasi XML

 Baris  pertama  menunjukan  deklarasi  file  xml.  Memberikan  informasi  tipe  file  tersebut 

terhadap editor. 

Tipe Layout 

Baris  selanjutnya  diatas  menunjukan  tipe  Layout  yang  digunakan,  dalam  hal  ini  adalah 

LinearLayout (akan dibahas lebih lanjut nanti). 

 View 

Baris  selanjut  menunjukan  blok  untuk  view,  yaitu  blok  dasar  pembangun user  interface. 

Dalam hal ini adalah sebuah TextView. 

3.  Dari  main.xml,  hapus  bagian  view  (TextView)  yang  ada.  Sehingga  main.xml  secara 

keseluruhan akan menjadi sbb:

4.  Tambahkan (tarik) image yang akan digunakan kedalam folder res drawable-mdpi

                            phone_on.png > untuk mode telepon regular 
                            phone_silent.png > untuk mode telepon silent 

5.  Tambahkan image ke dalam Layout
Dilakukan dengan mengetikkan kode tambahan di main.xml sehingga menjadi sbb:

6.  Tambahkan (tarik) icon untuk aplikasi ke project, res drawable-mdpi

7.  Tambahkan button ke dalam main.xml, menjadi sbb:

8.  Coba tampilkan Visual Designer

9.  Atur Run Configuration
10. Jalankan Aplikasi PengalihModeSilent

11. Buka file MainActivity.java di folder src => emha.android.pengalihmodesilent

12. Kita akan mencoba membuat event handler pertama, yang menangani jika button di klik
Tambahkan kode program sbb :

13. Tanda cross merah di kiri pinggir menunjukan terdapat error pada baris kode
bersangkutan.
14. Hal ini terjadi dikarenakan object Button dan View belum dikenali.
Pada tanda cross merah, klik kemudian klik import untuk menambahkan library

15. Pada bagian atas kode, akan terdapat beberapa tambahan import sbb:

16. Untuk selanjutnya agak manajemen kode program menjadi lebih baik, maka kita ubah,
dengan menempatkan kode program dengan fungsi tertentu dalam satu paket method

17. Untuk selanjutnya kita akan coba bekerja dengan audio service dan pengaturan mode.
Lengkapi kode program menjadi sbb:

18. Jalankan aplikasi

Klik Button 

Terima Kasih atas Kunjungannya :)