MODUL PRAKTIKUM REKAYASA APLIKASI BERGERAK OLEH ASISTEN REKAYASA APLIKASI BERGERAK

Transkripsi

1 MODUL PRAKTIKUM REKAYASA APLIKASI BERGERAK OLEH ASISTEN REKAYASA APLIKASI BERGERAK S1 ILMU KOMPUTER JURUSAN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS LAMPUNG 2017

2 Pengenalan Android dan Installasi IDEAndroid Studio Tujuan Instruksional : Pokok bahasan ini menjelaskan tentangpengenalan system operasi android dan installasi IDE Kompetensi yang Diharapkan : 1. Mahasiswa mampu memahami apa itu OS Android 2. Mahasiswa mampu melakukan installasi IDE Android Studio. Waktu Pertemuan : 120 menit 1

3 Apa itu Android? Android merupakan sistem operasi yang dikembangkan untuk perangkat mobile berbasis Linux. Pada awalnya sistem operasi ini dikembangkan oleh Android Inc. Yang kemudian dibeli oleh Google pada tahun Dalam usaha mengembangkan Android, pada tahun 2007 dibentuklah Open Handset Alliance (OHA), sebuah konsorsium dari beberapa perusahaan, yaitu Texas Instruments, Broadcom Corporation, Google, HTC, Intel, LG, Marvell Technology Group, Motorola, Nvidia, Qualcomm, Samsung Electronics, Sprint Nextel, dan T-Mobile dengan tujuan untuk mengembangkan standar terbuka untuk perangkat mobile. Pada taanggal 9 Desember 2008, ia diumumkan bahwa 14 anggota baru akan bergabung Proyek Android, termasuk PacketVideo, ARM Holdings, Atheros Communications, Asustek Computer Inc, Garmin Ltd, Softbank, Sony Ericsson, Toshiba Corp dan Vodafone Group Plc Installasi IDE Android Studio - Instalasi Java Development Kit (JDK) Download melalui URL : - Download Androd Studio Download melalui URL : 2

4 Setelah selesai men-download, cari file Android Studio instalasi executable (bernama android-studio-bundle- <version>.exe) di jendela Windows Explorer dan klik dua kali untuk memulai proses instalasi, klik tombol Yes pada dialog User Account Control jika muncul - klik pada tombol 'Next'. Klik tombol 'Next' ketika layar berikutnya (ditampilkan di bawah) akan muncul. 3

5 Layar berikutnya (ditampilkan di bawah) adalah perjanjian lisensi. Jika Anda setuju untuk itu, klik pada tombol "I Agree". Layar berikutnya (ditampilkan di bawah) adalah pengaturan konfigurasi di mana semua jalur instalasi yang akan ditampilkan. Mengubahnya jika Anda inginkan dan klik tombol 'Next' untuk melanjutkan. 4

6 Layar berikutnya adalah untuk menciptakan sebuah shourcuts pada start menu - biarkan saja pengaturan ini default dan klik pada tombol 'Install'. Instalasi yang sebenarnya dari Android Studio akan mulai - dan tunggu proses instalasi hingga Completed. 5

7 Setelah instalasi telah selesai, maka layar seperti di bawah akan muncul. Klik tombol 'Next'. Setelah itu masuk kehalaman Finish. Centang Start Android Studio jika kalian ingin memulai membuka Android Studio untuk pertama kali - Klik tombol Finish. 6

8 Pertama kali Android Studio diluncurkan setelah diinstal, dialog akan muncul menyediakan opsi untuk mengimpor pengaturan dari versi Android Studio sebelumnya. Jika Anda memiliki pengaturan dari versi sebelumnya dan ingin mengimpor mereka ke dalam instalasi terbaru, pilih opsi yang sesuai dan lokasi. Atau, menunjukkan bahwa Anda tidak perlu mengimpor pengaturan sebelumnya. Jika kalian baru pertama kali menginstal Android Studio sebelumnya. Pilih "I do not have a previous version of Android Studio or I do not want to import my settings" dan klik tombol OK untuk melanjutkan. Dan Anda akan diarahkan kehalaman berikutnya untuk mendownload dan menginstall komponen Android SDK Tools. Pastikan komputer Anda terhubung dengan internet. Tunggulah proses download dan menginstall Android SDK tools hingga selesai. 7

9 Pengenalan IDE dan Pembuatan Aplikasi Pertama Tujuan Instruksional : Pokok bahasan ini dilakukan untuk mengenalkan praktikan tentang IDE dan membimbing dalam pembuatan aplikasi android dasar. Kompetensi yang Diharapkan : Mahasiswa diharapkan dapat memahami tentang IDE dan dapat membuat aplikasi pertama di android. Waktu Pertemuan : 120 menit 8

10 1. IDE IDE merupakan singkatan dari Integrated Development Environment yang merupakan Lembar Kerja Terpadu untuk pengembangan program. Adapun kegunaan IDE tersebut adalah: 1. Menulis Naskah Program 2. Mengkompilasi Program(Compile) 3. Melakukan Pengujian Program(Debugging) 4. Mengaitkan Object dan Library ke Program(Linking) 5. Menjalankan Program(Running) Eclipse adalah IDE yg paling populer untuk pengembangan Android, karena memiliki Android plug-in yg tersedia untuk memfasilitasi pengembangan android. Eclipse juga mendapat dukungan langsung dari Google untuk menjadi IDE pengembangan aplikasi Android (adanya penambahan plug-in untuk eclipse untuk membuat project android di mana source software langsung dari situs resminya Google). IDE lainnya adalah Netbeans, Android Studio, Basic4Android, dan masih banyak lagi. Aplikasi android dapat dikembangkan pada OS berikut: - Windows XP Vista/7/8/10 - Mac OS X (Mac OS X atau lebih baru) - Linux 2. Membuat Aplikasi Pertama di Android A. Alat dan Bahan: 1. Komputer dengan sistem operasi minimal Windows XP 2. Program aplikasi Eclipse atau Android Studio 3. Modul Praktikum Rekayasa Aplikasi Bergerak 9

11 B. Langkah 1. Buka Aplikasi Eclipse Maka akan muncul Workspace Launcher untuk menentukan folder yang digunakan untukmenyimpan project-project Eclipse nantinya, simpan pada folder : Ketik : home/ npm_anda OK 2. Lalu buat project baru : Click File New Android Application Project 3. Masukkan Nama Aplikasi, Nama Project, dan Nama Package Aplikasi yang akan dibuat 10

12 4. Mengkonfigurasi Project yang akan dibuat 5. Mengkonfigurasi Icon yang akan digunakan untuk Aplikasi 6. Membuat Activity pada Project : - Pilih Blank Activity 11

13 7. Masukkan Nama untuk Activity utama yang akan dibuat, Setelah itu Click Finish 8. Aplikasi Android Baru telah dibuat 12

14 MainActivity.java Digunakan untuk proses pada aplikasi Activity_main.xml Membuat tampilan antarmuka (Graphical User Interface) 9. Membuka Android pada VirtualBox - Buka VirtualBox Jalankan Android 13

15 - L i h a t A l a m at IP dari Android VirtualBox untuk dihubungkan dengan eclipse - Android Pada VirtualBox 10. Menghubungkan PC/Computer dengan Android VirtualBox - Buka Terminal/CommandPrompt 14

16 - Ketik adb connect <<IP address dari Android VirtualBox>> - default : adb connect Menjalankan Aplikasi - Klik Kanan Pada Project (NewProject) - Klik Run As Android Application -Pilih Device (Nama Android VirtualBox) 15

17 -Android VirtualBox Menjalankan Aplikasi 16

18 Pengenalan Macam macam Widget Android Tujuan Instruksional : Pokok bahasan ini menjelaskan tentang pengenalan widget-widget yang ada di android. Kompetensi yang Diharapkan : 1. Mahasiswa mampu memahami widget-widget yang ada di android. 2. Mahasiswa mampu membuat aplikasi sederhana menggunakan widget-widget yang ada. Waktu Pertemuan : 120 menit 17

19 TextView Sebuah TextView menampilkan teks ke pengguna. Sebuah TextView adalah editor teks lengkap, namun kelas dasar dikonfigurasi untuk tidak mengizinkan pengeditan seperti EditText. Contoh: <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:capitalize="characters" EditText EditText seperti TextView yang memiliki kemampuan untuk di edit. Contoh: <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margintop="61dp" android:ems="10" 18

20 Button Tombol yang dapat ditekan, atau diklik, oleh pengguna untuk melakukan suatu tindakan. Contoh: <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="35dp" ImageButton Tombol yang menampilkan gambar yang memiliki fungsi yang sama dengan Button. Contoh: <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginright="35dp" android:layout_margintop="32dp" android:contentdescription= CheckBox Merupakan kotak yang dapat di on dan off kan oleh pengguna. 19

21 Contoh: <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="88dp" RadioButton Seperti CheckBox namun berbentuk lingkaran dan hanya bisa di pilih salah satu dari beberapa pilihan. Contoh: <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" 20

22 T U G A S! Buatlah Aplikasi sederhana berdasarkan widget-widget yang sudah di pelajari. 21

23 Pengenalan Macam-macam Layout pada Android Tujuan Instruksional : Pokok bahasan ini menjelaskan tentang pengenalan layout yang ada di android. Kompetensi yang Diharapkan : 1. Mahasiswa mampu memahami layout yang ada di android. 2. Mahasiswa mampu membuat aplikasi sederhana menggunakan layout yang ada. Waktu Pertemuan : 120 menit 22

24 File.xml dapat dibuat dengan 2 cara : Buka Eclipse kamu Create File -> New -> Android Application Project Klik kanan di folder res/layout -> New -> Android XML File Atau Buat.txt di folder res/layout Rename file.txt menjadi.xml Ada 3 macam layout(dari 6 macam) yang secara luas digunakan. Layout-layout tersebut adalah : 1. Linear Layout Adalah jenis layout yang mengatur child element (contoh : TextView, Button, CheckBox, dll) ke dalam suatu baris horizontal ataupun vertikal. Untuk mengatur direction dari Linear Layout ini sendiri bisa mengedit pada atribut android:orientation. Untuk lebih jelasnya sebagai contoh: Misal kita mempunyai suatu text view dengan nama TextView1 dan TextView2 Ketika kita menuliskan kode XML nya kita tulis berurutan TextView1 ditulis pertama dan TextView2 setelahnya. Jika kita menggunakan android:orientation="vertical" maka TextView1 akan berada di atas karena ditulis pertama dan TextView2 berada di bawah TextView1 karena ditulis kedua. Sedangkan jika kita menggunakan android:orientation="horizontal" maka TextView 1 akan berada di sebelah kiri dan TextView2 akan berada di sebelah kanan. Layout sendiri memiliki suatu atribut "weight" yang mempengaruhi size atau besar dari element child yang ada di dalamnya terhadap layar dari suatu device. 23

25 <LinearLayoutxmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello_world"/> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/click" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/click" /> </LinearLayout> </LinearLayout> Tampilan yang terjadi setelah kode di eksekusi

26 2. Relative Layout Relative Layout memiliki karakteristik menempatkan view secara relatif. Posisi dari setiap view bergantung kepada view yang lain. Mudahnya adalah, programmer memiliki kebebasan untuk menempatkan view yang diinginkan. Penempatan satu view dapat berupa di sisi kanan, kiri, atas, ataupun bawah dari view lain. Jika tidak di tetapkan di sisi mana view akan berada, maka dapat terjadi penumpukan antara satu view dengan view yang lain <RelativeLayoutxmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context=".mainactivity"> <TextView 25

27 android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" /> </RelativeLayout> Tampilan yang terjadi setelah kode di eksekusi 26

28 Pengenalan Macam-macam Layout pada Android 3. Table Layout Table Layout memiliki karakteristik yang mirip dengan pembuatan layout di HTML. Jika anda familiar dengan pemprograman web berjenis html, <table> dan <TableLayout /> adalah 2 hal yang hampir sama. TableLayout mengatur tampilan berdasarkan kolom dan baris. Dan jangan lupa untuk selalu menambahkan tag <TableRow /> jika ingin membuat baris baru dalam layout. <TableLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" android:shrinkcolumns="*" android:stretchcolumns="*" > <TableRow android:layout_height="wrap_content" android:layout_width="match_parent" > <TextView android:layout_width="match_parent"android:layout_height="wra p_content" android:textsize="18sp"android:text="@string/hello_world" android:layout_span="3" android:padding="18dip"android:background="#b0b0b0" android:textcolor="#000"/> </TableRow> <TableRow android:id="@+id/tablerow1" android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:id="@+id/tv1"android:text="@string/hello_world" android:layout_weight="1"android:background="#dcdcdc" android:textcolor="#000000" android:padding="20dip"android:gravity="center"/> <Button android:id="@+id/but1"android:text="@string/click" android:layout_weight="1"android:background="#d3d3d3" android:textcolor="#000000" android:padding="20dip"android:gravity="center"/> 27

29 </TableRow> </TableLayout> Tampilan yang terjadi setelah kode di eksekusi 28

30 4. GridView GridView merupakan serangkaian item-item atau daftar yang tersusun secara vertikal dan horizontal yang dapat ditampilkan secara keseluruhan seperti bentuk kotak. Adapun contoh nya seperti Kalender yang anda pakai. Nah didalam GridView ini diisi menggunakan Array ataupun Query Database, sama layaknya dengan ListView. GridView ini banyak dipakai saat kita membuat sebuah project dengan daftar seperti kotak-kotak. Pasti anda tahu bagaimana bentuknya. Pada Tutorial kali ini kita akan membuat sebuah masih mengenai daftar bulan dalam bentuk GridView. Buatlah komponen GridView. GridView terdapat dalam Container. Untuk membuatnya dapat dilakukan dengan Drag and Drop dari komponen yang tersedia atau langsung menuliskan script XML.Untuk script XML dapat dituliskan seperti berikut. 29

31 0 <RelativeLayout 1 xmlns:android=" xmlns:tools=" match_parent" android:layout_height="match_parent"android:paddingleft="@dimen/activ ity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" android:paddingbottom="@dimen/activity_vertical_margin"tools:context= ".MainActivity"> 08 <TextView 09 android:id="@+id/txtjudul" 10 android:layout_width="wrap_content" 11 android:layout_height="wrap_content" 12 android:text="daftar Bulan" 13 android:textsize="30sp"/> <GridView 16 android:id="@+id/gridview1" 17 android:layout_width="fill_parent" 18 android:layout_height="fill_parent" 19 android:layout_alignparentright="true" 20 android:layout_below="@+id/txtjudul" 21 android:layout_margintop="50dp" 22 android:columnwidth="100dp" 23 android:horizontalspacing="20dp" 24 android:numcolumns="auto_fit" 25 android:stretchmode="columnwidth" 26 android:verticalspacing="40dp"> 27 </GridView> </RelativeLayout> Langkah 4 : Bukalah MainActivity.java lalu edit seperti berikut ini 01 package com.androidnajwa.gridview; import android.app.activity; 04 import android.os.bundle; 05 import android.widget.arrayadapter; 06 import android.widget.gridview; publicclass MainActivity extends Activity { 30

32 09 private String[] bulan = {"Januari","Februari","Maret", 10 "April","Mei","Juni","Juli", 11 "Agustus","September","Oktober", 12 "Nopember","Desember"}; private GridView grid1; private ArrayAdapter<String> adapter; protected void oncreate(bundle savedinstancestate) { 20 super.oncreate(savedinstancestate); 21 setcontentview(r.layout.activity_main); grid1 = (GridView) findviewbyid(r.id.gridview1); //membuat adapter agar item bulan menempel pada gridview 26 adapter = new ArrayAdapter<String>(MainActivity.this, 27 android.r.layout.simple_list_item_1, 28 bulan); 29 //menerapkan adapter pada objek grid1 30 grid1.setadapter(adapter); //penggunaan listenernya mirip dengan listener pada listview 33 } } Sampai tahap disini sudah selesai. Sekarang lakukan testing, dengan cara menekan Shift+F10. 31

33 32

34 Pengenalan Macam-macam Layout pada Android 5. TabLayout TabLayout adalah salah satu elemen utama dan paling sering digunakan sebagai menu navigasi pada aplikasi Android. Biasanya TabLayout dikombinasikan dengan Fragment, Fragment tersebut akan berganti sesuai dengan menu Tab yang diklik. Namun kali ini kita hanya akan membahas tentang implementasi TabLayout-nya saja, tidak sampai ke bagian TabLayout dan Fragment. Lain kali saja kita bahas soal itu Membuat Material TabLayout menggunakan Android Support Library Sebelum kita memulai belajar untuk membuat TabLayout pada Android, ada beberapa pre-requisites yang sebaiknya kalian pelajari terlebih dahulu : Pre-requisites Mengenal Android Material Design Membuat Project Hello World dengan Android Studio Membuat Color Resources untuk Material Design Theme Setelah membuat project baru pada Android Studio, kalian harus mengimpor beberapa dependencies seperti berikut : dependencies { } compile filetree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' compile 'com.android.support:support-v4:22.2.0' Kemudian, yang perlu kita buat pertama-tama adalah sebuah layout xml yang mempunyai elemen TabLayout di dalamnya, contohnya seperti layout activity_tab.xml di bawah ini : <RelativeLayoutxmlns:android=" xmlns:app=" android:id="@+id/coor_layout" 33

35 android:layout_width="match_parent" android:layout_height="match_parent" <!-- rest of code --> <android.support.design.widget.tablayout android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="horizontal" app:tabgravity="center" app:tabmode="scrollable"/> <!-- rest of code --> </RelativeLayout> Berikutnya, pada file Activity di java kita bisa memanggil elemen TabLayout pada xml dengan cara seperti saat kita memanggil elemen layout lainnya : packageid.web.twoh.coolandroiddesign; importandroid.os.bundle; importandroid.support.design.widget.tablayout; importandroid.support.v7.app.actionbar; importandroid.support.v7.app.appcompatactivity; importandroid.support.v7.widget.toolbar; /** * Created by Hafizh Herdi on 8/3/ */ publicclasstablayoutactivity extendsappcompatactivity{ privatetablayout protectedvoidoncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_tab); // rest of code tablayout = (TabLayout) findviewbyid(r.id.tablayout); tablayout.settabgravity(tablayout.gravity_center); tablayout.addtab(tablayout.newtab().settext("home")); tablayout.addtab(tablayout.newtab().settext("profile")); tablayout.addtab(tablayout.newtab().settext("settings")); tablayout.addtab(tablayout.newtab().settext("more")); tablayout.addtab(tablayout.newtab().settext("about")); 34

36 tablayout.addtab(tablayout.newtab().settext("help")); tablayout.addtab(tablayout.newtab().settext("friends")); tablayout.setontabselectedlistener(newtablayout.ontabselectedlist ener() publicvoidontabselected(tablayout.tab tab) { tab.getposition(); tab.gettext(); } publicvoidontabunselected(tablayout.tab tab) { } } }); } // rest of publicvoidontabreselected(tablayout.tab tab) { 35

37 Pada kode di atas kita bisa lihat betapa mudahnya untuk menambahkan tab baru pada TabLayout, hanya dengan memanggil fungsi addtab() dan kemudian membuat tab baru dengan memanggil fungsi newtab() pada TabLayout. Hal ini memungkinkan kita untuk menambahkan tab baru secara programmatically, ataupun saat aplikasi berjalan. Kemudian untuk mendeteksi saat suatu tab diselect (diklik) kita bisa mengeset ontabselectedlistener() yang akan memberikan callback ketika suatu tab diklik. Kita bisa mengetahui tab mana yang diklik dengan memanggil tab.getposition() untuk mendapatkan posisi tab mana yang diklik atau tab.gettext() untuk mendapatkan text title dari tab yang terpilih tersebut. Dari situ kita bisa menentukan mana fragment atau layout yang akan ditampilkan berdasarkan tab yang kita pilih. Sedangkan untuk element TabLayout pada xml ada beberapa atribut tambahan yang bisa kita set, seperti app:tabgravity="center" app:tabmode="scrollable" tabgravity berfungsi untuk mengeset tata letak posisi dari TabLayout tersebut, dengan memberikan value center maka kita mengeset posisi TabLayout tersebut rata tengah. Kemudian tabmode berfungsi untuk mengatur apakah TabLayout tersebut fixed atau scrollable, apabila kita memilih scrollable maka apabila jumlah tab membuat ukuran tab melebihi lebar layar maka tab akan bisa discroll secara horizontal. Fixed akan membuat ukuran tab selalu sesuai layar berapapun jumlah tab yang ada pada TabLayout. Demo Ketika dijalankan, maka inilah hasil dari TabLayout yang telah kita buat : 36

38 7. ListView ListView dikatakan sederhana atau komplek ditentukan oleh kompleksitas item dari ListView tersebut. Jika masing-masing item dari ListView menampilkan sebuah kata atau kalimat saja, maka ListView tersebut sederhana. Jika masing-masing item dari ListView memiliki isi yang komplek seperti item dari sebuah status jejaring sosial dimana pada masing-masing item memiliki foto profil, nama, waktu, status dan komentar, maka ListView tersebut adalah ListView komplek. Pembuatan ListView komplek dilakukan dengan Custom ListView. 37

39 Untuk membuat ListView sederhana, kita buat terlebih dahulu file layout.xml pada folder layout. Copy-paste code di bawah ini pada file tersebut. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> Kemudian kita buat class MainActivity (class ini biasanya sudah dibuat otomatis pada project). Hapus isi class tersebut kemudian copy-paste code di bawah ini pada class tersebut. import android.os.bundle; import android.app.activity; import android.widget.arrayadapter; import android.widget.listview; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.layout); String[] arrname = {"Samsung","Sony","Apple","LG","Motorola", "HTC","Acer","Lenovo","Oppo","Nokia","BlackBerry","Huawei", "ZTE","Meizu","HP","Asus","Panasonic"}; ArrayAdapter adapter = new ArrayAdapter(this, android.r.layout.simple_list_item_1, arrname); } } ListView listview = (ListView) findviewbyid(r.id.id_list); listview.setadapter(adapter); Array String[] arrname merupakan kumpulan data String yang akan ditampilkan pada ListView. Array ini dimasukkan ke dalam object dari ArrayAdapter yang bernama adapter. Adapter ini merupakan adapter sederhana yang hanya menampilkan sebuah TextView pada item ListView. Code ListView listview = (ListView) findviewbyid(r.id. id_list); membuat object dari class ListView dengan menginisiasi object tersebut 38

40 dengan ListView yang kita buat pada file layout.xml. Jalankan project, maka ListView tampil seperti berikut ini. 39

41 Event Handling Tujuan Instruksional : Pokok bahasan ini menjelaskan tentang bagaimana mengatur perintah pada saat event. Misal saat clik, drag dll Kompetensi yang Diharapkan : Mahasiswa diharapkan dapat membuat aplikasi android yang telah menggunakan event handling Waktu Pertemuan : 120 menit 40

42 1. Buat projek baru dengan nama myaplication, lalu 2. Buat file MainActivity.java 1. package com.example.myapplication; publicclassmainactivityextendsactionbaractivity{ 4. privateprogressdialog progress; 5. Button b1,b2; protectedvoid oncreate(bundle savedinstancestate){ 9. super.oncreate(savedinstancestate); 10. setcontentview(r.layout.activity_main); 11. progress =newprogressdialog(this); b1=(button)findviewbyid(r.id.button); 14. b2=(button)findviewbyid(r.id.button2); 15. b1.setonclicklistener(newview.onclicklistener(){ 17. publicvoid onclick(view v){ 18. TextView txtview =(TextView) findviewbyid(r.id.textview); 19. txtview.settextsize(25); 20. } 21. }); b2.setonclicklistener(newview.onclicklistener(){ 25. publicvoid onclick(view v){ 26. TextView txtview =(TextView) findviewbyid(r.id.textview); 27. txtview.settextsize(55); 28. } 29. }); 30. } publicboolean oncreateoptionsmenu(menu menu){ 34. // Inflate the menu; this adds items to the action bar if it is present. 35. getmenuinflater().inflate(r.menu.menu_main, menu); 36. returntrue; 37. } publicboolean onoptionsitemselected(menuitem item){ 41. // Handle action bar item clicks here. The action bar will 42. // automatically handle clicks on the Home/Up button, so long 43. // as you specify a parent activity in AndroidManifest.xml int id = item.getitemid(); //noinspection SimplifiableIfStatement 48. if(id == R.id.action_settings){ 49. returntrue; 50. } 51. returnsuper.onoptionsitemselected(item); 52. } 53. } 41

43 3. Buat file res/layout/activity_main.xml <RelativeLayoutxmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="event Handling " android:layout_alignparenttop="true" android:layout_centerhorizontal="true" android:textsize="30dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="tutorials point " android:textcolor="#ff87ff09" android:textsize="30dp" android:layout_centerhorizontal="true" android:layout_marginbottom="40dp"/> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" 42

44 android:layout_centervertical="true" android:layout_centerhorizontal="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="small font" android:layout_centerhorizontal="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="large Font" <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hello World!" android:layout_centerhorizontal="true" android:textsize="25dp"/> </RelativeLayout> 4. Buat file res/values/strings.xml 43

45 <?xml version="1.0" encoding="utf-8"?> <resources> <stringname="app_name">myapplication</string> <stringname="action_settings">settings</string> </resources> 5. Buat fileandroidmanifest.xml <?xml version="1.0" encoding="utf-8"?> <manifestxmlns:android=" package="com.example.myapplication" android:versioncode="1" android:versionname="1.0"> <uses-sdk android:minsdkversion="8" android:targetsdkversion="22"/> <application android:allowbackup="true" <activity android:name="com.example.myapplication.mainactivity" <intent-filter> <actionandroid:name="android.intent.action.main"/> <categoryandroid:name="android.intent.category.launcher"/> </intent-filter> </activity> 44

46 </application> </manifest> 45

47 Intent dan Activity Tujuan Instruksional : Pokok bahasan ini menjelaskan tentang bagaimana membuat sebuah aplikasi yang ada di android yang bisa berpindah dari satu halaman ke halaman lain, atau biasa disebut dengan intent. Kompetensi yang Diharapkan : Mahasiswa diharapkan dapat memahami bagaimana membuat sebuah aplikasi android yang tidak hanya menggunakan satu halaman saja, tetapi aplikasi yang bisa berpindah dari satu halaman ke halaman lainnya. Waktu Pertemuan : 120 menit 46

48 1. Buka Aplikasi Eclipse, kemudian buat sebuah proyek baru. Setelah itu tambahkan layout baru dengan nama second_main.xml, dan juga tambahkan clas java baru dengan nama SecondActivity.java. Jadi nantinya kita akan bekerja di keempat class yaitu, activity_main.xml, second_activity.xml, MainActiviy.java, SecondActivity.java. Ataupun seperti pada gambar. 47

49 2. Buka class activity_main.xml dan tambahkan baris program berikut 3. Selanjutnya buka class second_main.xml dan tambahkan baris program berikut 48

50 4. Setelah itu buka class MainActivity.java dan tambahkan baris program berikut 49

51 5. Setelah itu buka class SecondActivity.java dan tambahkan baris program berikut Adapun outputnya yaitu : 50

52 Tugas! Membuat Sebuah Program Android yang bisa berpindah halaman. 51

53 Parameter Intent A. Parameter Intent Tujuan Instruksional : Menjelaskan tentang bagaimana menghubungkan dua Activity di Android dengan halaman lain dengan membawa beberapa pesan(parameter) yang nantinya akan disimpan dalam Intent. Kompetisi Yang Diharapkan : Mahasiswa mampu memahami bagaimana membuat sebuah aplikasi android yang tidak hanya menggunakan satu halaman saja, tetapi aplikasi yang bisa berpindah dari satu halaman ke halaman lain dengan membawa beberapa pesan(parameter) yang nantinya akan disimpan dalam intent. Waktu Pertemuan : 120 Menit. 52

54 Buka Aplikasi Eclipse, kemudian buat sebuah proyek baru. Setelah itu tambahkan layout baru dengan nama activity2.xml, dan juga tambahan class java baru dengan nama Activity.java. Jadi nanti kita akan bekerja di keempat class yaitu : activity_main.xml, MainActivity.java, activity2.xml dan Activity2.java. 1. Berikut ini isi dari class Activity_main.xml 2. Berikut ini isi codingan dari class java : MainActivity.java 53

55 3. Berikut ini isi codingan dari class java : Activity2.java 4. Berikut ini isi codingan dari class xml : Activity2.xml 54

56 Berikut ini adalah tampilan dari running APK : 55

57 Custom Intent Tujuan Instruksional : Menjelaskan tentang bagaimana menghubungkan dua Activity di Android dengan halaman lain dengan membawa beberapa pesan(parameter) yang nantinya akan diterima oleh aplikasi lain. Kompetisi Yang Diharapkan : Mahasiswa mampu memahami bagaimana membuat sebuah aplikasi android yang tidak hanya menggunakan satu halaman saja, tetapi aplikasi yang bisa berpindah dari satu halaman ke halaman lain dengan membawa beberapa pesan(parameter) yang nantinya akan diterima oleh aplikasi lain. Waktu Pertemuan : 120 Menit. 56

58 Buka Aplikasi Eclipse, kemudian buat sebuah proyek baru. Tidak ada penambahan layout baru. Jadi nanti kita akan bekerja di dua class yaitu : activity_main.xml dan MainActivity.java. 1. Berikut ini isi codingan dari xml : activity_main.xml 57

59 2. Berikut ini isi codingan dari java : MainActivity.java Berikut ini hasil running APK : 58

60 Android ListView Tujuan Instruksional : Pokok bahasan ini akan dipelajari cara untuk membuat lisview, yaitu view yang mengelompokan beberapa item dna menampilkan secara vertical dan dapat di scroll. Kompetensi yang Diharapkan : 1. Mahasiswa mampu memahami proses proses pembuatan listview. 2. Mahasiswa mampu mengimplementasikan listview pada aplikasi yang lebih advance. Waktu Pertemuan : 120 menit 59

61 Langkah 1 Membuat Project Buat sebuah project android baru dengan nama project ListDisplay dan packagecom.example.listdisplay Langkah 2 -ListDisplay.java Berikut merupakan isi konten main activity filesrc/com.example.listdisplay/listdisplay.java yang telah dimodifikasi : package com.example.listdisplay; import android.os.bundle; import android.app.activity; import android.view.menu; import android.widget.arrayadapter; import android.widget.listview; publicclasslistdisplayextendsactivity{ // Array of strings... String[] mobilearray ={"Android","IPhone","WindowsMobile","Blackberry","WebOS","Ubuntu","Windows7","Max OS protectedvoid oncreate(bundle savedinstancestate){ super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ArrayAdapter adapter =newarrayadapter<string>(this, R.layout.activity_listview, mobilearray); ListView listview =(ListView)findViewById(R.id.mobile_list); listview.setadapter(adapter); } } 60

62 Langkah 3 -ListDisplay.java Berikut merupakan isi konten fileres/layout/activity_main.xml : <LinearLayoutxmlns:android=" " xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".listactivity"> <ListView android:id="@+id/mobile_list" android:layout_width="match_parent" android:layout_height="wrap_content"> </ListView> </LinearLayout> Langkah 4 -ListDisplay.java Berikut merupakan isi konten fileres/values/strings.xmlyang ditambahkan dua konstanta baru: <?xml version="1.0" encoding="utf-8"?> <resources> <stringname="app_name">listdisplay</string> <stringname="action_settings">settings</string> </resources> Langkah 5 -ListDisplay.java Berikut merupakan isi konten fileres/layout/activity_listview.xml : <?xml version="1.0" encoding="utf-8"?> <!-- Single List Item Design --> <TextViewxmlns:android=" android:id="@+id/label" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dip" android:textsize="16dip" android:textstyle="bold"> </TextView> 61

63 Langkah 5 Running Jalankan aplikasi yang dibuat dan pahami tiap fungsi-fungsinya dna bagaimana proses tersebut berjalan. 62

64 Tugas! Buat aplikasi sederhana dengan tema masing-masing untuk setiap praktikan dan implementasikan listview yang telah dipelajari hari ini. 63

65 Pembuatan Aplikasi Music Player Tujuan Instruksional : Pokok bahasan ini menjelaskan tentang pembuatan aplikasi Music Player pada Android. Kompetensi yang Diharapkan : Mahasiswa diharapkan dapat membuat aplikasi Music Player pada Android dengan menambahkan dan mengedit sesuai keinginan mahasiswa sendiri. Waktu Pertemuan : 120 menit 64

66 Main Activity.java package com.example.musicplayer; import java.util.concurrent.timeunit; import android.media.mediaplayer; import android.os.bundle; import android.os.handler; import android.app.activity; import android.view.menu; import android.view.view; import android.widget.imagebutton; import android.widget.seekbar; import android.widget.textview; import android.widget.toast; publicclass MainActivity extends Activity { public TextView songname,starttimefield,endtimefield; private MediaPlayer mediaplayer; privatedoublestarttime = 0; privatedoublefinaltime = 0; private Handler myhandler = new Handler(); privateintforwardtime = 5000; privateintbackwardtime = 5000; private SeekBar seekbar; private ImageButton playbutton,pausebutton; publicstaticintonetimeonly = protectedvoid oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); 65

67 mediaplayer = MediaPlayer.create(this, R.raw.alones); seekbar.setclickable(false); pausebutton.setenabled(false); } publicvoid play(view view){ Toast.makeText(getApplicationContext(), "Playing sound", Toast.LENGTH_SHORT).show(); mediaplayer.start(); finaltime = mediaplayer.getduration(); starttime = mediaplayer.getcurrentposition(); if(onetimeonly == 0){ seekbar.setmax((int) finaltime); onetimeonly = 1; } endtimefield.settext(string.format("%d min, %d sec", TimeUnit.MILLISECONDS.toMinutes((long) finaltime), TimeUnit.MILLISECONDS.toSeconds((long) finaltime) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS. tominutes((long) finaltime))) ); starttimefield.settext(string.format("%d min, %d sec", TimeUnit.MILLISECONDS.toMinutes((long) starttime), TimeUnit.MILLISECONDS.toSeconds((long) starttime) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS. tominutes((long) starttime))) ); 66

68 seekbar.setprogress((int)starttime); myhandler.postdelayed(updatesongtime,100); pausebutton.setenabled(true); playbutton.setenabled(false); } private Runnable UpdateSongTime = new Runnable() { publicvoid run() { starttime = mediaplayer.getcurrentposition(); starttimefield.settext(string.format("%d min, %d sec", TimeUnit.MILLISECONDS.toMinutes((long) starttime), TimeUnit.MILLISECONDS.toSeconds((long) starttime) - TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS. tominutes((long) starttime))) ); seekbar.setprogress((int)starttime); myhandler.postdelayed(this, 100); } }; publicvoid pause(view view){ Toast.makeText(getApplicationContext(), "Pausing sound", Toast.LENGTH_SHORT).show(); mediaplayer.pause(); pausebutton.setenabled(false); playbutton.setenabled(true); } publicvoid forward(view view){ int temp = (int)starttime; if((temp+forwardtime)<=finaltime){ 67

69 starttime = starttime + forwardtime; mediaplayer.seekto((int) starttime); } else{ Toast.makeText(getApplicationContext(), "Cannot jump forward 5 seconds", Toast.LENGTH_SHORT).show(); } } publicvoid rewind(view view){ int temp = (int)starttime; if((temp-backwardtime)>0){ starttime = starttime - backwardtime; mediaplayer.seekto((int) starttime); } else{ Toast.makeText(getApplicationContext(), "Cannot jump backward 5 seconds", Toast.LENGTH_SHORT).show(); } publicboolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); returntrue; } 68

70 activity_main.xml <RelativeLayoutxmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="285dp" android:layout_marginleft="80dp" android:onclick="play" <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="285dp" android:layout_marginleft="140dp" android:onclick="pause" 69

71 <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="285dp" android:layout_marginleft="200dp" android:onclick="forward" <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="285dp" android:layout_marginleft="20dp" android:onclick="rewind" <SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="235dp"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="260dp" android:layout_marginleft="200dp" android:textappearance="?android:attr/textappearancesmall"/> 70

72 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="260dp" android:layout_marginleft="15dp" android:textappearance="?android:attr/textappearancesmall"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="40dp" android:text="now Playing :" android:textappearance="?android:attr/textappearancemedium"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="40dp" android:layout_marginleft="130dp"/> <ImageView android:layout_width="170dp" android:layout_height="170dp" android:layout_margintop="70dp" android:layout_marginleft="60dp" 71

73 MusicPlayer Manifest <?xmlversion="1.0"encoding="utf-8"?> <manifestxmlns:android=" package="com.example.musicplayer" android:versioncode="1" android:versionname="1.0"> <uses-sdk android:minsdkversion="16" android:targetsdkversion="16"/> <application android:allowbackup="true" <activity android:name=".mainactivity" <intent-filter> <actionandroid:name="android.intent.action.main"/> <categoryandroid:name="android.intent.category.launcher"/> </intent-filter> </activity> </application> </manifest> 72

74 Running program : 73

75 Tujuan Instruksional : JSON Parsing Pokok bahasan ini menjelaskan tentang ekstraksi data JSON dari internet Kompetensi yang Diharapkan : Mahasiswa diharapkan dapat memahami dan mengimplementasikan proses ekstarksi data JSON dari internet. Waktu Pertemuan : 120 menit 74

76 1. Buatlah class HttpUtils dengan kode berikut 75

77 2. Tambahkan kode berikut pada activity_main.xml 76

78 3. Tambahkan kode berikut pada MainActivity.java 6. Tambahkan permission berikut pada android manifest <uses-permission android:name="android.permission.internet" /> 77

79 Tugas! Buatlah JSON anda sendiri menggunakan hostingan gratis kemudian buatlah aplikasi android nya. 78

80 Drag and Drop Tujuan Instruksional : Pokok bahasan ini menjelaskan tentang Fungsi Drag and Drop pada Android Kompetensi yang Diharapkan : Mahasiswa diharapkan dapat mengerti penemparan dan cara menggunakan fungsi drag and drop yang sudah dijelaskan. Waktu Pertemuan : 120 menit 79

81 1. Menggunakan drag and drop in Android Untuk menggunakan drag and drop maka dibutuhkan android version Allowing a view to be dragged Untuk menggunakan menyeret pandangan Anda mendaftar OnTouchListener atau LongClickListener pada tampilan yang dapat diseret. startdrag metode View yang memulai operasi drag. Dalam metode ini Anda juga menentukan data yang akan diteruskan ke target penurunan melalui sebuah contoh dari ClipData. Anda juga lolos ke metode startdrag contoh DragShadowBuilder. Objek ini menentukan gambar yang digunakan untuk operasi drag. Misalnya Anda dapat lulus dalam pandangan langsung, yang menunjukkan gambar dari pandangan selama operasi drag. Setup operasi drag ini dalam pendengar sentuhan ditunjukkan dalam contoh berikut. 3. Defining drop target 80

82 Pandangan yang dapat target penurunan mendapatkan contoh dari OnDragListener ditugaskan. Dalam penurunan pendengar ini Anda menerima panggilan punggung dalam kasus hambatan yang telah ditetapkan dan peristiwa penurunan terkait. *DragEvent.ACTION_DRAG_STARTED *DragEvent.ACTION_DRAG_ENTERED * DragEvent.ACTION_DRAG_EXITED *DragEvent.ACTION_DROP * DragEvent.ACTION_DRAG_ENDED Sebuah tampilan dengan OnDragListener yang digunakan sebagai zona degradasi, mendapat OnDragListener diberikan melalui setondraglistener tersebut. 3. Exercise: Drag and drop 81

83 3.1 Create XML Drawables In this exercise you are using XML drawables. In this part you create several XML drawables in the res/drawable folder. Create the following shape.xml file in this folder. Also create the following shape_droptarget.xml file. 3.2 Activity and layout 82

84 Change the layout of your activity to the following code. 83

85 Change your activity class to the following code. 84

86 85

87 Hasil Tampilan : 86