Jobsheet Android Studio

Isa Hamdan, S.Kom

Founder KomputerKit.com
Daftar Isi
Materi #1 (4 Jam) ................................................................................................................ 2
1. Instalasi Java ........................................................................................................... 3
2. Instalasi Android Studio .......................................................................................... 3
3. Setting Handphone ................................................................................................. 6
4. Instalasi VYSOR........................................................................................................ 7
5. Program Pertama – Hello world ............................................................................. 9
6. Mengenal IDE (Integrated Development Environment) ....................................... 14
7. Menjalankan Program Pertama Kali ..................................................................... 15
8. Mem – BUILD aplikasi menjadi APK ...................................................................... 16
9. Struktur folder project .......................................................................................... 17
Materi #2 (6 Jam) .............................................................................................................. 22
Constraint Layout .......................................................................................................... 23
Membuat Layout Activity Login .................................................................................... 30
Toast.............................................................................................................................. 40
onClik Button ................................................................................................................ 41
Mengambil isi textView ................................................................................................ 42
Materi #3 (4 Jam) .............................................................................................................. 45
Membuat 2 activity ....................................................................................................... 46
Merubah Icon Launcher ................................................................................................ 50
Membuat Kalkulator Penjumlahan ............................................................................... 53
Menggunakan Log ......................................................................................................... 58
Activity lifecycle ............................................................................................................ 61
Materi #4 (4 Jam) .............................................................................................................. 65
Spinner .......................................................................................................................... 66
List View ........................................................................................................................ 74

Halaman 1 dari 83
 Materi #1 (4 Jam)
1. Instalasi Java
2. Instalasi Android Studio
3. Setting Handphone
4. Instalasi Vysor
5. Program Pertama - Hello World
6. Mengenal IDE (Integrated Development Environment)
7. Menjalankan Program Pertama Kali
8. Mem-BUILD aplikasi menjadi APK
9. Struktur folder project.

Halaman 2 dari 83
 1. Instalasi Java
Sebelum instalasi android pastikan anda melakukan instalasi java pada komputer anda.
Instalasi java dapat di download pada alamat berikut;

http://www.oracle.com/technetwork/java/javase/downloads/jre10-downloads-
4417026.html

2. Instalasi Android Studio

Perhatikan persyaratan minimum instalasi android, Instalasi android studio dapat di
download dari :

https://developer.android.com/studio/index.html

Halaman 3 dari 83
Pastikan sambungan internet anda dalam kondisi yang cepat saat instalasi dan
pembuatan program Android

Untuk komputer dengan RAM lebih kecil atau sama dengan 4GB, sebaiknya
menggunakan Handphone sebagai tool dalam pengujian aplikasi yang akan dibuat.
AVD (Android Virtual Device) akan berjalan lancar jika menggunakan RAM 16GB.

Hilangkan tanda centang jika memori komputer anda kurang atau sama dengan 4GB.

Halaman 4 dari 83
Halaman 5 dari 83
 3. Setting Handphone
Sebelum Handphone bisa digunakan sebagai alat pengujian. Setting DEVELOPER OPTION
harus di AKTIF kan terlebih dahulu.

HP yang digunakan pada buku ini adalah XIAOMI REDMI 2. Untuk MERK lain cara
mengaktifkan DEVELOPER OPTION bisa dicari di google.

Untuk mengaktifkan developer option lakukan langkah brikut;

Masuk ke setting dan pilih [About Phone]

Tap beberapa kali pada MIUI version sampai pesan developer option muncul

Jika sudah muncul lakukan setting pada developer option

Halaman 6 dari 83
Pastikan setting pada gambar dibawah AKTIF

4. Instalasi VYSOR
Lakukan instalasi vysor sebagai miror agar anda dapat melihat tampilan handphone dari
layar komputer anda. Download vysor pada link berikut;

https://www.vysor.io/#

Halaman 7 dari 83
Instal Vysor di HP dari Play store kemudian siapkan kabel data USB dari Handphone ke
komputer anda dan pasang ke HP dan komputer.

Jika instalasi vysor berjalan dengan baik maka bisa ditampilkan

Halaman 8 dari 83
 5. Program Pertama – Hello world
Siapkan folder dengan nama Latihan kemudian buka android studio

Beri nama Application Name dengan [ HelloWorld], Company domain dengan

[komputerkit.com] atur folder penyimpanan latihan anda

Halaman 9 dari 83
Fungsi isian diatas adalah;
Aplication name : nama aplikasi yang bisa digunakan untuk pencarian di play store
Company name : nama perusahaan yang bisa digunakan untuk mencari semua aplikasi
yang dibuat oleh perusahaan tersebut di play store.
Project location : lokasi dimana file project diletakkan.

Contoh :
Buka play store dan ketik komputerkit maka akan tampil sebagai berikut;

Pilih target SDK atau versi android yang akan menggunakan program anda. Kita akan
menggunakan android 5 [Lolipop] sebagai latihan.

Halaman 10 dari 83
Pilih [Empty Activity]

Akan muncul 2 file yang akan dihasilkan oleh android, yang activity name akan
menghasilkan JAVA, yang Layout Name akan menghasilkan XML.

Halaman 11 dari 83
Setelah klik next akan muncul gambar dibawah. Klik finish

Android akan melakukan proses GRADLE. Karena android dibuat menggunakan XML
sebagai View dan Java sebagai Controller maka proses gradle adalah menyatukan XML
dan Java menjadi sebuah aplikasi atau di sebut sebagai APK (Android Package)

Proses Gradle ini membutuhkan konksi internet yang stabil dan cepat

Terkadang ada beberapa SDK (System Development KIT ) dari android studio yang
membutuhkan update atau belum ter instal saat melakukan instalasi android studio.
Lakukan proses update atau instal sdk dengan meng klik tulisan warna biru yang
ditampilkan

Halaman 12 dari 83
Lakukan proses update atau instalasi komponen sampai android studio muncul dengan
sempurna

Halaman 13 dari 83
 6. Mengenal IDE (Integrated Development Environment)

2 4 5

1
3

Keterangan
1. Project View
Tempat dimanan kita bisa melihat file yang dihasilkan selama pembuatan projek
android berlangsung.
2. Palette
Tempat komponen yang tersedia yang bisa kita gunakan selama pembuatan
projek
3. Component Tree
Tempat dimana kita bisa melihat komponen yang sudah kita gunakan selama
pembuatan projek
4. Project Layout dan Blueprint
Tempat dimana projek android dibuat
5. Atribut Component
Atribut komponen adalah tempat setting atribut komponen yang kita buat,
misal id, background, text, dan seterusnya.

Halaman 14 dari 83
 7. Menjalankan Program Pertama Kali

Setelah android studio terbuka dan kabel USB sudah dipasang di HP dan Komputer,
lakukan proses RUN dengan cara klik gambar berikut;

Jika HP sudah terkoneksi dengan benar maka akan muncul gambar berikut;

Klik [ok] dan tunggu beberapa saat sampai aplikasi muncul di HP. Tampilan di HP bisa
dilihat melalui Vysor dengan tampilan sebagai berikut;

Halaman 15 dari 83
Aplikasi HelloWorld sudah jadi, bisa dilihat di HP anda. Tekan gambar aplikasi untuk
menjalankannya.

8. Mem – BUILD aplikasi menjadi APK

Aplikasi yang dibuat bisa dijalankan di HP yang lain dengan jalan di BUILD, kemudian
hasil dari APK tersebut bisa bagikan untuk di install di HP yang lain, namun belum bisa di
UPLOAD ke play store. Untuk BUILD ke play store ada di materi yang lain. Cara build
sebagai berikut;

Klik [Build] pada menu diatas, pilih dan klik [Build APK(s)]. Tunggu hingga proses selesai

Setelah selesai akan muncul gambar di pojok kanan bawah android studio

Halaman 16 dari 83
Klik [locate] maka akan di arahkan ke folder yang menunjukan file APK aplikasi.

File [app-debug] bisa di copy ke HP untuk di install

9. Struktur folder project

Struktur project android studio bisa dilihat pada gambar dibawah ini;

 Manifests (AndroidManifest.xml)
Fungsi dari file AndroidManifest.xml adalah;
 Memberi nama paket Java untuk aplikasi yang dibuat
 Menginformasikan versi SDK yang digunakan pada aplikasi
 Memberi akses permission untuk fitur - fitur yang digunakan pada
aplikasi
 Menerjemahkan string label yang digunakan pada aplikasi
 Inisialisasi dukungan layar perangkat
 Mendeskripsikan komponen - komponen aplikasi seperti aktivitas,
servis, intent dan lain – lain
 Mendaftarkan library yang digunakan untuk aplikasi
 dan lain sebagainya

Halaman 17 dari 83
 Klik dua kali pada [ AndroidManifest.xml] untuk melihat isi file

Isi dari file AndroidManifest.xml

 Java
Pada folder Java terdapat nama package berisi file class Activity java, yang
digunakan untuk membuat coding dari aplikasi android yang dibuat. Klik dua kali
pada file MainActivity pada folder Java.

Activity adalah tampilan yang dilihat pada aplikasi android. Activity terbuat dari
layout dan coding. Aplikasi android minimal berisi satu layout berbentuk file xml
dan satu file coding berbentuk java.

Halaman 18 dari 83
 File MainActivity.java

 Res
Folder res berfungsi sebagai berikut;

 Drawable
Folder drawable digunakan untuk menyimpan file-file gambar berformat
.jpg atau .png
 Layout
Folder layout digunakan untuk menyimpan file-file layout yang
merupakan tempat membuat komponen tampilan aplikasi.
Klik dua kali pada activity_main.xml

Halaman 19 dari 83
 Perhatikan tampilan sebelah kanan. Dengan klik pada pada text di
bagian tengah bawah

Maka akan tampil bentuk text dari layout aplikasi yang dibuat.

 Mipmap
Folder mipmap digunakan untuk menyimpan file , icon launcher aplikasi

 Values
Folder values digunakan untuk menyimpan file-file seperti string.xml ,
styles.xml , dan color.xml.
string.xml berisi resource data-data text yang akan digunakan untuk
komponen Aplikasi.
styles.xml berisi resource tentang tema seperti Toolbar, yang akan
digunakan untuk komponen Aplikasi.
color.xml. berisi resource warna-warna dari file styles.xml

Halaman 20 dari 83
 Gradle
Gradle digunakan untuk proses kompilasi yang akan menggabungkan file layout
atau desain dan file coding java menjadi sebuah aplikasi APK (Android Package).

Pada build.gradle digunakan untuk mengidentifikasi versi OS ,SDK,library yang

digunakan pada Aplikasi. Klik pada build.gradle

Perhatikan gambar di sebelah kanan seperti tampilan gambar dibawah ini.

Halaman 21 dari 83
 Materi #2 (6 Jam)
1. Constraint Layout
2. Membuat Layout Activity Login
3. Toast
4. onClick Button
5. Mengambil isi textView

Halaman 22 dari 83
Constraint Layout
Constraint layout adalah model layout yang digunakan pada android studio 3.
Pemberian constraint pada komponen yang diletakan pada layout akan membuat
komponen TETAP PADA POSISINYA walaupun layar HP berubah dari portrait ke
landscape atau layar HP berubah dari ukuran layar HP kecil ke layar HP besar. Misal dari
HP 5 inch ke 6 inch.

Untuk latihan. Buka android studio dan buat sebuah project baru dengan cara klik [File]
pilih [New] pilih dan klik [New Project]

Isi data berikut;

Aplication name : RegisterLogin
Company domain : KomputerKit.com
Project location : arahkan ke folder Latihan

Klik [Next] jika sudah selesai.

Halaman 23 dari 83
Klik [Next] jika sudah selesai.

Pilih [Empty Activity] dan klik [Next]

Halaman 24 dari 83
Isi Activity Name : LoginActivity
Secara otomatis Layout Name akan berubah menjadi activity_login

LoginActivity adalah file yang berisi java dimana huruf awal dari penulisa menggunakan
huruf capital. activity_login adalah file yang digunakan sebagai layout atau tampilan
aplikasi dimana semua hurufnya menggunakan huruf kecil

Klik [Finish] jika sudah selesai. Tunggu hingga tampilan android terbuka dengan
sempurna.

Jika tampilan android studio sudah terbuka pastikan tampilan ada mode [Design]
dengan cara klik pada bagian tengah bawah.

Halaman 25 dari 83
Tampilan design dimana nanti akan dibuat layout dari aplikasi

Tampilan yang berwarna putih adalah tampilan Design dan tampilan yang berwarna biru
adalah Blueprint. Untuk merubah tampilan yang muncul bisa klik gambar berikut;

Klik Design untuk menampilkan Design saja, Klik Blueprint untuk menampilkan Blueprint
saja. Klik Design + Blueprint untuk menampilkan keduanya.

Untuk mulai desain atur dulu tampilan desain lebih lebar dengan cara klik

Halaman 26 dari 83
Tampilan desain dengan layar yang lebh besar. Jika kurang besar bisa klik zoom

Klik pada tulisan Hello World untuk mengaktifkan constraint. Kotak [bias vertical] dan
[bias horizontal] di sebalah kanan.

Halaman 27 dari 83
Geser bias vertical ke atas dan bias horizontal ke kiri perhatikan perubahanya.

Perubahan setelah bias vertical di geser ke atas.

Pada gambar kuning dibawah pastikan dalam posisi [Wrap Content] kemudian ubah text
[Hello World!] menjadi [Belajar Constraint Layout]

Halaman 28 dari 83
Perhatikan perubahan pada desain

Klik pada seperti pada gambar untuk merubah menjadi Fixed

Perubahan yang terjadi

Ukuran Fixed bisa diubah dengan mengganti pada kolom layout_width

Klik pada [Fixed] agar menjadi [Match Constraint] dan perhatikan perubahan pada
desain

Halaman 29 dari 83
Perubahan yang terjadi ketika posisi Match Constraint

Kesimpulan
Untuk mengatur constraint pada komponen ada 3 model yaitu;
Wrap Content Lebar atau tinggi komponen akan menyesuaikan dengan isi
dari komponen
Fixed Lebar atau tinggi komponen tetap sesuai dengan setting yang
diberikan
Match Constraint Lebar atau tinggi komponen akan mengikuti ruang yang
tersisa dari constraint.

Membuat Layout Activity Login

Sebelum membuat activity login lakukan pembersihan constraint dulu seperti gambar
berikut;

Tampilan setelah dibersihkan constraintnya, semua komponen yang ada di layout

sekarang tidak mempunyai constraint.

Klik RUN dan perhatikan hasilnya.

Halaman 30 dari 83
Ubah text [Belajar Constraint Layout] menjadi [Belum punya akun ? silahkan DAFTAR]
Atur layout_width dan layout_height sesuai dengan gambar berikut;

Perhatikan hasil perubahannya.

Geser textview ke bagian bawah layar, dengan cara klik dan tahan sampai pada posisi
yang di inginkan kemudian lepaskan.

MENYIAPKAN GAMBAR
Siapkan file gambar yang akan digunakan pada pembuatan layout, file gambarbisa
dalam bentuk PNG atau JPG. Klik pada gambar dan tekan [Ctrl + C] untuk meng copy.
Nama file gambar harus huruf kecil semua dan tidak ada spasi

Halaman 31 dari 83
Klik pada gambar berikut untuk memperlebar tampilan

Klik kanan pada drawable dan pilih dan klik paste

Akan tampil pilihan

Klik [OK]

Halaman 32 dari 83
Akan tampil kemudian klik [OK], Pastikan Nama File Image Menggunakan Huruf Kecil

Perhatikan hasilnya gambar yang sudah di paste pada drawable

Untuk melihat hasil copy bisa klik kanan pada drawable pilih dan klik [Show in Explorer]

Folder yang ada pada drawable

Halaman 33 dari 83
MENGGUNAKAN IMAGEVIEW
Klik pada ImageView tahan dan geser pada layout kemudian lepaskan

Klik pada project pilih dan klik Logo.png kemudian klik [OK]

Image akan tampil pada layout

Atur lebar dan tinggi image kemudian letakan di tengah atas layout. Untuk melihat
bagian tengah perhatikan garis yang muncul ditengah ketika image di posisi tengah
layout.

Halaman 34 dari 83
Klik pada Text, pilih dan klik email tahan letakkan ditengah layout kemudian lepaskan.

Klik pada Text , pilih dan klik Password tahan letakankan ditengah layout kemudian
lepaskan.

Klik pada Buttons

Pilih dan klik Button tahan letakan ditengah layout kemudian lepaskan

Halaman 35 dari 83
Setelah semua komponen yang dibutuhkan pada layout, pastikan semua komponen ada
ditengah layout.

MENAMBAHKAN CONSTRAINT
Setelah semua komponen ada di posisi yang di inginkan berikutnya adalah pemsangan
constraint agar komponen ada di posisinya ketika aplikasi dijalankan. Klik pada gambar
berikut untuk memberikan constraint.

Perhatikan gambar berikut setelah semua komponen diberi constraint

Halaman 36 dari 83
Atur text email dan password menggunakan Match Constraint dengan margin 16

Jika terjadi seperti gambar dibawah, klik dan tahan geser ke kanan seperi pada gambar

Untuk menghapus satu constraint arahkan mouse pada bulatan sampai berwarna
merah kemudian klik.

Hasil setelah constraint di hapus

Buat constraint untuk text password yang sebelah kiri

Atur margin kiri dan kanan dengan 16

Halaman 37 dari 83
Atur Button menggunakan Match Constraint dengan margin 16

Ubah text dari button dengan LOGIN

Atur agar textview menjadi Wrap Content

Hasil akhir setelah semua constraint dan margin diatur

Halaman 38 dari 83
klik pada email dan password ketik pada hint dari attribute.

Setelah semua pengaturan selesai, jalankan aplikasi dengan cara meng klik RUN

Tampilan layout yang dijalanka pada HP.

Halaman 39 dari 83
Toast
Toast adalah pesan yang muncul pada layar dalam waktu tertentu kemudian
menghilang. Toast sering digunakan pada program yang dibuat menggunakan android
studio untuk peringatan atau informasi.

Klik pada LoginActivity.java

Anda harus sudah memahami JAVA atau KOTLIN karena Android

studio menggunakan Java atau Kotlin sebagai bahasa codingnya

Buat void dengan nama pesan kemudian isi dengan Toast

Jalankan void pada bagian onCreate

Jalankan RUN untuk melihat hasilnya. Setiap kali aplikasi mulai berjalan akan muncul
Toast

Halaman 40 dari 83
Format perintah Toast

Toast.makeText(this, "Belajar membuat Toast",

Toast.LENGTH_SHORT).show();

Tulisan [Belajar membuat Toast] bisa diganti sesuai kebutuhan anda. Lamanya Toast
muncul bisa di set dalam bentuk;

LENGTH_SHORT 2 detik
LENGTH_LONG 3,5 detik

onClik Button
untuk membuat onClick button lakukan pemberian ID terlebih dahulu pada button
dengan cara. Klik pada layout pilih button dan isi attribute ID sesuai gambar berikut;

Jika muncul pertanyaan seperti pada gambar klik Yes

Isi onClick pada atribut button sesuai gambar berikut;

Berpindahlah dari mode Design ke mode Text dengan cara klik pada bagian bawah;

Halaman 41 dari 83
Perhatikan tulisan yang ada garis merahnya, klik pada tulisan yang ada garis merahnya
dan klik pada gambar lampu yang berwarna merah sebelah kiri tulisan. Pilih dan klik
sesuai gambar;

Setelah di klik akan muncul sebuah void baru yang bisa di isi coding. Pada bagian kali ini
akan di isi pesan Toast sebagai berikut;

Jalankan aplikasi dengan klik RUN, jika sudah berjalan tekan tombol login dan perhatikan
hasilnya;

Setiap kali anda meng klik button login akan muncul Toast seperti pada gambar diatas.

Mengambil isi textView

Pada materi ini kita akan mengambil nilai yang di isikan pada kolom email, pengambilan
nilai dilakukan pada saat button login ditekan. Sebelum proses pemberian coding.
Setiap komponen yang akan digunakan harus diberi ID terlebih dahulu.

Aktifkan textView email terlebih dahulu kemudian isi sesuai gambar;

Halaman 42 dari 83
Aktifkan textView email terlebih dahulu kemudian isi sesuai gambar;

Setelah pemberian ID pada attribut berpindahlah pada bagian java.

Setiap komponen yang akan digunakan oleh java harus di deklarasikan terlebih
dahulu.

Deklarasi komponen TextView. Deklarasi harus diletakan diatas void onCreate

Setelah deklarasi ubah void loginClick seperti pada gambar berikut;

Penjelasan;
TextView email, password; Deklarasi nama variabel email, password
sebagai komponen yang akan digunkan oleh
java
email = (TextView) Memasukan komponen XML pada Res –
findViewById(R.id.emailText); disingkan dengan R dengan atribut emailText
ke komponen java
String Email = Membuat variabel Email dengan tipe data
email.getText().toString(); string kemudian di isi dengan komponen java
yang bernama email. Untuk mengambil nilai
pada java menggunakan get. Nilai yang di
dapat akan dikonversi ke bentuk string sesuai
dengan variabel yang di buat.

Jadi pada penggunaan komponen pada android dibagi dua yaitu XML komponen yang
ada pada folder Resources atau Res yang di singkat R. Dan komponen java yang di
deklarasikan di awal coding. Sebelum pengolahan pastikan hal berikut;
Deklarasi Masukan komponen Komponen siap
komponen XML ke komponen digunakan untuk
java java coding java

Halaman 43 dari 83
Hasil setelah button login ditekan

Coding lengkap materi ini;

Halaman 44 dari 83
 Materi #3 (4 Jam)
1. Membuat 2 activity
2. Merubah Icon Launcher
3. Membuat Kalkulator Penjumlahan
4. Menggunakan Log
5. Activity Lifecycle

Halaman 45 dari 83
Membuat 2 activity
Satu aplikasi bisa terdiri dari lebih dari satu activity atau tampilan. Materi ini akan
membuat 2 activity.
Buka aplikasi RegisterLogin dari materi sbelumnya.

Klik kanan pada folder java – pilih New – pilih Activity – pilih Empty Activity

Halaman 46 dari 83
Isi dengan RegisterActivity kemudian klik Finish

Tunggu sampai proses gradle selesai. Periksa file yang dihasilkan seperti gambar
berikut;

Tampilan activity_register yang telah dibuat

Halaman 47 dari 83
Ubah nama title atau judul dari ACTION BAR atau bagian yang berwarna biru menjadi
[Register]. Caranya buka file AndroidManifest.xml tambahkan sesuai gambar
berikut;

MEMANGGIL ACTIVITY REGISTER

Activity register yang sudah dibuat akan dipanggil dari activity login. Ubah terlebih
dahulu action bar dari activity login dengan cara merubah dari file
AndroidManifest.xml

Halaman 48 dari 83
Klik pada [activity_login.xml] kemudian klik pada textView sesuai dengan gambar
berikut;

Klik pada tanda untuk melihat attribute lain kemudian Klik pada pada pencarian
attribute.

Ketik sesuai gambar dan isi onClick dengan [daftarClick]

Klik pada [activity_login.xml] klik pada tanda merah pada TextView kemudian klik pada
gambar lampu sesuai gambar;

Halaman 49 dari 83
Setelah di klik akan terbentuk void kemudian isi void seperti gambar berikut;

PENJELASAN
Intent f = new Intent adalah obyek yang akan digunakan
Intent(this,RegisterActivit untuk menjalankan activity lain.
y.class);
Intent f
Adalah pembuatan intent dengan nama f yang
berisi obyek dari activity yang memanggil
dengan nama this yang mengacu pada dirinya
dan RegisterActivity yaitu activity yang
dipanggil
startActivity(f); Void yang digunakan untuk menjalankan
activity yang sudah dibuatkan intent nya.

Jalankan aplikasi dengan cara klik RUN, kemudian tekan pada tulisan [...DAFTAR]

Setelah ditekan akan tampil activity Register seperti gambar berikut;

Merubah Icon Launcher

Icon launcher adalah icon aplikasi yang muncul pada layar HP.

Halaman 50 dari 83
Untuk mengganti icon launcher, klik kanan pada App, pilih New pilih dan klik image
Asset

Pada [path] arahkan ke icon yang sudah anda siapkan. Anda bisa membuat gambar icon
menggunakan photoshop atau aplikasi pengolah gambar yang lain. Beri nama icon pada
kolom [Name]. PEMBERIAN NAMA TIDAK BOLEH MENGANDUNG HURUF BESAR DAN
SPASI

Halaman 51 dari 83
Cari logo atau gambar yang sudah disiapkan di komputer anda.

Atur pilihan seperti gambar berikut;

Setelah diarahkan ke file gambar di komputer anda kemudian klik [Next]

Halaman 52 dari 83
klik [Finish] dan Periksa perubahan icon launcher dengan cara klik pada folder mipmap

klik RUN untuk menjalankan aplikasi. Perhatikan hasil perubahan icon launcher.

Membuat Kalkulator Penjumlahan

Buat sebuah project baru dengan nama kalkulator

Halaman 53 dari 83
Pada desain klik text dan klik Number dan letakan pada desain.

Atur textView [Hello World] menggunakan ukuran font 50sp

Hasil peletakan komponen setelah diberi constraint.

Halaman 54 dari 83
Berikan ID pada text Number pertama dengan ID [bil_1_text ]seperti gambar berikut;

Berikan ID pada text Number kedua dengan ID [bil_2_text ]seperti gambar berikut;

Berikan ID pada textView

Klik pada button dan pada onClick isi dengan [kalkulatorClick]

Berpindahlah pada mode Text dengan klik pada bagian bawah

Halaman 55 dari 83
Cari tulisan [kalkulatorClick] yang berwarna merah. Klik pada lampu seperti pada
gambar

Setelah di klik akan diarahkan pada void. Deklarasikan terlebih dahulu komponen yang
akan digunakan oleh java.

Setelah deklarasi berpindahlah pada void [kalkulatorClick] dan buat coding seperti pada
gambar.

Halaman 56 dari 83
Penjelasan
Coding pertama adalah memasukan komponen XML ke komponen java

Coding berikutnya adalah MENGUJI jika ada nilai yang di isikan maka akan dihitung. Jika
tidak maka akan ke else untuk menampilkan Toast;

Coding untuk menghitung penjumlahan. Karena penjumlahan menggunakan tipe data

double sedangkan text yang dimasukan dari textView berupa string. Lakukan konversi
terlebih dahulu dari string ke doubel dengan kode berikut;

double angka_1 = Double.parseDouble(bil_1.getText().toString());

hasil penjumlahan berupa double sedangkan textView untuk menampilkan hasil berupa
string. Lakukan konversi dari double ke string dengan kode berikut;

hasil.setText(Double.toString(jumlah));

coding lengkap penjumlahan;

Klik RUN dan uji kalkulator yang sudah dibuat

Halaman 57 dari 83
Menggunakan Log
Log sering digunakan untuk mencari kesalahan atau DEBUG program. Program yang
dibuat kebanyakan tidak langsung jadi. Ada salah ketik ada yang salah memasukan
rumus atau formula dari program sehingga output atau keluaran program menjadi salah.

Android studio sudah dilengkapi dengan LOG yang membantu memudahkan pencarian
kesalahan atau DEBUGGING.
Buka aplikasi [kalkulator] yang akan digunakan sebagai latihan. Untuk menggunakan
LOG deklarasikan string akan digunakan sebagai penanda pesan di bagian awal program.

Pada deklarasi terdapat nama variabel TAG yang berisi “pesan”. Buat coding untuk
menampilkan log di bagian bawah proses perhitungan

Penjelasan
Penulisan Log di ikuti dengan huruf berikut yang menunjukan;
V — Verbose (prioritas terendah)
D — Debug
I — Info
W — Peringatan
E — Kesalahan
A — Pernyataan
Format dalam kurung setelah tulisan LOG adalah (TAG, string) tulisan TAG diambil dari
deklarasi awal dimana TAG adalah string yang di isi dengan “pesan” . dalam kurung
setelah koma adalah string.

Jalankan aplikasi dan buka Logcat pada bagian bawah

Halaman 58 dari 83
Atur pada bagian filter agar hanya menampilkan Log yang berisi TAG “pesan” saja
dengan cara klik pada Edit filter seperti gambar dibawah

Pengaturan filter

Klik [OK] dan jalankan aplikasi dengan klik RUN

Perhatikan angka yang muncul setelah aplikasi dijalankan kemudian dimasukan angka
penjumlahan

Ubah simbol penjumlahan menjadi pembagian

Halaman 59 dari 83
Jalankan aplikasi dan masukan angka seperti gambar berikut;

Cek juga hasilnya di Logcat

Ubah log nya dengan awal e

RUN aplikasi dan masukan angka seperti diatas kemudian perhatikan Logcat nya.

Log akan berwarna merah. Kemampuan menggunakan log ini akan terasa manfaatnya
jika anda sudah sering mengerjakan pembuatan aplikasi menggunakan android studio.
Terutama pada aplikasi yang rumit.

Halaman 60 dari 83
Activity lifecycle
Activity lifecycle adalah siklus kerja dari aplikasi android mulai dari saat dijalankan
hingga aplikasi dimaatikan. Pengetahuan tentang activity lifecycle ini dibutuhkan agar
aplikasi yang dibuat tidak sering mengalamai forceforce close atau error saat dijalankan
karena terlalu boros dalam menggunakan memori.memori
Berikut adalah gambar dari activity lifecycle.

Saat aplikasi DIJALANKAN aplikasi akan mengalami onCreate, onStart, onResume

onResume.
Setelah aplikasi BERJALAN aplikasi akan mengalami onPause, onStop, onDestroy pada
saat ada aplikasi yang lain dibuka sementara aplikasi pertama belum ditutup. Dengan
mengetahui kondisi tersebut maka proses pengambilan data jangan dilakukan pada saat
onPause, onStop, dan onDestroy. Karena akan mengak
mengakibatkan
ibatkan aplikasi force close atau
menutup.

Halaman 61 dari 83
Buat aplikasi baru untuk melihat posisi dari activity lifecycle.

Pada coding java masukan coding sebagai berikut;

package com.komputerkit.activitylifecycle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
public static final String TAG ="pesan";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.i(TAG,"onCreate");
}
@Override
protected void onStart() {
super.onStart();
Log.i(TAG,"onStart");
}
@Override
protected void onResume() {
super.onResume();
Log.i(TAG,"onResume");
}

Halaman 62 dari 83
 @Override
protected void onPause() {
super.onPause();
Log.i(TAG,"onPause");
}

@Override
protected void onStop() {
super.onStop();
Log.i(TAG,"onStop");
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.i(TAG,"onDestroy");
}
}

Atur Logcat dengan

Halaman 63 dari 83
Jalankan program dengan klik RUN

Logcat yang tampil

Coba Buka aplikasi yang lain dengan cara menekan tombol HOME terlebih dahulu dan
perhatikan logcatnya

Matikan aplikasi dengan mebersihkan dari memori dan perhatikan logcatnya

Perhatikan logcat nya.

Halaman 64 dari 83
 Materi #4 (4 Jam)
1. Spinner
2. List view

Halaman 65 dari 83
Spinner
Spinner adalah komponen drop down dari android studio yang biasa digunakan untuk
memberikan pilihan dari beberapa data.

Buat project baru dengan nama spinner

Pada desain pilih dan klik containers kemudian drag spinner pada desain

Atur agar sppiner ada di tengah kemudian berikan constraint pada spinner.

Halaman 66 dari 83
Setelah desain selesai buka folder [res] pilih dan klik [strings.xml]

Isi dengan data berikut;

Pada attributes isi ID dengan nama [jkspinner]

Pada bagian [entries] tekan [Ctrl + SPASI] untuk menampilkan gambar berikut kemudian
pilih [@array/jk] kemudian tekan enter

Perhatikan hasilnya pada desain

Halaman 67 dari 83
Klik RUN dan perhatikan hasilnya;

Klik pada spinner dan perhatikan hasilnya;

MENAMPILKAN ISI SPINNER

Buka file [MainActivity.java] kemudian tambahkan coding berikut;

Tambahkan coding berikut dan akan muncul lampu klik pada lampu

Halaman 68 dari 83
Setelah klik pada pilihan akan muncul

Klik [OK] setelah ok akan muncul void baru dan isi void tersebut dengan coding berikut;

Klik RUN kemudian pilih pada salah satu dari isi spinner. Perhatikan toast yang muncul

Halaman 69 dari 83
SPINNER MENGGUNAKAN DATA ARRAY
Buat sebuah project baru seperti gambar berikut;

Letakan spinner pada layout kemudian beri kan constraint

Beri ID dengan nama spinner

Setelah semua desain selesai buat coding di MainActivity.java dengan coding sebagai
berikut;

public void isiSpinner(){

String [] kabupaten = {"Lamongan", "Sidoarjo","Mojokerto",

"Tuban", "Bojonegoro"};

Spinner spinner = (Spinner) findViewById(R.id.spinner);

ArrayAdapter<String> dataadapter = new

ArrayAdapter<String>(this,R.layout.support_simple_spinner_dropdown
_item,kabupaten);

spinner.setAdapter(dataadapter);

Halaman 70 dari 83
Penjelasan;
 Bagian yang berwarna kuning adalah array yang berisi data yang akan
ditampilkan pada spinner.
 Bagian yang berwarna hijau adalah adapter yang akan digunakan pada spinner.
Komponen pada android studio yang masuk kelompok container memerlukan
adapter untuk pengisian data ke komponennya.
 Setelah adapter dibuat maka yang langkah selanjutnya adalah memasang
adapter pada spinner seperti ditunjukan oleh yang berwarna cyan.

Coding lengkap nya adalah;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

isiSpinner();
}

public void isiSpinner(){

String [] kabupaten = {"Lamongan", "Sidoarjo","Mojokerto",
"Tuban", "Bojonegoro"};
Spinner spinner = (Spinner) findViewById(R.id.spinner);

ArrayAdapter<String> dataadapter = new

ArrayAdapter<String>(this,R.layout.support_simple_spinner_dropdown
_item,kabupaten);

spinner.setAdapter(dataadapter);

}
}

Setelah proses pembuatan coding jalankan programnya dengan menekan RUN dan
perhatikan hasilnya.

Halaman 71 dari 83
MENGAMBIL DATA SPINNER MENGGUNAKAN BUTTON.
Tambahkan button pada layout dengan menggunakan latihan SpinnerArray

Isi ID dengan [button]

onClick dan Text seperti gambar berikut;

Berpindahlah pada mode Text dan klik pada tulisan yang berwarna merah kemudian
pilih pada lampu sesuai gambar dan lakukan klik.

Halaman 72 dari 83
Isi coding pada void yang sudah dibuat dengan coding berikut;
public void buttonClick(View view) {

String isi = spinner.getSelectedItem().toString();

Toast.makeText(this, isi, Toast.LENGTH_SHORT).show();
}

Pindahkan deklarasi komponen dari spinner ke bagian atas dari program sehingga
program akan tampil seperti berikut;

public class MainActivity extends AppCompatActivity {

Spinner spinner;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

isiSpinner();
}

public void isiSpinner(){

String [] kabupaten = {"Lamongan", "Sidoarjo","Mojokerto",
"Tuban", "Bojonegoro"};

spinner = (Spinner) findViewById(R.id.spinner);

ArrayAdapter<String> dataadapter = new

ArrayAdapter<String>(this,R.layout.support_simple_spinner_dropdown
_item,kabupaten);

spinner.setAdapter(dataadapter);

public void buttonClick(View view) {

String isi = spinner.getSelectedItem().toString();

Toast.makeText(this, isi, Toast.LENGTH_SHORT).show();
}
}

Halaman 73 dari 83
Jalankan program dengan cara klik RUN dan perhatikan hasilnya;

List View
List view digunakan untuk menampilkan data dalam bentuk baris seperti pada tabel.
Buat projek baru dengan nama list view

Setelah tampilan android studio terbuka pilih Legacy dan pilih ListView

Halaman 74 dari 83
Setelah pembuatan layout selesai. Buka file MainActivity.java dan ketik coding sebagai
berikut;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ListView listView = (ListView) findViewById(R.id.listview);

String [] kabupaten ={"Sidoarjo",

"Lamongan","Tuban","Bojonegoro","Mojokerto"};

ArrayAdapter adapter = new

ArrayAdapter(this,R.layout.support_simple_spinner_dropdown_item,
kabupaten);

listView.setAdapter(adapter);
}

Pada coding ListView proses untuk memasukan data harus melalui adapter dengan alur
sebagai berikut;

Data sumber atau Data Source bisa berasal dari array atau database. Data tersebut
kemudian dimasukan kedalam adapter. Data yang masuk ke adapter baru bisa
dimasukan ke ListView.

Jalankan aplikasi dan lihat hasilnya;

Halaman 75 dari 83
Menambahkan onClick List View
Untuk menambahkan onClick pada List View caranya sama dengan menambanhkan
pada spinner.
Tambahkan kode berikut sampai muncul garis merah kemudian klik pada lampu dan
pilih sesuai gambar

Jika muncul gambar berikut klik OK

Tambahkan kode berikut

Jalankan aplikasi dan periksa hasilnya;

Halaman 76 dari 83
 Materi #5 (4 Jam)
1. Dialog

Halaman 77 dari 83
Alert dialog
Buat sebuah project baru dan beri nama dialog

Buat desain sebagai berikut;

Atur properti komponen sebagai berikut;

Pindahkan pada mode text, klik sesuai gambar

Halaman 78 dari 83
Tambahkan coding sebagai berikut;

public void tampil(View view) {

AlertDialog alertDialog = new
AlertDialog.Builder(MainActivity.this).create();
alertDialog.setTitle("judul dialog");
alertDialog.setMessage("isi pesan dialog");
alertDialog.setButton(AlertDialog.BUTTON_NEUTRAL, "OK", new
DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});

alertDialog.show();
}

Penjelasan
sebelum dialog ditampilkan, form dialog harus dibuat dulu menggunakan coding;

AlertDialog alertDialog = new

AlertDialog.Builder(MainActivity.this).create();

Setelah form dialog dibuat form bisa di beri judul dan isi menggunakan perintah berikut;

alertDialog.setTitle("judul dialog");
alertDialog.setMessage("isi pesan dialog");

form dialog juga bisa di isi dengan button dengan memberikan coding berikut;

alertDialog.setButton(AlertDialog.BUTTON_NEUTRAL, "OK", new

DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});

setelah semua dibuat dialog siap ditampilkan dengan memberikan coding;

alertDialog.show();

Halaman 79 dari 83
Coding lengkap alert dialog
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

public void tampil(View view) {

AlertDialog alertDialog = new
AlertDialog.Builder(MainActivity.this).create();
alertDialog.setTitle("judul dialog");
alertDialog.setMessage("isi pesan dialog");
alertDialog.setButton(AlertDialog.BUTTON_NEUTRAL, "OK",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which)
{
dialog.dismiss();
}
});

alertDialog.show();
}
}

tampilan

Halaman 80 dari 83
Membuat alert dialog dengan pilihan ya dan tidak.
Ubah coding alert dialog paad pembuatan button dengan coding berikut;

public void tampil(View view) {

AlertDialog alertDialog = new
AlertDialog.Builder(MainActivity.this).create();
alertDialog.setTitle("judul dialog");
alertDialog.setMessage("isi pesan dialog");

alertDialog.setButton(AlertDialog.BUTTON_NEGATIVE, "Tidak",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this, "anda memilih
TIDAK", Toast.LENGTH_SHORT).show();
}
});

alertDialog.setButton(AlertDialog.BUTTON_POSITIVE, "Ya", new

DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this, "Anda memilih YA",
Toast.LENGTH_SHORT).show();
}
});

alertDialog.show();
}

tampilan dialog sebagai berikut

Halaman 81 dari 83
Halaman 82 dari 83