TUTORIAL APLIKASI ANDROID COOL HELLO WORLD

Transkripsi

1 TUTORIAL APLIKASI ANDROID COOL HELLO WORLD TUTORIAL ANDROID 1. Pendahuluan Tutorial aplikasi android CoolHelloWorld adalah suatu tutorial yang akan memberikan suatu petunjuk pembuatan aplikasi CoolHelloWorld. Aplikasi CoolHelloWorld adalah suatu aplikasi sederhana yang akan menerima suatu input dari user lalu menampilkannya pada layar. Sebagai suatu batasan kita akan membatasi panjang string yang diperbolehkan yaitu Langkah Pembuatan 1. Buka Eclipse yang telah terinstalasi dengan baik pada laptop/pc anda. 2. Pilih meny File New Project Android. Pilih Android Application Project lalu tekan Next. 3. Jendela pembuatan aplikasi baru akan muncul seperti di bawah ini, 4. Isi field Application Name dan Project Name dengan CoolHelloWorld. Field Package Name akan terisi dengan sendirinya namun jika anda berniat untuk mengunggah aplikasi anda pada Android Market maka package name kalian tidak diperbolehkan ATA HALAMAN 1 DARI 11

2 menggunakan awalan seperti com.example, com.android dan lainnya. Kalain dapat memberikan nama lain yang menurut kalian unik untuk Package Name aplikasi kalian. 5. Pilih Build SDK dan Minimum Required SDK aplikasi Anda. Kedua hal tersebut menentukan batasan batasan yang dapat dilakukan oleh Aplikasi anda. Sebagai contoh pada aplikasi ini saya menggunakan Build SDK : Android 4.1 dan Minimum Required SDK : API 8 Android 2.2. Untuk pembuatan aplikasi CoolHelloWorld ini anda dapat menggunakan Build SDK dan Minimum Required SDK secara bebas karena aplikasi CoolHelloWorld tidak membutuhkan spesifkasi secara khusus. Lalu tekan Next. 6. Jendela Configure Launcher Icon akan muncul. Pada jendela ini anda akan melakukan pengaturan Ikon aplikasi anda. Tentukan ikon anda lalu tekan Next. ATA HALAMAN 2 DARI 11

3 7. Jendela Create Activity akan muncul seperti di bawah ini, untuk pemula sebaiknya kita memilih BlankActivity lalu tekan Next. 8. Jendela BlankActivity akan muncul, isi field Activity Namedan Tittle dengan Cool- HelloWorld lalu tekan Finish. ATA HALAMAN 3 DARI 11

4 9. Halaman kerja anda akan muncul seperti di bawah ini, halaman kerja anda yang akan muncul pertama kali adalah file activity_cool_hello_world.xml. Pada activity_cool_hello_world.xml anda akan diberikan suatu layar/halaman device yang menggambarkan aplikasi anda. 10. Klik pada bagian Hello World pada halaman kerja anda. Lalu hapus tulisan tersebut dengan menekan delete. Sehingga halaman kerja anda menjadi kosong seperti di bawah ini, ATA HALAMAN 4 DARI 11

5 11. Pada bagian kiri terdapat kolom pallete yang menyediakan berbagai macam kebutuhan yang dibutuhkan oleh seorang developer seperti button, textfield, images danlainnya. 12. Pilih pada kolom pallete tab Text Field, pada tab tersebut akan diberikan beberapa jenis pilihan Text Field, pilih Text Field untuk Person Name / Multiline Text lalu drag ke dalam halaman kerja anda seperti gambar di bawah ini, 13. Pada menu bar diatas halaman kerja terdapat pilihan Toogle Width untuk membuata Text Field yang kita buat sebelumnya menjadi merentang lebar. Pada menu bar tersebut juga terdapat fungsi untuk mengatur margin dari Text Field tersebut, kita atur sehingga hasilnya kurang lebih seperti di bawah ini, ATA HALAMAN 5 DARI 11

6 14. Pilih pada kolom pallete tab Form Widget. Pada tab tersebut akan diberikan beberapa form widget yang tersedia. Pilih Button lalu drag ke dalam halaman kerja anda, seperti gambar di bawah ini, 15. Lakukan hal yang sama pada Button yang baru anda drag seperti Text Field sebelumnya. 16. Klik kanan pada button tersebut lalu pilih Edit Text ubah teks pada button dari Button menjadi Change. 17. Tambahkan kembali sebuah button dengan pengaturan yang sama sebagaimana button dan text field sebelumnya.lalu ubah teks pada button tersebut menjadi Clear. Sehingga halaman kerja anda kurang lebih menjadi seperti di bawah ini. ATA HALAMAN 6 DARI 11

7 18. Pilih pada kolom pallete tab Form Widget. Pada tab tersebut akan diberikan beberapa form widget yang tersedia, pilih Large Text lalu drag ke dalam halaman kerja anda. 19. Klik kanan pada Large Text tersebut pilih Edit Text, ganti teks tersebut menjadi Hello World, lakukan pengaturan yang sama sesuai dengan Button atau Text Field sebelumnya. Sehingga halaman kerja anda akan seperti di bawah ini, 20. Klik kanan pada Large Text tersebut lalu pilih Eedit TextSize lalu atur ukuran tekstersebut menjadi 32dp. 21. Pada kolom kanan halaman kerja terdapat sebua tabel Properties, anda dapat mengatur warna teks sesuai dengan yang anda inginkan. Eclipse menerima kode warna dalam RGB dengan diawali # sebagai contoh pada tutorial kali ini saya atur Text- Color menjadi # atau warna hijau ATA HALAMAN 7 DARI 11

8 22. Pada sebelah kiri halam kerja terdapat kolom Package Explorer, klikfolder src, lalu klik dua kali pada file CoolHelloWorld.java 23. Pada halaman kerja anda akan muncul tab baru yaitu CoolHelloWorl.java seperti di bawah ini, ATA HALAMAN 8 DARI 11

9 24. Seluruh button, text field dan text pada activity_cool_hello_world.xml perlu diatur dalam CoolHelloWorld.java. Hal tersebut dibutuhkan untuk mengatur perilaku dari masing masing button, text field dan text tersebut. 25. Tambahkan potongan kode dibawah ini pada method OnCreate pada CoolHelloWorld.java : EditText text_source = (EditText) findviewbyid(r.id.edtttext1); Button btn_change = (Button) findviewbyid(r..id.button1); Button btn_clear = (Buttonn) findviewbyid(r.id.button2); TextView output_text = (TextView) findviewbyid(r.id.textview1); Sehingga hasilnya seperti di bawah ini, 26. Kode - kode diatas hanya berfungsi untuk mendeklarasikan pengatur - pengatur dari setiap widget yang kita buat. Sekarang kita akan membuatpengubah atau eksekutor dari setiap event/kejadian yang terjadi pada aplikasi kita. Aplikasi yang kita buat kali ini hanya akan melakukan suatu eksekusi jika tombol "Change" atau tombol "Clear". 27. Kita akan membuat sebuah eksekutor/listener untuk menjalankan suatu perintah logis ketika tombol "Change" ditekan. Saat tombol "Change" ditekan makan hasil yang kita inginkan adalah teks yang kita punya akan berubah menjadi teks yang sesuai dengan yang user masukan. Untuk dapat melakukan hal ini kita memerlukan suatu variabel string untuk menyimpan teks yang terdapat pada text field yang kita miliki. Kodenya seperti dibawah ini private String source ; ATA HALAMAN 9 DARI 11

10 28. Untuk membuat sebuah eksekutor atau listener dari suatu event kita perlu membuat suatu method listener pada method oncreate pada CoolHelloWorld.java seperti di bawah ini, 29. Tambahkan kode untuk mengambil teks dari Text Field yang telah kita buat seperti di bawah ini, source = text_source.gettext()..tostring(); 30. Sesuai dengan penjelasan sebelumnya kita ingin membatasi jumlah karakter yang dapat ditampilkan yaitu 15 karakter. Tambahkan kode di bawah ini, kode dibawah ini akan menentukan apakah aplikasi akan menampilkan input dr user atau tidak. if(source.length > 15) { output_text.settext( too long ); } else { outputt_text.settext(source); } ATA HALAMAN 10 DARI 11

11 31. Sehingga listener untuk tombol change kurang lebih seperti di bawah ini, btn_clear.setonclicklistener(new View.OnClickListener(){ public void onclick(view v){ } }); source = text_source.gettext()..tostring(); if(source.length > 15) { output_text.settext( too long ); } else { } outputt_text.settext(source); 32. Setelah membuat eksekutor/listener untuk tombol "Change" kita akan membuat eksekutor/listener untuk tombol "Clear". Eksekutor untuk tombol "Clear" lebih sederhana di bandingkan "Change" kita cukup tambahkan kode seperti dibawah ini, btn_clear.setonclicklistener(new View.OnClickListener(){ public void onclick(view v){ output_text.settext(""); } }); 33. Selamat aplikasi anda telah berjalan dengan sempurna, terima kasih telah mengikuti tutorial kali ini, semoga bermanfaat. Revisi Terakhir : Copyright 2012 by SOSP12. all rights reserved. This material may be freely copied and distributed subject to inclusion of this copyright notice and our World Wide Web URL ATA HALAMAN 11 DARI 11