PEMBUKAAN

Bismillah…

Penulis mengucapkan syukur kepada Allah subhanallahu wa ta’ala karena sudah

memberikan kesempatan untuk menyelesaikan penulisan buku Pemograman Android dengan
Kotlin untuk Pemula ini. Buku ini dibuat sebagai panduan bagi peserta pada program SMK Coding
dalam mengembangkan aplikasi Android dengan bahasa pemograman Kotlin untuk pemula yang
diselenggarakan oleh Kementrian Komunikasi dan Informasi Indonesia.
Kotlin menjadi hal menarik yang penulis pilih sebagai bahasa pemograman pendukung
dalam penyampaian materi. Salah satunya, karena pengembangan aplikasi Android dengan
Kotlin dapat membuat kode project menjadi lebih ringkas. Selain itu, Penulis juga menggunakan
metode penyampaian materi berbasis project. Peserta akan mempelajari materi lewat latihan-
latihan untuk membuat beberapa project aplikasi. Setidaknya ada empat project aplikasi Android
yang akan dipelajari cara pembuatannya. Hal itu, diharapkan dapat mempermudah peserta
dalam memahami penerapan dari setiap teori pemograman Android yang tertulis pada buku ini.
Semoga buku ini dapat menjadi salah satu referensi yang bermanfaat dalam mempelajari
cara mengembangkan aplikasi Android dengan bahasa pemograman kotlin. Aamiin.

Terima kasih.

Bandung, 24 februari 2019

Ade Rifaldi
Penulis
 BAB 1
Aplikasi Hello World

Project (aplikasi) hello world adalah aplikasi yang hanya menampilkan kalimat “Hello
World!” pada layar emulator atau device Android ketika dijalankan. Meski begitu, aplikasi hello
world merupakan aplikasi wajib nomor satu yang harus sudah pernah dibuat oleh seorang
pengembang (developer) aplikasi Android. Pada bab ini, akan dibahas bagaimana cara membuat
aplikasi hello world dimulai dengan melakukan instalasi Android Studio hingga menjalankan
aplikasi hello world tersebut pada emulator dan device Android.

1.1. Instalasi Android Studio

Android Studio adalah salah satu IDE (Integrated Development Environment) yang
digunakan untuk mengembangkan aplikasi Android. Android Studio merupakan IDE favorit
bagi para developer Android karena memang dibuat khusus oleh JetBrains untuk
pengembangan aplikasi Android. Jika ingin mengetahui lebih detail tentang Android Studio,
silahkan mengunjungi situs resminya: https://developer.android.com/studio/.
Instalasi Android bukanlah hal yang sulit karena langkah-langkah instalasi sudah
didokumentasikan dengan cukup rapih di situs resmi Android Studio. Akan tetapi, sebelum
melakukan instalasi ada beberapa hal yang perlu diperhatikan terkait kebutuhan minimal
PC untuk instalasi Android Studio berikut:

Gambar 1.1. Kebutuhan minimal instalasi Android Studio

 Jika PC yang akan digunakan sudah memenuhi kebutuhan minimal pada gambar di
atas, selanjutnya barulah proses instalasi Android Studio dapat dilakukan dengan mengikuti
langkah-langkah yang terdapat pada situs resmi Android Studio berikut:
https://developer.android.com/studio/install

Gambar 1.2. Halaman Awal Android Studio Versi 3.3.2

Jika sudah muncul gambar seperti di atas ketika Android Studio dijalankan, itu
artinya Android Studio sudah dapat digunakan untuk mengembangkan aplikasi Android.
Penulis menggunakan Android Studio versi 3.3.2. Jika pembaca sudah memiliki Android
Studio yang terinstall pada PC yang digunakan akan tetapi dengan versi lebih rendah,
disarankan untuk melakukan update versi pada Android Studio tersebut.

1.2. Membuat Project Baru (Aplikasi Hello World) di Android Studio

Pada bagian ini, akan dibahas tentang langkah demi langkah membuat project baru
(aplikasi hello world) dengan Android Studio:
1. Pilih Start a new Android Studio Project pada halaman awal Android Studio. Lihat pada
gambar sebelumnya.
2. Memilih tipe activity, pilih Empty Activity

Gambar 1.3. Memilih tipe Activity

3. Selanjutnya, Konfigurasi project. isi kolom name, package name, pilih save location
sesuai dengan yang diinginkan, pilih Kotlin pada language, minimum API level, dan pilih
Use AndroidX artifacts. Name, akan menjadi nama aplikasi yang muncul pada layar
device Android. Package name adalah id unik aplikasi. Save location artinya lokasi
tempat project Android akan disimpan. Pada minimum API level, pilih API 16: Android
4.1 (Jelly Bean) karena pada bab selanjutnya akan dipelajari cara mengganti font family
aplikasi dengan mudah dan fitur tersebut hanya bisa berjalan pada device dengan
Android OS versi 4.1 ke atas. Kemudian, pilih finish.

Gambar 1.4. Form isian konfigurasi project baru Android baru

4. Menunggu hingga proses setup project selesai. Pada tahap ini, dibutuhkan koneksi
internet yang cukup stabil dengan bandwidth (kuota) yang cukup besar.

Gambar 1.5. Proses Setup Project Baru Android Studio

Gambar 1.6. Project (aplikasi) Hello World

Apabila sudah muncul tampilan seperti di atas dengan progress loading yang ada di
bagian bawah aplikasi Android Studio sudah hilang, itu artinya proses setup project
aplikasi hello world sudah selesai.
1.3. Menjalankan Aplikasi Hello World
1.3.1. Menjalakan Aplikasi Hello World pada Emulator (Virtual Device)
Sebelum menjalankan aplikasi hello world. Ada hal yang perlu diperhatikan,
yaitu versi library constraint layout yang ada pada build.gradle module app. Jika
versi library constraint layout adalah 1.1.2, maka disarankan untuk melakukan
update versi terlebih dahulu menjadi 1.1.3. Hal itu, dikarenakan ada bug cukup
serius yang dapat mengakibatkan aplikasi crash ketika dijalakan.
Lihat file explorer project dan buka file build.gradle (module: app) yang
terletak di dalam direktori Gradle Sctipts.

Gambar 1.7. Isi Direktory Gradle Script

Lakukan double klik pada file yang terblok, kemudian update script
build.gradle tersebut.
Update bagian ini:

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-
jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.0.0-beta01'
implementation 'androidx.core:core-ktx:1.1.0-alpha03'
implementation
'androidx.constraintlayout:constraintlayout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.1.0-alpha4'
androidTestImplementation 'androidx.test.espresso:espresso-
core:3.1.0-alpha4'
}
 Menjadi,

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-
jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation
'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-
core:3.1.1'
}

Setelah itu, klik Sync Now yang ada di pojok kanan atas pada file Gradle tersebut.

Gambar 1.8. File Gradle Module Aplikasi

Tunggu hingga proses sinkronisasi selesai. Proses sinkronisasi membutuhkan

koneksi internet karena Android Studio akan melakukan download versi library yang
diupdate. Selanjutnya, berikut adalah langkah-langkah untuk menjalankan aplikasi
hello world pada emulator:
1. Membuat virtual device (emulator) pada Android Virtual Device (AVD) Manager
dengan cara membuka AVD Manager terlebih dahulu. Fitur AVD Manager
terdapat pada menu bar yang terletak di bagian kanan atas Android Studio.
Kemudian Pilih Create Virtual Device.
 AVD Manager

Gambar 1.9. Menu Bar Android Studio

Gambar 1.10. Android Virtual Device Manager

2. Memilih tipe device sesuai yang diinginkan dan Next.

Gambar 1.11. Memlih tipe emulator device

3. Memilih Android OS untuk emulator device. Silahkan download terlebih dahulu

jika belum ada OS android yang sudah didownload.
 Gambar 1.12. Memilih versi OS Android untuk emulator

4. Melakukan verifikasi konfigurasi emulator Android device yang akan dibuat.

Disediakan pilihan untuk menjadikan emulator memiliki frame Android device
atau tidak dengan melakukan checklist/unchecklist pada Device Frame.
Kemudian, finish.

Gambar 1.13. Verifikasi konfigurasi AVD Andriud Studio

Dengan itu, akan muncul android emulator yang dapat digunakan pada AVD
manager seperti gambar berikut:
 Gambar 1.14. Memlih tipe emulator device

Jika sudah terbuat emulator baru pada AVD Manager seperti pada gambar di
atas, maka selanjutnya jalankan emulator tersebut dengan menekan tombol
play pada kolom actions dan tunggu hingga emulator tersebut memunculkan
halaman home device Android pada umumnya.

Gambar 1.15. Android Emulator

5. Selanjutnya, kembali ke Project Hello World dan pilih tombol play berwarna

hijau yang ada pada menu bar Android Studio dan pilih Android Emulator
ketika muncul dialog Select Deployment Target. lalu pilih OK
 Gambar 1.16. Dialog Select Deployment Target

Setelah memilih OK, maka akan terjadi proses instalasi (deployment) project
aplikasi hello world ke emulator. Tunggu beberapa saat hingga aplikasi terinstall
ke emulator.

Gambar 1.17. Aplikasi Hello World

1.3.2. Menjalakan Aplikasi Hello World pada Device
Android emulator membutuhkan resource RAM yang cukup besar. Hal itu
membuat proses instalasi aplikasi ke emulator menjadi cukup lama karena sebagian
resource RAM digunakan untuk menjalankan emulator. Alternatif yang dapat
dilakukan untuk meminimalisasi penggunaan RAM adalah dengan melakukan
instalasi project langsung ke device Android.
Pada tahap ini akan disampaikan cara menjalankan aplikasi hello world pada
device Android. Untuk dapat melakukan deployment project Android ke device
Android, pengguna harus menghidupkan terlebih dahulu fitur developer mode pada
device. Setiap device android memiliki cara yang berbeda-beda agar pengguna
dapat menghidupkan fitur developer mode Android. Penulis menggunakan device
Android Xiaomi Redmi 5 sebagai contoh:
1. Masuk ke menu setting device.
2. Masuk ke menu about phone.
3. Klik berkali-kali (7 kali) pada informasi MIUI version hingg muncul dialog singkat
yang bertuliskan “you are developer now”. Pada tahap ini, umumnya dilakukan
dengan sama, yaitu melakukan klik sebanyak 7 kali pada menu tertentu.
4. Kembali ke menu pengaturan dan masuk ke menu additional settings
5. Pilih menu developer option. Kemudian pilih aktivasi penu Developer Options,
USB debugging, dan Install via USB.
6. Koneksikan PC dengan device Android menggunakan kabel data.
7. Selanjutnya, pilih tombol play berwarna hijau yang ada pada menu bar Android

Studio dan pilih Android device ketika muncul dialog Select Deployment
Target, lalu pilih OK. Tunggu hingga aplikasi berhasil terinstall ke device Android
yang terkoneksi dengan PC.

Gambar 1.18. Device Android terkoneksi dengan PC

 BAB 2
Struktur Project Android

Terdapat beberapa mode tampilan struktur project pada Android Studio, yaitu mode:
Project, Package, Project Files, Project Source Files, dan Android. Pada bab ini, hanya akan
dibahas struktur project dengan mode tampilan default, yaitu Android karena mode tersebut
yang akan banyak digunakan ketika pengembangan aplikasi Android.

Gambar 2.1. Tampilan struktur project Android Studio mode Android

Ada dua direktori utama pada mode struktur project Android, yaitu App dan Gradle Script.
App adalah direktori yang berisi file konfigurasi, file atau class antar muka, data, dan logika bisnis
aplikasi. Sedangkan Gradle Script berisi file script konfigurasi project.

2.1. App
Terdapat beberapa direktori pada direktori app yang perlu diperhatikan, yaitu
manifest, java, dan res. Berikut akan dibahasa satu per satu tentang direktori tersebut:
2.1.1. Manifest
Manifest adalah direktori yang berisi file konfigurasi AndroidManifest.xml.
Sebuah file konfigurasi yang berisi pengaturan spesifikasi project Android seperti,
nama package, nama aplikasi, icon aplikasi, permission yang berjalan pada Aplikasi,
serta pengaturan-pengaturan lain yang diperlukan.

Gambar 2.2. AndroidManifest.xml

2.1.2. Java
Di dalam direktori dengan nama package aplikasi yang terdapat pada
direktori java, file class Kotlin (.kt) dalam project aplikasi Android diletakan. Baik itu
class antar muka, data, maupun bisnis aplikasi. Maka itu, class MainActivity pada
aplikasi hello world secara default diletakan pada direktori tersebut.

Gambar 2.3. Direktori java pada struktur project mode Android

2.1.3. Res
Direktori res dibuat untuk meletakan file aset yang diperlukan dalam aplikasi
dan dipisahkan sesuai dengan tipe file aset pada direktori-direktori berikut:
1. Drawable
File aset berupa grafis seperti image dan icon selain icon aplikasi dan icon
notifikasi ditempatkan pada direktori drawable. Tidak hanya itu, file-file style
seperti untuk keperluan styling button juga diletakan di sana. Misal,
button_login_clicker.xml.
2. Layout
Layout adalah direktori untuk file aset antar muka. Umumnya, file aset antar
muka pada direktori layout memiliki ekstensi .xml. Misal, MainActivity.xml
3. Mipmap
File aset berupa icon aplikasi dan icon notifikasi diletakan pada direktori ini.
4. Values
Values adalah direktori yang berisi file aset colors, strings, styles, dan dimens.
Colors berisi variable berisi kode warna, strings berisi variable wording, style
berisi variable pengaturan tema yang digunakan pada aplikasi.

Gambar 2.4. Direktori res pada struktur project mode Android

2.2. Gradle Script
Gradle Script adalah direktori yang berisi konfigurasi project berupa file script
dengan ekstensi file .gradle, .properties, dan .pro. Pada buku ini, hanya akan dibahas satu
dari beberapa file yang ada pada direktori Gradle Script karena hanya file tersebut yang
akan banyak digunakan pada pembahasan-pembahasan selanjutnya, yaitu build.gradle
(module).
2.2.1. Gradle Module App
Gradle Module App atau build.gradle (Module: app) adalah salah satu file
gradle yang berisi beberapa konfigurasi penting pada project, seperti
compileSDKVersion, minSDKVersion, versionCode, versionName, dan konfigurasi
lain. Di antara yang paling penting adalah konfigurasi penggunaan library pada
project. Konfigurasi tersebut terletak pada file build.gradle (module: app) bagian
dependencies. Pada dependencies itu, library-library yang digunakan pada project
diletakan.

Gambar 2.5. Gradle Module App

2.3. Menambahkan File Asset Icon Pada Aplikasi Hello World
Seperti yang sudah diterangkan sebelumnya bahwa file aset berupa icon diletakan
di direktori drawable pada direktori res. Terdapat dua cara praktis menambahkan file aset
pada direktori drawable dengan fitur pada Android Studio, yaitu Add Image Asset dan
Vector Asset.
2.3.1. Add Image Asset
Untuk menambahkan dengan cara Add Image Asset dilakukan dengan cara
melakukan klik kanan pada direktori drawable, pilih new, kemudian pilih Image
Asset. Setelah itu pilih Action Bar and Tab Icon pada pilihan Icon Type. Beri nama
file icon dengan menggunakan karakter under score ("_") sebagai pemisah antar
kata, contoh ic_empty_blue Kemudian, pilih Image pada pilihan Asset Types. Lalu,
add path file image yang akan digunakan sebagai icon dengan melakukan klik pada

icon folder . Kemudian, pilih CUSTOM pada pilihan Theme dan klik pada kolom
Custom color. Pilih choose kemudian Next dan Finish.

Gambar 2.6. Add Image Asset

Setelah itu, file icon akan masuk secara otomatis ke direktori drawable dan
dipisahkan ke dalam lima direktori berdasarkan ukuran dimensi yang dibutuhkan.
 Gambar 2.7. File icon sudah masuk ke direktori drawable

2.3.2. Add Vector Asset

Cara kedua adalah menambahkan file icon berupa file vektor dengan
ekstensi .svg. Cara ini tidak membuat file icon yang ditambahkan masuk ke direktori
drawable dengan dipisahkan ke dalam lima direktori. Akan tetapi cara ini
menghasilkan file icon yang lebih mudah untuk dilakukan penggantian warna.
Berikut adalah langkah-demi langkah yang perlu dilakukan: lakukan klik kanan pada
direktori drawable, pilih new, kemudian pilih Vector Asset. Lalu, pilih Local file (svg,
psd). Beri nama, kemudian pilih path file, next dan Finish.

Gambar 2.8. Add Vector Asset

 Untuk mendapatkan file image dengan ekstensi .svg, bisa mengunjungi situs
https://www.flaticon.com/ dan pilih file format svg ketika melakukan download.

Gambar 2.9. Download image svg pada https://www.flaticon.com/

2.4. Menambahkan dan Mengubah Font Aplikasi Hello World

Android Studio versi 3.1 ke atas memiliki fitur yang memberikan kemudahan untuk
mengganti font family aplikasi. Akan tetapi, fitur tersebut hanya berjalan pada OS Android
versi 4.1 (Jelly Bean) ke atas. Sebelum mengganti font family aplikasi, silahkan download
file font di situs https://fonts.google.com. Kemudian buat direktori baru pada direktori res
dengan melakukan klik kanan pada direktori res, lalu pilih new, directory, dan beri nama
direktori dengan nama "font".

Gambar 2.10. Menambahkan direktori baru

 Setelah itu, kemudian paste file font yang sudah di-download ke direktori "font"
pada direktori res.

Gambar 2.11. Menambahkan file font pada direktori font

File font yang sudah ditambahkan dapat langsung digunakan dengan cara mengganti font
family text Hello World pada layout main_activity.xml. Buka file main_activity.xml,
kemudian ubah size TextView dengan menambahkan property android:textSize="48dp"
agar ukuran text menjadi lebih besar. Kemudian, tambahkan property
android:fontFamily="@font/<nama_file_font>". Maka, dengan seketika font text akan
berubah.

Gambar 2.11. Setelah font family diubah

Project Aplikasi Hello World bisa dilihat dan di-download pada tautan berikut:
https://github.com/aderifaldi/smkcoding.android.helloworld
 BAB 3
Aplikasi Profil Diri

Pada bab ini, akan dibahas banyak tentang teori dan cara penggunaan dari komponen-
komponen antar muka, Activity, dan Intent lewat pembuatan aplikasi profil diri. Aplikasi tersebut
akan menampilkan halaman isian data diri (registrasi) ketika dijalankan. Kemudian aplikasi akan
melakukan perintah untuk pindah halaman ke halaman profil diri dengan menampilkan data dari
halaman registrasi, ketika pengguna selesai melakukan pengisian data.

3.1. Layout Aplikasi Profil Diri

Aplikasi profil diri yang akan dibuat memiliki dua halaman, yaitu registrasi dan profil
diri. Pada halaman-halaman tersebut akan digunakan beberapa komponen antar muka
seperti LinearLayout, RelativeLayout, ImageView, TextView, EditText, Button dan
komponen antar muka lain yang dibutuhkan.
3.1.1. View Group dan View
ViewGroup atau disebut juga parent, adalah komponen antar muka yang
digunakan untuk meletakan view (child) atau view group lain dalam membentuk
layout dari sebuah halaman. Sebuah layout biasanya memiliki minimal satu
ViewGroup. ViewGroup merupakan komponen antar muka berbasis layout, maka
dapat diketahui dengan mudah bahwa komponen antar muka yang disebut
termasuk ViewGroup saat ini di antaranya adalah LinearLayout, RelativeLayout,
ConstraintLayout, CoordinatorLayout, dan FrameLayout. Sedangkan, view adalah
komponen antar muka berbasis widgets seperti, TextView, ImageView, EditText,
Button, dll.
Baik ViewGroup ataupun View merupakan komponen antar muka yang
dapat diperlakukan sama dalam hal diberikan pengaturan properti, status visibility,
dan listener yang akan dibahas lebih lanjut pada pembahasan selanjutnya.
3.1.2. Membuat Layout Halaman Registrasi
Sebelum membuat layout halaman registrasi aplikasi profil diri, silahkan
lakukan pembuatan project baru dengan nama aplikasi "My Profile App". Jangan
lupa untuk memilih Kotlin pada pilihan Language dan checklist Use AndroidX
artifacts.
Halaman registrasi akan memiliki layout berisi form isian dengan posisi form
isian yang disusun mendatar ke bawah. ViewGroup yang paling mudah digunakan
untuk membuat layout dengan karakter posisi mendatar ke bawah (vertikal) atau ke
samping (horizontal) adalah LinearLayout. Untuk form isian yang berupa input text
akan digunakan EditText. Kemudian, Spinner akan digunakan untuk form input
berupa pilihan. Dalam hal ini, pilihan jenis kelamin.

Gambar 3.1. Design Antar Muka Halaman Registrasi

Berikut ini adalah kode file layout (main_activity.xml) untuk membuat layout
seperti pada gambar di atas dan akan dibahas lebih detail pada keterangan
setelahnya.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
android:background="#FFFFFF">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Registrasi"
android:textSize="19sp"
android:layout_margin="16dp"
android:textColor="#000000"
android:fontFamily="casual"
android:layout_gravity="center_horizontal"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:orientation="vertical">

<EditText
android:id="@+id/edtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Nama"
android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="text"
android:imeOptions="actionNext"/>

<Spinner
android:layout_marginTop="16dp"
android:id="@+id/spinnerGender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"/>

<EditText
android:id="@+id/edtEmail"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="textEmailAddress"
android:imeOptions="actionNext"/>

<EditText
android:id="@+id/edtTelp"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Telp."
 android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="number"
android:imeOptions="actionNext"/>

<EditText
android:id="@+id/edtAddress"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="120dp"
android:hint="Alamat"
android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="textMultiLine"
android:gravity="top"
android:imeOptions="actionDone"/>

<Button
android:id="@+id/btnSave"
android:layout_marginTop="24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Simpan"/>

</LinearLayout>

</LinearLayout>

Pembahasan komponen antar muka pada activity_main.xml

1. LinearLayout
LinearLayout adalah komponen ViewGroup yang biasanya digunakan untuk
membuat layout dengan susunan view mendatar ke bawah (vertical) atau ke
samping (horizontal). Hal itu, dikarenakan LinearLayout memiliki property
android:orientation="vertical" yang dapat diisi value vertical dan
horizontal. Property ini harus selalu digunakan.

2. TextView
TextView adalah komponen View yang digunakan untuk menampilkan informasi
berupa text. Berikut adalah kegunaan dari beberapa property yang umumnya
digunakan untuk TextView:
Property Fungsi
android:text="" Mengatur tulisan yang tampil pada TextView
android:textSize="" Mengatur ukuran font TextView dengan satuan "sp"
 Mengatur warna font TextView. Diisi dengan kode
android:textColor="" warna hexadesimal yang diawali dengan tanda #,
misal "#000000"
android:fontFamily="" Mengatur jenis font TextView

3. Spinner
Spinner adalah komponen View yang digunakan untuk kebutuhan menerima
input dalam bentuk pilihan. Misal, pilihan kelamin (Laki-laki atau Perempuan).
Data pilihan yang ditampilkan akan diatur pada file .kt yang menggunakan layout
activity_main.xml, dalam kasus ini adalah MainActivity.kt

4. EditText
EditText adalah komponen View yang digunakan untuk kebutuhan menerima
input dalam bentuk text. Berikut adalah beberapa property yang banyak
digunakan pada EditText:
Property Fungsi
android:hint="" Mengatur tooltip yang mucul pada EditText
sebelum disentuh
android:textColorHint="" Mengatur warna tooltip EditText. Diisi dengan
kode warna hexadesimal yang diawali dengan
tanda #, misal "#CCCCCC"
android:textColor="" Mengatur warna font pada EditText. Diisi dengan
kode warna hexadesimal yang diawali dengan
tanda #, misal "#000000"
android:inputType="" Mengatur tipe soft input keyboard ketika EditText
disentuh. Ada beberapa, tipe input di antaranya,
text, number, textPassword, dll.
android:imeOptions="" Mengatur tipe OK button pada soft input
keyboard yang muncul ketika EditText disentuh.

5. Button
Button adalah komponen View berupa button. Button dapat diberi label
dengan menggunakan property android:text=""
3.1.3. Membuat Layout Halaman Profil Diri
Halaman profil diri adalah halaman (activity) baru. Setiap halaman umumnya
berpasangan antara file layout .xml dengan file class .kt. Android Studio sudah
memberikan kemudahan untuk membuat activity baru, yaitu dengan melakukan
langkah berikut:
1. Klik kanan pada direktori app\java\<app package>, pilih New, kemudian pilih
Activity, lalu pilih Empty Activity

Gambar 3.2. Membuat Activity Baru

2. Beri nama pada Activity Baru (MyProfileActivity)

Gambar 3.3. Memberi Nama Activity Baru

activity_my_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyProfileActivity"
android:background="#FFFFFF">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/imgProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#EEEEEE"/>

<LinearLayout
android:layout_marginLeft="16dp"
android:layout_toRightOf="@id/imgProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name: "
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

<TextView
android:id="@+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
 <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender: "
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

<TextView
android:id="@+id/txtGender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email: "
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

<TextView
android:id="@+id/txtEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Telp.: "
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

<TextView
android:id="@+id/txtTelp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="15sp"
 android:textColor="#000000"
android:fontFamily="sans-serif"/>

</LinearLayout>

</LinearLayout>

</RelativeLayout>

<TextView
android:layout_marginTop="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Address:"
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

<TextView
android:layout_marginTop="16dp"
android:id="@+id/txtAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textSize="15sp"
android:textColor="#000000"
android:fontFamily="sans-serif"/>

</LinearLayout>

</ScrollView>

Pembahasan komponen antar muka pada activity_my_profile.xml

1. ScrollView
ScrollView adalah ViewGroup yang digunakan untuk halaman dengan
kebutuhan layar device dapat digulirkan. Biasanya digunakan untuk halaman
dengan komponen view tersusun mendatar ke bawah yang cukup panjang.
2. RelativeLayout
RelativeLayout adalah ViewGroup yang digunakan untuk halaman dengan tata
letak komponen view tidak hanya mendatar ke bawah atau ke samping.
Biasanya digunakan untuk tata letak yang cukup kompleks karena jika
menggunakan RelativeLayout, komponen view di dalamnya dapat dibuat relatif
terhadap komponen view tertentu. Misal, dengan menggunakan property
android:layout_toRightOf="@id/<id_view>". Berikut adalah beberapa property
 yang umumnya digunakan pada komponen view yang ada di dalam ViewGroup
RelativeLayout:
Property Fungsi
android:layout_toRightOf Mengatur posisi view ada di sebelah kanan view
="@id/<id_view>"
tertentu
android: layout_toLeftOf Mengatur posisi view ada di sebelah kiri view
="@id/<id_view>"
tertentu
android: layout_above Mengatur posisi view ada di atas view tertentu
="@id/<id_view>"

android: layout_below Mengatur posisi view ada di bawah view tertentu

="@id/<id_view>"

android:layout_align Mengatur posisi view berada di pojok kanan

ParentRight="true"

android:layout_align Mengatur posisi view berada di pojok kiri

ParentLeft="true"

android:layout_align Mengatur posisi view berada di pojok bawah

ParentBottom="true"

android:layout_align Mengatur posisi view berada di pojok atas

ParentTop="true"

android:layout_center Mengatur posisi view berada di tengah-tengah

InParent="true"
secara horizontal dan vertical
android:layout_center Mengatur posisi view berada di tengah-tengah
Vertical="true"
secara vertical
android:layout_center Mengatur posisi view berada di tengah-tengah
Horizontal="true"
secara horizontal

3. ImageView
ImageView adalah komponen view yang digunakan untuk menampilkan
gambar, baik berupa file ataupun url gambar. Jika menggunakan file, maka
property yang digunakan adalah android:src="<posisi_file>". Sedangkan jika
menggunakan url, maka akan diatur pada file .kt yang menggunakan layoutnya.
Disamping beberapa property yang sudah dijelaskan, ada beberapa property yang
umumnya digunakan oleh semua view:
Property Fungsi
android:layout_width="" Mengatur lebar view. match_parent,
fill_parent jika ingin selebar parent dan
wrap_parent jika ingin selebar isi viewnya
android:layout_height="" Mengatur tinggi view. match_parent,
fill_parent jika ingin setinggi parent dan
wrap_parent jika ingin setinggi isi viewnya
android:visibility="" Mengatur status tampil sebuah view. invisible
jika ingin tidak terlihat. visible jika ingin terlihat
gone jika ingin menghilang. Secara default, akan
terisi dengan visible jika property tersebut
tidak digunakan
android:layout_margin="" Mengatur jarak luar semua sisi sebuah view.
Diisi dengan satuan dp
android:layout_marginTop="" Mengatur jarak luar sisi atas sebuah view
android:layout_margin Mengatur jarak luar sisi bawah sebuah view
Bottom=""

android:layout_margin Mengatur Jarak luar sisi kanan sebuah view

Right=""

android:layout_margin Mengatur Jarak luar sisi kiri sebuah view

Left=""

android:layout_padding="" Mengatur jarak dalam semua sisi sebuah view.

Diisi dengan satuan dp
android:layout_paddingTop="" Mengatur jarak dalam sisi atas sebuah view
android:layout_padding Mengatur jarak dalam sisi bawah sebuah view
Bottom=""

android:layout_padding Mengatur Jarak dalam sisi kanan sebuah view

Right=""

android:layout_padding Mengatur Jarak dalam sisi kiri sebuah view

Left=""

android:background="" Mengatur warna latar sebuah view. Diisi dengan

kode warna hexadesimal yang diawali dengan
tanda #, misal "#CCCCCC"
3.2. Mengenal Activity

3.3. Memasang Validasi Input Pada Halaman Registrasi

Untuk memberikan sebuah perintah logika (function) pada sebuah view yang
terdapat pada sebuah halaman tertentu, dalam hal ini adalah memvalidasi input dari form
input halaman regisstrasi, diperlukan kepastian bahwa antara file .kt dan file .xml sudah
saling terhubung. Untuk mengetahui hal tersebut dapat dilakukan dengan membuka file
MainActivity.kt dan melihat pada bagian kode

setContentView(R.layout.activity_main)

Kode tersebut memiliki arti bahwa file MainActivity.kt menggunakan file

activity_main.xml sebagai layoutnya.
Selanjutnya, komponen view pada activity_main.xml yang ingin diberikan perintah
perlu dikenali pada MainActivity.kt. Ada dua cara untuk melakukan hal tersebut, yaitu
dengan menggunakan metode findViewById dan menggunakan fitur Kotlin Android
Extension. Kedua metode tersebut akan dibahas. Akan tetapi hanya akan digunakan
metode Kotlin Android Extension karena metode tersebut dapat membuat kode menjadi
lebih ringkas.
3.3.1. Menggunakan Metode findViewById
Pada metode ini, hal pertama yang dilakukan adalah membuat variabel view
kemudian memasang kode findViewById pada variable tersebut.
class MainActivity : AppCompatActivity() {

var edtName : EditText? = null

var spinnerGender : Spinner? = null
var edtEmail : EditText? = null
var edtTelp : EditText? = null
var edtAlamat : EditText? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

edtName = findViewById(R.id.edtName)
spinnerGender = findViewById(R.id.spinnerGender)
edtEmail = findViewById(R.id.edtEmail)
edtTelp = findViewById(R.id.edtTelp)
edtAlamat = findViewById(R.id.edtAddress)
 }

}
3.3.2. Menggunakan Metode Kotlin Android Extension
Dengan Kotlin Android Extension, penggunaan kode seperti pada contoh di
atas tidak perlu dilakukan. Fungsi kode di atas digantikan dengan hanya
menambahkan satu baris kode di bawah ini:

import kotlinx.android.synthetic.main.activity_main.*

Fungsi validasi akan dijalankan ketika pengguna menekan Button Simpan.

Maka, Button tersebut harus diberikan OnClickListener.

btnSave.setOnClickListener { }

Kemudian menambahkan fungsi validasiInput() dan diletakan di dalam

fungsi btnSave.setOnClickListener { validasiInput() }. Lalu letakkan kursor
diantara huruf pada nama fungsi validasiInput tersebut dan klik alt + enter, pilih
create function 'validasiInput' untuk membuat fungsi secara otomatis.

private fun validasiInput() {

val namaInput = edtName.text.toString()
val emailInput = edtEmail.text.toString()
val telpInput = edtTelp.text.toString()
val alamatInput = edtAddress.text.toString()

when{

namaInput.isEmpty() -> edtName.error = "Nama tidak boleh

kosong"
emailInput.isEmpty() -> edtEmail.error = "Email tidak boleh
kosong"
telpInput.isEmpty() -> edtTelp.error = "Telp tidak boleh
kosong"
alamatInput.isEmpty() -> edtAddress.error = "Alamat tidak
boleh kosong"

else -> {

Toast.makeText(this,
"Navigasi ke halaman profil diri",
Toast.LENGTH_SHORT).show()

}
}
 }

3.4. Memasang Pilihan Data Pada Spinner

Seperti diketahui bahwa ada pilihan jenis kelamin pada halaman registrasi akan
tetapi data yang ditampilkan belum diatur. Pada poin ini, akan dibahas cara menambahkan
pilihan data pada komponen view berupa Spinner sebagai berikut:
1. Menambahkan data array pilihan pada file strings.xml yang terletak pada direktori
app/res/values/strings.xml

<resources>
<string name="app_name">MyProfileApp</string>

<string-array name="gender_list">
<item>Pilih kelamin</item>
<item>Laki-laki</item>
<item>Perempuan</item>
</string-array>

</resources>

2. Kemudian tambahkan properti android:entries="@array/gender_list" pada view

Spinner pada layout activity_main.xml
3. Menambahkan fungsi baru pada MainActivity.kt dan letakan di dalam fungsi onCreate

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

btnSave.setOnClickListener { validasiInput() }

setDataSpinnerGender()

private fun setDataSpinnerGender() {

val adapter = ArrayAdapter.createFromResource(this,
R.array.gender_list, android.R.layout.simple_spinner_item)

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_i
tem)

spinnerGender.adapter = adapter
}
 4. Menambahkan validasi SpinnerGender pada fungsi validasiInput().

private fun validasiInput() {

val namaInput = edtName.text.toString()
val emailInput = edtEmail.text.toString()
val telpInput = edtTelp.text.toString()
val alamatInput = edtAddress.text.toString()
val genderInput = spinnerGender.selectedItem.toString()

when{

namaInput.isEmpty() -> edtName.error = "Nama tidak boleh kosong"

genderInput.equals("Pilih kelamin") -> tampilToast("Kelamin harus
dipilih")
emailInput.isEmpty() -> edtEmail.error = "Email tidak boleh
kosong"
telpInput.isEmpty() -> edtTelp.error = "Telp tidak boleh kosong"
alamatInput.isEmpty() -> edtAddress.error = "Alamat tidak boleh
kosong"

else -> {

tampilToast("Navigasi ke halaman profil diri")

}
}

3.5. Memasang Intent Pada Aplikasi Profil Diri

Intent adalah sebuah class yang dapat digunakan untuk perpindahan (navigasi) ke
halaman (activity) lain atau halaman itu sendiri dengan atau tanpa mengirim data. Pada
aplikasi profil diri, Intent akan digunakan untuk keperluan navigasi dari activity
MainActivty.kt (Registrasi) ke activity MyProfileActivity.kt (Profil Diri) dengan mengirimkan
data yang diisi pada halaman registrasi.
Dalam penggunaannya untuk navigasi, sebuah Intent harus diatur terlebih dahulu
dari mana dan akan ke mana navigasinya dilakukan. Kemudian barulah sebuah Intent
dijalankan (execute) dengan fungsi startActivity(intent).
Untuk memastikan penggunaan Intent berjalan pada aplikasi, dapat dibuat sebuah
fungsi navigasi tanpa mengirimkan data kemudian jalankan aplikasi. Berikut adalah kode
yang digunakan:
 private fun navigasiKeProfilDiri() {

val intent = Intent(this, MyProfileActivity::class.java)

startActivity(intent)

Kemudian execute fungsi tersebut di dalam fungsi validasiInput ketika kondisi semua
input diisi:

else -> {

tampilToast("Navigasi ke halaman profil diri")

navigasiKeProfilDiri()

Untuk mengirimkan data pada saat navigasi secara bersamaan, dapat

memanfaatkan penggunaan salah satu class yang disebut Bundle. Akan tetapi beberapa
variable yang digunakan untuk menampung input harus dibuat menjadi variable global (var)
terlebih dahulu. Berikut adalah contoh penggunaan Bundle pada Intent untuk kebutuhan
mengirimkan data pada saat melakukan navigasi.

private fun navigasiKeProfilDiri() {

val intent = Intent(this, MyProfileActivity::class.java)

val bundle = Bundle()

bundle.putString("nama", namaInput)
bundle.putString("gender", genderInput)
bundle.putString("email", emailInput)
bundle.putString("telp", telpInput)
bundle.putString("alamat", alamatInput)

intent.putExtras(bundle)

startActivity(intent)

}
3.6. Mengambil Intent Data Pada Halaman Profil Diri
Data yang dikirimkan dengan Intent dapat diambil pada halaman tujuan
(MyProfileActvity.kt). Karena, pada saat dikirimkan menggunakan Bundle, maka untuk
mengambilnya pun menggunakan Bundle dengan kode seperti di bawah ini:

val bundle = intent.extras

Setelah itu, data akan diambil dengan menggunakan nama variable dan tipe data
sesuai dengan yang digunakan pada saat dikirim. Contoh, untuk mengambil data yang
dikirimkan dengan tipe String dan variable "nama":

val nama = bundle.getString("nama")

Pada MyProfileActivity.kt, dibuat sebuah fungsi untuk mengambil dan menampilkan

data yang dikirim sebagai berikut:

private fun ambilData() {

val bundle = intent.extras

val nama = bundle.getString("nama")

val gender = bundle.getString("gender")
val email = bundle.getString("email")
val telp = bundle.getString("telp")
val alamat = bundle.getString("alamat")

txtName.text = nama
txtGender.text = gender
txtEmail.text = email
txtTelp.text = telp
txtAddress.text = alamat

Project Aplikasi Profil Diri bisa dilihat dan di-download pada tautan berikut:
https://github.com/aderifaldi/smkcoding.android.profildiri
 BAB 4
Aplikasi Teman Saya

Pada bab ini akan dipelajari pembuatan aplikasi yang dapat menyimpan data teman serta
menampilkannya dalam tampilan list. Maka itu, pada bab ini akan dipelajari tentang
penyimpanan data (database) lokal, yaitu Room. Jika pada bab sebelumnya dibahas tentang
beberapa komponen ViewGroup dan View, pada bab ini hanya akan dibahas komponen View
yaitu FloatingActionButton dan RecyclerView. Pada bab ini juga akan dibahas tentang
penggunaan Fragment. Fragment adalah class yang memiliki fungsi sama seperti Activity, akan
tetapi Fragment tidak bisa berdiri sendiri. Sebuah Fragment harus bergantung pada sebuah
Activity. Dalam analogi sederhana, Fragment bisa dianggap sebuah child dan Activity adalah
parent, sebagaimana ViewGroup dan View.

4.1. Membuat Layout Halaman Teman Saya

Sebelum membuat layout halaman teman saya, lakukan pembuatan project baru
dengan nama project MyFriendApp. Halaman teman saya adalah halaman yang
menampilkan informasi teman dalam tampilan list. Oleh karena itu, dibutuhkan komponen
view RecyclerView. RecyclerView adalah komponen View yang tidak disediakan secara
default. Maka, harus dilakukan penambahan library RecyclerView pada project
MyFriendApp.
4.1.1. Menambahkan Library RecyclerView
Pada Bab 2, telah dibahas sedikit tentang Gradle Module App, yaitu file
gradle yang salah satu kegunaannya adalah untuk konfigurasi penggunaan library
pada project. Pada bagian dependencies pada file gradle tersebut, dapat
ditambahkan library-library yang dibutuhkan dalam project. Library RecyclerView
ditambahkan dengan menggunakan script berikut:

implementation 'androidx.recyclerview:recyclerview:1.0.0'
 Setelah melakukan penambahan library, klik Sync Now yang muncul pada
bagian kanan atas editor.

Gambar 4.1. Pesan Yang Muncul Setelah Dilakukan Perubahan Pada File Grdale

4.1.2. Membuat Layout Halaman Teman Saya

Setiap layout pada project diletakan pada direktori app/res/layout. Oleh
karena itu, penambahan layout baru juga dilakukan pada direktori tersebut dengan:
1. Melakukan klik kanan pada direktori layout
2. Pilih New, XML, Layout XML File
3. Beri nama my_friends_fragment.xml
4. Tambahkan RecyclerView di dalam LinearLayout

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/listMyFriends"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

</RelativeLayout>

4.1.3. Membuat Layout Halaman Tambah Teman

my_friends_add_fragment.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFFFFF">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tambah Teman"
android:textSize="19sp"
android:layout_margin="16dp"
android:textColor="#000000"
android:layout_gravity="center_horizontal"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:orientation="vertical">

<EditText
android:id="@+id/edtName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Nama"
android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="text"
android:imeOptions="actionDone"/>

<Spinner
android:layout_marginTop="16dp"
android:id="@+id/spinnerGender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:entries="@array/gender_list"/>

<EditText
android:id="@+id/edtEmail"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="textEmailAddress"
android:imeOptions="actionNext"/>

<EditText
android:id="@+id/edtTelp"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Telp."
android:textColorHint="#CCCCCC"
android:textColor="#000000"
android:inputType="number"
android:imeOptions="actionNext"/>

<EditText
android:id="@+id/edtAddress"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="120dp"
android:hint="Alamat"
android:textColorHint="#CCCCCC"
android:textColor="#000000"
 android:inputType="textMultiLine"
android:gravity="top"
android:imeOptions="actionDone"/>

<Button
android:id="@+id/btnSave"
android:layout_marginTop="24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Simpan"/>

</LinearLayout>

</LinearLayout>

Gambar 4.2. Layout Tambah Teman

4.1.4. Membuat Layout Item List Teman

Jika ingin membuat tampilan list, diharuskan membuat layout dari item
informasi yang akan ditampilkan dalam bentuk list. Dalam hal ini,
my_friends_item.xml
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#FFFFFF">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android: paddingBottom="8dp">

<TextView
android:id="@+id/txtFriendName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama"
android:textSize="18sp"/>

<TextView
android:id="@+id/txtFriendEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email"
android:textSize="16sp"/>

<TextView
android:layout_marginTop="4dp"
android:id="@+id/txtFriendTelp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Telp"
android:textSize="20sp"/>
</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#000000"/>

</LinearLayout>

4.1.5. Menambahkan Floating Action Button pada my_friends_fragment.xml

Floating Action Button (FAB) adalah komponen View dari Material Design
berupa Button Floating (mengambang) berbentuk lingkaran. Untuk dapat
menggunakan FAB, harus menambahkan dua script pada file Gradle Module:
1. vectorDrawables.useSupportLibrary = true pada bagian defaultConfig
2. implementation 'com.google.android.material:material:1.1.0-alpha03'pada

dependencies

Kemudian, tambahkan FAB pada layout my_friends_fragment.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
xmlns:app="http://schemas.android.com/apk/res-auto">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/listMyFriends"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<com.google.android.material.floatingactionbutton.FloatingActionButt
on
android:id="@+id/fabAddFriend"
style="@style/Widget.Design.FloatingActionButton"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_add_plus_button"/>

</RelativeLayout>

Gambar 4.3. my_friends_fragment.xml

 4.1.6. Menambahkan FrameLayout Pada activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<FrameLayout
android:id="@+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

4.2. Membuat Fragment pada Aplikasi Teman Saya

Fragment adalah class yang pada umumnya digunakan untuk kebutuhan
menampilkan lebih dari satu fitur pada satu halaman. Contoh: aplikasi GOJEK

Gambar 4.4. Halaman Aplikasi GOJEK

Pada aplikasi GOJEK di atas, terdapat lima Fragment (Home, Orders, Help, Inbox,
Account) yang ditampilkan dalam satu Activity. Pada project aplikasi MyFriendApp, akan
digunakan penerapan yang serupa, yaitu menggunakan dua Fragment
(MyFriendsFragment.kt dan MyFriendsAddFragment.kt) pada satu Activity
(MainActivity.kt)
4.2.1. Menambahkan Fragment MyFriendsFragment.kt
Berikut adalah langkah-langkah untuk menambahkan file .kt pada project:
1. Klik kanan pada direktori app/java/<package project>
2. Pilih New, Kotlin File/Class
3. Beri nama MyFriendsFragment dan pilih Kind: Class, OK

Gambar 4.5. Menambahkan File Kotlin Pada Project

MyFriendsFragment.kt

package id.smkcoding.myfriendapp

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.*

class MyFriendsFragment : Fragment() {

companion object {
fun newInstance(): MyFriendsFragment {
return MyFriendsFragment()
}
}

override fun onCreateView(inflater: LayoutInflater, container:

ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.my_friends_fragment,
container, false)
}
 override fun onViewCreated(view: View, savedInstanceState:
Bundle?) {
super.onViewCreated(view, savedInstanceState)
initView()
}

private fun initView() {

override fun onDestroy() {

super.onDestroy()
this.clearFindViewByIdCache()
}

4.2.2. Menambahkan Fragment MyFriendsAddFragment.kt

package id.smkcoding.myfriendapp
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.*

class MyFriendsAddFragment : Fragment() {

companion object {
fun newInstance(): MyFriendsAddFragment {
return MyFriendsAddFragment()
}
}

override fun onCreateView(inflater: LayoutInflater, container:

ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.my_friends_add_fragment,
container, false)
}

override fun onViewCreated(view: View, savedInstanceState:

Bundle?) {
super.onViewCreated(view, savedInstanceState)
initView()
}

private fun initView() {

override fun onDestroy() {

super.onDestroy()
this.clearFindViewByIdCache()
}

}
4.3. Menambahkan Fungsi gantiFragment() pada Aplikasi MyFriendApp
Fungsi gantiFragment() adalah fungsi yang digunakan untuk mengganti Fragment
yang tampil pada MainActivity.kt. Berikut adalah kode MainActivity.kt setelah ditambahkan
fungsi gantiFragment()

package id.smkcoding.myfriendapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
tampilMyFriendsFragment()
}

private fun gantiFragment(

fragmentManager: FragmentManager,
fragment: Fragment, frameId: Int
) {
val transaction = fragmentManager.beginTransaction()
transaction.replace(frameId, fragment)

transaction.commit()
}

fun tampilMyFriendsFragment() {
gantiFragment(supportFragmentManager,
MyFriendsFragment.newInstance(), R.id.contentFrame)
}

fun tampilMyFriendsAddFragment(){
gantiFragment(supportFragmentManager,
MyFriendsAddFragment.newInstance(), R.id.contentFrame)
}

4.3.1. Menjalankan fungsi tampilMyFriendsAddFragment pada MyFriendsFragment

Fungsi tampilMyFriendsAddFragment pada MyFriendsFragment dijalankan
ketika FAB pada MyFriendsFragment diklik. Ditambahkan pada fungsi initView():

fabAddFriend.setOnClickListener { (activity as
MainActivity).tampilMyFriendsAddFragment() }
 4.3.2. Menjalankan fungsi tampilMyFriendsFragment pada MyFriendsAddFragment
Fungsi tampilMyFriendsFragment pada MyFriendsAddFragment dijalankan
ketika Button Save pada MyFriendsAddFragment diklik. Ditambahkan pada fungsi
initView():

btnSave.setOnClickListener { (activity as
MainActivity).tampilMyFriendsFragment() }

Gambar 4.6. Aplikasi MyFriendApp

4.4. Menampilkan Data List Teman Pada RecyclerView

Untuk menampilkan data list pada RecyclerView, setidaknya ada 3 hal yang perlu
dilakukan: membuat data class untuk menampung data list item, membuat class
RecyclerView Adapter untuk menampilkan data per item, dan menampilkan data list pada
RecyclerView.
4.4.1. Membuat Data Class
Data Class adalah sebuah class yang digunakan untuk menampung data.
Pada aplikasi MyFriendApp, data class digunakan untuk menampung data diri teman
yang kemudian akan ditampilkan dalam tampilan list pada RecyclerView. Berikut
adalah data class yang digunakan untuk menampung data diri teman tersebut:
 MyFriend.kt

data class MyFriend (

val nama : String,
val kelamin : String,
val email : String,
val telp: String,
val alamat: String
)

4.4.2. Membuat RecyclerViewAdapter

Untuk menampilkan data dalam tampilan list pada RecyclerView,
dibutuhkan sebuah class RecyclerView Adapter. Recycler View Adapter yang akan
dibuat juga menggunakan Kotlin Android Extension sebagai pengganti
findViewById, yaitu dengan mengimplentasi class LayoutContainer. Akan tetapi,
fitur tersebut belum aktif secara default sehingga harus diaktifkan terlebih dahulu
dengan menambahkan script di bawah ini di atas dependencies pada build.gradle
(module: app)

androidExtensions {
experimental = true
}

MyFriendAdapter.kt

package id.smkcoding.myfriendapp

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.extensions.LayoutContainer
import kotlinx.android.synthetic.main.my_friends_item.*

class MyFriendAdapter(private val context: Context, private val

items: ArrayList<MyFriend>) :
RecyclerView.Adapter<MyFriendAdapter.ViewHolder>() {

override fun onCreateViewHolder(parent: ViewGroup, viewType:

Int) =

ViewHolder(LayoutInflater.from(context).inflate(R.layout.my_friends_
item, parent, false))
 override fun onBindViewHolder(holder: ViewHolder, position: Int)
{
holder.bindItem(items.get(position))
}

override fun getItemCount(): Int = items.size

class ViewHolder(override val containerView: View) :

RecyclerView.ViewHolder(containerView), LayoutContainer {
fun bindItem(item: MyFriend) {
txtFriendName.text = item.nama
txtFriendEmail.text = item.email
txtFriendTelp.text = item.telp
}

}
}

4.4.3. Menampilkan List Data Pada RecyclerView

Setelah membuat data class dan RecyclerView Adapter untuk menampung
dan menampilkannya data, selanjutnya harus dilakukan simulasi mengisian data ke
dalam variable MutableList. Kemudian data yang ada pada variable tersebut di
masukkan ke MyFriendAdapter.kt. Lalu mengatur RecyclerView untuk
menggunakan MyFriendAdapter.kt sebagai adapternya. Berikut adalah langkah-
langkahnya:
1. Menambahkan public variable MutableList yang menampung data dengan data
class MyFriend pada MyFriendsFragment.kt

lateinit var listTeman : MutableList<MyFriend>

2. Mengisi data simulasi ke dalam listTeman

private fun simulasiDataTeman() {

listTeman = ArrayList()

listTeman.add(MyFriend("Muhammad", "Laki-laki", "[email protected]",

"085719004268", "Bandung"))
listTeman.add(MyFriend("Al Harits", "Laki-laki",
"[email protected]", "081213416171", "Bandung"))

}
 3. Menampilkan data listTeman ke dalam RecyclerView

private fun tampilTeman() {

listMyFriends.layoutManager = LinearLayoutManager(activity)
listMyFriends.adapter = MyFriendAdapter(activity!!, listTeman)
}

4. Menjalankan fungsi dataTeman() dan tampilTeman()

private fun initView() {

fabAddFriend.setOnClickListener { (activity as
MainActivity).tampilMyFriendsAddFragment() }

simulasiDataTeman()
tampilTeman()
}

Gambar 4.7. Menampilkan Data Pada RecycvlerView

4.5. Menambahkan Data ke Dalam Penyimpanan Data (Database) Lokal

4.5.1. Menambahkan Library Room
Penyimpanan data (database) lokal yang digunakan pada Aplikasi
MyFriendApp adalah Room. Hal pertama yang perlu dilakukan untuk menggunakan
 Room pada project adalah menambahkan plugin 'kotlin-kapt' pada build.gradle
(module: app). Kemudian, menambahkan library Room di dalam dependencies

apply plugin: 'kotlin-kapt'

….

implementation 'android.arch.persistence.room:runtime:1.1.1'
kapt 'android.arch.persistence.room:compiler:1.1.1'

4.5.2. Mengubah Data Class MyFriend.kt Menjadi Table (Entity)

Table pada database Room direpresentasikan dengan data class yang
ditambahkan annotation (@) Entity. Selain itu, ditambahkan variable data sebagai
primary key.
MyFriend.kt

@Entity
data class MyFriend (
@PrimaryKey(autoGenerate = true)
val temanId: Int? = null,
val nama : String,
val kelamin : String,
val email : String,
val telp: String,
val alamat: String
)

4.5.3. Membuat Data Access Object (DAO) Untuk Menambah dan Mengambil Data
Teman
Sebuah database berbasis table memerlukan sekumpulan perintah khusus
untuk mengakses data yang disebut dengan SQL (Structured Query Language). Pada
database Room, perlu dibuat sebuah interface berisi SQL yang disebut DAO. Sebuah
DAO dapat diisi dengan perintah SQL untuk menambahkan (insert), mengubah
(update), menghapus (delete), dan mengambil (get) data.
 MyFriendDao.kt

@Dao
interface MyFriendDao {

@Insert(onConflict = OnConflictStrategy.REPLACE)
fun tambahTeman(friend: MyFriend)

@Query("SELECT * FROM MyFriend")

fun ambilSemuaTeman(): LiveData<List<MyFriend>>

4.5.4. Membuat Class RoomDatabase

Hal berikutnya yang perlu dilakukan adalah membuat class RoomDatabase
yang berperan sebagai class yang memberikan koneksi antara interface dengan
database.

@Database(entities = [MyFriend::class], version = 1)

abstract class AppDatabase: RoomDatabase() {

abstract fun myFriendDao(): MyFriendDao

companion object {
var INSTANCE: AppDatabase? = null

fun getAppDataBase(context: Context): AppDatabase? {

if (INSTANCE == null){
synchronized(AppDatabase::class){
INSTANCE =
Room.databaseBuilder(context.applicationContext,
AppDatabase::class.java, "MyFriendAppDB").build()
}
}
return INSTANCE
}

fun destroyDataBase(){
INSTANCE = null
}
}

}
4.5.5. Membuat Fungsi tambahDataTeman(teman: MyFriend)
Perintah menambah data teman dijalankan pada Fragment
MyFriendsAddFragment.kt ketika Button btnSave ditekan dan fungsi validasiInput()
memasuki kondisi validasi sukses. Untuk menlajankan perintah tambah (insert)
teman yang ada pada MyFriendDao.kt, dibutuhkan penggunaan coroutines. Maka
itu perlu ditambahkan library coroutines pada build.gradle. Kemudian, Sync.

implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.1.1'

Sebelum menjalankan fungsi tambahTeman, perlu dibuat variable untuk

menampung input pada fungsi validasiInput.

else -> {

val teman = MyFriend(nama = namaInput, kelamin = genderInput,

email = emailInput, telp = telpInput, alamat = alamatInput)
tambahDataTeman(teman)

Berikut adalah fungsi tambahTeman

private fun tambahDataTeman(teman: MyFriend) : Job {

return GlobalScope.launch {
myFriendDao?.tambahTeman(teman)
(activity as MainActivity).tampilMyFriendsFragment()
}

MyFriendsAddFragment.kt

package id.smkcoding.myfriendapp

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.Toast
import androidx.fragment.app.Fragment
import kotlinx.android.synthetic.*
import kotlinx.android.synthetic.main.my_friends_add_fragment.*
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

class MyFriendsAddFragment : Fragment() {

companion object {
fun newInstance(): MyFriendsAddFragment {
return MyFriendsAddFragment()
}
}

private var namaInput : String = ""

private var emailInput : String = ""
private var telpInput : String = ""
private var alamatInput : String = ""
private var genderInput : String = ""

private var db: AppDatabase? = null

private var myFriendDao: MyFriendDao? = null

override fun onCreateView(inflater: LayoutInflater, container:

ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.my_friends_add_fragment,
container, false)
}

override fun onViewCreated(view: View, savedInstanceState:

Bundle?) {
super.onViewCreated(view, savedInstanceState)
initLocalDB()
initView()
}

private fun initLocalDB() {

db = AppDatabase.getAppDataBase(activity!!)
myFriendDao = db?.myFriendDao()
}

private fun initView() {

btnSave.setOnClickListener { validasiInput() }

setDataSpinnerGener()
}

private fun setDataSpinnerGener() {

val adapter = ArrayAdapter.createFromResource(activity!!,
R.array.gender_list,
android.R.layout.simple_spinner_item)

adapter.setDropDownViewResource(android.R.layout.simple_spinner_drop
down_item)

spinnerGender.adapter = adapter
}

private fun validasiInput() {

namaInput = edtName.text.toString()
emailInput = edtEmail.text.toString()
 telpInput = edtTelp.text.toString()
alamatInput = edtAddress.text.toString()
genderInput = spinnerGender.selectedItem.toString()

when{
namaInput.isEmpty() -> edtName.error = "Nama tidak boleh
kosong"
genderInput.equals("Pilih kelamin") ->
tampilToast("Kelamin harus dipilih")
emailInput.isEmpty() -> edtEmail.error = "Email tidak
boleh kosong"
telpInput.isEmpty() -> edtTelp.error = "Telp tidak boleh
kosong"
alamatInput.isEmpty() -> edtAddress.error = "Alamat
tidak boleh kosong"

else -> {

val teman = MyFriend(nama = namaInput, kelamin =

genderInput, email = emailInput, telp = telpInput, alamat =
alamatInput)
tambahDataTeman(teman)

}
}

private fun tambahDataTeman(teman: MyFriend) : Job {

return GlobalScope.launch {
myFriendDao?.tambahTeman(teman)
(activity as MainActivity).tampilMyFriendsFragment()
}

private fun tampilToast(message: String) {

Toast.makeText(activity!!, message,
Toast.LENGTH_SHORT).show()
}

override fun onDestroy() {

super.onDestroy()
this.clearFindViewByIdCache()
}

}
4.6. Mengambil Data Teman Dari Database Lokal
Perlu dilakukan beberapa perubahan pada class MyFriendsFragment.kt untuk
mengambil data list teman dari database lokal, diantaranya yaitu: mengganti tiper variable
listTeman dari MutableList menjadi List, menambahkan global variable AppDatabase dan
MyFriendDao, inisialisasi AppDatabase dan MyFriendDao, dan membuat fungsi untuk
mengambil (get) data teman.

MyFriendsFragment.kt

package id.smkcoding.myfriendapp

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import androidx.lifecycle.Observer
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.*
import kotlinx.android.synthetic.main.my_friends_fragment.*

class MyFriendsFragment : Fragment() {

companion object {
fun newInstance(): MyFriendsFragment {
return MyFriendsFragment()
}
}

private var listTeman : List<MyFriend>? = null

private var db: AppDatabase? = null

private var myFriendDao: MyFriendDao? = null

override fun onCreateView(inflater: LayoutInflater, container:

ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.my_friends_fragment, container,
false)
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

super.onViewCreated(view, savedInstanceState)
initLocalDB()
initView()
}

private fun initLocalDB() {

db = AppDatabase.getAppDataBase(activity!!)
myFriendDao = db?.myFriendDao()
}

private fun initView() {

 fabAddFriend.setOnClickListener { (activity as
MainActivity).tampilMyFriendsAddFragment() }

ambilDataTeman()
}

private fun ambilDataTeman() {

listTeman = ArrayList()
myFriendDao?.ambilSemuaTeman()?.observe(this, Observer { r ->

listTeman = r

when {
listTeman?.size == 0 -> tampilToast("Belum ada data
teman")

else -> {
tampilTeman()
}

})

private fun tampilToast(message: String) {

Toast.makeText(activity!!, message, Toast.LENGTH_SHORT).show()
}

private fun tampilTeman() {

listMyFriends.layoutManager = LinearLayoutManager(activity)
listMyFriends.adapter = MyFriendAdapter(activity!!, listTeman!!)
}

// private fun simulasiDataTeman() {

// listTeman = ArrayList()
//
// listTeman.add(MyFriend("Muhammad", "Laki-laki", "[email protected]",
"085719004268", "Bandung"))
// listTeman.add(MyFriend("Al Harits", "Laki-laki",
"[email protected]", "081213416171", "Bandung"))
//
// }

override fun onDestroy() {

super.onDestroy()
this.clearFindViewByIdCache()
}

Project Aplikasi MyFriendsApp bisa dilihat dan di-download pada tautan berikut:
https://github.com/aderifaldi/smkcoding.android.myfriendsapp
 BAB 5
Aplikasi Pengguna Github

Pada bab ini akan dipelajari cara pembuatan aplikasi yang menampilkan data dari sebuah
web service/API (Application Programming Interface). API adalah sebuah program yang dibuat
sebagai penghubung antara database dengan aplikasi lain agar bisa saling berkomunikasi untuk
melakukan pengambilan, pengiriman, perubahan, atau penghapusan data lewat sebuat jaringan
baik itu intranet maupun internet. Komunikasi yang dilakukan antara aplikasi dengan database
melalui sebuah API, umumnya harus mengikuti aturan (protocol) yang dibuat pada saat
pembuatan API tersebut. Hal itu lah apa yang disebut dengan dokumentasi API.
Aplikasi yang dibuat pada bab ini akan menggunakan API Github yang dapat dilihat
dokumetasinya pada tautan berikut https://developer.github.com/v3/. Tetapi, hanya akan
digunakan API get user (pengguna), yaitu: https://api.github.com/users. Aplikasi akan berjalan
dengan melakukan pengambilan data pengguna Github dengan API tersebut lewat jaringan
internet. Kemudian respon API akan ditampilan dalam tampilan list.

5.1. Menambahkan Permission Internet Pada AndroidManifest.xml

Jika sebuah aplikasi membutuhkan akses internet dalah pengoperasiannya, maka
perlu dilakukan penambahan permission pada AndroidManifest.xml. Diletakan diatas tag
<application>

<uses-permission android:name="android.permission.INTERNET"/>

5.2. Menambahkan Library-library yang Dibutuhkan

//GSON
implementation 'com.google.code.gson:gson:2.8.2'
//NETWORK
implementation 'com.squareup.okhttp3:okhttp:3.13.1'
implementation 'com.squareup.okhttp3:logging-interceptor:3.13.1'
implementation 'com.squareup.retrofit2:retrofit:2.5.0'
implementation 'com.squareup.retrofit2:converter-gson:2.5.0'
//GLIDE
 implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

5.3. Menambahkan Plugin JSON to Kotlin Class

Respon dari API get user github berupa Json. Jika API get user github
(https://api.github.com/users) di letakan pada kolom url sebuah bwoser dan dijalankan,
maka akan muncul data seperti di bawah ini:

[
{
"login": "mojombo",
"id": 1,
"node_id": "MDQ6VXNlcjE=",
"avatar_url": "https://avatars0.githubusercontent.com/u/1?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/mojombo",
"html_url": "https://github.com/mojombo",
"followers_url":
"https://api.github.com/users/mojombo/followers",
"following_url":
"https://api.github.com/users/mojombo/following{/other_user}",
"gists_url":
"https://api.github.com/users/mojombo/gists{/gist_id}",
"starred_url":
"https://api.github.com/users/mojombo/starred{/owner}{/repo}",
"subscriptions_url":
"https://api.github.com/users/mojombo/subscriptions",
"organizations_url":
"https://api.github.com/users/mojombo/orgs",
"repos_url": "https://api.github.com/users/mojombo/repos",
"events_url":
"https://api.github.com/users/mojombo/events{/privacy}",
"received_events_url":
"https://api.github.com/users/mojombo/received_events",
"type": "User",
"site_admin": false
}, …
]

Respon API tersebut perlu direpresentasikan menjadi Data Class. Untuk mempermudah
melakukan hal itu, diperlukan bantuan plugin yang bernama JSON to Kotlin Class. Berikut
adalah langkah-langkah untuk menambahkan plugin pada Android Studio:
 1. Pilih menu File – Settings – Plugins

Gambar 5.1. Menu File – Settings – Plugins

2. Pilih Browse repositories – tulis "json to kotlin", Instal dan Restart Android Studio

5.4. Melakukan
5.5. …
 Gambar 5. Applikasi Github User

Project Aplikasi GithubUserApp bisa dilihat dan di-download pada tautan berikut:
https://github.com/aderifaldi/smkcoding.android.githubuserapp
 Firebase

Firebase merupakan salah satu MBaaS (Mobile Backend as a Service) yang

sangat berguna untuk melakukan pengembangan aplikasi tanpa harus memikirkan
proses pembuatan aplikasi servernya. Dengan firebase, Anda bisa membuat
aplikasi mobile dengan proses yang lebih cepat karena, untuk permasalahan
seperti database, authentication login, cloud messaging, dan lainnya sudah diatur
oleh si Firebase sendiri

Kita akan coba 2 fitur dari firebase nya yaitu Authentication dan Cloud messaging
 1. Firebase authentication

adalah layanan yang diberikan oleh Firebase untuk fungsi user membership. Fitur-fitur
yang diberikan adalah register / login dengan beberapa metode :
– Alamat email dan password.
– Akun Google.
– Akun Facebook.
– Akun Twitter.
– Akun GitHub.
– Akun Anonymous.

Fitur yang menarik adalah fitur login dengan akun anonymous. Contohnya adalah user bisa
melakukan login secara sementara ketika melihat-lihat barang di aplikasi online shop kita.
Nah ketika user ingin melakukan pembelian, maka user tersebut diharuskan untuk login
dengan salah satu metode yang didukung Firebase (email-password, Google, Facebook,
Twitter, GitHub). Setelah user tersebut login, kita bisa mengumpulkan data-data yang dilihat
oleh user tersebut ketika masih menggunakan akun anonymous, kemudian
menggabungkannya dengan user yang sekarang telah login dengan salah satu metode login
yang dipilih.
 2. Firebase Cloud Messaging

FCM merupakan transformasi dari GCM (Google Cloud Messaging) dengan berbagai
pengembangan yang lebih powerful. Bagaimana cara kerja dari FCM tersebut? FCM
memiliki 2 komponen utama untuk mengirim dan menerima pesan.
- Firebase Cloud Functions atau server aplikasi untuk menyiapkan,
menargetkan, dan mengirim pesan.
- Sebuah aplikasi klien (Android, iOS, atau Web) untuk menerima pesan.

Anda bisa mengirim pesan melalui Admin

SDK atau melalui HTTP & XMPP APIs. Anda
juga bisa menggunakan Notification
composer dari Firebase dengan fitur target yang
lebih lengkap serta fitur analytics yang bisa
digunakan untuk memantau status dari pesan
yang dikirimkan
 Latihan Firebase

1. Buat sebuah project baru

2. Isilah dengan parameter sebagai berikut

Project Name AuthAndMessaging

Package Name com.dycode.edu.datasiswa (opsional)
Min SDK 19

3. Kemudian buka website firebase nya di https://firebase.google.com/ lalu pilih get started
4. Add project dan tulis nama project nya dengan nama AuthAndMessaging, kemudian
create project

5. Kalau sudah maka akan muncul tampilan seperti ini, dan kita pilih “Add firebase to
your android app”
6. Kemudian kita isi field-field dibawah ini

- Package name bisa kita dapatkan di project kita di file manifest

package="auth.edu.dycode.com.authandmessaging"
 - SHA 1 Bisa kita dapatkan dengan cara buka gradle yang ada di sebelah kanan

Lalu buka folder Tasks->android->klik SigningReport,

Tunggu sebentar kalau sudah beres maka akan tampil seperti ini, dan copy kan
SHA 1 nya

7. Buka lagi web firebase nya dan masukan field-field yang isinya sudah kita dapatkan.

8. Kemudian register app dan download file google-service.json

9. Hasil download nya disimpan di lokasi project kita di folder app

10. Tambahkan firebase SDK ke project kita, setelah ditambahkan lalu pilih next
 Sehingga menjadi seperti ini
Gradle > Module:app
Disini saya juga menambahkan sdk untuk authentication, cloud messaging glide dan
butterknife
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.google.firebase:firebase-core:16.0.1'
implementation 'com.google.firebase:firebase-auth:16.0.2'
implementation 'com.google.android.gms:play-services-auth:15.0.1'
implementation 'com.google.firebase:firebase-messaging:17.1.0'
implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'
}
apply plugin: 'com.google.gms.google-services'

Gradle > Project

dependencies {
classpath 'com.android.tools.build:gradle:3.3.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath 'com.google.gms:google-services:4.0.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}

11. Setelah semuanya selesai lalu sync now project nya

12. Buka kembali ke firebase, aktifkan sign-in method google di console nya di menu
Authentication – Sign-in method
13. Sekarang ke android studio nya, buka layout activity_main.xml dan tambahkan code
nya

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/prof_section"
android:orientation="horizontal"
android:layout_marginTop="30dp">

<ImageView
android:layout_width="90dp"
android:layout_height="wrap_content"
android:id="@+id/img_profile"
android:src="@mipmap/ic_launcher"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="28dp"
android:layout_marginTop="20dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nama"
android:id="@+id/txt_name"
android:textSize="25sp"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Email"
android:id="@+id/txt_email"
android:textSize="25sp"/>

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign Out"
android:id="@+id/btn_sign_out"/>

</LinearLayout>
</LinearLayout>
 <com.google.android.gms.common.SignInButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btn_login"
android:layout_marginTop="20dp">

</com.google.android.gms.common.SignInButton>

</LinearLayout>

14. Kemudian di MainActivity.kt

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/prof_section"
android:orientation="horizontal"
android:layout_marginTop="30dp">

<ImageView
android:layout_width="90dp"
android:layout_height="wrap_content"
android:id="@+id/img_profile"
android:src="@mipmap/ic_launcher"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="28dp"
android:layout_marginTop="20dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nama"
android:id="@+id/txt_name"
android:textSize="25sp"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Email"
android:id="@+id/txt_email"
android:textSize="25sp"/>

<Button
android:layout_width="match_parent"
 android:layout_height="wrap_content"
android:text="Sign Out"
android:id="@+id/btn_sign_out"/>

</LinearLayout>
</LinearLayout>

<com.google.android.gms.common.SignInButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/btn_login"
android:layout_marginTop="20dp">

</com.google.android.gms.common.SignInButton>

</LinearLayout>
private static final int REQ_CODE = 3;

private GoogleApiClient googleApiClient;

private FirebaseAuth mAuth;

private FirebaseAuth.AuthStateListener mAuthStateListener;

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

profSection.setVisibility(View.GONE);

mAuth = FirebaseAuth.getInstance();

mAuthStateListener = new FirebaseAuth.AuthStateListener() {

@Override
public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

}
};

GoogleSignInOptions signInOptions = new

GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
.requestIdToken(getString(R.string.default_web_client_id))
.requestEmail()
.build();

googleApiClient = new GoogleApiClient.Builder(this)

.enableAutoManage(this, this)
.addApi(Auth.GOOGLE_SIGN_IN_API, signInOptions)
.build();
}

@OnClick(R.id.btn_sign_out)
public void onBtnSignOutClicked() {
signOut();
}

@Override
public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {
 }

private void signOut() {

Auth.GoogleSignInApi.signOut(googleApiClient).setResultCallback(new
ResultCallback<Status>() {
@Override
public void onResult(@NonNull Status status) {
updateUI(false);
}
});
}

private void signIn() {

Intent intent = Auth.GoogleSignInApi.getSignInIntent(googleApiClient);
startActivityForResult(intent, REQ_CODE);
}

private void handleResult(GoogleSignInResult result) {

if (result.isSuccess()) {
GoogleSignInAccount account = result.getSignInAccount();

AuthCredential credential = GoogleAuthProvider.getCredential(account.getIdToken(),

null);
mAuth.signInWithCredential(credential)
.addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {

if (task.isSuccessful()) {
FirebaseUser firebaseUser = mAuth.getCurrentUser();
txtName.setText(firebaseUser.getDisplayName());
txtEmail.setText(firebaseUser.getEmail());

Glide.with(MainActivity.this).load(firebaseUser.getPhotoUrl().toString()).into(imgProfile);
updateUI(true);
} else {
updateUI(false);
}
}
});
} else {
Toast.makeText(this, "failed", Toast.LENGTH_SHORT).show();
}
}

private void updateUI(boolean isLogin) {

if (isLogin) {
profSection.setVisibility(View.VISIBLE);
btnLogin.setVisibility(View.GONE);
} else {
profSection.setVisibility(View.GONE);
btnLogin.setVisibility(View.VISIBLE);
}

}
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);

if (requestCode == REQ_CODE) {
 GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);
handleResult(result);
}
}

@OnClick(R.id.btn_login)
public void onViewClicked() {
signIn();
}
}

15. Yang terakhir kita harus manambahkan permission internet di project kita, buka
AndroidManifest.xml dan tambahkan seperti ini

<uses-permission android:name="android.permission.INTERNET"/>

16. Kalo sudah Coba running aplikasi nya, dan ini hasil aplikasi nya
 Menambahkaan Push Notification dengan Firebase Cloud Messaging(FCM)

Kita masih menggunakan project yang ini, di project ini kita coba menambahkan fitur
FCM,

17. Buat class baru dengan nama MyFirebaseInstanceIDService.kt untuk mendapatkan

token dari firebase.
Melalui token ini, kita dapat mengirim pemberitahuan ke perangkat yang lebih spesific.
Ketika diperoleh, token ini disimpan dalam sharedpreference untuk penggunaan nantinya

package com.example.authandmessaging

import com.google.firebase.iid.FirebaseInstanceId
import com.google.firebase.iid.FirebaseInstanceIdService

class MyFirebaseInstanceIDService: FirebaseInstanceIdService() {

override fun onTokenRefresh() {
super.onTokenRefresh()

val refreshedToken =
FirebaseInstanceId.getInstance().instanceId
}
}

18. MyFirebaseMessagingService.kt

Class ini untuk menampilkan notifikasi ke user

package com.example.authandmessaging

import android.app.NotificationManager
import android.app.PendingIntent
import android.content.Context
import android.content.Intent
import android.media.RingtoneManager
import android.net.Uri
import android.support.v4.app.NotificationCompat
import com.google.firebase.messaging.FirebaseMessagingService
import com.google.firebase.messaging.RemoteMessage

class MyFirebaseMessagingService: FirebaseMessagingService() {

override fun onMessageReceived(message: RemoteMessage?) {

super.onMessageReceived(message)
if (message != null) {
sendMyNotification(message.notification!!.body!!)
}
}

private fun sendMyNotification(message: String) {

val intent: Intent = Intent(
this,
MainActivity::class.java)

intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)
 val pendingIntent: PendingIntent = PendingIntent
.getActivity(this, 0, intent,
PendingIntent.FLAG_ONE_SHOT)

val soundUri: Uri = RingtoneManager.getDefaultUri(

RingtoneManager.TYPE_NOTIFICATION)

val notificationBuilder: NotificationCompat.Builder =

NotificationCompat
.Builder(this).setSmallIcon(R.mipmap.ic_launcher)
.setContentTitle("My Firebase Push Notification")

.setContentText(message).setAutoCancel(true).setSound(soundUri)
.setContentIntent(pendingIntent)

val notificationManager =
getSystemService(Context.NOTIFICATION_SERVICE)
as NotificationManager

notificationManager.notify(0, notificationBuilder.build())
}
}

19. Definisikan service firebase di manifest

 <service android:name=".MyFirebaseMessagingService">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
<service android:name=".MyFirebaseInstanceIDService">
<intent-filter>
<action android:name="com.google.firebase.INSTANCE_ID_EVENT" />
</intent-filter>
</service>

20. Sampai sini kita sudah membuat code untuk FCM, coba running kembali aplikasi nya
untuk mencoba notifikasi nya, kita buka console firebase dan pilih menu Grow -> Cloud
Messaging -> send your first message
21. Test notifikasi nya, dan tulis contoh pesan ke user, kemudian send message
22. Jika berhasil, maka akan tampil notifikasi seperti ini
 Referensi

Android Studio
https://developer.android.com/studio
https://developer.android.com/studio/install

Kotlin
https://kotlinlang.org/docs/reference/android-overview.html
https://kotlinlang.org/docs/tutorials/android-plugin.html
https://antonioleiva.com/kotlin-android-extensions/

Struktur Project Android

https://medium.com/mindorks/ultimate-android-app-project-structure-a-d-s-003-
4e8ce8499469
https://developer.android.com/studio/projects/
https://medium.com/@mikelimantara/overview-of-android-project-structure-and-naming-
conventions-b08f6d0b7291
https://code.tutsplus.com/tutorials/android-project-structure--mobile-12781

Android Spinner
https://tutorial.eyehunts.com/android/android-spinner-with-example-in-kotlin/

AndroidX
https://developer.android.com/jetpack/androidx/migrate

Floating Action Button

https://material.io/develop/android/components/floating-action-button/
Room
https://developer.android.com/topic/libraries/architecture/room
https://medium.com/mindorks/room-kotlin-android-architecture-components-71cad5a1bb35
https://medium.com/@kyle.dahlin0/room-persistence-library-with-coroutines-cdd32f9fe669

Github API
https://developer.github.com/v3/

OkHttp
https://square.github.io/okhttp/

Retrofit
https://square.github.io/retrofit/

Glide
https://github.com/bumptech/glide

Bug fixing
https://stackoverflow.com/questions/49512629/android-studio-error-default-interface-
methods-are-only-supported-starting-with