Membuat Aplikasi Android Untuk Pemula.pdf

DAFTAR ISI DAFTAR ISI .................................................................................................I 1. MENGENAL ANDROID STUDIO ......................................................1 1.1. INSTALASI JAVA DEVELOPMENT KIT (JDK) .................................... 1 1.2. JENDELA KERJA ANDROID STUDIO ................................................. 3 1.3. ANDROID SDK MANAGER ............................................................... 5 1.4. ANDROID VIRTUAL DEVICE MANAGER ............................................ 6 1.5. GENYMOTION................................................................................ 12 1.6. ANDROIDMANIFEST.XML ............................................................... 19 1.7. JAVA DAN XML ............................................................................. 21 2. SEKILAS TENTANG JAVA ............................................................... 23 2.1. APA ITU JAVA? .............................................................................. 23 2.2. NAMA VARIABEL ........................................................................... 23 2.3. OBJEK DAN KELAS ........................................................................ 24 2.4. TIPE DATA PADA JAVA .................................................................. 24 2.5. PEWARISAN (INHERITANCE) .......................................................... 26 3. MEMBUAT PROJEK PERTAMA .................................................... 27 3.1. MEMBUAT PROJEK BARU .............................................................. 27 3.2. STRUKTUR PROJEK ANDROID STUDIO ........................................... 33 3.3. MENJALANKAN PROJEK PADA ANDROID VIRTUAL DEVICE ........... 34 3.4. MENJALANKAN PROJEK PADA GENYMOTION ............................... 35 3.5. MENJALANKAN PROJEK PADA PERANGKAT ANDROID ................... 36 4. MENGENAL ACTIVITY ..................................................................... 37 4.1. APA ITU ACTIVITY? ........................................................................ 37 4.2. ACTIVITY LIFECYCLE ..................................................................... 42 5. RESOURCE ........................................................................................... 45 5.1. JENIS RESOURCE ........................................................................... 46 5.2. RESOURCE LAYOUT ....................................................................... 46 5.3. RESOURCE TEKS ........................................................................... 48 5.4. RESOURCE ARRAY TEKS ................................................................ 50 5.5. RESOURCE DRAWABLE .................................................................. 51 5.6. RESOURCE MENU .......................................................................... 54 6. VIEW ....................................................................................................... 58 6.1. MENGENAL VIEW DAN VIEWGROUP .............................................. 58

ii

6.2. TEXTVIEW ..................................................................................... 62 6.3. EDITTEXT ...................................................................................... 64 6.4. BUTTON ......................................................................................... 66 6.5. IMAGEVIEW ................................................................................... 69 6.6. IMAGEBUTTON .............................................................................. 70 6.7. SPINNER ........................................................................................ 73 6.8. CHECKBOX .................................................................................... 75 6.9. AUTOCOMPLETETEXTVIEW .......................................................... 77 6.10. TOGGLEBUTTON .......................................................................... 79 6.11. RADIOBUTTON ............................................................................ 81 6.12. RADIOGROUP .............................................................................. 83 6.13. PROGRESSBAR ............................................................................. 85 7. LAYOUT ................................................................................................. 88 7.1. ATRIBUT LAYOUT .......................................................................... 88 7.2. FRAME LAYOUT ............................................................................. 92 7.3. LINEARLAYOUT ............................................................................. 94 7.4. RELATIVELAYOUT ......................................................................... 97 8. DIALOG ................................................................................................ 100 8.1. TOAST .......................................................................................... 100 8.2. SNACK BAR.................................................................................. 100 8.3. ALERT DIALOG ............................................................................ 101 8.4. PROGRESS DIALOG ...................................................................... 101 8.5. ACTIVITY SEBAGAI DIALOG ......................................................... 102 9. MENU.................................................................................................... 103 9.1. MENU SEBAGAI ACTION .............................................................. 104 9.2. POPUP MENU .............................................................................. 105 9.3. CONTEXT MENU .......................................................................... 107 10. SQLITE ............................................................................................... 110 10.1. SQLITEHELPER ........................................................................ 114 10.2. MELAKUKAN QUERY DATA ........................................................ 116 10.3. MENAMBAH DATA ..................................................................... 116 10.4. MENGUPDATE DATA .................................................................. 117 12. LIST VIEW......................................................................................... 118 12.1. APA ITU LIST VIEW? .................................................................. 118 12.2. DEFAULT ADAPTER ................................................................... 118 13. PROJECT: MEMBUAT APLIKASI SEKOLAHKU .................. 120

iii

Ebook ini tersedia gratis bagi siapa saja yang ingin belajar membuat Aplikasi Android. Anda bisa mendapatkan versi cetak dari Ebook ini, Anda bisa mengunjungi halaman berikut:

http://bit.ly/VersiCetak Setiap pembelian versi cetak, akan mendapatkan bonus TShirt Android Keren berikut:

Anda bisa belajar membuat Aplikasi Android secara tatap muka dengan mengunjungi halaman berikut:

www.rumahcoding.co.id Follow akun Instagram dan facebook kami untuk mendapatkan tips dan trick seputar programming, programming news atau berdiskusi seputar Ebook ini.

@idrumahcoding iv

@idrumahcoding

1. Mengenal Android Studio Android Studio merupakan software pengembang yang digunakan untuk membuat sebuah aplikasi android. Pada buku ini, versi yang akan digunakan adalah Android Studio 1.5.1. Android Studio dapat digunakan pada berbagai sistem operasi komputer termasuk Windows, Linux dan Mac. Untuk menginstall Android Studio pada komputer, maka kita harus menginstall Java Development Kit (JDK) terlebih dahulu. 1.1. Instalasi Java Development Kit (JDK) Pada buku ini, versi JDK yang akan kita gunakan adalah JDK 7. JDK7 tersedia gratis pada website Oracle. Anda dapat mengunduh file instalasi JDK7 melalui tautan berikut: www.oracle.com/technetwork/java/javase/downloads/jdk7downloads-1880260.html Pada halaman unduh JDK7, anda dapat melihat beberapa pilihan file untuk anda download. Pilihlah salah satu file yang sesuai dengan sistem operasi yang anda gunakan. Sebelum itu, jangan lupa untuk menyetujui lisensi dengan menekat button Accept License Agreement.

www.rumahcoding.co.id

1

@idrumahcoding

Setelah proses unduhan selesai, kemudian lanjutkan dengan proses instalasi sesuai dengan sistem operasi pada komputer yang anda miliki. Berikut adalah tutorial proses instalasi JDK7 pada komputer dengan sistem operasi Mac OS. 1.2. Instalasi Android Studio Android Studio tersedia secara gratis pada website resmi android. Anda dapat mengunjungi tautan berikut ini untuk mengunduh file instalasi Android Studio. developer.android.com/sdk/index.html Berikut adalah tampilan dari halaman unduh Android Studio. Untuk mengunduh, klik tombol Download Android Studio yang berwarna hijau.

2

www.rumahcoding.co.id

@idrumahcoding

Setelah file instalasi berhasil diunduh dengan baik. Maka lanjutkan dengan proses instalasi dengan melakukan klik ganda pada file instalasi tersebut.

1.2. Jendela Kerja Android Studio Pada sub bab ini, kita akan membahas mengenai beberapa fungsi dasar dari Android Studio yang akan membantu kita dalam memahami bagaimana cara menggunakan software Android Studio. Tampilan standar dari Android Studio tertera seperti gambar di bawah ini.

www.rumahcoding.co.id

3

@idrumahcoding

Gambar di atas merupakan tampilan standar dari Android Studio. Berikut adalah keterangan dari gambar di atas. 1. Toolbar: Merupakan lokasi beberapa tombol cepat yang paling sering digunakan oleh pengembang. 2. Project: Merupakan tampilan folder dari projek sehingga pengembang dapat melakukan navigasi ke berbagai file projek dengan cepat. 3. Pallet: Merupakan lokasi widget UI, anda dapat langsung mendrag dan drop widget ke windows preview yang berada di sebelah kanan. 4. Preview: Preview dari tampilan aplikasi. 5. Component Tree & Properties: Merupakan editor dari sebuah widget. 6. Monitor: Untuk melihat error dan warning.

4

www.rumahcoding.co.id

@idrumahcoding

1.3. Android SDK Manager Sejak pertama kali dirilis hingga saat ini, Google telah merilis beberapa versi android mulai dari froyo, gingerbread, hingga yang terbaru adalah marshmallow. Versi terbaru dibuat untuk melengkapi dan menyempurnakan versi sebelumnya. Oleh karena itu, pada versiversi terbaru terdapat penambahan fitur atau mungkin saja penggantian fitur dengan yang lebih canggih. Hal tersebut berdampak pula dari sisi pembuatan aplikasi. Seiring dengan rilisnya versi baru dari android, maka Google pun merilis Android SDK untuk android versi tersebut. Oleh karena itu, akan kita temukan variasi SDK mulai dari Android 2.2 hingga Android 6.0. Untuk dapat menggunakan SDK tersebut kita harus mengunduhnya terlebih dahulu. Android SDK Manager merupakan tool yang dapat memudahkan kita dalam mengunduh Android SDK serta beberapa library pendukung. Android SDK Manager dapat dijalankan melalui Android Studio dengan menekan tombol pada toolbar. Berikut adalah tampilan dari Android SDK Manager.

www.rumahcoding.co.id

5

@idrumahcoding

Pada Android SDK Manager kita dapat mencentang versi SDK yang ingin kita unduh kemudian menekan tombol OK. Versi SDK yang kita pilih akan segera diunduh. Pastikan komputer anda memiliki koneksi internet. Setelah proses unduhan selesai, maka kita sudah bisa menggunakan versi SDK tersebut pada projek.

1.4. Android Virtual Device Manager Untuk melakukan pengetesan aplikasi, kita dapat menggunakan perangkat virtual yang telah tersedia pada Android Studio. Dengan perangkat virtual, kita dapat dengan mudah

6

www.rumahcoding.co.id

@idrumahcoding

melakukan tes sesungguhnya.

aplikasi

tanpa

harus

menggunakan

ponsel

Sebelum kita dapat menjalankan aplikasi pada perangkat virtual, kita harus membuatnya terlebih dahulu. Berikut adalah langkah-langkah untuk membuat sebuah perangkat virtual. 1. Klik tombol pada toolbar maka akan muncul jendela Android Virtual Device Manager.

Semua perangkat virtual yang telah kita buat akan muncul pada jendela tersebut. 2. Kemudian klik tombol Create Virtual Device maka akan muncul jendela Virtual Device Configuration. Pada jendela ini, kita dapat mengatur konfigurasi dari perangkat virtual yang akan kita buat.

www.rumahcoding.co.id

7

@idrumahcoding

3. Pilih kategori dan jenis perangkat virtual kemudian tekan tombol Next maka akan muncul jendela pemilihan versi android untuk perangkat virtual yang akan kita gunakan.

8

www.rumahcoding.co.id

@idrumahcoding

4. Pilih versi android yang akan anda pakai kemudian klik tombol Next maka akan muncul jendela verifikasi konfigurasi. Anda dapat melakukan konfigurasi tambahan pada jendela tersebut. Kemudian klik tombol Finish maka proses pembuatan perangkat virtual telah selesai. Perangkat virtual yang baru saja kita buat sudah bisa kita pergunakan untuk pengetesan aplikasi.

www.rumahcoding.co.id

9

@idrumahcoding

5. Untuk memulai mengetes aplikasi, anda perlu menjalankan perangkat virtual yang baru saja anda buat dengan meng-klik tombol pada jendela Android Virtual Device Manager. Silahkan tunggu beberapa saat, perangkat virtual akan segera aktif.

10

www.rumahcoding.co.id

@idrumahcoding

www.rumahcoding.co.id

11

@idrumahcoding

1.5. GenyMotion Walaupun kita bisa menggunakan perangkat virtual pada Android Studio dengan mudah, akan tetapi perangkat virtual tersebut sangat lambat dibandingkan dengan ponsel sungguhan. Kelambatan perang virtual tersebut terjadi baik pada saat perangkat dinyalakan(booting) maupun ketika dioperasikan. Kurangnya performa perangkat virtual ini membuat proses tes aplikasi menjadi terhambat. Sebagai alternatif, kita bisa menggunakan GenyMotion sebagai ganti perangkat virtual bawaan Android Studio. GenyMotion manawarkan solusi yang lebih baik dari perangkat virtual yang sudah ada di Android Studio. GenyMotion bisa digunakan secara gratis untuk keperluan pribadi sedangkan untuk keperluan komersial anda bisa menggunakannya dengan harga sekitar $136 per tahun. Untuk mendownload GenyMotion, silahkan mengunjungi alamat website berikut: www.genymotion.com/download Anda diharuskan untuk membuat akun sebelum dapat mengunduh GenyMotion. Untuk membuat akun baru di GenyMotion, silahkan klik tombol Create an account.

12

www.rumahcoding.co.id

@idrumahcoding

Silahkan isi data-data yang diperlukan pada formulir Sign up. Isilah username, email address dan password dengan data yang benar. Untuk field company size bisa diisi dengan personal use sedangkan field usage type bisa diisi development.

www.rumahcoding.co.id

13

@idrumahcoding

Setelah semua field diisi dengan baik, jangan lupa mencentang kotak I accept terms of the privacy statement kemudian dilanjutkan dengan meng-klik tombol Create an account. Maka akan muncul halaman konfirmasi berikut:

Pada tahap ini, pembuatan akun GenyMotion telah berhasil. GenyMotion telah mengirimkan sebuah email yang berisi tautan untuk mengakitvasi akun yang baru saja anda buat. Silahkan cek email anda, email yang anda terima kira-kira seperti gambar di bawah.

14

www.rumahcoding.co.id

@idrumahcoding

Klik pada tautan Click here. Sampai disini, akun anda telah berhasil diaktivasi. Sekarang anda bisa mengunjungi kembali halaman untuk mengunduh GenyMotion pada tautan www.genymotion.com/download. Kemudian pada halaman unduhan tersebut, klik tombol Download for Mac OSX. Label dari tombol tersebut tergantung sistem operasi yang anda gunakan.

Setelah proses unduhan selesai, silahkan lanjutkan dengan proses instalasi.

www.rumahcoding.co.id

15

@idrumahcoding

Setelah proses instalasi selesai kemudian jalankan GenyMotion maka akan muncul jendela utama GenyMotion seperti tampak pada gambar di bawah.

Sama halnya dengan Android Virtual Device, di GenyMotion anda juga harus menambahkan perangkat virtual baru sebelum bisa melakukan tes. Silahkan klik tombol Add untuk menambah perangkat virtual baru pada GenyMotion. Maka akan muncul jendela Virtual device creation wizard.

16

www.rumahcoding.co.id

@idrumahcoding

Silahkan pilih jenis perangkat yang ingin anda buat lalu klik tombol Next. Kemudian muncul jendela selanjutnya, lanjutkan saja dengan meng-klik tombol Next.

www.rumahcoding.co.id

17

@idrumahcoding

GenyMotion akan mengunduh beberapa file yang dibutuhkan setelah itu proses pembuatan perangkat virtual pada GenyMotion telah selesai.

18

www.rumahcoding.co.id

@idrumahcoding

Untuk menjalankan perangkat virtual, silahkan klik ganda pada perangkat virtual tersebut pada jendela utama GenyMotion.

1.6. AndroidManifest.xml AndroidManifest.xml merupakan sebuah file xml yang menyimpan informasi-informasi penting mengenai aplikasi android. Setiap aplikasi android harus memiliki file tersebut. Beberapa informasi yang tersimpan di dalam file tersebut adalah sebagai berikut: 1. Identitas: Informasi ini berupa nama package dari sebuah aplikasi dan harus unik di dalam Google Play Store, misal: com.fazrilab.adzkar. 2. Deklarasi permission. Setiap aplikasi yang akan mengakses fitur sensitif pada smartphone maka perlu mendaftarkan permission di file AndroidManifest.xml. Jika tidak, maka

www.rumahcoding.co.id

19

@idrumahcoding

android tidak akan menginzinkan penggunaan fitur tersebut. Misal akses ke kamera, gps, sms, koneksi internet, dan lainlain. 3. Deklarasi activity. Semua activity yang dibuat, harus dicantumkan disini.

Berikut adalah contoh sebuah file AndroidManifest.xml: <manifest xmlns:android="http://schemas.android.com/apk/res/andr oid" package="com.fazrilabs.projekpertama"> <uses-permission android:name="android.permission.INTERNET" /> www.rumahcoding.co.id 20

@idrumahcoding

1.7. Java Dan XML Untuk dapat membuat sebuah aplikasi android, anda harus memahami dua bahasa pemrograman sekaligus, yaitu Java dan XML (Extensible Markup Language). Walaupun tidak harus mencapai tingkat mahir, akan tetapi pemahaman mendasar mengenai kedua bahasa tersebut sangat dibutuhkan oleh seorang pengembang aplikasi android. Kita akan mempelajari pokok konsep Java pada bab berikutnya. Pada sub bab ini kita akan mencoba membahas sedikit mengenai konsep xml. Perhatikan contoh kode xml sederhana berikut: <surat> Ahmad Zuhair <judul>Pengingat Jangan lupa janji minggu ini! Jika kita perhatikan contoh kode xml di atas, kita dapat melihat bahwa xml merupakan sebuah sarana untuk menyimpan informasi. Setiap potongan informasi dimulai dengan tanda pembuka dan tanda penutup. Tanda pembuka dan tanda penutup dapat kita definisikan sendiri sesuai kebutuhan dengan syarat keduanya harus sama. Contoh di atas menunjukkan informasi mengenai sebuah surat. Di dalam tanda pembuka <surat>, kita temukan beberapa potongan informasi yang kesemuanya diawali dengan tanda pembuka yang baru. Kita dapat menyimpulkan bahwa informasi surat tersebut adalah ditujukan kepada Ahmad yang dikirim oleh Zuhair dengan judul Pengingat dan pesannya adalah Jangan lupa janji minggu ini. Masingmasing dari potongan informasi tersebut ditutup dengan tanda penutup yang sama dengan tanda pembuka masing-masing potongan informasi.

www.rumahcoding.co.id

21

@idrumahcoding

Android menggunakan xml untuk mendefinisikan berbagai macam resource termasuk layout, string, menu, drawable dan lain-lain. Pembahasan lebih lanjut mengenai penggunaan xml pada android akan kita bahas pada bab selanjutnya.

22

www.rumahcoding.co.id

@idrumahcoding

2. Sekilas Tentang Java Pada sub sebelumnya, kita telah memperkenalkan tentang xml dan menyinggung sedikit bagaimana xml digunakan untuk membuat aplikasi android. Pada bab ini kita akan membahas mengenai bahasa pemrograman Java yang merupakan bahasa pemrograman utama untuk mengembangkan aplikasi android.

2.1. Apa Itu Java? Java merupakan bahasa pemrograman yang pertama kali dikembangkan oleh James Gosling di perusahaan Sun Microsystems. Perusahaan tersebut kemudian diakusisi oleh Oracle. Sintaks pada Java banyak mengadopsi dari bahasa pemrograman C dan C++. Oleh karena itu, kita akan banyak menemukan kemiripan sintaks antara Java dan C/C++. Saat ini Java merupakan salah satu bahasa pemrograman paling populer. Jumlah pengguna Java hingga saat ini mencapai jumlah 10 juta orang.

2.2. Nama Variabel Variabel merupakan tempat sebuah informasi disimpan sementara di memory. Variabel dalam java dideklarasikan menggunakan format type_data nama_variable. Misal int gear, dberarti mendeklarasikan sebuah variabel dengan tipe data int dan nama variabel adalah gear. Berikut adalah beberapa aturan yang perlu anda ketahui ketika memberikan nama variabel. 1. Nama variabel adalah case sensitive. Jadi nama variable gear dengan Gear adalah dua variabel yang berbeda.

www.rumahcoding.co.id

23

@idrumahcoding

2. Nama variabel bisa mengandung angka, huruf kecil dan besar, $, dan _. 3. Jika nama variabel terdiri dari satu kata maka semua harus menggunakan huruf kecil. Misal gear, book, node, etc. Jika lebih dari dua kata, maka setiap kata berikutnya harus diawali dengan huruf besar. Misal currentUser, maxGear, minDistance, etc.

2.3. Objek Dan Kelas Objek dalam pemrograman Java dapat diartikan segala sesuatu yang memiliki sifat dan perilaku. Sedangkan kelas adalah abstraksi yang menjelaskan sifat dan perilaku dari objek tersebut. Kelas juga dapat bermakna sebuah tipe data kustom selain dari tipe data yang sudah ada. Sebuah kelas didefinisikan menggunakan keyword class. Perhatikan contoh definisi sebuah kelas berikut: public class Sepeda { public String produsen; public String merek; public int jumlahBan; public boolean spion; } Potongan kode Java di atas adalah untuk mendefinisikan sebuah kelas dengan nama kelas Sepeda. Kelas tersebut harus disimpan dalam sebuah file dengan nama Sepeda.java. Kelas tersebut memiliki beberapa variabel kelas antara lain produsen, merek, jumlahBan dan spion.

2.4. Tipe Data Pada Java

24

Di dalam Java, terdapat dua jenis tipe data. www.rumahcoding.co.id

@idrumahcoding

1. Tipe data primitif 2. Tipe data object/class

Tipe data primitif merupakan tipe data sederhana dan sudah terdapat secara built in di dalam Java. Ada delapan tipe data primitif pada Java. 1. 2. 3. 4. 5. 6. 7. 8.

byte short int long float double boolean char

Sedangkan tipe data object merupakan tipe data yang didefinisikan menggunakan keyword class. Misalkan tipe data Employee, People, dan lain-lain. Programmer dapat mendefinisikan tipe data tersebut sesuai dengan kebutuhan masing-masing. Perhatikan contoh berikut: public class Employee { private String name; private String wife; private int age; private int numberOfChildren; } File tersebut harus disimpan dengan nama Employee.java. Yang harus anda perhatikan adalah bahwa, nama kelas harus sama persisi dengan nama file, dalam hal ini adalah Employee. Untuk mendefinisikan sebuah variable dengan tipe Employee, anda harus menggunakan keyword new. Contoh di bawah ini adalah potongan kode Java untuk mendefinisikan sebuah variabel dengan tipe Employee dan cara mengakses field dari dari object tersebut.

www.rumahcoding.co.id

25

@idrumahcoding

Employee employee = new Employee(); employee.name = "Burhan"; employee.wife = "Sarah"; employee.age = 45; employee.numberOfChildren = 5;

2.5. Pewarisan (Inheritance) Sebuah kelas dapat mewarisi kelas yang lain jika antara kedua kelas tersebut memiliki kesamaan pada beberapa sifat dan perilaku. Cara mendefinisikan kelas yang mewarisi kelas lain adalah dengan menggunakan keyword extends. Kelas yang mewarisi kelas lain disebut dengan kelas turunan. Perhatikan contoh kelas di bawah ini: public class Ontel extends Sepeda { public boolean lampu; } Potongan kode Java di atas adalah untuk mendefinisikan sebuah kelas dengan nama kelas Ontel. Kelas tersebut merupakan kelas turunan dari kelas Sepeda yang telah didefinisikan sebelumnya. Kelas Ontel memiliki sebuah variabel kelas, yaitu lampu. Akan tetapi karena kelas Ontel adalah kelas turunan dari kelas Sepeda, maka kelas Ontel juga memiliki variabel kelas yang dimiliki oleh kelas Sepeda ,yaitu produsen, merek, jumlahBan dan spion.

26

www.rumahcoding.co.id

@idrumahcoding

3. Membuat Projek Pertama Pada bab ini, kita akan mencoba membuat projek android pertama menggunakan Android Studio. Projek yang akan kita buat merupakan projek sederhana yakni projek "Hello World". Tujuan dari bab ini adalah untuk memberi gambaran umum bagaimana membuat sebuah projek menggunakan Android Studio sebelum kita membicarakan lebih banyak mengenai konsep-konsep di android itu sendiri.

3.1. Membuat Projek Baru Untuk membuat projek baru pada Android Studio, silahkan mengikuti langkah-langkah berikut: 1. Buka aplikasi Android Studio. Silahkan tunggu beberapa saat sampai muncul jendela Selamat Datang berikut:

www.rumahcoding.co.id

27

@idrumahcoding

Jendela di atas terdiri atas dua bagian, bagian pertama adalah Recent Projects. Pada bagian ini kita dapat melihat semua projekprojek yang telah kita buat sebelumnya menggunakan Android Studio. Tentu saja bagian ini akan kosong jika anda belum pernah membuat projek sebelumnya. Bagian kedua adalah Quick Start. Pada bagian ini terdapat beberapa tombol cepat untuk memulai menggunakan Android Studio. Dari beberapa tombol cepat tersebut, kita hanya perlu menggunakan tombol Start a new Android Studio project. Tomboltombol yang lainnya belum kita perlukan untuk saat ini. 2. Pada jendela Selamat Datang, klik tombol Start a new Android Studio project sehingga muncul jendela Create New Project berikut:

28

www.rumahcoding.co.id

@idrumahcoding

Ada beberapa field yang harus kita isi, isilah dengan data berikut: Field

Nilai

Application name

Projek Pertama

Company Domain

com.fazrilabs

www.rumahcoding.co.id

Keterangan Merupakan nama dari aplikasi yang akan kita buat dan akan muncul dibawah icon aplikasi ketika aplikasi ini diinstall ke ponsel. Field ini harus diisi dan bisa menggunakan spasi Umumnya menggunakan domain website dari perusahaan pembuat aplikasi. Gabungan dari company domain dan application name akan secara otomatis digunakan pada package name yang merupakan identitas unik dari sebuah

29

@idrumahcoding

Project location

biarkan default

aplikasi android di Google Play Store. Lokasi penyimpanan projek pada drive

3. Setelah semua field terisi dengan baik, maka lanjutkan dengan menekan tombol Next maka akan muncul jendela Target Android Devices berikut:

Pada jendela ini kita bisa mengatur target ponsel yang akan menggunakan aplikasi yang akan kita buat. Untuk saat ini hanya centang pilihan Phone and Tablet karena kita hanya akan membuat aplikasi tersebut berjalan pada ponsel dan tablet. Pilihan lainnya untuk sementara bisa diabaikan. Selain itu kita juga bisa mengatur Minimum SDK untuk masing-masing target. Dengan melakukan konfigurasi pada Minimum www.rumahcoding.co.id 30

@idrumahcoding

SDK kita bisa mengatur aplikasi hanya dapat berjalan jika ponsel target terinstall android dengan versi minimal sesuai dengan versi yang kita atur pada pilihan tersebut. Misal kita set API 15 (Ice Cream Sandwich), maka aplikasi tersebut tidak akan bisa diinstall pada ponsel dengan android di bawah Ice Cream Sandwich. Selain itu, aplikasi tersebut juga tidak akan muncul di Google Play Store jika kita mencari melalui ponsel dengan android di bawah Ice Cream Sandwich. 4. Kemudian klik tombol Next maka akan muncul jendela Add an activity to Mobile.

Jendela ini memungkinkan kita untuk menambah activity baru ke dalam projek. Untuk penjelasan mengenai activity akan dijabarkan pada bab selanjutnya. Untuk sementara pilih Blank Activity. 5. Kemudian klik tombol Next maka akan muncul jendela Customize the Activity.

www.rumahcoding.co.id

31

@idrumahcoding

Pada jendela tersebut kita bisa mengatur beberapa konfigurasi activity yang akan kita buat. Ada beberapa field yang harus kita isi. Isilah dengan data-data berikut: Field

Nilai

Activity Name

MainActivity

Layout Name

activity_main

Title

Projek Pertama menu_main

Menu Resource Name

Keterangan Merupakan nama class dari activity yang akan dibuat Merupakan nama layout untuk activity yang akan dibuat Merupakan judul dari activity Merupakan nama file untuk resource dari menu

Untuk sementara pastikan checkbox Use a Fragment tidak dicentang. 6. Kemudian klik tombol Finish. Silahkan tunggu sebentar, Android Studio akan membuatkan file-file projek yang dibutuhkan selama beberapa saat. Pastikan komputer anda www.rumahcoding.co.id 32

@idrumahcoding

terkoneksi dengan internet karena Android Studio akan mendownload beberapa library ke dalam projek melalui gradle. Jika proses telah selesai, maka akan muncul jendela kerja berikut.

3.2. Struktur Projek Android Studio Ketika kita membuat sebuah projek baru, maka Android Studio akan secara otomatis membuatkan beberapa folder dan file dalam sebuah struktur yang cukup rapih. Hal tersebut dapat mempercepat kita memulai sebuah projek baru. Berikut adalah struktur sebuah projek pada Android Studio. a. b. c. d. e. f.

manifests: Folder tempat meletakan file AndroidManifest.xml java: Folder tempat meletakkan file-file Java res:drawable: Folder tempat meletakkan file-file gambar res:layout: Folder tempat meletakkan file-file xml untuk layout res:menu: Folder tempat meletakkan file-file xml untuk menu res:mipmap: Folder tempat meletakkan file-file gambar untuk icon aplikasi g. res:values: Folder tempat meletakkan file-file xml yang lain.

www.rumahcoding.co.id

33

@idrumahcoding

Kita akan membahas lebih lanjut tentang bagaimana kode-kode tersebut bekerja pada sub bab berikutnya. Untuk saat ini kita akan langsung mencoba menjalankan projek tersebut untuk melihat hasil akhirnya.

3.3. Menjalankan Projek Pada Android Virtual Device Sebelum menjalankan projek pada perangkat virtual android, anda harus sudah membuat sebuah perangkat virtual di Android Studio. Jika belum, anda bisa mengikuti panduan pembuatan perangkat virtual pada sub bab 1.4. Setelah perangkat virtual selesai dibuat kemudian nyalakan perangkat tersebut. Lalu klik tombol pada toolbar untuk menjalankan projek. Kemudian akan muncul jendela Device Chooser.

34

www.rumahcoding.co.id

@idrumahcoding

Pilih perangkat virtual yang sedang berjalan kemudian klik tombol OK. Maka Android Studio akan menginstal aplikasi projek ke dalam perangkat virtual. Berikut adalah tampilan setelah projek berhasil diinstal ke perangkat.

3.4. Menjalankan Projek Pada GenyMotion Untuk menjalankan projek menggunakan GenyMotion, anda hanya perlu mengaktifkan salah satu perangkat virtual pada

www.rumahcoding.co.id

35

@idrumahcoding

GenyMotion. Setelah salah satu perangkat virtual aktif, maka Android Studio akan otomatis mendeteksi keberadaan perangkat tersebut.

3.5. Menjalankan Projek Pada Perangkat Android Untuk menjalankan projek pada perangkat android, anda harus memiliki sebuah perangkat android yang anda hubungkan dengan komputer anda. Jika anda menggunakan Mac, maka Android Studio otomatis akan mendeteksi keberadaan perangkat android anda. Akan tetapi jika Windows atau Linux, anda harus menginstall dulu driver dari perangkat android tersebut.

36

www.rumahcoding.co.id

@idrumahcoding

4. Mengenal Activity

4.1. Apa Itu Activity? Secara sederhana, sebuah activity pada aplikasi android mewakili sebuah layar yang tampak dalam aplikasi tersebut. Di dalam layar tersebut bisa terdapat beberapa komponen user interface baik berupa TextView, Button, EditText, Menu dan komponen-komponen yang lain. Perhatikan layar utama dari sebuah aplikasi berikut.

www.rumahcoding.co.id

37

@idrumahcoding

Layar aplikasi tersebut dibentuk oleh sebuah activity. Dalam layar tersebut terdapat 3 buah tombol. Apabila salah satu tombol diklik, maka akan berganti ke layar kedua.

Layar kedua pada aplikasi tersebut merupakan sebuah activity yang lain. Jadi dapat kita simpulkan bawah sebuah aplikasi android bisa terdiri dari satu atau lebih activity. Keseluruhan activity secara bersama-sama membangun sebuah aplikasi yang sempurna. Sebuah activity merupakan sebuah kelas yang ditulis menggunakan bahasa pemrograman Java. Berikut ini adalah contoh activity dari Projek Pertama yang telah kita buat pada bab sebelumnya. Silahkan buka projek pertama anda dan buka file MainActivity pada folder java/com.fazrilabs.projekpertama.

38

www.rumahcoding.co.id

@idrumahcoding package com.fazrilabs.projekpertama; import import import import import import import import

android.os.Bundle; android.support.design.widget.FloatingActionButton; android.support.design.widget.Snackbar; android.support.v7.app.AppCompatActivity; android.support.v7.widget.Toolbar; android.view.View; android.view.Menu; android.view.MenuItem;

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; }

www.rumahcoding.co.id

39

@idrumahcoding

@Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }

Nama kelas dari activity di atas adalah MainActivity yang merupakan turunan dari kelas AppCompatActivity. Tampilan layar pada activity tersebut didefinisikan dalam file main_activity.xml. Anda dapat membuka file tersebut pada folder res/layout.
40

www.rumahcoding.co.id

@idrumahcoding android:theme="@style/AppTheme.AppBarOverlay" rel="nofollow">

Sekilas kode dalam file content_main.xml tampak rumit, akan tetapi yang perlu anda perhatikan hanya pada bagian baris . Baris ini menunjukan bahwa file xml tersebut mengikutsertakan isi dari file content_main. Anda dapat membuka file content_main.xml pada folder yang sama.
www.rumahcoding.co.id

41

@idrumahcoding android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.fazrilabs.projekpertama.MainActivity" tools:showIn="@layout/activity_main">

Kode dari file content_main.xml tampak lebih sederhana. Terdiri dari sebuah layout, yaitu RelativeLayout. Di dalam terdapat sebuah komponen user interface bernama TextView.

4.2. Activity Lifecycle Setiap activity dalam suatu aplikasi melalui beberapa siklus kondisi (lifecycle). Sebuah activity bisa berubah kondisinya dari tidak aktif menjadi aktif, dari aktif menjadi tidak aktif kembali. Konsep siklus kondisi dari sebuah activity ini penting dipahami. Bagan di bawah ini menunjukkan siklus kondisi yang lengkap dari sebuah activity.

42

www.rumahcoding.co.id

@idrumahcoding

Beberapa fungsi pada bagan di atas akan dipanggil ketika sebuah activity melalui kondisi tertentu sebagaimana yang ditunjukkan oleh bagan. Fungsi-fungsi tersebut antara lain: onCreate, onStart, onResume, onPause, onStop dan onDestroy. Kita bisa menggunakan fungsi-fungsi tersebut sesuai dengan kebutuhan.

www.rumahcoding.co.id

43

@idrumahcoding

Jika kita perhatikan kode pada kelas MainActivity sebelumnya, dapat dengan jelas kita lihat bahwa kelas tersebut menggunakan fungsi onCreate. Fungsi onCreate ini adalah yang paling sering kita gunakan ketika membuat sebuah activity. Di dalam fungsi onCreate, kita bisa menaruh kode-kode yang berupa inisialisasi. Tanda panah pada bagan di atas menunjukkan alur dari sebuah proses. Jadi ketika sebuah activity dijalankan, maka urutan fungsi yang akan dipanggil oleh android secara berurutan adalah onCreate, onStart, onResume.

44

www.rumahcoding.co.id

@idrumahcoding

5. Resource Android Studio mengorganisir file-file selain kode java dalam sebuah folder yang disebut res. Di dalam folder tersebut kita dapat meletakan berbagai macam file pendukung seperti teks, image, audio dan file yang lain. Umumnya file tersebut merupakan sebuah file xml yang menyimpan berbagai macam informasi penting seperti kumpulan teks, warna, dimensi dan lain-lain. File-file tersebut dinamakan resource. Setiap resource dapat digunakan dalam kode java dengan menggunakan format R.jenis_resource.nama_resource. Misal R.string.app_name, R.drawable.logo dan lain sebagainya. Selain digunakan dalam kode java, resource jg bisa digunakan oleh resource yang lain. Penggunaan resource dapat mempermudah pengembang aplikasi dalam mengatur karakteristik aplikasi tanpa harus mengubah kode java. Sebagai contoh sederhana, ketika akan mengatur judul dari sebuah activity, kita bisa saja menuliskan kode berikut. setTitle("Judul Pertama"); Walaupun cara tersebut bisa dilakukan dan tidak menyebabkan kesalahan, akan tetapi cara yang direkomendasikan adalah dengan menggunakan resource teks sehingga kode di atas akan menjadi setTitle(R.string.app_name); Dalam hal ini R.string.app_name merupakan sebuah resource teks yang bisa kita definisikan dalam sebuah file string.xml yang kita letakkan pada folder /res/values. Cara mendefinisikan resource string adalah sebagai berikut <string name="app_name">Judul Pertama

www.rumahcoding.co.id

45

@idrumahcoding

Ketika aplikasi dijalankan, maka resource R.string.app_name akan diubah menjadi teks Judul Pertama. Keunggulan menggunakan cara ini adalah semua teks tertata dengan rapih dalam satu file xml sehingga memudahkan ketika akan mencarinya tanpa harus mencari di dalam kode java. Selain itu kita bisa melakukan lokalisasi bahasa ke bahasa lain dengan mudah tanpa harus merubah banyak pada kode java. Misal bahasa Perancis, Indonesia, Malaysia dan bahasa lainnya.

5.1. Jenis Resource Ada beberapa jenis resource yang dapat digunakan antara lain resource teks, resource array dari teks, resource drawable, resource warna (color), resource dimensi dan resource layout. Pembahasan mengenai masing-masing resource dan cara penggunaannya akan dijabarkan pada sub bab berikutnya.

5.2. Resource Layout Resource layout merupakan file xml yang membentuk tatap muka aplikasi. Di dalam resource tersebut anda dapat mengatur dan menyusun berbagai macam komponen tatap muka seperti tombol, gambar, label, teks input dan lain sebagainya. Anda juga dapat mengontrol bagaimana komponen-komponen tersebut tersusun. Resource layout harus diletakkan di dalam folder /res/layout. Berikut adalah contoh sebuah file layout dengan nama content_main.xml.
46

www.rumahcoding.co.id

@idrumahcoding android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.fazrilabs.projekpertama.MainActivity" tools:showIn="@layout/activity_main">

Untuk dapat menggunakan layout tersebut, anda harus mendaftarkannya pada activity dengan cara memanggil metode setContentView(R.layout.content_main). Gambar di bawah menunjukkan hasil pratinjau dari layout di atas.

www.rumahcoding.co.id

47

@idrumahcoding

Pembahasan tentang layout akan dijelaskan lebih lanjut pada bab berikutnya.

5.3. Resource Teks Ketika mengembangkan sebuah program atau aplikasi, baik itu aplikasi komputer atau aplikasi ponsel, anda akan banyak menggunakan teks seperti memberi label pada tombol, teks pada menu, teks pada judul aplikasi, teks pada pop pesan dan lain sebagainya. Teks tersebut merupakan teks statis. Pada aplikasi android juga berlaku hal tersebut. Untuk kemudahan pengelolaan teks pada aplikasi android www.rumahcoding.co.id 48

@idrumahcoding

maka teks bisa kita pisahkan dari kode java dan diletakkan dalam sebuah file xml. File ini diletakkan dalam folder /res/values. Anda bisa mendefinisikan banyak teks pada file string.xml. Masing-masing teks memiliki nama sehingga kita bisa menggunakan teks tersebut pada kode java. Berikut ada contoh dari sebuah file string.xml. <string name="app_name">Projek Pertama <string name="action_settings">Settings <string name="action_add">Add <string name="action_delete">Delete <string name="action_edit">Edit Setelah anda mendefinisikan teks pada file string.xml, anda bisa menggunakan teks tersebut dalam beberapa cara berikut: 1. Penggunaan resource teks dalam resource yang lain Resource teks dapat digunakan dalam resource yang lain dengan menggunakan format @string/name_string. Berikut ini adalah contoh potongan kode dari sebuah resource layout yang didalamnya menggunakan resource teks.

2. Penggunaan resource teks dalam kode java Resource teks dapat digunakan dalam kode java dengan menggunakan format berikut R.string.nama_string. Berikut adalah potongan kode java yang menggunakan resource teks.

www.rumahcoding.co.id

49

@idrumahcoding

String appName = getResources().getString(R.string.app_name); Potongan kode di atas bermakna "ambil resource teks dengan nama app_name pada file string.xml dan simpan ke dalam variabel appName". Selain dengan cara di atas beberapa metode dalam sebuah activity bisa langsung menerima input dalam format R.string.nama_string. Perhatikan contoh potongan kode java berikut: setTitle(R.string.app_name);

5.4. Resource Array Teks Array teks merupakan kumpulan dari beberapa teks yang disimpan dalam sebuah variabel bertipe string-array. Contoh dari array adalah kumpulan teks nama negara, kumpulan teks nama warna, kumpulan teks nama sekolah dan lain sebagainya. Anda bisa mendefinisikan kumpulan teks tersebut dalam sebuah array pada file string.xml. Berikut adalah cara mendefinisikan kumpulan teks dalam bentuk array pada file string.xml. <string-array name="countries"> Indonesia Malaysia Jepang Singapura Thailand Potongan kode adalah contoh cara mendefinisikan kumpulan teks nama negara dalam sebuah array yang diberi nama countries. Resource array teks hanya bisa digunakan dalam kode java. Untuk menggunakan resource array teks, anda bisa menggunakan format R.array.nama_array. Berikut adalah contoh potongan kode java yang menggunakan resource array teks.

50

www.rumahcoding.co.id

@idrumahcoding

String[] countries = getResources().getStringArray(R.array.countries); Potongan kode java di atas bermakna "ambil resource array teks dengan nama countries pada file string.xml dan simpan ke dalam variabel countries".

5.5. Resource Drawable Ketika anda mengembangkan sebuah aplikasi android, tentu saja tidak terlepas dari penggunaan gambar. Anda mungkin saja menggunakan gambar sebagai splash screen, logo perusahaan, icon pada sebuah tombol dan lain sebagainya. Dalam android jenis resource gambar disebut drawable. Anda dapat meletakkan gambar-gambar yang butuhkan tersebut di dalam folder /res/drawable. Resource drawable merupakan jenis resource untuk gambar, baik yang dibuat menggunakan editor gambar seperti photoshop ataupun yang dibuat menggunakan file xml pada Android Studio. File gambar yang digunakan bisa bertipe png, jpg dan gif. Yang perlu anda perhatikan adalah bahwa nama file gambar tidak boleh menggunakan spasi. Resource drawable dapat digunakan dalam file resource yang lain dengan menggunakan format @drawable/nama_gambar. Hal yang perlu anda perhatikan adalah nama_gambar dalam format tersebut tidak boleh mengandung ektensi. Misalkan anda mempunyai sebuah gambar dengan nama adzkar.png. Letakkan file gambar tersebut pada folder /res/drawable. Setelah itu anda bisa menggunakan gambar tersebut di dalam sebuah file resource layout dengan cara sebagai berikut:
www.rumahcoding.co.id

51

@idrumahcoding xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/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">

Perhatikan bahwa penggunaan resource drawable di atas dilakukan tanpa menuliskan ekstensinya, yaitu @drawable/adzkar bukan @drawable/adzkar.png. Berikut adalah pratinjau dari layout tersebut.

52

www.rumahcoding.co.id

@idrumahcoding

Walaupun ukuran layar perangkat android berbeda-beda, akan tetapi android akan secara otomatis menyesuaikan ukuran gambar dengan ukuran layar. Android memberikan keleluasan kepada pengembang aplikasi untuk menyediakan gambar berbeda untuk ukuran layar yang berbeda. Jadi untuk sebuah gambar, anda bisa menyediakan beberapa versi ukuran, android akan secara otomatis mengambil gambar yang sesuai dengan ukuran layar. Untuk keperluan tersebut, anda harus membuat folder tambahan di dalam folder res, yaitu: 1. 2. 3. 4. 5.

drawable-ldpi (low) drawable-mdpi (medium) drawable-hdpi (high) drawable-xhdpi (extra-high) drawable-xxhdpi (extra-extra-high)

www.rumahcoding.co.id

53

@idrumahcoding

Untuk mempermudah anda memahami konsep di atas, perhatikan contoh variasi ukuran gambar dari adzkar.png. mdi

hdpi

xhdpi

xxhdpi

48 x 48

72 x 72

96 x 96

144 x 144

5.6. Resource Menu Salah satu aspek penilaian pengguna aplikasi terhadap kualitas sebuah aplikasi adalah user friendly. Dengan kata lain, pengguna akan lebih menyukai aplikasi yang mudah ketika digunakan. Salah satu faktor terpenting agar aplikasi yang anda buat mudah digunakan adalah dengan membuat menu. Menu merupakan bagian penting dari aplikasi android. Menu dapat mempermudah user dalam melakukan navigasi ke berbagai halaman dalam aplikasi. Gambar di bawah menunjukkan sebuah menu.

54

www.rumahcoding.co.id

@idrumahcoding

Membuat menu dalam aplikasi android sangatlah mudah. Anda cukup mendefinisikan menu tersebut sebagai sebuah file xml yang diletakkan di dalam folder /res/menu. Berikut adalah contoh sebuah resource menu dengan nama file menu_main.xml. <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.fazrilabs.projekpertama.MainActivity">

Maksud kode xml di atas adalah mendaftarkan sebuah menu dengan id action_settings dan judul @string/action_settings yang merujuk pada resource teks. Sedangkan potongan kode app:showAsAction="never" maksudnya adalah bahwa menu tersebut adalah popup menu. Kemudian anda perlu mendaftarkan

www.rumahcoding.co.id

55

@idrumahcoding

menu tersebut pada sebuah activity agar ditampilkan pada activity yang bersangkutan. @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } Hasilnya adalah sebagai berikut:

Untuk mengetahui ketika menu tersebut diklik adalah dengan cara meng-override metode pada onOptionsItemSelected activity. @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId();

56

www.rumahcoding.co.id

@idrumahcoding

if (id == R.id.action_settings) { // lakukan sesuatu disini return true; } return super.onOptionsItemSelected(item); }

www.rumahcoding.co.id

57

@idrumahcoding

6. View View merupakan salah satu materi yang penting untuk dipelajari. Setiap aplikasi android pasti akan menggunakan view sebagai salah satu komponennya. Memahami setiap view beserta konfigurasinya sangat membantu seorang pengembang dalam mengembangkan aplikasi android.

6.1. Mengenal View dan ViewGroup Secara sederhana, view dapat kita artikan sebagai komponen tatap muka atau biasa disebut dengan user interface. Masing-masing komponen memiliki fungsi dan tujuan yang berbeda. Akan tetapi semuanya bersinergi satu sama lain untuk membentuk satu tujuan utama. Pengembang aplikasi dapat menyusun berbagai macam view dalam satu layar untuk suatu tujuan yang mereka inginkan. Sedangkan viewgroup atau disebut juga parents merupakan jenis view yang dapat menampung view-view yang lain sebagai anakanaknya. Contoh viewgroup adalah LinearLayout, RelativeLayout, FrameLayout, dan lain-lain. Masing-masing viewgroup memiliki karakteristik berbeda-beda sesuai dengan maksud dan tujuannya. ViewGroup akan dibahas lebih mendetail pada bab berikutnya ketika membahas tentang layout. Berikut adalah beberapa atribut view yang perlu anda pahami: 1. id Apabila anda ingin mengakses sebuah view melalui kode java, maka anda harus memberikan atribut android:id pada view tersebut. Nilai dari atribut tersebut adalah sembarang teks dengan format @+id/idview. Nilai dari android:id harus unik dalam 1 file xml. Perhatikan contoh kode xml berikut:

58

www.rumahcoding.co.id

@idrumahcoding <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1"/>

Kode xml di atas mendefinisikan sebuah button dengan android:id adalah button1. Untuk mengakses button tersebut melalui kode java, gunakan format R.id.idview. Perhatikan potongan kode java berikut: Button button1 = (Button) findViewById(R.id.button1); Selain berguna untuk mengakses dalam kode java, pemberian id juga berguna ketika anda ingin mengakses view tersebut dalam file xml yang sama. Teknik ini biasa dipakai dalam RelativeLayout. Perhatikan contoh kode xml berikut: <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1"/> <Button android:id="@+id/button2" android:layout_width="wrap_content"

www.rumahcoding.co.id

59

@idrumahcoding android:layout_height="wrap_content" android:layout_below="@+id/button1" android:text="Button 1"/>

Pada kode xml di atas, didefinisikan dua buah button dalam sebuah RelativeLayout. Id dari kedua button tersebut masing-masing button1 dan button2. Button2 mengacu kepada button1 dengan menggunakan atribut android:layout_below="@+id/button1". Pembahasa detil mengenai RelativeLayout akan dibahas pada bab berikutnya. 2. layout_width dan layout_height Setiap view harus memiliki minimal dua atribut berikut, yaitu android:layout_width dan android:layout_height. Kedua atribut tersebut masing-masing mendefinisikan lebar dan tinggi dari view. Berikut adalah nilai yang bisa anda gunakan untuk mengisi kedua atribut tersebut. Nilai wrap_content match_parent

Keterangan Ukuran menyesuaikan dengan ukuran konten view tersebut Ukuran menyesuaikan dengan ukuran kontainer

Selain kedua nilai tersebut, anda juga bisa memberikan sembarang nilai dengan menggunakan satuan dp (density-independent pixels). Berbeda dengan piksel (px), dp merupakan satuan abstrak yang berdasarkan pada kerapatan piksel dari sebuah layar. Berikut adalah contoh potongan kode xml yang menggunakan dp.

60

www.rumahcoding.co.id

@idrumahcoding

3. margin dan padding Margin adalah jarak antara batas (border) view dengan parent atau view lainnya. Sedangkan padding adalah jarak antara batas view dengan konten view tersebut. Gambar di bawah mengilustrasikan bagaimana margin dan padding terletak pada sebuah view.

Untuk memberikan padding dan margin pada sebuah view, anda cukup memberikan nilai padding dan margin tersebut dalam satuan dp. Perhatikan penggunaan margin dan padding di bawah ini. Potongan kode xml di atas adalah pendefinisian sebuah view TextView. Atribut android:padding="10dp" maksudnya adalah memberikan padding sebesar 10dp pada setiap sisi view. Sedangkan atribut android:layout_margin="5dp" adalah untuk memberikan margin sebesar 5dp pada setiap sisi view.

www.rumahcoding.co.id

61

@idrumahcoding

Android mengizinkan anda untuk mengatur margin dan padding hanya pada sisi tertentu. Tabel berikut merangkum beberapa atribut untuk keperluan tersebut. Atribut

Keterangan

android:paddingTop android:paddingRight android:paddingBottom android:paddingLeft android:layout_marginTop android:layout_marginRight android:layout_marginBottom android:layout_marginLeft

Mengatur padding atas view Mengatur padding kanan view Mengatur padding bawah view Mengatur padding kiri view Mengatur margin atas view Mengatur margin kanan view Mengatur margin bawah view Mengatur margin kiri view

6.2. TextView TextView merupakan view yang berfungsi untuk menampilkan teks. Teks yang ditampilkan merupakan teks yang tidak dapat diedit oleh user. Berikut adalah beberapa atribut TextView yang penting untuk dipelajari: Atribut android:id android:gravity android:text android:textAllCaps android:textColor android:textSize android:textStyle android:typeface

62

Keterangan Mendefinisikan ID unik untuk TextView Mengatur penyelarasan (alignment) teks pada TextView Teks yang akan ditampilkan Menampilkan teks dalam huruf besar semua Mengatur warna teks dalam format #rgb Mengatur ukuran teks dalam dp Mengatur gaya teks: normal, italic, or bold Mengatur typeface: normal, sans, serif or monospace www.rumahcoding.co.id

@idrumahcoding

Selain atribut di atas, masih banyak atribut-atribut yang lain yang tidak memungkinkan untuk ditampilkan disini. Untuk melihat atribut yang lebih lengkap, anda dapat melihat dokumentasi yang terdapat pada situs android.com. Berikut adalah contoh pemakain TextView:

Hasil dari kode xml di atas adalah seperti pada gambar di bawah ini:

www.rumahcoding.co.id

63

@idrumahcoding

Berikut adalah contoh kode java untuk mengakses TextView dan merubah teks yang muncul menjadi "Belajar Android": TextView textView1 = (TextView) findViewById(R.id.textView1); textView1.setText("Belajar Android");

6.3. EditText

64

www.rumahcoding.co.id

@idrumahcoding

EditText merupakan view untuk menerima input dari user. EditText adalah sangat penting jika anda ingin membuat sebuah form yang mengharuskan user menginput beberapa teks. Berikut adalah Atribut android:id android:autoText android:hint android:inputType

Keterangan Mendefinisikan ID unik untuk EditText Otomatis memperbaiki kesalahan pengejaan Label petunjuk pengisian ketiak EditText kosong Jenis tipe data yang dapat dimasukan: Phone, Date, Time, Password dan lainnya

Berikut adalah contoh penggunaan atribut di dalam EditText: <EditText android:id="@+id/editText1" android:layout_width="200dp" android:layout_height="50dp" android:hint="Silahkan input nama" android:layout_centerInParent="true"/>

Berikut adalah pratinjau dari kode di atas:

www.rumahcoding.co.id

65

@idrumahcoding

Berikut ada contoh cara mengakses EditText melalui kode Java dan mengambil nilai yang telah dimasukkan oleh user. EditText editText = (EditText) findViewById(R.id.editText1); String text = editText.getText().toString();

6.4. Button

66

www.rumahcoding.co.id

@idrumahcoding

Button merupakan view yang dapat diklik/ditap oleh user. Biasanya digunakan untuk memberikan user akses terhadap aksi tertentu. Sebuah Button memiliki label yang dapat menjelaskan kepada user fungsi dari Button tersebut. Teks pada Button dapat diatur melalui atribut. Berikut adalah beberapa atribut penting dari Button: Atribut android:id android:text

Keterangan Mendefinisikan ID unik dari Button Teks yang akan ditampilkan pada Button

Berikut adalah contoh penggunaan Button: <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" android:layout_centerInParent="true"/>

Kode xml di atas akan menghasilkan layout seperti pada gambar di bawah ini:

www.rumahcoding.co.id

67

@idrumahcoding

Untuk mengakses Button melalui kode java dan mengetahui ketika Button tersebut ditap, silahkan perhatikan contoh di bawah ini: Button button = (Button) findViewById(R.id.button1); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // button diklik oleh user } });

68

www.rumahcoding.co.id

@idrumahcoding

6.5. ImageView ImageView merupakan view yang dapat digunakan untuk menampilkan gambar. Anda dapat menampilkan gambar dengan tipe png dan jpg. Sebelum anda dapat menggunakan gambar pada ImageView, anda harus meletakkan gambar tersebut pada folder /res/drawable. Berikut beberapa atribut ImageView yang penting untuk dipahami: Atribut android:id android:scaleType

android:src

Keterangan Mendefinisikan ID unik dari ImageView Mengatur jenis skala yang digunakan, antara lain: center, center_crop, center_inside, fit_center, fit_end, fit_start, fit_xy, matrix. Image yang akan ditampilkan

Perhatikan contoh penggunaan ImageView dalam layout berikut:

www.rumahcoding.co.id

69

@idrumahcoding

File xml di atas akan menghasilkan tampilan layout seperti pada gambar di bawah ini:

6.6. ImageButton ImageButton merupakan Button yang dapat menampilkan gambar sebagai ganti teks. Dengan menggunakan image, sebuah ImageButton akan tampak lebih menarik oleh user dibandingkan

70

www.rumahcoding.co.id

@idrumahcoding

Button biasa. ImageButton:

Berikut

Atribut android:id android:src

adalah

beberapa

atribut

penting

dari

Keterangan Mendefinisikan ID unik dari ImageButton Image yang akan ditampilkan

Perhatikan contoh penggunaan ImageButton di bawah ini:

Kode xml di atas akan menghasilkan tampilan seperti pada gambar di bawah ini:

www.rumahcoding.co.id

71

@idrumahcoding

Cara mengakses ImageButton melalui kode java hampir mirip dengan Button. Perhatikan contoh potongan kode java di bawah ini: ImageButton imageButton = (ImageButton) findViewById(R.id.imageButton1); imageButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // imageButton diklik oleh user } });

72

www.rumahcoding.co.id

@idrumahcoding

6.7. Spinner Spinner merupakan view yang mempunyai drop down menu sehingga user dapat memilih salah satu item dalam drop down menu tersebut. Berikut adalah beberapa atribut Spinner yang penting untuk diketahui: Atribut android:id android:entries android:prompt

Keterangan Mendefinisikan ID unik dari ImageButton Array teks yang akan dipilih oleh user Hint untuk user

Untuk mendemonstrasikan penggunaan Spinner, langkah pertama anda perlu mendefinisikan array teks pada resource string.xml. <string name="country_prompt">Pilih negara <string-array name="countries"> Indonesia Malaysia Jepang Singapura Thailand

Setelah itu anda dapat menggunakan array teks tersebut untuk mengisi atribut android:entries pada Spinner. <Spinner android:id="@+id/spinner1" android:layout_width="200dp"

www.rumahcoding.co.id

73

@idrumahcoding android:layout_height="50dp" android:entries="@array/countries" android:prompt="@string/country_prompt" android:layout_centerInParent="true">

Berikut adalah tampilan dari Spinner tersebut:

Berikut adalah potongan kode java untuk mengakses Spinner dan mengetahui kapan sebuah item dipilih oleh user: final Spinner spinner = (Spinner) findViewById(R.id.spinner1); spinner.setOnItemClickListener(new

74

www.rumahcoding.co.id

@idrumahcoding AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { String selectedCountry = spinner.getSelectedItem().toString(); } });

6.8. CheckBox CheckBox merupakan jenis input yang memiliki kondisi on dan off. CheckBox biasa digunakan dalam sebuah form sebagai field yang memerlukan jawaban ya atau tidak. Berikut adalah beberapa atribut CheckBox yang penting: Atribut android:id android:text android:drawableRight android:drawableBottom

Keterangan Mendefinisikan ID unik dari CheckBox Teks yang akan ditampilkan Gambar yang akan ditampilkan di sebelah kanan teks Gambar yang akan ditampilkan di sebelah bawah teks

Perhatikan contoh penggunaan CheckBox pada layout di bawah ini:

www.rumahcoding.co.id

75

@idrumahcoding

Kode xml di atas akan menghasilkan tampilan seperti pada gambar di bawah ini:

Untuk mengetahui kapan sebuah CheckBox diklik oleh user, kita dapat menggunakan metode setOnCheckedChangeListener. Perhatikan potongan kode java di bawah ini: CheckBox checkBox = (CheckBox) findViewById(R.id.checkBox1); checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // CheckBox diklik } });

76

www.rumahcoding.co.id

@idrumahcoding

6.9. AutoCompleteTextView AutoCompleteTextView merupakan view yang mirip dengan EditText, hanya saja AutoCompleteTextView akan menampilkan drop down menu berupa teks prediksi ketika user mengetik. Berikut adalah beberapa atribut AutoCompleteTextView yang penting untuk dipahami: Atribut android:id android:completionThreshold

Keterangan Mendefinisikan ID unik dari AutoCompleteTextView Jumlah minimal karakter yang harus diketika sebelum drop down menu muncul

Untuk mendemonstrasikan penggunaan AutoCompleteTextView, perhatikan contoh di bawah. Definisikan sebuah resource array teks berikut pada file string.xml: <string-array name="countries"> Afrika Selatan Arab Saudi Afganistan Albania Aljazair Amerika Serikat Indonesia India Malaysia Jepang Singapura Thailand

Kemudian buat layout berikut:

www.rumahcoding.co.id

77

@idrumahcoding



Kemudian, anda harus AutoCompleteTextView melalui kode java.

mengkonfigurasi

AutoCompleteTextView autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1); String[] countries = getResources().getStringArray(R.array.countries); ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, countries); autoCompleteTextView.setAdapter(adapter);

Berikut adalah tampilan dari layout di atas:

78

www.rumahcoding.co.id

@idrumahcoding

6.10. ToggleButton ToggleButton merupakan Button yang memiliki kondisi on atau off. Hampir mirip dengan CheckBox, hanya saja penampilan ToggleButton lebih mirip dengan Button. Berikut adalah beberapa atribut penting dari ToggleButton: Atribut android:id android:textOff android:textOn

www.rumahcoding.co.id

Keterangan Mendefinisikan ID unik dari ToggleButton Teks yang akan ditampilkan ketika kondisi Off Teks yang akan ditampilkan ketika kondisi On

79

@idrumahcoding android:checked

Jika true, maka kondisi On, sebaliknya Off

Perhatikan contoh penggunaan ToggleButton berikut:

Hasil dari kode xml di atas adalah seperti pada gambar di bawah ini:

80

www.rumahcoding.co.id

@idrumahcoding

Untuk mengakses ToggleButton melalui kode java dan mengambil kondisinya, gunakan fungsi isChecked. Perhatikan contoh berikut: ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton1); 81oolean isChecked = toggleButton.isChecked();

6.11. RadioButton RadioButton merupakan view yang memiliki dua kondisi, dalam kondisi tercentang atau tidak. Berbeda dengan CheckBox, RadioButton tidak memiliki sifat toggle, artinya user hanya bisa melakukan aksi centang, tanpa bisa mengembalikan ke kondisi semula. Berikut adalah beberapa atribut RadioButton yang penting:

www.rumahcoding.co.id

81

@idrumahcoding

Atribut android:id android:text android:textColor android:checked

Keterangan Mendefinisikan ID unik dari RadioButton Teks yang akan ditampilkan Warna teks dengan format #rgb Jika true, maka kondisi tercentang, sebaliknya tidak tercentang

Perhatikan contoh penggunaan RadioButton berikut:

Berikut adalah tampilan dari kode xml di atas:

82

www.rumahcoding.co.id

@idrumahcoding

Untuk mengakses RadioButton melalui kode java dan mengambil kondisinya, gunakan fungsi isChecked. Perhatikan contoh berikut: RadioButton radioButton = (RadioButton) findViewById(R.id.radioButton1); boolean isChecked = radioButton.isChecked();

6.12. RadioGroup RadioGroup merupakan view untuk meletakkan beberapa RadioButton. Bila sebuah RadioButton di dalam RadioGroup diklik, maka RadioButton yang lain akan otomatis tidak tercentang. Berikut adalah beberapa atribut RadioButton yang penting: Atribut android:id android:checkedButton

Keterangan Mendefinisikan ID unik dari RadioGroup ID dari RadioButton yang tercentang

Perhatikan contoh penggunaan RadioGroup berikut:

www.rumahcoding.co.id

83

@idrumahcoding

Hasil dari layout di atas adalah seperti pada tampilan di bawah ini:

84

www.rumahcoding.co.id

@idrumahcoding

Untuk mengakses RadioGroup melalui kode java dan mengambil nilai yang tercentang gunakan fungsi getCheckedRadioButtonId. Perhatikan contoh potongan kode java berikut: RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup); int selectedRadioButtonId = radioGroup.getCheckedRadioButtonId();

6.13. ProgressBar ProgressBar merupakan view yang berfungsi untuk menampilkan visualisasi kemajuan (progress) dari sebuah proses. Umumnya proses-proses yang perlu untuk ditampilkan progres-nya adalah proses-proses yang membutuhkan waktu yang tidak singkat.

www.rumahcoding.co.id

85

@idrumahcoding

Misalnya, proses upload/download. Berikut adalah beberapa atribut ProgressBar yang perlu anda ketahui: Atribut android:id android:progress android:max

Keterangan Mendefinisikan ID unik dari ProgressBar Nilai progress saat ini Nilai maksimum progress

Perhatikan contoh penggunaan ProgressBar di bawah ini:

Layout di atas menghasilkan tampilan seperti di bawah ini:

86

www.rumahcoding.co.id

@idrumahcoding

Untuk mengakses ProgressBar melalui kode java dan mengatur nilai progress gunakan metode setProgress. Perhatikan contoh berikut: ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar); progressBar.setProgress(50);

www.rumahcoding.co.id

87

@idrumahcoding

7. Layout

Pada bab sebelumnya telah dibahas sedikit tentang pengertian viewgroup. Sebuah viewgroup bisa memiliki beberapa view lain sebagai anak-anaknya. Tujuan utama kenapa beberapa view ditempakan dalam sebuah viewgroup adalah agar memudahkan dalam pengaturan tata letak dan penyelarasan (alignment) dari view-view tersebut. Teknik pengaturan tersebut disebut layout.

7.1. Atribut Layout Ketika sebuah view diletakkan dalam sebuah viewgroup, maka ada beberapa atribut yang mempengaruhi karakteristik layout mereka, diantaranya: 1. gravity dan layout_gravity Atribut gravity dan layout_gravity adalah dua atribut yang mengatur penyelarasan (alignment) view dalam sebuah layout. Kedua atribut tersebut hanya berpengaruh bila digunakan dalam LinearLayout dan RelativeLayout. Atribut gravity merupakan penyelarasan konten view terhadap batas view. Sedangkan layout_gravity merupakan penyelarasan view terhadap parent-nya. Kedua atribut tersebut dapat anda isi dengan satu atau gabungan dari nilai berikut: Nilai top bottom left right

88

Keterangan Sejajar atas Sejajar bawah Sejajar kiri Sejajar kanan www.rumahcoding.co.id

@idrumahcoding center center_vertical center_horizontal

Sejajar tengah Sejajar vertikal Sejajar horizontal

Perhatikan contoh potongan kode xml berikut:
www.rumahcoding.co.id

89

@idrumahcoding android:text="center_horizontal" />
90

www.rumahcoding.co.id

@idrumahcoding android:layout_height="40dp" android:layout_gravity="center_horizontal" android:background="#aacaff" android:text="center_horizontal" />

Pratinjau dari kode xml di atas adalah sebagai berikut:

www.rumahcoding.co.id

91

@idrumahcoding

2. layout_weight Atribut layout_weight merupakan pembobotan terhadap lebar atau tinggi dari sebuah view. Atribut tersebut hanya berpengaruh ketika parent dari view adalah LinearLayout. Atribut ini akan dibahas lebih lanjut pada sub bab pembahasan LinearLayout.

7.2. Frame Layout Frame layout merupakan viewgroup yang hanya dapat menampilkan satu view dalam satu saat. Jika anda menambahkan beberapa view ke dalam frame layout maka view-view tersebut akan saling tindih satu sama lain. Frame layout tidak memiliki mekanisme www.rumahcoding.co.id 92

@idrumahcoding

internal untuk mengatur view-view di dalamnya mengikuti suatu aturan tertentu. Dalam prakteknya, frame layout banyak digunakan ketika hanya ada satu view sebagai anaknya. Perhatikan contoh kode xml berikut:

Pratinjau dari kode xml tersebut adalah sebagaimana terlihat dalam gambar di bawah ini:

www.rumahcoding.co.id

93

@idrumahcoding

7.3. LinearLayout LinearLayout merupakan viewgroup yang dapat meletakkan view-view di dalamnya dalam posisi bertumpuk. Posisi tumpukan bisa berarah vertikal maupun horizontal. Arah posisi tersebut ditentukan oleh sebuah atribut yaitu android:orientation. Nilai dari atribut tersebut adalah vertical atau horizontal. Gambar di bawah mengilustrasikan posisi view anak pada arah horizontal dan vertikal.

94

www.rumahcoding.co.id

@idrumahcoding

View anak dari sebuah LinearLayout dapat mengandung bobot. Bobot tersebut dapat berarti seberapa lebar atau tinggi view anak di dalam layout. Bobot tersebut dapat diatur menggunakan atribut android:layout_weight. Semakin besar nilai bobot tersebut semakin besar pula lebar atau tinggi dari view anak memenuhi sisa ruang dari parent. Perhatikan kode xml berikut <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="Button 1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"

www.rumahcoding.co.id

95

@idrumahcoding android:layout_weight="5" android:text="Button 2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="3" android:text="Button 3"/>

Kode xml di atas mendefinisikan 3 buah button di dalam sebuah LinearLayout dengan orientasi horizontal. Ketiga button tersebut masing-masing memiliki nilai android:layout_weight sebesar 1, 5 dan 3. Hasil dari kode xml di atas adalah seperti pada gambar di bawah:

96

www.rumahcoding.co.id

@idrumahcoding

7.4. RelativeLayout RelativeLayout merupakan viewgroup yang menampilkan beberapa view anak yang berada di dalamnya dalam posisi relatif. Relatif dalam hal ini bermakna relatif terhadap parent ataupun relatif terhadap view yang lain dalam satu parent (sibling). Berikut adalah beberapa atribut yang penting untuk dipahami ketika bekerja menggunakan RelativeLayout Atribut layout_below layout_above layout_toLeftOf layout_toRightOf layout_alignParentTop layout_alignParentRight layout_alignParentBottom layout_alignParentLeft layout_centerInParent layout_centerHorizontal layout_centerVertical

www.rumahcoding.co.id

Keterangan Memposisikan view di bawah view dengan ID yang diacu Memposisikan view di atas view dengan ID yang diacu Memposisikan view di kiri view dengan ID yang diacu Memposisikan view di kanan view dengan ID yang diacu Jika true, posisikan view sejajar dengan batas atas parent Jika true, posisikan view sejajar dengan batas kanan parent Jika true, posisikan view sejajar dengan batas bawah parent Jika true, posisikan view sejajar dengan batas kiri parent Jika true, posisikan view di tengah-tengah parent Jika true, posisikan view di tengah parent secara horizontal Jika true, posisikan view di tengah parent secara vertikal

97

@idrumahcoding

Kode xml di bawah ini menggunakan beberapa atribut di atas dalam sebuah RelativeLayout: <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:text="Button 1"/> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:text="Button 2"/> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" android:text="Button 3"/> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:text="Button 4"/> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 5"/>

98

www.rumahcoding.co.id

@idrumahcoding

Hasil pratinjau dari kode xml di atas menghasil layout seperti pada gambar di bawah ini:

www.rumahcoding.co.id

99

@idrumahcoding

8. Dialog Dalam sebuah aplikasi, Dialog banyak digunakan untuk menyampaikan pesan kepada user. Misal pesan bahwa proses download telah selesai. Dengan adanya dialog, aplikasi yang anda buat akan lebih user friendly. Di android ada beberapa jenis dialog yang dapat anda gunakan. 8.1. Toast Toast merupakan sebuah popup sederhana yang dapat digunakan untuk menampilkan pesan. Toast biasa dipergunakan untuk memberi notifikasi kepada user bahwa sebuah proses telah selesai. Misal menghapus item, mengubah judul, dll sesuai dengan keperluan. Toast akan otomatis hilang setelah 2 atau 3 detik. Untuk menampilkan Toast, gunakan kode berikut dalam sebuah Activity:

8.2. Snack Bar Snackbar adalah komponen desain di android yang diperkenalkan sebagai bagian dari Material Design. Cara kerja snack bar mirip dengan Toast, hanya saja snack bar akan menunjukkan pesan singkatnya di bagian bawah layar. Sama seperti dengan toast, Snack bar akan hilang secara otomatis setelah batas waktu yang ditetapkan. Untuk menampilkan Snack Bar, gunakan kode berikut dalam sebuah Activity:

100

www.rumahcoding.co.id

@idrumahcoding

8.3. Alert Dialog Alert Dialog adalah sebuah pop up yang muncul pada saat-saat tertentu dan berfungsi untuk memberi info pada pengguna, berbentuk kotak. Alert Dialog biasanya digunakan untuk pemberitahuan atau mengirim pesan informasi yang harus sedikit mengganggu pengguna dan biasanya juga untuk melakukan tugas-tugas pendek. Berbeda dengan Toast dan Snack bar, Alert Dialog tidak secara otomatis hilang dari layar, dibutuhkan input dari pengguna untuk menghilangkan Alert Dialog dari layar. Untuk menampilkan Alert Dialog, gunakan kode berikut dalam sebuah Activity:

8.4. Progress Dialog Progress Dialog juga jendela pop up dialog pada android. Progress Dialog pada android biasanya digunakan sebagai

www.rumahcoding.co.id

101

@idrumahcoding

pemberitahuan kepada pengguna aplikasi agar menunggu sejenak selama suatu aksi sedang dilakukan. Hal ini tentu berguna kala didalam sebuah Activity yang memerlukan eksekusi dalam waktu yang cukup lama, misalkan mengunduh file dari suatu situs dan mengirim file ke perangkat android lain. Berikut adalah contoh untuk menbuat progress dialog:

8.5. Activity Sebagai Dialog Activity sebagai dialog artinya, membuat sebuah activity dalam android dan menggunakannya sebagai dialog pop up atau dengan kata lain view dari activity ini tidak muncul dalam satu layar penuh melainkan muncul diatas view dari activity lain.

102

www.rumahcoding.co.id

@idrumahcoding

9. Menu Menu adalah komponen antarmuka pengguna yang lazim dalam banyak tipe aplikasi. Untuk menyediakan pengalaman pengguna yang sudah akrab dan konsisten, Anda harus menggunakan API menu untuk menyajikan tindakan dan opsi lain dalam aktivitas kepada pengguna. Semua resource menu disimpan di dalam package res->menu karena untuk membuat menu kita akan lebih menggunakan konfigurasi melalui xml.

Dan berikut adalah contoh konfigurasi menu : <menu xmlns:android="http://schemas.android.com/apk/res/android">

www.rumahcoding.co.id

103

@idrumahcoding

9.1. Menu Sebagai Action Menu sebagai action atau yang lebih dikenal banyak sebagai Action Menu. Action Menu sendiri adalah menu yang letaknya di bar aplikasi. Action Menu biasa digunakan untuk menaruh fitur-fitur yang paling penting dari activity yang sedang aktif.

Perlu diingat dalam membuat action menu di android adalah : Attribute android:id

android:title android:icon app:showAsAction

Keterangan id yang untuk menu dimana akan digunakan dalam java untuk memberikan aksi ke menu ini. judul untuk menu icon untuk men Show as action menunjukkan kapan menu ini muncul di app bar

Attribut showAction dalam android dibagi menjadi menjadi 3, yaitu : 1. 2.

104

always: Selalu muncul di app bar never: Tidak muncul di app bar. www.rumahcoding.co.id

@idrumahcoding

3.

ifRoom: Muncul saat masih tersedia ruang di app bar

9.2. Popup Menu Popup menu adalah salah satu komponen menu yang akan tampil secara baris ke bawah ketika pengguna aplikasi menekan tombol atau item tertentu. Popup menu juga bisa disebut sebagai drop down menu, karena tampilannya sama seperti bentuk drop down pada navigasi di suatu situs web. Untuk lebih jelasnya lihat gambar dibawah ini;

Berikut adalah cara untuk membuat pop up menu : Konfigurasi menu dalam file xml dengan nama pop_menu.xml <menu xmlns:android="http://schemas.android.com/apk/res/android">

www.rumahcoding.co.id

105

@idrumahcoding



Memanggilnya dalam java : final Button button = findViewById(R.id.btn1); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { PopupMenu popupMenu = new PopupMenu(MainActivity.this, button); popupMenu.getMenuInflater().inflate(R.menu.pop_up_menu, popupMenu.getMenu()); popupMenu.setOnMenuItemClickListener( new PopupMenu.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.one: showToast("One"); break; case R.id.two: showToast("Two"); break; case R.id.three: showToast("Three"); break; } return false; } }); } });

106

www.rumahcoding.co.id

@idrumahcoding

9.3. Context Menu Context Menu adalah salah satu komponen menu yang akan muncul ketika pengguna menekan lama (long press) pada suatu elenem dalam tampilan suatu Activity. Context menu bisa juga sebagai Floating menu.

www.rumahcoding.co.id

107

@idrumahcoding

Untuk membuat context menu maka kita perlu untuk mengoverride method di dalam class Activity yang akan memiliki context menu ini. Berikut adalah contohnya: Pada gambar diatas merupakan activity class denga nama ListStoreActivity.java, sehingga untuk membuat context menunya dengan cara menambahkan kode berikut di dalam class ini : Kode ini untuk membuat context menu di activity @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { getMenuInflater().inflate(R.menu.context_menu_list_activity, menu); super.onCreateContextMenu(menu, v, menuInfo); }

Kode ini untuk membuat item di context menu dapat memiliki aksi ketika diklik/dipilih @Override

108

www.rumahcoding.co.id

@idrumahcoding public boolean onContextItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.coupons: //aksi ketika menu coupons diklik break; case R.id.cashback: //aksi ketika menu cashback diklik break; case R.id.deals: //aksi ketika menu deals diklik break; } return super.onContextItemSelected(item); }

www.rumahcoding.co.id

109

@idrumahcoding

10. SQLite Sqlite merupakan merupakan sebuah sistem manajemen basis data relasional yang bersifat ACID-compliant dan memiliki ukuran pustaka kode yang relatif kecil. Arti dari data relational adalah setiap data dalam database memiliki keterkaitan dengan data lainnya. Tujuan dari penggunaan konsep relational data adalah untuk mengurangi jumlah data yang disimpan dan menghindari adanya duplikasi data(redundant data). Proyek sqlite sendiri diprakarsai atau dikerjakan oleh D. Richard Hipp. Sqlite ditulis dalam bahasa pemrograman C dan juga merupakan proyek yang bersifat public domain yang dapat diartikan proyek SQLite bersifat open source atau sumber terbuka. Inti dari SQLite bukanlah sebuah sistem yang mandiri yang berkomunikasi dengan sebuah program, melainkan sebagai bagian integral dari sebuah program secara keseluruhan. Sehingga protokol komunikasi utama yang digunakan adalah melalui pemanggilan APIsecara langsung melalui bahasa pemrograman. Mekanisme seperti ini tentunya membawa keuntungan karena dapat mereduksi overhead, latency times, dan secara keseluruhan lebih sederhana. Karena kesederhanaan inilah, android mengadopsi Sqlite sebagai sistem database default. Hal yang perlu anda ketahui tentang database sqlite adalah query. Query merupakan bahasa untuk melakukan manipulasi terhadap database, yang telah distandarkan dan lebih dikenal dengan nama Structured Query Language (SQL). Query inilah bahasa yang dipakai untuk memanipulasi data di database. Yang perlu anda ketahui ketika menggunakan konsep basis data relational adalah Modelling data. Modelling data adalah konsep representasi object nyata ke dalam sebuah class java. Misalkan object nyata yang akan disimpan datanya adalah orang maka yang perlu anda pikirkan adalah pemilihan data dari object orang tersebut yang akan

110

www.rumahcoding.co.id

@idrumahcoding

disimpan kedalam database. Contoh, pemilihan data yang akan kita gunakan dari object orang tersebut adalah nama, no hp, dan alamat dari orang tersebut maka represetasinya dalam kode java adalah dengan membuat class baru dengan nama Orang dan membuat class propertiesnya dengan mengubah kodenya menjadi seperti dibawah ini: public class Orang { private String nama; private String noHp; private String alamat; }

Setelah setelah membuat classs dan properties class seperti diatas, selanjutnya kita perlu membuat method getter dan setter dari class tersebut. Getter berguna untuk mengambil data dari obj mengambil data dari object orang sedangkan setter digunakan untuk memodifikasi data dari object orang tersebut. Untuk membuat getter dan setter maka kita perlu membuat method di class tersebut. Method getter merupakan method yang nantinya akan mengembalikan nilai ketika dipanggil/dieksekusi sedangkan setter adalah method yang tidak mengembalikan nilai saat dieksekusi. Sekarang kita update kode di class orang tadi untuk menambahkan method setter dan getter. Hal perlu anda perhatikan dalam penamaan method getter adalah nama method selalu diawali dengan get diikuti dengan nama property class yabg akan dibuat getternya. Sedangkan dalam penamaan method setter, penamaannya selalu diawali dengan set diikuti dengan nama property class yang akan dibuat setternya dan setelahnya tambahkan parameter ke dalam method tersebut dan sesuaikan tipe datanya dengan tipe data dari class property yang dituju. Berikut adalah kode class Orang yang telah memiliki method setter dan getter :

www.rumahcoding.co.id

111

@idrumahcoding public class Orang { private String nama; private String noHp; private String alamat; public String getNama() { return nama; } public void setNama(String nama) { this.nama = nama; } public String getNoHp() { return noHp; } public void setNoHp(String noHp) { this.noHp = noHp; } public String getAlamat() { return alamat; } public void setAlamat(String alamat) { this.alamat = alamat; } }

Setelah itu, tambahkan property id kedalam class Orang dan buat getter dan setternya. Property id ini merupakan hal wajib dalam meggunakan konsep basis data relational, karena fungsinya sebagai pembeda dari data lainnya. Di database, property id ini dikenal sebagai kolom id yang berperan sebagai primary key, artinya setiap data yang tersimpan dalam database memiliki nilai yang unik(tidak sama dengan yang lain). Biasanya, kolom id didatabase merupkan kolom yang berisikan tipe data angka sehingga dapat ditambahkan attribute AUTO INCREMENT kedalam kolom id tersebut yang nantiya akan secara www.rumahcoding.co.id 112

@idrumahcoding

otomastis menambahkan nilai 1 ketika ada data baru yang masuk kedalam database. Untuk menambahkan property id ke dalam class java maka update kelas orang tersebut sehingga menjadi seperti dibawah ini: public class Orang { private private private private

int id; String nama; String noHp; String alamat;

public int getId() { return id; } public void setId(int id) { this.id = id; } public String getNama() { return nama; } public void setNama(String nama) { this.nama = nama; } public String getNoHp() { return noHp; } public void setNoHp(String noHp) { this.noHp = noHp; } public String getAlamat() { return alamat;

www.rumahcoding.co.id

113

@idrumahcoding } public void setAlamat(String alamat) { this.alamat = alamat; } }

10.1. SQLiteHelper Yang dimaksud dengan SQLiteHelper adalah modul bantuan yang disediakan oleh android SDK(Standard Development Kit) guna kepentingan manipulasi database sqlite. Dengan menggunakan modul ini maka kita dapat membuat database, menghapus database, membuka akses ke database dan menutup database ketika sudah tidak digunakan. Untuk menggunakan modul bantuan ini, kita perlu membuat sebuah class baru yang men-extends class SQLiteOpenHelper. Berikut adalah contoh kodenya : public class DbHelper extends SQLiteOpenHelper { private static final String DATABASE_NAME = "app.db"; private static final int DATABASE_VERSION = 1; public DbHelper(Context context) { super(context, DATABASE_NAME, null, DATABASE_VERSION); } @Override public void onCreate(SQLiteDatabase db) { } @Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

114

www.rumahcoding.co.id

@idrumahcoding

} }

Perhatikan method onCreate pada kode diatas. Method onCreate digunakan untuk keperluan membuat table dalam sqlite beserta dengan kolom-kolomnya. Table yang akan kita buat disini adalah tabel dengan nama orang yang nantinya akan berisi kolom id, nama, no_hp dan alamat. Pembuatan kolom tersebut guna mewakili setiap class property yang kita buat sebelumnya di dalam model class Orang. Berikut adalah kode dan query untuk membuat table orang didalam badan method onCreate : @Override public void onCreate(SQLiteDatabase db) { String QUERY_CREATE_TABLE_ORANG = "CREATE TABLE orang (" + "_id INTEGER PRIMARY KEY AUTOINCREMENT, " + "nama TEXT, " + "no_hp TEXT, " + "alamat TEXT)"; db.execSQL(QUERY_CREATE_TABLE_ORANG); }

Perhatikan

bagian

variabel

yang

bernama

QUERY_CREATE_TABLE_ORANG, nilai dalam variabel adalah berupa query

yank akan memberi perintah kepada sqlite untuk membuat table dengan nama orang dengan disertai kolom-kolom sebagai berikut : 1.

Kolom _id dengan tipe datanya adalah INTEGER karena tipe data dari class property id pada class Orang juda merupakan tipe data angka. Perhatikan juga, setelah penulisan tipe data INTEGER terdapat keyword PRIMARY KEY dan AUTOINCREMENT. Keyword PRIMARY KEY akan membuat kolom id pada table orang hanya boleh diisikan nilai yang unik. Sedangkan keyword AUTOINCREMENT akan membuat kolom id selalu

www.rumahcoding.co.id

115

@idrumahcoding

menambahkan nilai sebesar 1 pada setiap data baru yang masuk.

2.

Untuk kolom selebihnya, yaitu kolom nama, no_hp dan alamat diberikan tipe data TEXT karena property class nama, noHp dan alamat pada class Orang memiliki tipe data String.

10.2. Melakukan Query Data Untuk mengambil data dari database, hal yang perlu anda ingat pertama kali adalah query "SELECT", contoh : SELECT nama, alamat FROM person;

Query diatas menjelaskan bahwa ambil semua data dari kolom nama dan alamat yang ada pada table person. Untuk mengambil data dengan batasan tertentu maka setelah penulisan nama table pada query, tambahkan klausa WHERE, contoh : SELECT nama, alamat FROM person WHERE nama="rumah_coding";

Arti dari query diatas adalah ambil semua data dari kolom nama dan alamat yang ada pada table person dimana namanya adalah rumah_coding.

10.3. Menambah Data Query yang digunakan untuk menambahkan data baru pada database sqlite diawali dengan query "INSERT", contoh : Misalkan telah ada table dengan nama person dan table tersebut memiliki sejumlah kolom yang masing-masing namanya

116

www.rumahcoding.co.id

@idrumahcoding

adalah id, nama, alamat. Maka query untuk melakukan penambahan data ke dalam tabel tersebut adalah : INSERT INTO person VALUES(1, 'rumah_coding', 'depok');

Dalam query diatas, kita memasukkan satu data ke table person dimana datanya memiliki id = 1, nama = rumah_coding, dan alamat = 'depok'. Dalam satu query INSERT kita dapat memasukkan beberapa data sekaligus, contoh: INSERT INTO person VALUES (1, 'rumah_coding', 'depok'), (2, 'rumah_coding', 'depok'), (3, 'rumah_coding', 'depok'), (4, 'rumah_coding', 'depok') ;

Dalam android untuk menambahkan data baru adalah dengan menulis kode berikut:

10.4. Mengupdate Data Yang dimaksud update data adalah merubah data yang sudah ada sebelumnya dalam database ke data yang lebih baru. Untuk mengupdate data dalam database android, yang perlu anda ketahui adalah id data tersebut.

www.rumahcoding.co.id

117

@idrumahcoding

12. List View

12.1. Apa itu List View? ListView adalah kelompok tampilan yang menampilkan daftar item yang dapat digulir/discroll. Setiap item secara otomatis dimasukkan ke dalam ListView dengan menggunakan Adapter. Adapter sendiri adalah jembatan antara AdapterView(dalam hal ini ListView) dengan data. Adapter inilah yang menyediakan akses ke setiap item data dan juga bertanggung jawab untuk membuat sebuah View pada setiap item dalam kumpulan data.

Dikarenakan fungsi dari ListView adalah sebagai wadah untuk menampilkan beberapa data maka pemberian id terhadap view ini sudah menjadi hal yang wajib. Hal ini dikarenakan setiap data yang akan dimasukkan atau ditampilkan dalam ListView selalu dengan cara memanggil id dari ListView dalam kode java. Pemanggilan ListView dalam kode java sendiri bertujuan untuk mengubah default view adapter pada ListView menjadi view adapter yang kita butuhkan dalam menampilkan data kepada pengguna aplikasi. Berikut adalah contoh untuk membuat ListView: 12.2. Default Adapter

118

www.rumahcoding.co.id

@idrumahcoding

Secara default, android telah menyediakan view adapter yang dapat digunakan secara langsung, antara lain : 1.

Simple List Item 1

Merupakan view adapter yang hanya terdiri dari satu view, view yang dimaksud adalah berupa TextView yang memiliki id dengan nama text1. Adapter view ini sudah secara default ada didalam android SDK. Untuk menggunakan adapter view ini maka diperlukan untuk mengubah adapter dari ListView menjadi Contoh : 1.

Simple List Item 2

Sama halnya denga simple list item 1, adapter view ini juga sudah ada didalam SDK android dan perbedaannya hanya terletak di jumlah TextView. Pada view adapter ini terdapat 2 buah TextView dan masing-masing id nya adalah text1 dan text2. Secara tampilan, TextView dengan id text1 merupakan header sefangkan TextView dengan id text2 merupakan sub judul, Contoh :

www.rumahcoding.co.id

119

@idrumahcoding

13. Project: Membuat Aplikasi SekolahKu Aplikasi SekolahKu merupakan penerapan dari materi--materi yang sebelumnya sudah dipelajari. Tujuan dari pembuatan aplikasi ini adalah agar anda dapat memahami lebih jelas bagaimana materimateri tersebut diterapkan dalam satu keutuhan aplikasi. Mulai dari tampilan Splash Sceen sampai update data siswa. Sebagai permulaan untuk membuat aplikasi Sekolah Ku, ikuti langkah-langkah berikut ini: 1.

Buat Project Baru Dengan Nama Sekolah Ku

Klik Start a new Android Studio project sehingga muncul tampilan seperti dibawah ini :

120

www.rumahcoding.co.id

@idrumahcoding

Untuk kolom application name isikan dengan Sekolah Ku dan untuk kolom Company domain diisikan dengan rumahCoding.com. Hal yang perlu diingat disini adalah kolom Project location yang merupakan lokasi dimana project kita tersimpan dan jangan beri tanda ceklist pada checkbox pilihan Include C++ support dan Include Kotlin support karena hanya membutuhkan bahasa pemrograman java dalam membuat aplikasi ini. Jika sudah klik Next sehingga muncul tampilan seperti dibawah ini :

www.rumahcoding.co.id

121

@idrumahcoding

Pada bagian ini, hanya beri tanda ceklist pada Phone and Tablet kemudian pilih targetnya API-nya versi 15. Klik Next untuk langkah selanjutnya sehingga muncul tampilan berikut:

122

www.rumahcoding.co.id

@idrumahcoding

Pada langkah ini pilih Add No Activity karena nanty kita akan membuatnya nanti. Klik finish sehingga muncul tampilan berikut:

www.rumahcoding.co.id

123

@idrumahcoding

Pada bagian ini anda perlu sedikit bersabar karena project Sekolah Ku sedang mengunduh depedencies(library) yang dibutuhkan dalam membuat aplikasi Sekolah Ku.

2.

Membuat FormActivity

Klik kanan pada bagian app seperti yang nampak digambar dibawah ini :

Pilih New > Activity > Empty Activity sehingga muncul dialog seperti gambar dibawah ini :

124

www.rumahcoding.co.id

@idrumahcoding

Ganti isi dari kolom Activity Name menjadi FormActivity. Hal yang perlu diingat adalah beri tanda ceklist pada checkbox Generate Layout File. Pemberian tanda ceklist ini bertujuan untuk membuat layout dari activity yang akan dibuat. Ingat selalu activity adalah gabungan dari file java dan file xml dimana file java merupakan controller yang akan menghandle aksi-aksi yang mungkin dilakukan di dalam activity dan file xml merupakan configurasi tampilan yang akan dilihat pada layar hp android. Langkah-langkah ini akan selalu digunakan setiap kali anda ingin membuat activity baru jadi mengingat langkah ini ini merupakan hal yang penting. FormActivity sendiri memiliki tujuan untuk menghandel inputan data siswa yang diberikan oleh pengguna aplikasi. Kegiatan yang dihandle oleh activity ini adalah validasi input yang diberikan pengguna dan penyimpanan data siswa yang diinput ke dalam database.

www.rumahcoding.co.id

125

@idrumahcoding

3.

Membangun Layout FormActivity

Sebelum mulai membangun layout dari FormActivity, kita akan mengedit terlebih dahulu file configurasi warna yang terdapat dalam res > values > color.xml. Pengeditan ini bertujuan untuk mengubah warna default dari aplikasi. Untuk lebih jelas dimana lokasi file konfigurasinya, lihat gambar dibawah ini :

Buka file color.xml tersebut dan ubah kodenya menjadi seperti dibawah ini : #fa7500 #fa7500 #ff8a1e #ffffff

Sekarang buka file configurasi layout yang merupakan file xml yang terletak didalam folder res > layout. Ingat kembali materi mengenai Struktur Projek Android Studio yang menjelaskan bahwa setiap file configurasi xml selalu berada pada folder res dan file configurasi xml dari layout selalu terletak dalam res > layout. Memahami struktur project adalah hal yang penting. Untuk lebih jelasnya lihat gambar dibawah ini : www.rumahcoding.co.id 126

@idrumahcoding

Ubah isi dari file activity_form.xml tersebut sehingga menjadi seperti ini : <EditText android:id="@+id/nama_depan_field" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"

www.rumahcoding.co.id

127

@idrumahcoding android:hint="Nama Depan" android:inputType="textPersonName" /> <EditText android:id="@+id/nama_belakang_field" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:inputType="textPersonName" android:hint="Nama Belakang" /> <EditText android:id="@+id/no_hp_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="No.Hp" android:inputType="number" /> <EditText android:id="@+id/email_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:hint="Email"/> <EditText android:id="@+id/tgl_lahir_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="none" android:clickable="true" android:focusable="false" android:hint="Tanggal Lahir (dd/MM/yyyy)"/>

128

www.rumahcoding.co.id

@idrumahcoding

<Spinner android:id="@+id/jenjang_spinner" android:layout_width="match_parent" android:layout_height="wrap_content" />
www.rumahcoding.co.id

129

@idrumahcoding android:text="Membaca" /> <EditText android:id="@+id/input_alamat" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textMultiLine" android:hint="Alamat"/> <Button android:id="@+id/btn_save_student" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="Simpan" android:background="@color/colorPrimary" android:textColor="@color/white" android:textStyle="bold" />

Konfigurasi diatas akan menghasilkan tampilan seperti gambar dibawah ini:

130

www.rumahcoding.co.id

@idrumahcoding

Dikarenakan root element dari configurasi diatas adalah LinearLayout maka layout ini nantinya tidak bisa digulir / di-scroll. Untuk membuatnya menjadi bisa di-scroll maka ganti root elementnya menjadi ScrollView. Perlu diingat ScrollView hanya boleh mempunyai satu child view. Jadi agar semua view yang telah ada sebelumnya dapat dimuat dalam ScrollView maka kita akan menggunakan LinearLayout sebagai pembungkus/wrapper dari semua view yang telah ada. Untuk melakukan hal ini tentunya anda perlu merubah configurasi layoutnya menjadi seperti dibawah ini : <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

www.rumahcoding.co.id

131

@idrumahcoding android:layout_height="match_parent" android:layout_margin="10dp" tools:context=".FormActivity"> <EditText android:id="@+id/nama_depan_field" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Nama Depan" android:inputType="textPersonName" /> <EditText android:id="@+id/nama_belakang_field" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:inputType="textPersonName" android:hint="Nama Belakang" /> <EditText android:id="@+id/no_hp_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="No.Hp" android:inputType="number" />

132

www.rumahcoding.co.id

@idrumahcoding <EditText android:id="@+id/email_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:hint="Email"/> <EditText android:id="@+id/tgl_lahir_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="none" android:clickable="true" android:focusable="false" android:hint="Tanggal Lahir (dd/MM/yyyy)"/>

www.rumahcoding.co.id

133

@idrumahcoding <Spinner android:id="@+id/jenjang_spinner" android:layout_width="match_parent" android:layout_height="wrap_content" /> <EditText android:id="@+id/input_alamat" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textMultiLine" android:hint="Alamat"/>

134

www.rumahcoding.co.id

@idrumahcoding

<Button android:id="@+id/btn_save_student" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="Simpan" android:background="@color/colorPrimary" android:textColor="@color/white" android:textStyle="bold" />

Sekarang anda perlu menambahkan icon pada view button simpan, sebelum melakukannya anda bisa mengunduh icon yang akan digunakan dalam project aplikasi ini di link berikut : https://drive.google.com/file/d/1fpxBGRDgjoJPVbjxD1dHFnLueCDFebU/view?usp=sharing Setelah anda mengunduhnya, buka filenya dan ekstrak. Copy dan paste hasil ekstrak tersebut ke lokasi_project_anda > app > src > main > res. Jika saat nanty muncul dialog untuk mereplace(mengganti) file tujuan maka pilih yes. Setelah itu, kembali file activity_form.xml dan tambahkan attribute android:drawableStart="@drawable/ic_save" kedalam view button sehingga kode bagian view button menjadi seperti dibawah ini : <Button android:id="@+id/btn_save_student" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="Simpan" android:drawableStart="@drawable/ic_save" android:background="@color/colorPrimary"

www.rumahcoding.co.id

135

@idrumahcoding android:textColor="@color/white" android:textStyle="bold" />

Dan hasil dari configurasi diatas akan membuat button menjadi nampak seperti gambar dibawah ini :

4.

Menambahkan Action Menu Pada FormActivity

Untuk menambahkan action menu pada FormActivity, maka kita harus membuat file menu baru. Berikut adalah langkah-langkah membuat menu pada android : Klik kanan pada folder res kemudian pilih New > Android resource file. Lihat gambar dibawah ini untuk lebih jelasnya :

136

www.rumahcoding.co.id

@idrumahcoding

Setelah itu akan muncul dialog sebagai berikut :

www.rumahcoding.co.id

137

@idrumahcoding

Pada kolom File name, isikan dengan nama form_activity_menu sedangkan untuk Resource type pilih Menu. Klik ok dan ubah kode dalam file tersebut menjadi seperti dibawah ini : <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

Kode diatas akan menghasilkan tampilan preview seperti dibawah ini :

138

www.rumahcoding.co.id

@idrumahcoding

5.

Membuat Controller FomActivity

Untuk membuat controller dari FormActivity maka yang kita akan ubah adalah file java dari FormActivity. Sekarang buka file java dengan nama FormActivity seperti yang tampak pada gambar di bawah ini :

Buat class properties untuk setiap view yang ada dalam activity_form.xml dan panggil setiap id viewnya sebagai inisialisasi dari masing-masing view tersebut. Sehingga kode java pada FormActivity menjadi seperti dibawah ini : public class FormActivity extends AppCompatActivity { private EditText namaDepanField, namaBelakangField, noHpField, alamatField, emailField, birtDateField; private RadioButton rbPria, rbWanita; private Spinner spJenjang; private CheckBox chkBaca, chkNulis, chkGambar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_form); namaDepanField =

www.rumahcoding.co.id

139

@idrumahcoding findViewById(R.id.nama_depan_field); namaBelakangField = findViewById(R.id.nama_belakang_field); noHpField = findViewById(R.id.no_hp_field); emailField = findViewById(R.id.email_field); birtDateField = findViewById(R.id.tgl_lahir_field); rbPria = findViewById(R.id.pria_rb); rbWanita = findViewById(R.id.wanita_rb); spJenjang = findViewById(R.id.jenjang_spinner); chkBaca = findViewById(R.id.baca_checkbox); chkNulis = findViewById(R.id.chk_nulis); chkGambar = findViewById(R.id.chk_gambar); alamatField = findViewById(R.id.input_alamat); Button btnSave = findViewById(R.id.btn_save_student); } }

Sekarang kita akan buat beberapa method yang akan digunakan untuk menghandle input dari pengguna aplikasi. Caranya adalah dengan menambahkan kode dibawah ini setelah method dengan nama onCreate. private void save() { } private void showDialogPilihTanggal() { } private String getGenderTerpilih() { return null; } private String getHobiTerpilih() { return null; }

140

www.rumahcoding.co.id

@idrumahcoding private boolean validateInput() { return true; } private boolean validateNama(EditText editText) { return true; } private boolean validateAlamat() { return true; } private boolean validateEmail() { return true; } private boolean validateNoHp() { return true; } private boolean isEmpty(EditText editText) { return true; } private String getValueFrom(EditText editText) { return null; }

Penjelasan singkat mengenai tujuan membuat method diatas : • • •

Method save nantinya akan digunakan untuk melakukan perintah menyimpan data siswa ke dalam database sqlite. Method showDialogPilihTanggal nantinya akan digunakan untuk menampilkan dialog pemilihan tanggal. Method getGenderTerpilih nantinya akan digunakan untuk mengambil pilihan gender. Method ini nantinya akan memberikan nilai balikan dengan tipe data String .

www.rumahcoding.co.id

141

@idrumahcoding

•

•

•

• • • • •

Method getHobiTerpilih nantinya akan digunakan untuk mengambil pilihan hobi. Method ini nantinya akan memberikan nilai balikan dengan tipe data String. Method validateInput nantinya akan digunakan untuk mengecek semua input data yang dimasukkan oleh pengguna aplikasi. Jika semua input valid maka method ini akan mengembalikan nilai true. Method validateNama nantinya akan digunakan untuk mengecek input nama yang dimasukkan oleh pengguna aplikasi. Method ini memiliki satu parameter bertipe EditText, hal ini dikarenakan pada layout activity_form.xml terdapat 2 buah view input nama yang masing-masing viewnya bertipe EditText yakni input nama depan dan input nama belakang. Untuk itulah kita perlu untuk mengecek masing input nama tersebut dengan cara validasi yang sama. Method validateAlamat nantinya akan digunakan untuk mengecek input alamat. Method validateEmail nantinya akan digunakan untuk mengecek input email. Method validateNoHp nantinya akan digunakan untuk mengecek input no hp. Method isEmpty nantinya akan mengecek apakah input pada view bertipe data EditText masih kosong atau tidak. Method getValueFrom nantinya akan digunakan untuk mengambil data yang diinput pada view EditText.

Pemahaman terhadap tujuan pembuatan method tersebut amatlah penting. Karena mengerti alur logika sebuah program jauh lebih penting dibanding memahami arti kode itu sendiri. Membuat kode program tanpa memahami tujuan dari kode akan menyebabkan masalah serius pada program atau bisa dibilang sebagai hal yang percuma.

6. Memberikan Aksi Pada Button Save dan EditText Tanggal Lahir

142

www.rumahcoding.co.id

@idrumahcoding

Massih dalam file FormActivity.java sebelumnya, arahkan cursor dibawah inisialisasi local variabel btnSave yang terdapat didalam method onCreate. Kemudian ketikkan kode dibawah ini : btnSave.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { save(); } }); emailField.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialogPilihTanggal(); } });

Dengan begitu maka code didalam method onCreate menjadi seperti dibawah ini :

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_form); namaDepanField = findViewById(R.id.nama_depan_field); namaBelakangField = findViewById(R.id.nama_belakang_field); noHpField = findViewById(R.id.no_hp_field); emailField = findViewById(R.id.email_field); birtDateField = findViewById(R.id.tgl_lahir_field); rbPria = findViewById(R.id.pria_rb); rbWanita = findViewById(R.id.wanita_rb); spJenjang = findViewById(R.id.jenjang_spinner);

www.rumahcoding.co.id

143

@idrumahcoding chkBaca = findViewById(R.id.baca_checkbox); chkNulis = findViewById(R.id.chk_nulis); chkGambar = findViewById(R.id.chk_gambar); alamatField = findViewById(R.id.input_alamat); Button btnSave = findViewById(R.id.btn_save_student); btnSave.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { save(); } }); emailField.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { showDialogPilihTanggal(); } }); }

Sekarang update kode method getValueFrom menjadi seperti dibawah ini: private String getValueFrom(EditText editText) { return editText.getText().toString().trim(); }

Perhatikan kode: editText.getText().toString().trim(), kode ini adalah cara untuk mengambil input yang diketikkan oleh pengguna aplikasi pada view yang tipe datanya adalah EditText. Sekarang update kode method isEmpty menjadi seperti dibawah ini : private boolean isEmpty(EditText editText) { return getValueFrom(editText).isEmpty(); }

144

www.rumahcoding.co.id

@idrumahcoding

Perhatikan kode getValueFrom(editText).isEmpty(): , kode ini memiliki arti mengambil nilai bertipe String dari view bertipe EditText karena method getValueFrom mengembalikan nilai String. Dan di classs String sendiri sudah tersedia method dengan nama isEmpty yang berfungsi untuk mengecek nilai dari String tersebut. Jika String tersebut masih kosong maka akan mengembalikan nilai false begitu sebaliknya. Nilai balikan dari class String inilah yang menjadi nilai balikan dari method getValueFrom. Selain itu kode diatas juga menjelaskan bagaimana memanggil atau menggunakan method yang sudah kita buat sebelumnya. Sekarang update kode method validateNoHp menjadi seperti dibawah ini: private boolean validateNoHp() { if (isEmpty(noHpField)) { noHpField.setError("No Hp Masih Kosong"); noHpField.requestFocus(); return false; } String noHp = getValueFrom(noHpField); if (noHp.length() > 12) { noHpField.setError("No Hp Tidak Valid"); noHpField.requestFocus(); return false; } return true; }

Seperti nama methodnya dan yang sudah dijelaskan sebelumnya, method ini berfungsi untuk mengecek input mengenai no HP yang diinput oleh pengguna aplikasi. Perhatikan kode: if(isEmpty(noHpField)), kode if ini berarti jika EditText input no hp masih kosong maka eksekusi kode didalam

www.rumahcoding.co.id

145

@idrumahcoding

blok if lalu mengembalikan nilai false yang berarti input no hp masih belum valid. Perhatikatikan kode: noHpField.setError("No Hp Masih Kosong"), kode ini digunakan untuk memberikan notifikasi kepada pengguna aplikasi bahwa no hp masih kosong karena letak kode ini didalam blok if(isEmpty(noHpField)). Sekarang update kode method validateEmail menjadi seperti dibawah ini: private boolean validateEmail() { if(isEmpty(emailField)) { emailField.setError("Email masih kosong"); return false; } String email = getValueFrom(emailField); if (!email.contains("@")) { emailField.setError("Email tidak valid"); return false; } return true; }

Perhatikan kode: if(!email.contains("@")), pada kode ini terdapat tanda seru(!) sebelum kata email. Tanda seru dalam java merupakan negasi yang bisa diartikan dengan kata bukan. Sehingga kode ini digunakan untuk mengecek tiap karakter didalam String apakah didalam String tidak terdapat karakter '@'. Sekarang update kode method validateAlamat menjadi seperti dibawah ini: private boolean validateAlamat() { if (isEmpty(alamatField)) { alamatField.setError("Alamat masih kosong");

146

www.rumahcoding.co.id

@idrumahcoding alamatField.requestFocus(); return false; } return true; }

Perhatikan kode: alamatField.requestFocus(), pada method validasi sebelumnya tentu kita sudah banyak melihat kode ini. Kode ini berfungsi untuk membuat view menjadi meliki focus dibandingkan dengan view lainnya. Pada kasus ini view yang meminta focus adalah bertipe EditText sehingga cursor input akan segera berpindah ke view ini. Sekarang update kode method validateNama menjadi seperti dibawah ini: private boolean validateNama(EditText editText) { if (isEmpty(editText)) { editText.setError("Nama Tidak boleh kosong"); editText.requestFocus(); return false; } String name = getValueFrom(editText); String forbiddenChars = "#!$"; for (char forbiddenChar : forbiddenChars.toCharArray()) { if (name.contains(String.valueOf(forbiddenChar))) { editText.setError("Nama Tidak Valid"); return false; } } return true; }

www.rumahcoding.co.id

147

@idrumahcoding

Perhatikan kode: for(char forbiddenChar: forbiddenChars.toCharArray())

Kode bisa dibaca dengan 'untuk setiap karakter yang terdapat dalam koleksi karakter terlarang lakukan pernyataan dibawah ini. Maksud dari penyataan disini adalah kode yang terdapat didalam blok perulangan. Dalam kasus ini, kita mengecek input nama apakah memiliki karakter terlarang, jika memang ada maka method ini akan mengembalikan nilai false. Sekarang update kode method validateInput menjadi seperti dibawah ini: private boolean validateInput() { return validateNama(namaDepanField) && validateNama(namaBelakangField) && validateNoHp() && validateEmail() && validateAlamat(); }

Kode diatas merupakan penyederhaan proses validasi sehingga ketika suato operasi memerlukan validasi semua input yang diberikan hanya tinggal memanggil method ini. Sekarang ubah kode method getHobiTerpilih menjadi seperti dibawah ini: private String getHobiTerpilih() { List<String> hobies = new ArrayList<>(); if (chkBaca.isChecked()) hobies.add("Membaca"); if (chkNulis.isChecked()) hobies.add("Menulis"); if (chkGambar.isChecked()) hobies.add("Menggambar"); return TextUtils.join(",", hobies); }

Perhatikan kode: List<String> hobies = new ArrayList<>(), baris kode ini merupakan cara untuk membuat koleksi data dalam java.

148

www.rumahcoding.co.id

@idrumahcoding

Dalam hal ini kita akan membuat sebuah koleksi data dari sejumlah hobi yang dipilih oleh pengguna aplikasi dan setiap hobi yang dipilih merupakan nilai yang tipe datanya adalah String. Setelah data koleksi tersebut sudah siap, kita akan membuat String baru berdasarkan dari koleksi tersebut dan akan setiap hobinya akan dipisahkan dengan tanda koma(,). Dan untuk melakukannya kita menggunakan kode ini : , yang nantinya akan mengembalikan nilai berupa String. Perhatikan juga kode: if(chkBaca.isChecked()) hobies.add("Membaca"),

Kode ini digunakan untuk mengetahui apakah hobi membaca terpilih. Jika terpilih(diceklist) maka tambahkan hobi membaca ke koleksi hobi. Sekarang update kode method getGenderTerpilih menjadi seperti dibawah ini : private String getGenderTerpilih() { if (rbPria.isChecked()) return "Pria"; else if (rbWanita.isChecked()) return "Wanita"; else return ""; }

Kode

diatas

hampir

sama

artinya

dengan

kode

getGenderTerpilih, yang membedakan adalah logika didalam method

ini. Jika sebelumnya kita membuat koleksi data hobi, disini kita tidak membuat koleksi gender karena sudah jelas logikanya salah. Jadi hanya salah satu gender saja yang bisa dipilih.

7.

Membuat Dialog Pilih Tanggal Pada FormActivity

www.rumahcoding.co.id

149

@idrumahcoding

Untuk membuat dialog pilih tanggal pada android maka class activity tersebut harus mengimplementasikan interface OnDateSetListener. Interface inilah yang akan digunakan sebagai aksi ketika tanggal terpilih. Buka

class

FormActivity

kembali

dan

tambahkan kode implements DatePickerDialog.OnDateSetListener setelah nama class, sehingga kode nya menjadi seperti berikut ini : public class FormActivity extends AppCompatActivity implements DatePickerDialog.OnDateSetListener { //kode lainnya.. }

Setelah itu tambahkan kode berikut ini dibawah method : @Override public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) { String dateInString= String.valueOf(dayOfMonth) + "-" + month + "-" + year; birtDateField.setText(dateInString); }

Perhatikan kode: birtDateField.setText(dateInString), kode ini digunakan untuk memberikan value atau nilai kepada class property bernama birtDateField dimana tipe data dari properti ini adakah EditText. Sehingga birtDateField yang tadinya kosong kini menjda memiliki nilai/value. Sekarang

update

kode

method

dengan

nama

showDialogDateChooser menjadi seperti dibawah ini :

150

www.rumahcoding.co.id

@idrumahcoding private void showDialogDateChooser() { Calendar calendar = Calendar.getInstance(); DatePickerDialog datePickerDialog = new DatePickerDialog(this, this, calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH)); datePickerDialog.show(); }

Perhatikan kode: Calendar calendar = Calendar.getInstance(),

kode ini berguna untuk mengetahui tanggal hari ini. Selain itu perhatikan juda kode inisialisasi DatePickerDialog. Diproses ini kita akan membuat dialog pilih tanggal dan mengatur waktu default yang terpilih adalah tanggal hari ini.

8.

Memberikan Aksi Pada Action Button FormActivity

Sebelum memberikan aksi pada action menu FormActivity, anda perlu memanggil layout menu di kode java. Maksud dari memanggil adalah membuat action menu tersebut dapat tampil pada activity FormActivity. Untuk melakukannya maka kita akan menggunakan modul menu inflater. Untuk menggunakan menu inflater ini maka anda perlu untuk meng-override method onCreateOptionsMenu dan menggunakan file form_activity_menu.xml yang sudah dibuat sebelumnya. Taruh kode berikut ini dibawah method getValueFrom : @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.form_activity_menu, menu);

www.rumahcoding.co.id

151

@idrumahcoding return super.onCreateOptionsMenu(menu); }

Sekarang untuk memberikan aksi dari setiap menu item yang kita buat pada form_activity_menu.xml, kita akan meng-override method onOptionsItemSelected. Taruh kode berikut ini dibawah method getValueFrom : @Override public boolean onOptionsItemSelected(MenuItem item) { int idMenu = item.getItemId(); if (idMenu == R.id.save_menu) save(); if (idMenu == R.id.home_menu) finish(); return super.onOptionsItemSelected(item); }

Perhatikan kode : finish(), kode ini akan membuat activity menjadi berhenti bekerja atau dengan kata lain menutup

9.

Membuat Class Model Siswa.

Class model Siswa merupakan representasi object nyata yaitu siswa dan data siswa yang akan kita butuhkan dari siswa meliputi nama depan, nama belakang, no hp, gender, jenjang, hobi, alamat, email dan tanggal lahir. Untuk membuat class Siswa langkahlangkahnya adalah sebagai berikut : Buat property class sehingga menjadi seperti dibawah ini : import java.io.Serializable; public class Siswa implements Serializable { private Long id; private String namaDepan; private String namaBelakang; private String noHp;

152

www.rumahcoding.co.id

@idrumahcoding private private private private private private

String String String String String String

gender; jenjang; hobi; alamat; email; birthDay;

}

Perlu untuk diingat setiap property dalama class model selalu dibuatkan setter dan getternya sehingga kita perlu untuk mengupdate kelas Siswa tersebut menjadi seperti dibawah ini : import java.io.Serializable; public class Siswa implements Serializable { private Long id; private String namaDepan; private String namaBelakang; private String noHp; private String gender; private String jenjang; private String hobi; private String alamat; private String email; private String birthDay; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getNamaDepan() { return namaDepan; } public void setNamaDepan(String namaDepan) { this.namaDepan = namaDepan;

www.rumahcoding.co.id

153

@idrumahcoding } public String getNamaBelakang() { return namaBelakang; } public void setNamaBelakang(String namaBelakang) { this.namaBelakang = namaBelakang; } public String getNoHp() { return noHp; } public void setNoHp(String noHp) { this.noHp = noHp; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public String getJenjang() { return jenjang; } public void setJenjang(String jenjang) { this.jenjang = jenjang; } public String getHobi() { return hobi; } public void setHobi(String hobi) { this.hobi = hobi;

154

www.rumahcoding.co.id

@idrumahcoding } public String getAlamat() { return alamat; } public void setAlamat(String alamat) { this.alamat = alamat; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getBirthDay() { return birthDay; } public void setBirthDay(String birthDay) { this.birthDay = birthDay; } }

10.

Membuat Class Database Helper.

Seperti yang sudah dijelaskan sebelumnya, class Database Helper adalah class yang nantinya bertanggung jawab dalam membuat dan mengupgrade database kita. Sekarang buatlah class baru dan beri nama class tersebut menjadi DatabaseHelper, langkah-langkah pembuatan class ini sama dengan langkah pembuatan class Siswa sebelumnya. Kemudian update kodenya menjadi seperti berikut: public class DatabaseHelper extends SQLiteOpenHelper { private static final String DATABASE_NAME =

www.rumahcoding.co.id

155

@idrumahcoding "sekolah_ku.db"; private static final int DATABASE_VERSION = 1; public DatabaseHelper(Context context) { super(context, DATABASE_NAME, null, DATABASE_VERSION); } @Override public void onCreate(SQLiteDatabase db) { } @Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { } }

Perhatikan kode: private static final String DATABASE_NAME = "sekolah_ku.db";, dikode ini kita menjelaskan bahwa nantinya kita akan menggunakan database sqlite dengan nama sekolah_ku.db. Sedangkan pada bagian kode : private static final int DATABASE_VERSION = 1 menjelaskan bahwa versi database yang akan digunakan adalah versi 1. Sekarang kita akan membuat query yang jika dieksekusi akan membuat table siswa pada database sekolah_ku. Update kode method onCreate untuk membuat query-nya, berikut adalah kodenya setelah diupdate : @Override public void onCreate(SQLiteDatabase db) { String QUERY_CREATE_TABLE_SISWA = "CREATE TABLE siswa (" + "_id INTEGER PRIMARY KEY AUTOINCREMENT, " + "nama_depan TEXT, " "nama_belakang, " +

156

www.rumahcoding.co.id

@idrumahcoding "no_hp TEXT, " + "gender TEXT, " + "jenjang TEXT, " + "hobi TEXT, " + "alamat TEXT, " + "email TEXT, " + "birth_day TEXT)"; db.execSQL(QUERY_CREATE_TABLE_SISWA); }

Setiap kali aplikasi android yang membutuhkan database dan baru saja diinstall ke dalam android phone. Maka method onCreate inilah yang akan dieksekusi. Sekarang update kode yang ada didalam method onUpgrade menjadi seperti dibawah ini : @Override public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { String QUERY_DROP_TABLE_SISWA = "DROP TABLE IF EXISTS siswa"; db.execSQL(QUERY_DROP_TABLE_SISWA); }

Berbeda dengan onCreate, method on upgrade bertanggung jawab untuk melakukan tugas mengupgrade database yang sudah ada sebelumnya menjadi versi yang terbarukan. Hal ini tentunya berguna saat melakukan migrasi data dari versi data lama ke data baru.

11.

Membuat Class SiswaDatasource

Class ini nantinya digunakan sebagai data controller dalam database. Yang dimaksud data controller disini adalah class ini nantinya akan melakukan tugas mengambil data, menambahkan data baru, mengupdate data lama ke data baru dan juga menghapus data.

www.rumahcoding.co.id

157

@idrumahcoding

Sekarang buatlah class baru dan beri nama SiswaDatasource kemudian update kodenya sehingga menjadi seperti dibawah ini : public class SiswaDatasource { private SQLiteDatabase database; private DatabaseHelper helper; private final String tableName = "siswa"; public SiswaDatasource(Context context) { helper = new DatabaseHelper(context); } public void save(Siswa siswa) { } public void delete(Siswa siswa) { } public void update(Siswa siswa) { } public List<Siswa> findAll() { return null; } public Siswa findBy(int id) { return null; } public List<Siswa> findBy(String nama) { return null; } }

Penjelasan singkat mengenai fungsi dari masing-masing method diatas:

158

www.rumahcoding.co.id

@idrumahcoding

• • • •

•

•

Method save, method ini nantinya akan melakukan perintah simpan data ke database sqlite. Method update, method ini nantinya akan melakukan perintah update data di database. Method delete, method ini nantinya akan melakukan perintah menghapus data dari database. Method findAll, method ini nantinya akan melakukan perintah untuk mengambil semua data siswa yang sudah tersimpan dalam database sebelumnya. Method findBy dengan paramater id, method ini nantinya akan melakukan perintah untuk menemukan data siswa berdasarkan idnya. Method ini nantinya akan memeberikan nilai balikan bertipe data Siswa. Method findBy dengan paramater nama, method ini nantinya akan melakukan perintah untuk menemukan data siswa berdasarkan namanya. Method ini nantinya akan memeberikan nilai balikan berupa koleksi data Siswa.

Sebelum membuat kode lengkap dari method-method diatas. Kita akan membuat method bantuan yang akan mempermudah dalam mengakses database, antara lain adalah : •

• • • • •

Method createContentValues, digunakan untuk memecah data dari Siswa ke dalam data yang dikenal android SDK dalam melakukan update data dan menambahkan data Siswa. Method open, digunakan untuk membuka akses ke database Method close, digunakan untuk menutup akses ke database. Method getLong, digunakan untuk untuk mengambil nilai bertipe data Long dari kolom tertentu pada sebuah cursor Method getString, digunakan untuk untuk mengambil nilai bertipe data String dari kolom tertentu pada sebuah cursor. Method fetchRow, method ini digunakan untuk membuat object Siswa berdasarkan data yang diterima dari database. Berikut adalah kode lengkapnya, taruh dibawah method

findBy(String nama):

www.rumahcoding.co.id

159

@idrumahcoding private ContentValues createContentValues(Siswa siswa) { ContentValues contentValues = new ContentValues(); contentValues.put("nama_depan", siswa.getNamaDepan()); contentValues.put("nama_belakang", siswa.getNamaBelakang()); contentValues.put("no_hp", siswa.getNoHp()); contentValues.put("gender", siswa.getGender()); contentValues.put("jenjang", siswa.getJenjang()); contentValues.put("hobi", siswa.getHobi()); contentValues.put("alamat", siswa.getAlamat()); contentValues.put("email", siswa.getEmail()); contentValues.put("birth_day", siswa.getBirthDay()); return contentValues; } private void open() { database = helper.getWritableDatabase(); } private void close() { helper.close(); } private Siswa fetchRow(Cursor cursor) { Siswa siswa = new Siswa(); siswa.setId(getLong(cursor, "_id")); siswa.setNamaDepan(getString(cursor, "nama_depan")); siswa.setNamaBelakang(getString(cursor, "nama_belakang")); siswa.setNoHp(getString(cursor, "no_hp")); siswa.setGender(getString(cursor, "gender")); siswa.setJenjang(getString(cursor, "jenjang")); siswa.setHobi(getString( cursor, "hobi")); siswa.setAlamat(getString( cursor, "alamat")); siswa.setEmail(getString(cursor, "email")); siswa.setBirthDay(getString(cursor, "birth_day")); return siswa; }

160

www.rumahcoding.co.id

@idrumahcoding private Long getLong(Cursor cursor, String columnName) { return cursor.getLong(cursor.getColumnIndex(columnName)); } private String getString(Cursor cursor, String columnName) { return cursor.getString(cursor.getColumnIndex(columnName)); }

Sekarang update kode method save dan ubah menjadi seperti dibawah ini: public void save(Siswa siswa) { ContentValues contentValues = createContentValues(siswa); open(); database.insert(tableName, null, contentValues); close(); }

Sekarang update kode method update dan ubah menjadi seperti dibawah ini: public void update(Siswa siswa) { open(); database.update(tableName, createContentValues(siswa), "_id=?", new String[]{ Long.toString(siswa.getId())}); close(); }

Sekarang update kode method delete dan ubah menjadi seperti dibawaj ini: public void delete(Siswa siswa) { open(); database.delete(tableName, "_id=?", new String[] {Long.toString(siswa.getId())});

www.rumahcoding.co.id

161

@idrumahcoding close(); }

Sekarang update kode method findAll menjadi seperti dibawah ini : public List<Siswa> findAll() { List<Siswa> siswaList = new ArrayList<>(); open(); Cursor cursor = database.rawQuery("SELECT * FROM siswa", null); while (cursor.moveToNext()) { Siswa siswa = fetchRow(cursor); siswaList.add(siswa); } cursor.close(); close(); return siswaList; }

Sekarang update kode method findBy dengan parameter id menjadi seperti dibawah ini : public Siswa findBy(int id) { String sql = "SELECT * FROM siswa WHERE id=?"; Cursor cursor = database.rawQuery(sql, new String[]{Long.toString(id)}); Siswa siswa = fetchRow(cursor); cursor.close(); return siswa; }

Sekarang update kode method findBy dengan parameter nama menjadi seperti dibawah ini: public List<Siswa> findBy(String nama) { String sql = "SELECT * FROM siswa " + "WHERE nama_depan LIKE ? OR " +

162

www.rumahcoding.co.id

@idrumahcoding "nama_belakang LIKE ?"; open(); Cursor cursor = database.rawQuery(sql, new String[]{"%" + nama + "%", "%" + nama + "%"}); List<Siswa> siswaList = new ArrayList<>(); while (cursor.moveToNext()) { Siswa siswa = fetchRow(cursor); siswaList.add(siswa); } cursor.close(); close(); return siswaList; }

12.

Mengupdate Kode Method save Pada FormActivity

Sekarang buka kembali class FormActivity dan sebelum mengupdate kode method save pada FormActivity, kita akan membuat method baru dengan nama initDataSiswa. Method ini nantinya akan digunakan untuk mengambil semua data input dari pengguna aplikasi dan menampungnya ke dalam object Siswa. Taruh kode berikut ini dibawah method getValueFrom : private void initDataSiswa(Siswa siswa) { siswa.setNamaDepan(getValueFrom(namaDepanField)); siswa.setNamaBelakang(getValueFrom(namaBelakangField)); siswa.setNoHp(getValueFrom(noHpField)); siswa.setGender(getGenderTerpilih()); siswa.setHobi(getHobiTerpilih()); siswa.setAlamat(getValueFrom(alamatField)); siswa.setEmail(getValueFrom(emailField)); siswa.setBirthDay(getValueFrom(birtDateField)); }

www.rumahcoding.co.id

163

@idrumahcoding

Sekarang buka kembali class FormActivity dan ubah method save menjadi seperti dibawah ini : private void save() { if (!validateInput()) return; Siswa siswa = new Siswa(); initDataSiswa(siswa); SiswaDatasource datasource = new SiswaDatasource(this); datasource.save(siswa); finish(); }

13.

Membuat ListSiswaActivity Sekarang kita akan membuat activity baru dengan nama

ListSiswaActivity. Langkah-langkah untuk membuat activity ini

sama dengan cara membuat FormActivity, hanya saja nama dari activity-nya yang berbeda. Activity ini nantinya akan menampilkan data siswa yang sudah tersimpan dalam database sebelumnya. Selain itu diactivity ini juga nantinya akan tersedia fitur pencarian siwa berdasarkan dari namanya. Fitur lain yang nantinya juga ada adalah kita akan membuat context menu, menampilkan detail siswa dan juga action menu. Context menu ini sendiri nantinya akan digunakan untuk melakukan operasi lebih lanjut dalam hal memanipulasi data siswa, baik itu menghapus data siswa terpilih dan mengupdate data siswa terpilih. Sekarang buka layout file dari activity ini dimana namanya adalah activity_list_siswa yang terletak didalam folder res > layout. Setelah itu ubah kodenya menjadi seperti dibawah ini:

14.

Membuat Context Menu Pada ListSiswaActivity Langkah-langkah

untuk

membuat

context

menu

pada

ListViewActity caranya adalah sebagai berikut :

164

www.rumahcoding.co.id

@idrumahcoding

•

Klik kanan pada folder res > menu dan pilih new > Menu resource file, seperti yang nampak pada gambar berikut ini :

•

Pada tampilan dialog yang muncul, isikan namanya dengan list_activity_context dan klik tombol ok. Seperti yang tampil pada gambar berikut ini :

www.rumahcoding.co.id

165

@idrumahcoding

•

Setelah itu buka file menu tersebut dan update kodenya menjadi seperti dibawah ini :

<menu xmlns:android="http://schemas.android.com/apk/res/android">

15.

Membuat Action Menu Pada ListSiswaActivity

Langkah-langkah untuk membuat action menu pada ListViewActivity sama dengan membuat context menu diatas. Hanya saja kali ini pada kolom isian File name, kita isikan namanya menjadi list_siswa_action. Setelah membuat file tersebut, buka file list_siswa_action.xml dan ubah kodenya menjadi seperti berikut ini :

166

www.rumahcoding.co.id

@idrumahcoding <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

16.

Membuat Class SiswaItemAdapter

Class ini nantinya akan digunakan sebagai adapter dari item yang akan muncul di activity ListSiswaActivity. Buatlah class baru dengan nama SiswaItemAdapter, langkah-langkah untuk membuatnya sama dengan langkah-langkah untuk membuat class Siswa. Untuk saat ini kita tidak akan mengubah kode dalam class ini, sehingga kodenya masih seperti dibawah ini : public class SiswaItemAdapter { }

17.

Membangun Layout Untuk SiswaItemAdapter

Buatlah layout baru dalam folder res > layout dan beri namanya siswa_item. Layout ini nantinya akan menjadi tampilan default dari setiap item yang muncul di layout ListView Sekarang buka file tersebut dan ubah kodenya menjadi seperti dibawah ini :
www.rumahcoding.co.id

167

@idrumahcoding android:padding="10dp">

168

www.rumahcoding.co.id

@idrumahcoding

18.

Mengupdate Kode Class SiswaItemAdapter

Buka kembali class SiswaItemAdapter dan update codenya menjadi seperti berikut ini : public class SiswaItemAdapter extends ArrayAdapter<Siswa> { public SiswaItemAdapter(@NonNull Context context) { super(context, R.layout.siswa_item); } @NonNull @Override public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) { View view = convertView; if (view == null) { view = LayoutInflater.from(getContext()) .inflate(R.layout.siswa_item, null);

www.rumahcoding.co.id

169

@idrumahcoding } TextView namaTxt = view.findViewById(R.id.txt_nama); TextView jenjangTxt = view.findViewById(R.id.txt_jenjang); TextView genderTxt = view.findViewById(R.id.txt_gender); TextView noHpTxt = view.findViewById(R.id.txt_no_hp); Siswa siswa = getItem(position); if (siswa != null) { String nama = siswa.getNamaDepan() + " " + siswa.getNamaBelakang(); namaTxt.setText(nama); jenjangTxt.setText(siswa.getJenjang()); genderTxt.setText(siswa.getGender()); noHpTxt.setText(siswa.getNoHp()); } return view; } }

19.

Membangun Layout ListSiswaActivity

Buka file activity_list_siswa.xml yang terletak didalam folder res > layout. Kemudian ubah kodenya menjadi seperti dibawah ini :
170

www.rumahcoding.co.id

@idrumahcoding android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" app:iconifiedByDefault="false" app:queryHint="Cari siswa" rel="nofollow">

20.

Membuat Controller Untuk ListSiswaActivity

Buka kembali file ListSiswaActivity kemudian buatlah properti class adapter dengan tipe data SiswaItemAdapter dan buat properti class datasource dengan tipe data SiswaDatasource. Setelah sudah membuat properti tersebut, sekarang class anda menjadi nampak seperti dibawah ini : public class ListSiswaActivity extends AppCompatActivity { private SiswaItemAdapter adapter; private SiswaDatasource datasource; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list_siswa); } }

Sekarang kita akan meng-override method onResume dari class orang tuanya yaitu AppCompatActivity. Tujuan dari override method ini adalah untuk memuat ulang data siswa saat ListSiswaActivity yang tadinya dalam posisi pause(tidak tampil namun sudah pernah tampil pada layar sebelumnya) menjadi kembali tampil pada layar android. sehingga kodenya menjadi seperti dibawah ini :

www.rumahcoding.co.id

171

@idrumahcoding public class ListSiswaActivity extends AppCompatActivity { private SiswaItemAdapter adapter; private SiswaDatasource datasource; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list_siswa); } @Override protected void onResume() { super.onResume(); } }

Sekarang update kode method onResume diatas menjadi seperti dibawah ini: @Override protected void onResume() { super.onResume(); datasource = new SiswaDatasource(this); adapter = new SiswaItemAdapter(this); }

Sekarang buat method dibawah ini dan taruh dibawah method onResume private void loadAllSiswa() { } private void loadSiswaBy(String nama) { } private void delete(final Siswa siswa) {

172

www.rumahcoding.co.id

@idrumahcoding } private void update(Siswa siswa) { } private void addNewSiswa() { }

Penjelasan singkat mengenai fungsi method diatas : •

•

•

•

•

Method loadAllSiswa, method ini nantinya akan melukan perintah untuk mengambil semua data siswa yang tersimpan dalam database kemudian akan menampilkan datanya pada ListSiswaActivity. Method loadSiswaBy, method ini nantinya akan melakukan perintah untuk mengambil data siswa dari database berdasarkan nama siswa kemudian akan menampilkan datanya pada ListSiswaActivity. Method delete, method ini nantinya akan menampilkan dialog konfirmasi untuk menghapus data siswa yang terpilih dalam ListSiswaActivity. Jika terkonfirmasi maka perintah menghapus data siswa dari database dan perintah menghapus data siswa dari tampilan daftar siswa akan dilakukan, Dan Jika tidak terkonfirmasi maka dialog akan tertutup tanpa melakukan perintah apa-apa. Method update, method ini nantinya akan melakukan pindah activity dari ListSiswaActivty ke FormActivity untuk melakukan perubahan data dari siswa yang terpilih dalam daftar siswa. Method addNewSiswa, method ini nantinya akan melakukan pindah activity dari ListSiswaActivty ke FormActivity untuk menambahkan data siswa baru. Sekarang update kode method menjadi seperti dibawah ini :

private void loadAllSiswa() { List<Siswa> siswaList = datasource.findAll();

www.rumahcoding.co.id

173

@idrumahcoding adapter.addAll(siswaList); adapter.notifyDataSetChanged(); }

Perhatikan kode: loadAllSiswa, kode ini berfungsi untuk memasukkan semua data siswa dalam koleksi data siswa. Selain itu, Perhatikan kode : adapter.notifyDataSetChanged(), kode ini untuk memberitahu adapter bahwa ada perubahan data yang dilakukan. Sekarang update kode method menjadi seperti dibawah ini : private void loadSiswaBy(String nama) { List<Siswa> siswaList = datasource.findBy(nama); adapter.addAll(siswaList); adapter.notifyDataSetChanged(); }

Perhatikan kode datasource.findBy(nama): ,jika sebelumnya kita mengakses method findAll dari class SiswaDatasource maka disini kita mengakses method findBy karena data siswa yang ingin kita ambil hanyalah data siswa yang memiliki nama sesuai dengan keyword pada SearchView. Sekarang update kode method menjadi seperti dibawah ini : private void delete(final Siswa siswa) { DialogInterface.OnClickListener confirm = new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { datasource.delete(siswa); adapter.remove(siswa); adapter.notifyDataSetChanged(); } };

DialogInterface.OnClickListener cancel = new DialogInterface.OnClickListener() { @Override

174

www.rumahcoding.co.id

@idrumahcoding public void onClick(DialogInterface dialog, int which) { } }; String nama = siswa.getNamaDepan() + " " +siswa.getNamaBelakang(); new AlertDialog.Builder(this) .setTitle("Hapus Siswa") .setMessage("Yakin Hapus Siswa Dengan Nama "+nama) .setIcon(android.R.drawable.ic_dialog_alert) .setPositiveButton("Ya", confirm) .setNegativeButton("Tidak", cancel) .show(); }

Perhatikan kode pada bagian dibawah ini : DialogInterface.OnClickListener confirm = new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { datasource.delete(siswa); adapter.remove(siswa); adapter.notifyDataSetChanged(); } };

Kode diatas digunakan sebagai aksi ketika pengguna aplikasi menekan tombol ya pada jendela dialog. Sedangkan kode dibawahnya yang memiliki tipe data yang sama digunakan untuk menghandle aksi ketika pengguna menekan tombol tidak pada jendela dialog. Selain itu perhatikan juga kode pada bagian dibawah ini : String nama = siswa.getNamaDepan() + " " +siswa.getNamaBelakang(); new AlertDialog.Builder(this)

www.rumahcoding.co.id

175

@idrumahcoding .setTitle("Hapus Siswa") .setMessage("Yakin Hapus Siswa Dengan Nama "+nama) .setIcon(android.R.drawable.ic_dialog_alert) .setPositiveButton("Ya", confirm) .setNegativeButton("Tidak", cancel) .show();

Secara keseluruhan, kode ini akan membuat sebuah jendela dialog dengan judul dialognya adalah Hapus Siswa dan pesan dari dialog ini adalah Yakin Hapus Siswa Dengan Nama x(sesuai dengan siswa yang terpilih). Perhatikan kode: , kode ini berfungsi untuk mengatur aksi ketika tombol Ya ditekan. Sedangkan pada bagian : , berfungsi untuk mengatur aksi ketika tombol tidak ditekan. Sekarang update kode method update menjadi seperti dibawah ini : private void update(Siswa siswa) { Intent intent = new Intent(this, FormActivity.class); intent.putExtra("action", "update siswa"); intent.putExtra("siswa", siswa); startActivity(intent); }

Sekarang update kode method addNewSiswa menjadi seperti dibawah ini: private void addNewSiswa() { Intent intent = new Intent(this, FormActivity.class); intent.putExtra("action", "tambah siswa"); startActivity(intent); }

Perhatikan kode: Intent intent = new Intent(this, FormActivity.class),

176

www.rumahcoding.co.id

@idrumahcoding

Kode digunakan untuk memindahkan dari satu activity ke activity lain. Dalam kasus ini pemindahan dari activity ListSiswaActivity ke FormActivity.

21.

Memberikan Aksi Pada ListSiswaActivity Sebelum mulai memberikan aksi pada view yang ada dalam

ListSiswaActivity, buka class ListSiswaActivity terlebih dahulu.

Setelah class terbuka, update kode didalam method onResume sehingga menjadi seperti ini : @Override protected void onResume() { super.onResume(); datasource = new SiswaDatasource(this); adapter = new SiswaItemAdapter(this); loadAllSiswa(); ListView listView = findViewById(R.id.list_view_siswa); listView.setAdapter(adapter); SearchView searchView = findViewById(R.id.search_view); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { return false; } @Override public boolean onQueryTextChange(String newText) { loadSiswaBy(newText); return false; } }); }

www.rumahcoding.co.id

177

@idrumahcoding

Perhatikan kode pada bagian dibawah ini : @Override public boolean onQueryTextChange(String newText) { loadSiswaBy(newText); return false; }

Kode diatas digunakan untuk mencari data siswa berdasarkan input nama siswa yang diberikan oleh pengguna aplikasi.

22.

Memberikan Aksi Pada Action Menu ListSiswaActivity

Sebelum membuat aksi pada action menu di ListSiswaActivity, kita perlu memanggil layout menu yang sudah dibuat sebelumnya meng-override method onCreateOptionsMenu. Arahkan cursor anda ke bawah method onResume dan ketikan code berikut ini : @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.list_siswa_action_menu, menu); return super.onCreateOptionsMenu(menu); }

Setelah itu barulah kita dapat memberikan aksi pada action menu tersebut. Caranya adalah dengan meng-override method onOptionsItemSelected. Dibawah method onCreateOptionsMenu, ketikkan kode berikut ini : @Override public boolean onOptionsItemSelected(MenuItem item) { int itemId = item.getItemId(); if (itemId == R.id.add_student_menu) { addNewSiswa(); }

178

www.rumahcoding.co.id

@idrumahcoding return super.onOptionsItemSelected(item); }

23.

Memberikan Aksi Pada Context Menu ListSiswaActivity

Sama dengan halnya memberikan aksi pada action menu, untuk memberikan aksi pada context menu suatu activity maka kita diharuskan untuk memanggil configurasi menunya terlebih dahulu. Dalam kasus ini, berarti kita perlu untuk memanggil configurasi menu yang berada dalam file list_activity_context.xml. Untuk melakukan panggilannya kita akan meng-override method onCreateContextMenu. Ketikkan kode berikut ini dibawah method onOptionsItemSelected : @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { getMenuInflater().inflate(R.menu.list_activity_context, menu); super.onCreateContextMenu(menu, v, menuInfo); }

Setelah itu, barulah kita dapat memberikan aksi pada setiap item menu yang terdapat dalam list_activity_context.xml. Untuk memberikan aksinya maka kita perlu untuk meng-override method onContextItemSelected. Ketikkan kode berikut dibawah method onCreateContextMenu : @Override public boolean onContextItemSelected(MenuItem item) { AdapterView.AdapterContextMenuInfo menuInfo = (AdapterView.AdapterContextMenuInfo) item.getMenuInfo(); int position = menuInfo.position; Siswa siswa = adapter.getItem(position); int idItem = item.getItemId(); if (idItem == R.id.context_update) {

www.rumahcoding.co.id

179

@idrumahcoding update(siswa); } else if (idItem == R.id.context_delete) { delete(siswa); } return super.onContextItemSelected(item); }

Sekarang update kode menambahkan kode berikut ini :

method

dengan

cara

deklarasi

kode

onResume

registerForContextMenu(listView)

Letakkan

kode

diatas

tepat

dibawah

listView.setAdapter(adapter). Kode registerForContextMenu dimaksudkan untuk membuat ListView menampilkan context menu yang sudah dibuat ListView ditekan dengan lama.

24.

saat

Mengupdate Kode Method save Di FormActivity

Sebelum mengupdate code save, kita akan menambahkan dua method baru yaitu method saveDataSiswaBaru dan method updateDataSiswa. Kedua method ini akan kita ketik dibawah method save. Berikut adalah kode membuat kedua method tersebut : private void saveDataSiswaBaru() { } private void updateDataSiswa() { }

Penjelasan singkat mengenai fungsi kedua method diatas:

180

www.rumahcoding.co.id

@idrumahcoding

• •

Method saveDataSiswaBaru, method ini nantinya akan kita gunakan untuk menyimpan data siswa baru. Method updateDataSiswa, method ini nantinya akan kita gunakan untuk mengupdate data siswa.

Sekarang update kode method saveDataSiswaBaru menjadi seperti dibawah ini : private void saveDataSiswaBaru() { Siswa siswa = new Siswa(); initDataSiswa(siswa); SiswaDatasource datasource = new SiswaDatasource(this); datasource.save(siswa); finish(); }

Sebenarnya kode diatas hanya memindahkan kode yang ada di method save ke dalam method. Hal ini dilakukan karena nantinya FormActivity akan melakukan 2 aktivitas yaitu menambah data siswa baru dan mengupdate data siswa lama. Selain itu, kedua aktivitas ini juga membutuhkan layout dan proses validasi data yang sama sehingga agar kode menjadi lebih efisien di tambahkan method baru tanpa merubah logika dari kode sebelumnya. Sekarang update kode method menjadi seperti dibawah ini : private void updateDataSiswa() { Siswa siswa = (Siswa) getIntent().getSerializableExtra("siswa"); initDataSiswa(siswa); SiswaDatasource datasource = new SiswaDatasource(this); datasource.update(siswa); finish(); }

Perhatikan kode: getSerializableExtra("siswa"), kode ini berfungsi untuk mengambil data yang dilempar atau dikirim ke dalam activity ini. Dalam kasus ini data yang diterima oleh activity ini merupakan object Siswa dan object ini dikirimkan oleh

www.rumahcoding.co.id

181

@idrumahcoding

ListSiwaActivity. Namun didepan kode ini terdapat kode: (Siswa) getIntent().getSerializableExtra("siswa"), dijava hal ini dikenal dengan proses casting. Casting adalah proses membalikkan suatu object menjadi tipe yang sebenarnya. Proses sangat riskan jika anda tidak tahu pasti tipe data asli dari object yang akan dilakukan casting karena jika casting gagal maka akan menyebabkan runtime error dan error yang dimaksud adalah ClassCastException. Sekarang update method menjadi seperti ini : private void save() { if (!validateInput()) return; String action = getIntent().getStringExtra("action"); if (action.equals("UPDATE_DATA_SISWA")) { updateDataSiswa(); } else if (action.equals("TAMBAH_DATA_SISWA")) { saveDataSiswaBaru(); } }

Kode diatas yang akan mengatur alur aksi dari menyimpan data ke database. Jika aksinya adalah update maka akan memanggil method updateDataSiswa dan jika aksi adalah tambah data siswa bari maka method saveDataSiswaBaru yang akan dieksekusi. Sekarang update kode method onCreate dan tambahkan kode berikut dibawah deklarasi setContentView(R.layout.activity_form): String action = getIntent().getStringExtra("action"); if (action.equals("UPDATE_DATA_SISWA")) { setTitle("Update Data Siswa"); } else if (action.equals("TAMBAH_DATA_SISWA")) { setTitle("Tambah Data Siswa"); }

Perhatikan kode : , kode ini digunakan untuk mengatur judul activity di app bar atau dengan kata lain mengatur judul activity yang tampil pada layar android. www.rumahcoding.co.id 182

@idrumahcoding

25.

Membuat DetailActvity DetailActivity adalah activity yang akan menampilkan secara

detail data siswa yang terpilih pada ListSiswaActivity. Langkahlangkah untuk membuat activity ini sama dengan membuat activity lainnya, hanya saja nama activity-nya yang berbeda. Untuk activity ini kita akan menggunakan nama DetailActivity.

26.

Membangun Layout DetailActivity

Sebelum membangun layout dari DetailActivity, kita akan membuat layout seperator. Layout ini nantinya akan berguna untuk memisahkan antara satu detail data dengan detail data lainnya. Langkah-langkah untuk membuat layout separator sama dengan langkah membuat layout siswa_item.xml, hanya saja namanya yang berbeda karena kali ini kita akan membuat layout dengan nama separator. Jika sudah berhasil membuat layout tersebut maka buka file-nya dan ubah kode di dalam separator.xml menjadi seperti dibawah ini :

Sekarang buka file activity_detail.xml lalu ubah kodenya menjadi seperti dibawah ini :

www.rumahcoding.co.id

183

@idrumahcoding <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp">
184

www.rumahcoding.co.id

@idrumahcoding android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Nama" android:textSize="20sp" android:textStyle="bold" />

www.rumahcoding.co.id

185

@idrumahcoding
186

www.rumahcoding.co.id

@idrumahcoding android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/ic_flight_takeoff" />

www.rumahcoding.co.id

187

@idrumahcoding


188

www.rumahcoding.co.id

@idrumahcoding android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Alamat" android:textSize="20sp" android:textStyle="bold" />

Perhatikan kode; ,

Kode ini digunakan untuk menggunakan layout yang sudah dibuat sebelumnya ke dalam layout lainnya. Dalam kasus ini kita menggunakan layout separator.xml ke dalam layout activity_detail.xml.

27.

Membuat Controller DetailActivity

Actvity ini tidaklah melakukan hal banyak selain menampilkan detail data siswa. Jadi aktivitas yang akan dilakukan activity ini hanya sebatas menerima data siswa dari activity ListSiswaActivity dan menampilkan data yang diterima tersebut. Buka class DetailActivity dan update method onCreate menjadi seperti dibawah ini: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail); TextView TextView TextView TextView

namaTxt = findViewById(R.id.txt_nama); noHpTxt = findViewById(R.id.txt_no_hp); genderTxt = findViewById(R.id.txt_gender); jenjangTxt = findViewById(R.id.txt_jenjang);

www.rumahcoding.co.id

189

@idrumahcoding TextView hobiTxt = findViewById(R.id.txt_hobi); TextView alamatTxt = findViewById(R.id.txt_alamat); Siswa siswa = (Siswa) getIntent().getSerializableExtra("siswa"); String nama = siswa.getNamaDepan()+" "+siswa.getNamaBelakang(); namaTxt.setText(nama); noHpTxt.setText(siswa.getNoHp()); genderTxt.setText(siswa.getGender()); jenjangTxt.setText(siswa.getJenjang()); hobiTxt.setText(siswa.getHobi()); alamatTxt.setText(siswa.getAlamat()); }

28.

Menambahkan Action Menu Pada DetailActivity

Sama dengan penambahan action menu sebelumnya, pertama kita perlu membuat menu resource file yang baru dan beri namanya detail_activity_action_menu. Kemudian buka file yang dibuat tadi dan update kodenya menjadi seperti dibawah ini : <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

29.

Memberikan Aksi Pada Action Menu DetailActivity

Seperti yang sebelumnya, memberikan aksi pada action menu berarti perlu memanggil konfigurasi menunya dahulu didalam class

190

www.rumahcoding.co.id

@idrumahcoding

java, dalam kasus ini di DetailActivity. Cara untuk memanggilnya adalah dengan meng-override method onCreateOptionsMenu lalu update kodenya menjadi seperti dibawah ini : @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.detail_activity_action_menu , menu); return super.onCreateOptionsMenu(menu); }

Dan untuk meberikan aksinya maka method yang harus dioverride adalah method . Berikut adalah kode lengkapnya : @Override public boolean onOptionsItemSelected(MenuItem item) { int itemId = item.getItemId(); if (itemId == R.id.home_menu) { finish(); } return super.onOptionsItemSelected(item); }

30.

Mengupdate Kode ListSiswaActivity

Buka kembali class ListSiswaActivity. Tambahkan method baru dibawah method addNewSiswa dan beri nama viewDetailSiswa lalu ketikkan kode dibawah ini didalam method tersebut : private void viewDetailSiswa(int position) { Siswa siswa = adapter.getItem(position); Intent intent = new Intent(this, DetailActivity.class); intent.putExtra("siswa", siswa); startActivity(intent); }

www.rumahcoding.co.id

191

@idrumahcoding

Kode diatas digunakan untuk memindahkan activity, dari activity ListSiswaActivity ke DetailSiswaActivity. Sekarang arahkan cursor ke dalam method onResume, lebih tepatnya arahkan cursor dibawah deklarasi kode: tambahkan kode berikut ini : listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { viewDetailSiswa(position); } });

Sehingga kode pada method onResume secara lengkap menjadi seperti dibawah ini : @Override protected void onResume() { super.onResume(); datasource = new SiswaDatasource(this); adapter = new SiswaItemAdapter(this); loadAllSiswa(); ListView listView = findViewById(R.id.list_view_siswa); listView.setAdapter(adapter); registerForContextMenu(listView); listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { viewDetailSiswa(position); } }); SearchView searchView = findViewById(R.id.search_view); searchView.setOnQueryTextListener(new

192

www.rumahcoding.co.id

@idrumahcoding SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { return false; } @Override public boolean onQueryTextChange(String newText) { loadSiswaBy(newText); return false; } }); }

31.

Membuat LoginActivity

Buatlah activity baru dengan nama LoginActivity. Seperti namanya, activity ini digunakan untuk melakukan aktivitas login pengguna aplikasi. Langkah-langkah untuk membuat activity ini pun masih sama seperti membuat activity lainnya. 32.

Membangun Layout LoginActivity

Buka file configurasi layout dari activity ini yang memiliki nama activity_login kemudian update kodenya menjadi seperti dibawah ini :
www.rumahcoding.co.id

193

@idrumahcoding android:layout_width="match_parent" android:layout_height="200dp" android:background="@drawable/header" android:gravity="center"> <EditText android:id="@+id/username_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginEnd="10dp" android:hint="Username" android:drawableStart="@drawable/ic_action_person" android:drawableLeft="@drawable/ic_action_person"/> <EditText android:id="@+id/password_field" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginEnd="10dp"

194

www.rumahcoding.co.id

@idrumahcoding android:hint="Password" android:inputType="textPassword" android:drawableStart="@drawable/ic_action_lock" android:drawableLeft="@drawable/ic_action_lock"/> <Button android:id="@+id/login_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginEnd="10dp" android:background="@color/colorPrimary" android:text="Login" android:textStyle="bold" android:textColor="@color/white"/>

33.

Membuat Controller Pada LoginActivity

Buka class LoginActivity dan tambahkan kode dibawah ini, letaknya tepat berada dibawah method onCreate. private void login() { } private boolean isGranted(String username, String password) { return true; } private boolean validateInput() { return true; } private boolean validateUsername() {

www.rumahcoding.co.id

195

@idrumahcoding return true; } private boolean validatePassword() { return true; } private String getValueFrom(EditText editText) { return editText.getText().toString().trim(); }

Penjelasan singkat mengenai tujuan dari pembuatan method diatas : • • • •

•

•

Method login, method ini nantinya digunakan untuk melakukan proses login. Method isGranted, method ini nantinya akan digunakan untuk mengecek apakah pengguna boleh mengakses aplikasi. Method validateInput, method ini nantinya digunakan untuk melakukan validasi input secara keseluruhan. Method validateUsername, method ini nantinya digunakan untuk melakukan validasi username yang di input oleh pengguna aplikasi. Method validatePassword, method ini nantinya akan digunakan untuk melakukan validasi password yang di input oleh pengguna aplikasi. Method getValueFrom, method ini sudah pernah kita buat sebelumnya di activity FormActivity dan berfungsi untuk mengambil nilai String dari view bertipe data EditText.

Sekarang update method validatePassword menjadi seperti dibawah ini: private boolean validatePassword() { String password = getValueFrom(passwordField); if (password.isEmpty()) { passwordField.setError("Password Masih Kosong"); return false;

196

www.rumahcoding.co.id

@idrumahcoding } return true; }

Sekarang update method menjadi seperti dibawah ini : private boolean validateUsername() { String username = getValueFrom(usernameField); if (username.isEmpty()) { usernameField.setError("Username Masih Kosong"); return false; } return true; }

Sekarang update kode method validateInput menjadi seperti dibawah ini: private boolean validateInput() { return validateUsername() && validatePassword(); }

Sekarang update kode method isGranted menjadi seperti dibawah ini : private boolean isGranted(String username, String password) { return username.equals("admin") && password.equals("admin"); }

Sekarang update kode method login menjadi seperti dibawah ini: private void login() { if (!validateInput()) return; String username = getValueFrom(usernameField); String password = getValueFrom(passwordField); boolean granted = isGranted(username, password);

www.rumahcoding.co.id

197

@idrumahcoding if (granted) { Intent intent = new Intent(this, ListSiswaActivity.class); startActivity(intent); finish(); } else { Toast.makeText(this, "Username / Password Salah", Toast.LENGTH_LONG) .show(); } }

Perhatikan kode pada bagian dibawah ini : Toast.makeText(this, "Username / Password Salah", Toast.LENGTH_LONG) .show();

Kode tersebut digunakan untuk memberikan notifikasi kepada pengguna aplikasi bahwa username atau password yang dimasukkannya salah.

34.

Membuat SplashScreenActivity

Buatlah activity baru dengan nama SplashScreenActivity. Langkah-langkah untuk membuatnya masih sama dengan langkahlangkah membuat activity lainnya. SplashScreenActivity nantinya akan digunakan sebagai activity yang pertama kali berjalan saat aplikasi dibuka oleh pengguna.

35.

Membangun Layout SplashScreenActivity Buka file configurasi layout dari activity ini yang memiliki nama

activity_login.xml kemudian update kodenya menjadi seperti

dibawah ini :

198

www.rumahcoding.co.id

@idrumahcoding

www.rumahcoding.co.id

199

@idrumahcoding

36.

Membuat Controller SplashScreenActivity

Buka class SplashScreenActivity. Sekarang tambahkan method dibawah ini dan letakkan dibawah method onCreate : private void updateProgress() { }

Method diatas digunakan untuk mengupdate proses loading pada progress bar yang telah kita buat pada tampilan layout android. Dan berikut adalah kode lengkapnya : private void updateProgress() { Handler handler = new Handler(); handler.postDelayed(new Runnable() { @Override public void run() { int progress = progressBar.getProgress(); progressBar.setProgress(progress + 10); if(progress < 100) { updateProgress(); } else { Intent intent = new Intent( SplashScreenActivity.this, LoginActivity.class); startActivity(intent); finish(); } } }, 300); }

Perhatikan kode: Handler handler = new Handler();,

200

www.rumahcoding.co.id

@idrumahcoding

Kode merupakan cara untuk menginisialisasi class Handler. Handler memungkinkan Anda untuk mengirim dan memproses objek Message and Runnable yang terkait dengan MessageQueue dari thread. Setiap instance Handler dikaitkan dengan satu utas dan antrian pesan

utas itu. Ketika Anda membuat Handler baru, handler baru ini akan terikat ke antrean thread / pesan dari utas yang membuatnya - mulai dari saat itu, ia akan mengirim pesan dan menjalankan ke antrian pesan itu dan mengeksekusinya ketika pesan tersebut keluar dari antrian.

37.

Mengupdate Android Manifest File.

Selama pembuatan aplikasi, kita sama sekali belum pernah mengupdate atau bahkan membuka file AndroidManifest.xml. Seperti yang sudah dipelajari sebelumnya, file ini merupakan configurasi utama dalam sebuah aplikasi android. Seperti configurasi permission untuk mengakses kamera pada handphone, mengakses internet, dan lainnya. Kali ini kita akan mengupdate configurasi ini untuk mengatur activity mana yang akan pertama kali jalan pada aplikasi android. Sekarang buka file AndroidManifest.xml. Lihat gambar dibawah ini untuk lebih jelasnya :

Sekarang update kodenya menjadi seperti dibawah ini :

www.rumahcoding.co.id

201

@idrumahcoding <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.rumahcoding.sekolahku">

Perhatikan kode pada bagian ini :

202

www.rumahcoding.co.id

@idrumahcoding

Kode

diatas

merupakan

konfigurasi

untuk

activity

SplashScreenActivity. Konfigurasi activity ini diawali dengan tag sementara untuk kode

konfigurasinya diletakkan diantara tag tersebut. Dalam kasus ini kita mengatur SplashScreenActivity menjadi activity utama yang nantinya akan muncul pertama kali saat aplikasi dijalankan.

www.rumahcoding.co.id

203