2012 [Pelatihan Pemrograman Android] Safaruddin Hidayat Al Ikhsan, S.Kom, M.Kom Modul Untuk Peserta Pelatihan di Lab TBI, Departemen Teknik Mesin dan Biosistem, IPB 12/21/2012
Lisensi Dokumen: Copyright 2012-2013 Safars Network. Seluruh konten pada dokumen ini dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari pemilik dokumen. [Pelatihan Android] Copyleft Safars Network 2012 Page - 1
Android adalah sistem operasi untuk mobile device yang awalnya dikembangkan oleh Android Inc., Perusahaan ini kemudian dibeli oleh Google pada tahun 2005. Android dibuat berdasarkan kernel Linux yang dimodifikasi. Aplikasi Android ditulis dengan bahasa Java, menggunakan Java Core Libraries. Aplikasi Android dijalankan di atas VM bernama Dalvik Virtual Machine. Pada modul ini akan dijelaskan langkah-langkah membuat aplikasi Android mulai dari instalasi perangkat-perangkat lunak yang diperlukan sampai dapat menjalankan program pada Android device. A. Instalasi Lingkungan Android Komponen yang diperlukan dalam instalasi android adalah sebagai berikut: 1. Installer Java app platform 2. Java JRE 3. Eclipse (berbagai versi) 4. Android-sdk-windows (emulator) 5. ADT Kesemuanya diramu agar dapat saling berkolaborasi menjadi sebuah lingkungan pemrograman berbasis android. Indikator keberhasilan instalasi ini adalah eclipse bisa dijalankan, emulator bisa dijalankan. [Pelatihan Android] Copyleft Safars Network 2012 Page - 2
Agar emulator bisa dijalankan, harus dilakukan integrasi dengan eclipse nya. Langkah konfigurasinya adalah sebagai berikut: Klik menu Help Install new Software, arahkan installasi pada ADT yang telah disiapkan sebelumnya. Setelah diinstall, klik menu Windows Preference, kemudian klik android dan arahkan SDK Location ke tempat penyimpanan SDK yang telah anda disiapkan sebelumnya. Kalau sudah klik apply sehingga muncul varian versi android yang bisa dipergunakan untuk pengembangan aplikasinya. Program siap dipergunakan untuk mengembangkan aplikasi android. B. Modifikasi Program Hello World! Program pertama yang akan dibuat adalah sebuah aplikasi mobile android untuk menampilkan tulisan Hello World! di layar android. Kemudian memodifikasi dengan tampilan tulisan dan gambar. Buatlah project baru klik File New Android Project untuk me mbuat project baru. Berikan nama project latihan1, kemudian pilih Build target pada android 2.3 yang merupakan varian android versi Gingerbread. Versi ini merupakan versi yang bisa menyesuaikan layar android yang beresolusi rendah (versi di bawahnya) maupun resolusi tinggi (versi di atasnya, misalnya untuk tablet). Setelah itu, tentukan nama package nya (disarankan menggunakan tiga level penamaan dengan pemisah DOT, misalnya adalah safars.android.main). Klik finish jika sudah selesai. [Pelatihan Android] Copyleft Safars Network 2012 Page - 3
Perhatikan pada project explorer project (gambar ketiga di atas) yang digunakan, terdapat beberapa folder diantaranya, src, res dll. Program java akan disimpan di folder src dan desain layout anda disimpan pada res layout, sedangkan untuk teks akan disimpan pada res values. Bukalah file main.xml yang ada pada folder res layout main.xml. Secara default setelah project dibuat, maka file main.xml akan berisikan kan program berikut: <?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" > android:id="@+id/txtisi" android:text="@string/hello" android:layout_width="fill_parent" /> </LinearLayout> Perhatikan @string/hello artinya bahwa isi teks akan mengambil pada file string yang diwakili oleh variabel hello. Perlu diketahui bahwa pemrograman java merupakan pemrograman berorientasi object (Object Oriented Programming/ OOP) sehingga setiap [Pelatihan Android] Copyleft Safars Network 2012 Page - 4
komponen diposisikan seperti object yang bisa memiliki parameter-parameter tertentu. Dalam hal ini, layout xml tersebut merupakan lingkungan untuk mendesain, sehingga isi teks perlu ditempatkan pada file yang menampung teks-teks misalnya adalah file strings. Program tersebut apabila dijalankan langsung menggunakan emulator android akan langsung menampilkan halaman yang bertuliskan Hello World!. Oleh karena itu, akan dilakukan modifikasi pada file main.xml tersebut untuk mempelajari widget TextView dan ImageView. Buka folder tempat aplikasi kita dibuat, yaitu folder res, kemudian buatlah folder bernama drawable. Tempatkan salah satu foto berukuran 3x4 cm pada folder drawabel tersebut dengan nama yang mudah misalnya adalah safars.jpg. Kembali ke lingkungan eclipse, refresh lah folder res sehingga sebuah folder drawable yang berisikan image safars.jpg muncul. File yang perlu disiapkan lagi adalah file colors.xml, tempatkan pada folder values. Cara membuatnya adalah klik kanan pada folder values New Android xml files sehingga muncul seperti pada gambar di atas. Ubahlah kode pada file colors.xml tersebut menjadi seperti berikut ini: <?xml version="1.0" encoding="utf-8"?> <resources> <color name="kuning">#e7e013</color> <color name="merah">#ee3e3a</color> </resources> Tambahkan pada file strings.xml menjadi seperti berikut ini: <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">safars</string> <string name="judul_kalimat">latihan Android</string> <string name="isi_kalimat">pelatihan android bersama teman-teman di Lab TBI.</string> <string name="penutup">semoga terus semangat </string> </resources> [Pelatihan Android] Copyleft Safars Network 2012 Page - 5
Ubahlah file main.xml menjadi seperti berikut: <?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" > android:id="@+id/txtjudul" android:text="@string/judul_kalimat" android:layout_width="fill_parent" android:gravity="center_horizontal" android:textsize="22dp" android:textcolor="@color/kuning" android:paddingbottom="10dp" /> android:id="@+id/txtisi" android:text="@string/isi_kalimat" android:layout_width="fill_parent" android:layout_margin="5dp" /> <ImageView android:id="@+id/imgfoto" android:layout_gravity="center_horizontal" android:paddingtop="5dp" android:paddingbottom="5dp" android:src="@drawable/safars" /> android:id="@+id/txtpenutup" android:layout_margin="5dp" android:text="@string/penutup" /> </LinearLayout> Perlu diketahui, dalam eclipse untuk memudahkan pengetikan kode bisa menggunakan kata kunci diikuti dengan menggunakan tombol Ctrl + Space pada keyboard. Apabila dijalankan dalam emulator, makan hasil yang ditampilkan akan seperti pada gambar berikut ini. [Pelatihan Android] Copyleft Safars Network 2012 Page - 6
C. Pembuatan Aplikasi Profil Pada program kedua ini, poin utama yang ingin ditekankan adalah review penggunaan widget ImageView, TextView dan ditambah lagi dengan Button. Button pada prinsipnya sama dengan dua widget sebelumnya. Disamping itu, akan dibahas juga mengenai pengenalan class java untuk activity dengan penggunaan fungsi tertentu misalnya intent. Suatu kelas merupakan sebuah activity yang ada start dan end-nya, ibarat kita mulai bangun di pagi hari dan mengakhirinya sebelum tidur di malam hari. Perpindahan aktivitas di dalam java dijembatani dengan fungsi, yang salah satunya adalah intent. Intent bisa dipergunakan untuk pindah dari halaman pertama ke halaman kedua. Langsung saja, bermodalkan pengetahuan pada latihan sebelumnya, kita buat project android baru. File New Android Project. Berikan nama project sesuai keinginan misalnya adalah safars_profile. Klik next lalu isikan Package name-nya sesuai dengan keyakinan misalnya adalah safars.android.main Setting android bulid target nya dengan android 2.3 (Gingerbread). Klik finish untuk mengakhiri. [Pelatihan Android] Copyleft Safars Network 2012 Page - 7
Buatlah sebuah halaman muka dengan memodifikasi file main.xml. Ingat, pergunakan kembali konten file colors.xml, string.xml, dan penambahan gambar yang diletakkan pada folder drawable. Gambar yang digunakan adalah gambar background. Sesuaikan ukurannya menjadi 320x480 piksel. Persiapkan juga gambar foto untuk kebutuhan halaman biodata. Berikut adalah cuplikan untuk masing-masing file. colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="kuning">#f5f35b</color> <color name="putih">#ffffff</color> <color name="hitam">#000000</color> </resources> strings.xml <?xml version="1.0" encoding="utf-8" standalone="no"?> <resources> <string name="app_name">safar\'s Profile</string> <string name="selamat_datang">- Welcome -</string> <string name="name">apd V 1.0</string> <string name="paten">copyleft 2012. Safar\'s Corporation.</string> <string name="name_singkatan">aplikasi Profil Diri Versi 1.0</string> <string name="btn_biodata">biodata Diri</string> <string name="btn_masadepan">visi dan Misi</string> <string name="btn_home">beranda</string> </resources> main.xml [Pelatihan Android] Copyleft Safars Network 2012 Page - 8
<?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:background="@drawable/bg" android:orientation="vertical" > /> /> android:id="@+id/txtwelcome" android:text="@string/selamat_datang" android:layout_gravity="center_horizontal" android:textsize="34dp" android:textstyle="bold" android:paddingbottom="25dp" android:textappearance="?android:attr/textappearancemedium" android:id="@+id/txtapp" android:text="@string/name" android:textstyle="bold" android:layout_gravity="center_horizontal" android:textsize="30dp" android:textcolor="@color/kuning" android:textappearance="?android:attr/textappearancemedium" android:id="@+id/txtsingkatan" android:layout_gravity="center_horizontal" android:textsize="20dp" android:textcolor="@color/putih" android:paddingtop="10dp" android:text="@string/name_singkatan" /> <ImageView android:id="@+id/imglogo" android:layout_gravity="center_horizontal" android:paddingtop="35dp" android:paddingbottom="25dp" android:src="@drawable/katomic" /> android:id="@+id/txtpaten" android:layout_gravity="center_horizontal" android:textsize="16dp" android:textcolor="@color/putih" android:paddingtop="10dp" android:text="@string/paten" /> dilanjutkan [Pelatihan Android] Copyleft Safars Network 2012 Page - 9
//Lanjutan <RelativeLayout android:id="@+id/relative1" android:layout_width="match_parent" android:layout_margintop="20dp" > <Button android:id="@+id/btnhome" android:layout_alignparentleft="true" android:layout_alignparenttop="true" android:text="@string/btn_home" /> <Button android:id="@+id/btnmasadepan" android:layout_alignparentright="true" android:layout_alignparenttop="true" android:text="@string/btn_masadepan" /> <Button android:id="@+id/btnbiodata" android:layout_alignparenttop="true" android:layout_marginleft="26dp" android:layout_torightof="@+id/btnhome" android:text="@string/btn_biodata" /> </RelativeLayout> </LinearLayout> Hasil dari main.xml adalah sebagai berikut: [Pelatihan Android] Copyleft Safars Network 2012 Page - 10
Buat sekalian halaman biodata.xml Silahkan mendesain halaman biodata sesuai dengan keinginan seperti yang sudah dilakukan pada pembahasan sebelumnya mengenai penggunaan TextView dan ImageView. Bukalah file java pada direktori src pada package yang sudah dibuat sebelumnya, misalnya dalah tutorial ini adalah file SafarsActivity.java. secara default kode programnya adalah sebagai berikut: public class SafarsActivity extends Activity { /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } Buatlah sekalian file Biodata.java dengan klik kanan pada package tersebut, kemudian New Java Class. Layout untuk class biodata ini mengambil layout biodata.xml yang sudah dibuat sebelumnya. Berikut adalah cuplikan default program Biodata.class: public class Biodata extends Activity { /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.biodata); } Sekarang kita sudah memiliki dua buah activity yang merefer pada dua halaman masingmasing yang sudah kita buat sebelumnya. Agar bisa melakukan pindah halaman, kita memerlukan jembatan fungsi pada activity kelas java nya. Hal yang perlu dilakukan adalah melakukan modifikasi fungsi java pada SafarsActivity.java. Tambahkan kode sebagai fungsi untuk pindah halaman menggunakan Intent(). Pergunakan shortcut dalam keyboard untuk mempercepat. Berikut adalah cuplikan program hasil penambahanan kode fungsi pindah halaman. [Pelatihan Android] Copyleft Safars Network 2012 Page - 11
public class SafarsActivity extends Activity { protected Button biodata; /** Called when the activity is first created. */ @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); biodata = (Button)findViewById(R.id.btnBiodata); biodata.setonclicklistener(new View.OnClickListener() { } }); @Override public void onclick(view v) { // TODO Auto-generated method stub pagebiodata(); } public void pagebiodata() { // TODO Auto-generated method stub Intent i = new Intent(this, Biodata.class); startactivity(i); Toast.makeText(this, "Tombol Biodata diklik", Toast.LENGTH_LONG).show(); } } Apabila dirunning, maka hasilnya adalah sebagai berikut: Cobalah dengan mengklik tombol Biodata Diri tersebut, maka akan muncul halaman biodata diri yang sudah dirancang sebelumnya. [Pelatihan Android] Copyleft Safars Network 2012 Page - 12
Ada fungsi untuk mengetahui adanya action terhadap suatu aktivitas. Fungsi dalam kode program yang sudah disajikan sebelumnya adalah fungsi Toast. Tugas dari peserta latihan adalah membuat 3 halaman yang terkoneksi satu sama lain sehingga bisa dilakukan pindah halaman. D. Animasi Pertemuan berikutnya. Safaruddin Hidayat Al Ikhsan, S.Kom., M.Kom 085691701530 / 085217322282 safars.hidayat@gmail.com http://ft.uika-bogor.ac.id/safars http://hipi-isai.org [Pelatihan Android] Copyleft Safars Network 2012 Page - 13