AndroidAppDev

Mobile Application on Android Platform
BAB 1
Android Intro
Tujuan khusus :
Siswa dapat :
• Mengenal Platform Android

• Mengetahui Fitur dan Teknologi yang
Ditawarkan Android
• Mengetahui Sejarah Perkembangan
Android
Program Internet-based System Automation 1

CEP-CCIT FTUI
1.1 Pengenalan Android
Android adalah sebuah Operating System berbasis Linux dengan tatap muka bahasa
pemrograman Java untuk perangkat selular seperti smartphone seperti perangkat layar
sentuh yang mendukung OS Android dan termasuk perangkat Tablets. Android
dikembangkan oleh Open Handset Alliance (OHA), yang digawangi oleh Google Inc. OHA
adalah himpunan beberapa perusahaan seperti Samsung, Sony, Intel dan perusahaan lain
yang menyediakan layanan serta menggunakan handset untuk platform Android.
Pada tahun 2007, Google meluncurkan versi beta pertama dari Android Software
Development Kit atau yang dikenal dengan SDK. Setelahnya, tepatnya pada bulan
September 2008, Google juga meluncurkan versi komersial pertama dari Android 1.0 yang
diberi nama Alpha.
Pada tahun 2012, Google meluncurkan versi lain Android yakni Android 4.1 yang
diberi nama Android Jelly Bean. Android versi ini (Jelly Bean), merupakan versi Android
dengan pembaharuan tambahan dan memiliki banyak peningkatan dalam tatap muka,
fungsionalitas dan performanya.
Pada tahun 2014, Google meluncurkan versi terbaru Android mereka, yakni Android
versi 5.0 yang diberi nama Lollipop. Pada Android Lollipop, Google benar-benar melakukan
perombakan pada bagian tatap muka dengan menggunakan desain Materials sangat baik
untuk tatap muka yang digunakan serta bagus untuk tema perangkat yang sedang
terpasang.
Source code Android tersedia dan bisa didapatkan di Git-Hub, Stack overflow dan banyak
situs lainnya. Umumnya source code yang diluncurkan Google berada dibawah Lisensi
Apache versi 2.0. Pada modul ini akan diajarkan pemrograman Android dengan bahasa
Pemrograman Kotlin.
1.2 Fitur-Fitur Android

Android merupakan Sistem Operasi open source yang kuat, menyediakan banyak
sekali fitur-fitur yang menarik dan hebat seperti:
• Merupakan Sistem Operasi open source dimana pengembang bisa melakukan

kostumisasi terhadap Sistem Operasinya sesuai dengan kebutuhan.
• Mendukung konektifitas untuk GSM, CDMA, WIFI, NFC, Bluetooth, dll untuk telepon
dan transfer data. Hal ini mengizinkan seseorang untuk melakukan panggilan
telepon masuk dan keluar termasuk mengirimkan pesan singkat (SMS), serta
mengizinkan seseorang untuk mengirim dan mengambil data melalui jaringan
mobile.

CEP-CCIT FTUI
• Denfan memanfaatkan teknologi WIFI, seseorang mampu terkoneksi dengan

perangkat lain hanya menggunakan sebuah aplikasi.
• Android memiliki banyak API untuk mendukung layanan berbasis lokasi seperti GPS.
• Seseorang dapat melakukan aktifitas terkait penyimpanan dengan menggunakan
basis data yang yang ringan yakni SQLite.
• Android memiliki cangkupan media yang luas untuk mendukung media seperti AVI,
MKV, MPEG4, dll untuk memutar atau merekam beragam audio serta video, juga
mendukung beragam format gambar seperti JPEG, PNG, GIF, BMP, dll.
• Android memiliki dukungan yang luas untuk perangkat keras pengontrol
multimedia untuk melakukan pemutaran atau pengrekaman menggunakan kamea
dan microphone.
• Memiliki tata letak webkit open source yang terintegrasi berbasis web browser untuk
mendukung HTML5, CSS3.
• Mendukung multi-tasking, seseorang dapat berpindah dari satu layar perintah ke
layar perintah lainnya dan mendukung banyak aplikasi untuk berjalan secara
bersamaan (simultaneously).
• Memungkinkan untuk penggunaan kembali komponen aplikasi dan mengganti
aplikasi asli.
• Pengguna bisa mengakses komponen perangkat keras seperti kamera, GPS dan
Accelerometer.
• Mendukung grafis 2D/3D.
1.3 Sejarah Perkembangan Android
Awalnya Google meluncurkan versi pertama dari platform Android di tanggal 5

November 2007, sejak saat itu Google merilis banyak versi Android dengan menggunakan
kode nama makanan penutup seperti Apple Pie, Banana Bread, Cupcake, Donut, Eclair,
Froyo, Ginger Bread, Jelly Beans, Kit Kat, Lollipop, Marsmallow, dll. Dan membuat banyak
perubahan serta memberikan penambahan pada platformnya.
Tabel berikut menampilkan detail versi dari Android yang diluncurkan oleh Google
dari tahun 2007 sampai sekarang :

CEP-CCIT FTUI
Tabel 1.1 Perkembangan Versi Android
Release Date Version API Level Version Name
September 23,
Android 1.0 1 Apple Pie
2008
February 9, 2009 Android 1.1 2 Banana Bread
April 30, 2009 Android 1.5 3 Cupcake
September 15,
Android 1.6 4 Donut
2009
October 26, 2009 Android 2.0 5
December 3, 2009 Android 2.0.1 6 Eclair
January 12, 2009 Android 2.1 7
May 20, 2010 Android 2.2 8
January 18, 2011 Android 2.2.1 8

Froyo
January 22, 2011 Android 2.2.2 8
November 21, 2011 Android 2.2.3 8
December 6, 2010 Android 2.3 9
February 9, 2011 Android 2.3.1 9

Gingerbread
July 25, 2011 Android 2.3.3 10
September 2, 2011 Android 2.3.4 10
February 22, 2011 Android 3.0.x 11
May 10, 2011 Android 3.1.x 12 Honeycomb
July 15, 2011 Android 3.2.x 13

CEP-CCIT FTUI
October 18,2011 Android 4.0 14
October 19, 2011 Android 4.0.1 14

Ice Cream
Sandwich
December 16, 2011 Android 4.0.3 15
July 9, 2012 Android 4.1 16
July 23, 2012 Android 4.1.1 16
October 9, 2012 Android 4.1.2 16
November 13, 2012 Android 4.2 17 Jelly Bean
July 24, 2013 Android 4.3 18
Android 4.4.1, Kitkat

June 23, 2014 4.4.2, 4.4.3, 19
4.4.4

Lollipop
March 09, 2015 Android 5.1 22

Marshmallow
December 7, 2015 Android 6.0.1 23
August 22, 2016 Android 7.0 24 Nougat

CEP-CCIT FTUI
Android 8.0 26 O
Untuk setiap versinya, Google membuat banyak perubahan dan memperkenalkan

banyak fitur baru demi mengikuti perkembangan seiring penggunaan Android yang
semakin meningkat dipasaran. Pada modul ini akan dibahas pemrograman pada Android
menggunakan Kotlin. Kotlin adalah sebuah Bahasa pemrograman yang berjalan dengan
mesin virtual java ataupun menggunakan kompiler LLVM yang dapat pula
dikompilasikan dalam bentuk kode java.
Kotlin awalnya dikembangkan oleh JetBrains, perusahaan di balik inteliJ IDEA.

JetBrains merilis kotlin secara opensource dan kini perkembangannya semakin maju di
tambah dengan bantuan/support dari google.
Kotlin sendiri merupakan sebuah bahasa pemrograman yang menjadi bahasa

penyempurnaan dari Java. Source Code pada Kotlin jauh lebih sederhana dibandingkan
Java, oleh karena itu kotlin banyak digunakan untuk membuat program android. Kotlin
awalnya dikembangkan oleh JetBrains, perusahaan dibalik IntelliJ IDEA, yang berjalan pada
JVM (Java Virtual Machine). Bahasa ini dirancang untuk memenuhi industri bahasa object-
oriented dengan standar yang lebih baik dibandingkan java. Namun, tetap dapat
dioperasikan sepenuhnya dengan kode java dan memungkinkan dilakukannya migrasi java
ke kotlin menggunakan infrastruktur compiler LLVM.
Setelah melalui banyak perkembangan, JetBrains merilis Kotlin secara open source
dan kini setelah perkembangannya semakin maju, Google mendukung penuh Kotlin untuk
pengembangan aplikasi Android. Ini artinya Kotlin menjadi bahasa pemrograman ketiga
yang didukung oleh android selain Java dan C++.

CEP-CCIT FTUI
BAB 2
Android Layout
Tujuan khusus :
Siswa dapat :
• Mengenal GUI Android

• Mengenal Layout Android
• Memahami komponen GUI Android

CEP-CCIT FTUI
BAB 2
Android Layout
2.1 Layout Tatap Muka Android (Android UI Layouts)
UI atau tatap muka pada Android merupakan komponen dari View yang bisa
digunakan untuk mendesain tatap muka/ User Interface (UI) dari sebuah aplikasi. Android
sendiri memiliki variasi UI yang sangat beragam seperti TextView, EditText, Buttons,
Checkbox, Progressbar, Spinners, dll.
Secara umum UI yang dibuat pada aplikasi Android menggunakan koleksi dari objek
View dan ViewGroup.
View merupakan kelas dasar/ base class dari semua komponen UI di Android,
berguna untuk membuat sebuah desain komponen UI yang interaktif seperti TextView,
EditText, Checkbox, Radio Button, dll. Dan bertugas untuk event handling dan menggambar.
Sedangkan ViewGroup merupakan subclass dari View dan bertindak sebagai kelas
dasar untuk layouts dan layout parameter. ViewGroup menyediakan sebuah kontainer yang
tidak terlihat untuk menampung Views atau ViewGroups yang lain, serta berfungsi untuk
mendefinisikan properti dari layout.
Pada pembutan aplikasi Android, kita bisa melakukan pendefinisian UI atau kontrol
masukan dengan dua cara, yaitu:
a. Mendeklarasikan elemen UI di XML
Di Android, kita bisa membuat sebuah layout seperti pembuatan halaman web di
HTML dengan menggunakan Views dan ViewGroups bawaan di XML file. File layout
hanya boleh berisikan satu root elemen yaitu objek View atau GroupView. Setelah
kita mendefinisikan root elemen, kita bisa menambahkan objek layout tambahan
atau widgets sebagain elemen anak untuk membangun hirarki View yang
membentuk layout aplikasi yang kita buat.
Berikut adalah contoh pembuatan kontrol UI seperti TextView, EditText dan Button
di file XML menggunakan LinearLayout. File yang kita gunakan adalah
activity_main.xml.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/txt_nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama" />
<EditText
android:id="@+id/nama"
android:ems="10"/>
<Button
android:id="@+id/getName"
android:text="Simpan Nama" />
</LinearLayout>
Perlu diingat, pada Android, setiap kontrol masukan memiliki kumpulan event
tertentu dan events inilah yang akan muncul ketika pengguna aplikai kita melakukan
sebuah aksi tertentu sepeti memasukkan tulisan atau menyentuh sebuah tombol
(button).
Hal lain yang perlu diingat ketika membuat UI elemen di file XML adalah membuat
file layout UI tersebut di direktori /res/layout. Hanya file-file layout yang akan di
kompail sempurna pada direktori ini.
Setelah mendefinisikan layout di file XML, berikutnya kita akan memuat file layout
XML tersebut melalui Activity pada fungsi onCreate() seperti berikut:
override fun onCreate(savedInstanceState: Bundle?) {

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

CEP-CCIT FTUI
Perhatikan baris kode diatas, pada baris kode terlihat bahwa kita melakukan
pemanggilan terhadap layout yang telah kita definisikan di file XML menggunakan
fungsi setContentView dalam format R.layout.layout_file_name. Karena nama file
XML yang kita buat/ gunakan adalah main_activity.xml, maka nama file yang kita
gunakan adalah R.layout.activity_main.
Secara umum, selama menjalankan activity, fungsi onCreate() akan dipanggil oleh
kerangka kerja Android untuk mengembalikan layout yang diharapkan untuk sebuah
activity. Activity sendiri adalah tampilan satu layar dengan UI dari aplikasi yang kita
bangun, activity ini akan bertindak sebagai titik masukan untuk pengguna agar bisa
berinteraksi dengan aplikasi yang kita buat.
Aplikasi Android secara umum terdiri dari beberapa layar yang setiap layar tersebut
merupakan turunan dari kelas Activity. Dengan memanfaatkan activites, kita bisa
meletakkan semua komponen UI aplikasi android yang kita bangun dalam satu layar.
Salah satu acitivity dari banyak activity yang ada bisa kita tandai sebagai main activity
yang merupakan layar pertama yang akan muncul saat aplikasi dijalankan.

CEP-CCIT FTUI
b. Membuat elemen UI pada runtime
Jika kita ingin membuat elemen UI di runtime, kita perlu membuat objek View dan
Gorup View kostumisasi kita sendiri dengan mengetikkan baris kodenya untuk
mendapatkan layout yang diharapkan.
Berikut contoh pembuatan elemen UI seperti TextView, EditText dan Button di

LinearLayout menggunakan kostumisasi objek View dan ViewGroup di sebuah
activity secara terprogram.

val txt_Nama = TextView(this)
txt_Nama.text = "Nama:"
val etx_Nama = EditText(this)
etx_Nama.setText("Masukkan Nama")
val btn_Simpan = Button(this)
btn_Simpan.setText("Simpan Nama")
val linearLayout = LinearLayout(this)
linearLayout.addView(txt_Nama)
linearLayout.addView(etx_Nama)
linearLayout.addView(btn_Simpan)
setContentView(linearLayout)
}
Dengan membuat kostumisasi View dan ViewGroup sedara terprogram, kita bisa
mendefinisikan kontrol UI di layout berdasarkan kebutuhan di aplikasi Android yang kita
bangun.
Ketika mendefinisikan kontrol UI di layout menggunakan file XML, kita perlu

menentukan lebar dan tinggi untuk setiap elemen View dan ViewGroup menggunakan
atribut layout_width dan layout_height. Berikut adalah contoh untuk mengatur lebar dan
tinggi untuk elemen View dan ViewGroup di file layout XML.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<TextView
android:id="@+id/txt_nama"
android:text="Nama" />
</LinearLayout>
Jika diperhatikan, pada baris koding diatas, kita menggunakan nilai yang berbeda
untuk mengatur layout_width dan layout_height. Pada contoh diatas kita menggunakan
match_parent dan wrap_content.
Jika kita mengatur match_parent, maka View dan ViewGroup akan mencoba untuk
menyocokkan lebar dan tinggi dengan parent dari layout. Begitupun jika kita mengatur

CEP-CCIT FTUI
wrap_content, maka View dan ViewGroup akan mencoba untuk menyesuaikan lebar dan
tinggi berdasarkan konten nantinya.
2.1.1 LinearLayout
Pada Aplikasi Android, LinearLayout adalah subclass dari ViewGroup yang

digunakan untuk memberikan semua instance turunan View satu persatu, baik dalam
bentuk Horizontal maupun Vertikal tergantung properti atribut android:orientation di file
layout XML.
Di LinearLayout, contoh/ instances dari turunan View diatur satu persatu, sehingga
untuk bentuk Horizontal akan memiliki satu baris dengan beberapa kolom, sebaliknya
bentuk Vertikal akan memiliki satu kolo, dengan beberapa baris.
a. Membuat LinearLayout
Buatlah sebuah file layout XML baru dengan nama activity_linearlayout.xml, lalu
isikan baris koding berikut:

CEP-CCIT FTUI

<LinearLayout
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:text="TextView Satu"
android:layout_marginTop="70dp"
android:id="@+id/textView"/>
<TextView
android:text="TextView Dua"
android:id="@+id/textView2"/>
<TextView
android:text="TextView Tiga"
android:id="@+id/textView3"/>
</LinearLayout>
Berikutnya buatlah sebuah kelas Activity baru dan beri nama ContohLinearLayout
untuk menampung layout XML yang telah kita buat. Berikut hasil tampilan program setelah
dijalankan.

CEP-CCIT FTUI
Tampilan diatas menunjukkan tiga buah kontrol yakni TextView yang disusun dalam
LinearLayout.
2.1.2 RelativeLayout
Layout berikutnya adalah RelativeLayout yang digunakan untuk menentukan posisi

setiap kontrol realtif satu sama lain, misalkan posisi kontrol A berada di sebelah kiri kontrol
B. Secara bawaan, turunan View diposisikan di bagian atas kiri dari layout.
Attribute Description
layout_alignParentTop If it specified “true”, the top edge of view will

match the top edge of parent.
layout_alignParentBottom If it specified “true”, the bottom edge of view will

match the bottom edge of parent.
layout_alignParentLeft If it specified “true”, the left edge of view will

match the left edge of parent.
layout_alignParentRight If it specified “true”, the right edge of view will

match the right edge of parent.
layout_centerInParent If it specified “true”, the view will be aligned to

centre of parent.

CEP-CCIT FTUI
layout_centerHorizontal If it specified “true”, the view will be horizontally

centre aligned within its parent.
layout_centerVertical If it specified “true”, the view will be vertically

centre aligned within its parent.
layout_above It accepts another sibling view id and places the

view above the specified view id.
layout_below It accepts another sibling view id and places the

view below the specified view id.
layout_toLeftOf It accepts another sibling view id and places the

view left of the specified view id.
layout_toRightOf It accepts another sibling view id and places the

view right of the specified view id.
layout_toStartOf It accepts another sibling view id and places the

view to start of the specified view id.
layout_toEndOf It accepts another sibling view id and places the

view to end of the specified view id.
a. Membuat RelativeLayout
Buatlah sebuah file layout XML baru dengan nama activity_relativelayout.xml, lalu

CEP-CCIT FTUI

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<Button
android:id="@+id/btn_1"
android:layout_alignParentLeft="true"
android:text="Tombol Satu" />
<Button
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Tombol Dua" />
<Button
android:layout_alignParentLeft="true"
Pada baris koding diatas, dapat dilihat pada kontrol btn_2 kita mengatur
android:layout_centerVertical="true"
android:text="Tombol Tiga" />
<Button
android:layout_alignParentBottom="true"
android:text="Tombol Empat" />
<Button
android:layout_alignBottom="@+id/btn_2"
android:layout_centerHorizontal="true"
android:text="Tombol Lima" />
<Button
android:layout_above="@+id/btn_4"
android:text="Tombol Enam" />
<Button
android:layout_toEndOf="@+id/btn_1"
android:layout_toRightOf="@+id/btn_1"
android:text="Tombol Tujuh" />
</RelativeLayout>
atribut android:layout_alignParentRight="true" dan atribut

android:layout_centerVertical=”true” yang berarti untuk btn_2 kita posisikan disebelah
kanan di tengah-tengah secara Vertikal. Sedangkan untuk btn_3, kita meletakkan posisi
ditengah namun di posisi sebelah kiri. Untuk btn_4, kita atur posisinya di bagian bawah
dengan menggunakan atribut android:layout_alignParentBottom=”true”.

CEP-CCIT FTUI
Sedikit berbeda, untuk bnt_5, kita mengatur posisinya mengikuti btn_2, sehigga
saat kita atur di atribut android:layout_alignBottom=”@+id/btn_2”, posisi bawah yang
menjadi rujukan adalah posisi dari btn_2, lalu kita atur atribut
android:layout_centerHorizontal=”true” yang artinya posisi btn_5 berda di tengah-
tengah secara Horizontal.
Begitu juga dengan btn_6 yang kita atur menggunakan atribut

android:layout_above=”t@+id/btn_4” yang artinya posisi dari btn_6 berada di atas btn_4,
lalu kita mengatur atribut android:layout_centerHorizontal=”true” yang meletakkan
posisi btn_6 berada di tengah-tengah secara Horizontal.
Terakhir, untuk btn_7 kita atur dengan atribut

android:layout_toEndOf=”@+id/btn_1” yang artinya kita posisikan setelah btn_1, lalu kita
mengatur atribut android:layout_toRightOf=”@+id/btn_1” yang artinya posisi dari btn_1
berada di sebelah kanan dari btn_1 dan terakhir atribut
android:layout_alignParentRight=”true” yang artinya btn_7 mengikuti posisi kanan dari
parent-nya.
Selanjutnya isikan baris kodingan berikut pada kelas Activity yang telah dibuat sebelumnya.
class ContohRelativeLayout:AppCompatActivity() {
setContentView(R.layout.activity_relativelayout)
}
}
Hasil tampilan dari program setelah dijalankan adalah sebagai berikut.

CEP-CCIT FTUI
2.1.3 TableLayout
Pada aplikasi Android, TableLayout merupakan subclass dari ViewGroup yang

digunakan untuk menampilkan turunan dari View berupa baris dan kolom.
TableLayout mempisisikan turunannya dalam baris dan kolom dan tidak akan
menampilkan border lines untuk baris, kolom maupun cells. Di Android, TableLayout
bekerja seperti halnya tabel HTML, untuk mendefinisikan TableLayout dengan tag <table>
dan untuk TableRow bisa menggunakan tag <tr>.

CEP-CCIT FTUI
a. Membuat TableLayout
Buatlah sebuah kelas Activity baru dengan nama ContohTableLayout, setelahnya

buatlah sebuah layout XML dengan nama activity_tablelayout.xml. Isikan baris koding
berikut ke file layout XML yang baru dibuat.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<TableRow android:background="#0079D6" android:padding="5dp">
<TextView
android:layout_weight="1"
android:text="No"/>
<TextView
android:text="Judul"/>
<TextView
android:text="Kategori"/>
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:text="1"/>
<TextView
android:text="Pengkhianatan Seorang Bestie"/>
<TextView
android:text="Novel"/>
</TableRow>
<TextView
android:text="2"/>
<TextView
android:text="Python for Newbie"/>
<TextView
android:text="Buku Referensi"/>
</TableRow>

CEP-CCIT FTUI

<TextView
android:text="3"/>
<TextView
android:text="Design UI UX for E-Learning"/>
<TextView
android:text="Jurnal"/>
</TableRow>
</TableLayout>
Selanjutnya agar aplikasi kita menampilkan layout yang telah kita atur, isikan baris
koding berikut di kelas Activity yang telah dibuat.
class ContohTableLayout : AppCompatActivity() {

setContentView(R.layout.activity_tablelayout)
}
}
Berikut adalah hasil tampilan program setelah dijalankan.

CEP-CCIT FTUI
2.1.4 FrameLayout
FrameLayout adalah sebuah subclass ViewGroup yang digunakan untuk mengspesifikasikan

posisi dari contoh View. Secara sederhana, FrameLayout berguna untuk mengunci sebuah
area layar agar tampil dalam satu item saja.
a. Membuat FrameLayout
Buatlah sebuah kelas baru dan beri nama ContohFrameLayout, setelahnya buatlah
sebuah file layout XML baru dengan nama activity_framelayout.xml, isikan baris
koding berikut:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ImageView
android:id="@+id/img_BG"
android:scaleType="centerCrop"
android:src="@drawable/book"/>
<TextView
android:id="@+id/txt_View1"
android:background="#4C374A"
android:padding="10dp"
android:text="Perpustakaan Kita"
android:textColor="#FFFFFF"
android:textSize="20sp"/>
<TextView
android:id="@+id/txt_View2"
android:layout_gravity="right|bottom"
android:background="#AA000000"
android:padding="10dp"
android:text="21/Aug/2017"
android:textColor="#FFFFFF"
</FrameLayout>

CEP-CCIT FTUI
Pada baris koding diatas, kita menggunakan sebuah foto untuk menjadi background
tampilan bernama book.jpeg yang diletakkan di folder drawable lalu dipanggil
menggunakan atribut android:src=”@drawable/book”, kita menggunakan ImageView
untuk menampilkan gambar ini.
Untuk melihat hasil tampilan, isikan baris koding berikut di kelas Activity yang telah
dibuat sebelumnya.
class ContohFrameLayout:AppCompatActivity() {
setContentView(R.layout.activity_framelayout)
}
}
Berikut hasil tampilan program setelah dijalankan.
2.1.5 ListView
Berikutnya kita akan membahas ListView yang juga merupakan sebuah ViewGroup
dan digunakan untuk menampilkan sebuah daftar yang bisa di scroll dan terdiri dari baris-
baris item. Untuk mengisikan baris data kedalam daftar, kita menggunakan data adapter
yang menarik data dari sumber data seperti sebuah array atau database lalu
mengkonversinya kedalam sebuah result view untuk diletakkan kedalam daftar.

CEP-CCIT FTUI
Di Android sendiri, Adapter akan berlaku sebagai sebuah perantara antara sumber data view
dari adapter seperti ListView dan GridView untuk memasukka data kedalam view adapter.
Adapter Description
ArrayAdapter It will expects an Array or List as input.
CurosrAdapter It will accepts an instance of cursor as an input.
SimpleAdapter It will accepts a static data defined in the resources.
BaseAdapter It is a generic implementation for all three adapter types and it

can be used for ListView, Gridview or Spinners based on our
requirements
a. Membuat ListView
Buatlah sebuah kelas Activity baru dengan nama ContohListView, berikutnya

buatlah sebuah layout XML baru dengan nama activity_listview.xml dan isikan
baris koding berikut.
xmlns:tools="http://schemas.android.com/tools"
<ListView
android:id="@+id/lv_anggota"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>

CEP-CCIT FTUI
Pada baris kodingan diatas, kita membuat sebuah ListView dengan memberinya id
lv_anggota untuk menampilkan daftar anggota dari perpustakaan kita.Setelahnya, isikan
baris koding berikut pada kelas Activity yang telah dibuat.
class ContohListView:AppCompatActivity() {
setContentView(R.layout.activity_listview)
val anggota = arrayOf(
"Tomoyo Tomodachi",
"Zayn Malik",
"Zendaya",
"Cara Delevingne",
"Miley Cyrus",
"Zara Larson"
)
val adapter = ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_activated_1, anggota
)
lv_anggota.setAdapter(adapter)
Jika diperhatikan
} pada kodingan diatas, kita membuat sebuah array bernama
}
anggota yang berisikan data anggota perpustakaan kita. Kemudian, kita membuat sebuah
objek adapter untuk membaca array anggota yang telah kita buat, objek adapter ini yang
akan berlaku sebagai perantara antara sumber data kita yang berupa array ke view dari
adapter yakni lv_anggota. Berikut hasil tampilan program setelah dijalankan.

CEP-CCIT FTUI
b. Lebih Jauh dengan ListView
Pada langkah sebelumnya kita telah membuat cara sederhana untuk melakukan
bind data ke ListView menggunakan array. Selanjutnya kita akan membuat sebuah ListView
dengan adapter yang dikostumisasi. Untuk membuat kostumisasi adapter, kita perlu
melakukan extend dari kelas BaseAdapter dan membuat sebuah kelas yang akan
menampung sebuah parameter untuk baris item.
Lakukan modifikasi pada file layout XML yang telah dibuat sebelumya, yakni
activity_listview.xml, isikan baris koding berikut.

android:layout_width="fill_parent"
android:layout_height="fill_parent"
<ListView
android:id="@+id/lv_anggota"
android:dividerHeight="1dp" />
</LinearLayout>
Berikutnya, kita akan membuat sebuah layout untuk item baris dari ListView,
buatlah sebuah layout XML baru dengan nama list_row.xml, lalu inikan baris
kodingan berikut.

android:orientation="horizontal"
android:padding="5dip">
<TextView
android:id="@+id/txt_Nama"
android:textStyle="bold"
android:textSize="17dp"/>
<TextView
android:id="@+id/txt_Status"
android:layout_below="@id/txt_Nama"
android:textColor="#343434"
<TextView
android:id="@+id/txt_Panggilan"
android:layout_alignBaseline="@+id/txt_Status"
android:layout_alignBottom="@+id/txt_Status"
</RelativeLayout>

CEP-CCIT FTUI
Buatlah sebuah kelas Activity baru dengan nama ContohListItem, lalu isikan baris
kodingan berikut.
class ContohListItem {
var nama: String = ""
var status: String = ""
var panggilan: String = ""
constructor(nama_anggota: String, status_anggota: String,

panggilan_anggota: String) {
this.nama = nama_anggota
this.status = status_anggota
this.panggilan = panggilan_anggota
}
} Langkah selanjutnya adalah membuat sebuah kelas Activity adapter
kostumisasi dengan nama ContohCustomAdapter yang akan melakukan extend dari kelas
BaseAdapter. Ketika melakukan extend dari kelas BaseAdapter, kita akan melakukan
override beberapa fungsi dari kelas BaseAdapter berikut.
Method Description
getCount() It will return total number of rows count in listview
getItem() It is used to specify the object data of each row
getItemId() It return the id of each row item
getView() It is used to return a view instance that represents a single row in

ListView item.
Isikan kodingan berikut di kelas Activity ContohCustomAdapter.
class ContohCustomAdapter(private var activity: Activity, private var items:

ArrayList<ContohListItem>) :
BaseAdapter() {
// lines of codes here
}
Pada potongan koding diatas, kita memberikan nilai parameter berupa variabel
bertipe Activity dengan nama activity dan sebuah variabel bertipe ArrayList bertipe generic
bernama items.
Variabel activity berguna sebagai objek kelas Activity untuk mengatur layout yang
akan di tampilkand alam aplikasi saat dijalankan, sedangkan variabel items merupakan
objek dari ArrayList generic yang menampung data koleksi dari kelas ContohListItem
dimana kita telah mendeklarasikan variabel penampung nilai yang akan ditampilkan di View.
Selain itu, kita juga menurunkan kelas BaseAdapter pada kelas

ContohCustomAdapter agar kita bisa menampung data dengan memanfaatkan

CEP-CCIT FTUI
fungsi setter dan getter seperti pada kelas Java untuk mengambil nilai yang ditampung
kelas ContohListItem.
private class ViewHolder(row: View?) {

var txtNama: TextView? = null
var txtStatus: TextView? = null
var txtPanggilan: TextView? = null
init {
this.txtNama = row?.findViewById<TextView>(R.id.txt_Nama)
this.txtStatus = row?.findViewById<TextView>(R.id.txt_Status)
Pada baris kodingan diatas,
this.txtPanggilan kita membuat sebuah ViewHolder, yakni sebuah
= row?.findViewById<TextView>(R.id.txt_Panggilan)
}
pola
} desain yang digunakan untuk menampung View dari sebuah aplikasi Android,
fungsinya adalah untuk mempercepat rendering/ pemberian nilai pada View. Pada contoh
diatas, kita membuat ViewHolder untuk rendering nilai pada View txt_Nama, txt_Status dan
txt_Panggilan.
override fun getView(position: Int, convertView: View?, parent: ViewGroup):

View {
val view: View?
val viewHolder: ViewHolder
if (convertView == null) {
val inflater =
activity?.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
view = inflater.inflate(R.layout.list_row, null)
viewHolder = ViewHolder(view)
view?.tag = viewHolder
} else {
view = convertView
viewHolder = view.tag as ViewHolder
}
var anggotaDto = items[position]

viewHolder.txtNama?.text = anggotaDto.nama
viewHolder.txtStatus?.text = anggotaDto.status
viewHolder.txtPanggilan?.text = anggotaDto.panggilan
return view as View

}
override fun getItem(i: Int): ContohListItem {

return items[i]
}
override fun getItemId(i: Int): Long {

return i.toLong()
}
override fun getCount(): Int {

return items.size
}
}
Baris kodingan diatas merupakan fungsi override dari kelas BaseAdapter yang telah
dijelaskan sebelumnya dalam tabel. Kita akan melakukan pengaturan pada masing-masing
fungsi seperti fungsi getItem() yang akan mendapatkan objek data masing-masing baris di
ListView, fungsi getItemId() untuk mendapatykan id dari objek yang dipilih dimana nilai

CEP-CCIT FTUI
id yang berupa String akan di konversikan ke nilai angka bertipe Long, fungsi getCount()
untuk mengembalikan jumlah total baris yang ada di Listview.
Terakhir ada fungsi getView() untuk mengembalikan View dalam satu baris dari
ListView. Untuk fungsi getView(), kita akan menambahkan parameter position: Int untuk
menampung posisi Item yang dipilih di ListView nantinya, penggunaannya terdapat pada
baris:

Berikutnya terdapat parameter convertView, yakni sebuah cara dari kelas

Adapter untuk menggunakan kembali View yang telah ada sebelumnya,
convertView akan mengecek nilai View sebelumnya, jika tidak didapati nilai
kembalian, maka akan dibuat sebuah View baru, proses pengecekkannya terdapat
pada baris:
val inflater =
activity?.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as
LayoutInflater
} else {
view = convertView
}
Parameter terakhir adalah parent: ViewGroup untuk melakukan override kelas ViewGroup.
Berikut adalah kodingan lengkap kelas ContohCustomAdapter

CEP-CCIT FTUI
package com.example.aplikasikontrol
import android.app.Activity
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.TextView
class ContohCustomAdapter(private var activity: Activity, private var items:

ArrayList<ContohListItem>) :
BaseAdapter() {
var txtNama: TextView? = null
var txtStatus: TextView? = null
var txtPanggilan: TextView? = null
init {
this.txtNama = row?.findViewById<TextView>(R.id.txt_Nama)
this.txtStatus = row?.findViewById<TextView>(R.id.txt_Status)
this.txtPanggilan = row?.findViewById<TextView>(R.id.txt_Panggilan)
}
}
override fun getView(position: Int, convertView: View?, parent: ViewGroup):

View {
val view: View?
val inflater =
} else {
view = convertView
}

return view as View

}
override fun getItem(i: Int): ContohListItem {

return items[i]
}

return i.toLong()
}

return items.size
}
}

CEP-CCIT FTUI
Terakhir, buatlah sebuah kelas Activity baru yang akan memanggil masing-
masing kelas beserta komponennya, yang telah dibuat pada langkah sebelumnya.
Beri nama kelas ContohListView2, lalu isikan baris kodingan berikut:
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.AdapterView
import android.widget.ListView
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_listview.*
class ContohListView2 : AppCompatActivity() {

var listView: ListView? = null
var adapter: ContohCustomAdapter? = null
val anggota = arrayOf(

"Tomoyo Tomodachi", "Zayn Malik", "Zendaya",
"Cara Delevingne", "Miley Cyrus", "Zara Larson"
)

setContentView(R.layout.activity_listview)
listView = findViewById<ListView>(R.id.lv_anggota)
adapter = ContohCustomAdapter(this, getDataAnggota())
listView?.adapter = adapter
adapter?.notifyDataSetChanged()
lv_anggota.setOnItemClickListener{ parent, view, position, id ->
Toast.makeText(applicationContext, "Anggota ke-"+"
"+(position+1)+" :"+anggota[position].toString(),Toast.LENGTH_SHORT).show()
}
}
fun getDataAnggota(): ArrayList<ContohListItem> {

var hasil = ArrayList<ContohListItem>()
for (i in anggota.indices) {
var agt: ContohListItem = ContohListItem(
anggota[i].toString(), "Anggota",
if (anggota[i].toString().contains(" "))
anggota[i].toString().split(" ")[0] else anggota[i].toString()
)
hasil.add(agt)
}
return hasil
}
}
Pada baris kodingan diatas, kita membuat sebuah array bernama anggota yang
menampung nilai anggota terdaftar di Perpustakaan Kita. Selanjutnya pada fungsi override
onCreate(), kita membuat sebuah objek bernama adapter dari kelas
ContohCustomAdapter, dimana nilai yang akan diolah oleh kelas ContohCustomAdapter
berasaldari nilai yang dimasukkan pada fungsi getDataAnggota() yang selanjutnya akan
ditampung oleh objek listView untuk ditampilkan ke lv_anggota.

CEP-CCIT FTUI
Pada saat salah satu baris dari daftar ListView diklik oleh pengguna, maka akan
muncul sebuah pesan singkat yang kita atur menggunakan Toast, pesan ini berisikan nomor
urut anggota dan nama anggota.
Untuk fungsi getDataAnggota() sendiri kita deklarasikan sebagai fungsi bertipe

ArrayList generic yang menampung koleksi data dari kelas ContohListItem, fungsi ini akan
memberikan nilai pada masing-masing variabel yang telah kita deklarasikan di dalam kelas
ContohListItem agar bisa di proses oleh fungsi setter dan getter.
Agar pemberian nilai sesuai dengan yang diharapkan, kita melakukan perulangan
untuk memberikan nilai ke variabel di kelas ContohListItem sebanyak data yang ada di array
anggota. Selanjutnya kita membuat sebuah variabel objek bernama agt dari kelas
ContohListItem lalu memberikan nilai pada variabel objek tersebut sebagai parameter yang
akan diangkut ke kelas ContohListItem, parameternya antara lain berisikan Nama Anggota,
Status Anggota dan Panggilan Anggota.
Terakhir, setelah nilai diberikan, kita akan melakukan binding data kedalam sebuah
variabel objek bernama hasil yang juga merupakan variabel objek dari ArrayList generic dari
kelas ContohListItem. Proses binding ini dilakukan pada baris program hasil.add(agt).
Berikut tampilan program saat dijalankan:
2.1.6 GridView
GridView adalah sebuah ViewGroup yang digunakan untuk menampilkan item-item

dalam dua dimensi yang bisa di scroll. Item dari grid secara otomatis dimasukkan kedalam
layout gridview mengguakan list adapter.

CEP-CCIT FTUI
Secara umum, adapater akan menarik data dari sumber data seperti sebuah array
atau database lalu mengkonversinya kedalam sebuah result view untuk diletakkan kedalam
view.
a. Membuat GridView
Buatlah sebuah layout XML baru dengan nama activity_gridview, lalu isikan baris
koding berikut.

<android.support.constraint.ConstraintLayout
tools:context=".ContohGridView"
android:background="#ffffff">
<GridView
android:id="@+id/gv_Buku"
android:numColumns="2"
android:background="#d8f2d8"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:padding="10dp"/>
</android.support.constraint.ConstraintLayout>
Berikutnya kita akan membuat sebuah kelas yang akan berlaku seperti halnya
sebuah kelas Model untuk menampung fungsi setter dan getter, nama kelas Activity
ini kita beri ContohItemFoto.java, berikut baris kodingannya.
class ContohItemFoto {
var judul : String? = null
var penulis : String? = null
var desc : String? = null
var foto: Int? =null
}

CEP-CCIT FTUI
Selanjutnya, kita akan membuat sebuah adapter kostumisasi, berilah nama

ContohAdapterFoto yang meng-extends kelas BaseAdapter untuk menampilkan semua
item di grid.Berikut baris koding untuk kelas ContohAdapterFoto.java:
import android.app.Activity
import android.content.Context
import android.content.Intent
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView
class ContohAdapterFoto(private var activity: Activity, private var items:

ArrayList<ContohItemFoto>) : BaseAdapter() {
var context: Context? = null

var lblJudul: TextView? = null
var lblPenulis: TextView? = null
var imgCover: ImageView? = null
init {
this.lblJudul = row?.findViewById<TextView>(R.id.lbl_Judul)
this.lblPenulis = row?.findViewById<TextView>(R.id.lbl_Penulis)
this.imgCover = row?.findViewById<ImageView>(R.id.img_Cover)
}
}
override fun getView(position: Int, convertView: View?, parent:
ViewGroup?): View {
val view: View
this.context = context
val image = this.items[position]
val inflater =
view = inflater.inflate(R.layout.activity_listbuku, null)
view.tag = viewHolder
} else {
view = convertView
}
var buku = items[position]
viewHolder.lblJudul?.text = buku.judul
viewHolder.lblPenulis?.text = buku.penulis
viewHolder.imgCover?.setImageResource(buku.foto!!)
return view as View

}
Pada baris
override funkodingan diatas
getItem(i: bisa
Int): dilihat
Any? { kita menggunakan metoda yang sama
return items[i]
dengan
} layout sebelumnya, yakni ListView. Kalaupun ada sedikit perbedaan, kita
menambahkan baris viewHolder.imgCover?.setImageResource(buku.foto!!)
return i.toLong()
yang artinya
} kita memanggil fungsi setImageResource untuk menentukan foto yang
akan dibaca program
return berada atau disimpan di variabel mana.
items.size
}

CEP-CCIT FTUI
Pada kasus diatas, imgCover adalah sebuah variabel bertipe ImageView yang
menjadi variabel dari kontrol ImageView img_Cover. Untuk nilai yang ditampilkan dalam
kontrol ini adalah nilai dari objek buku yang merujuk pada variabel foto, terlihat pada bagian
buku.foto!!, yang artinya kita menggunakan fungsi getter pada program Java umumnya.
Tanda “!!” adalah sebuah tanda untuk memastikan nilai tidaklah kosong.
Selanjutnya, kita akan membuat sebuah layout XML baru yang akan menjadi
komponen isi dalam GridvView yang kita buat sebelumnya, untuk itu buatlah sebuah layout
XML dengan nama activity_listbuku.xml lalu isikan baris koding berikut.
android:layout_margin="10dp"
android:background="#b2dbb2"
android:padding="10dp">
<ImageView
android:layout_width="80dp"
android:layout_height="120dp"
android:id="@+id/img_Cover"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:id="@+id/rl_content"
android:layout_below="@+id/img_Cover">
<TextView
android:id="@+id/lbl_Judul"
android:textStyle="bold|italic"
android:textSize="18sp"
<TextView
android:id="@+id/lbl_Penulis"
android:layout_below="@+id/lbl_Judul"
</RelativeLayout>
</RelativeLayout>
Setelah membuat layout XML yang dibutuhkan, langkah selanjutnya adalah

membuat kelas Activity utama untuk memanggil layout activity_gridview.xml yang akan
menampilkan data dalam layout activity_listbuku.xml. Kelas ini akan memanggil kelas
ContohAdapterFoto agar setiap komponen yang ada di dalam layout
activity_listbuku.xml berisikan data sesuai dengan kebutuhan.
Kelas Activity utama yang akan kita buat adalah ContohGridView, lalu isikan baris
koding berikut.

CEP-CCIT FTUI
import android.content.Intent
import kotlinx.android.synthetic.main.activity_gridview.*
class ContohGridView : AppCompatActivity() {

var adapter: ContohAdapterFoto? = null

setContentView(R.layout.activity_gridview)
adapter = ContohAdapterFoto(this, generateDataBuku())

var listBuku: ArrayList<ContohItemFoto>
listBuku = generateDataBuku()
gv_Buku.adapter = adapter
gv_Buku.setOnItemClickListener {_, _, i, _ ->
val intent: Intent = Intent(applicationContext,
ContohFullFoto::class.java)
intent.putExtra("image", listBuku.get(i).foto)
intent.putExtra("judul", listBuku.get(i).judul)
intent.putExtra("penulis", listBuku.get(i).penulis)
intent.putExtra("desc", listBuku.get(i).desc)
startActivity(intent)
}
}
private fun generateDataBuku(): ArrayList<ContohItemFoto> {

var result = ArrayList<ContohItemFoto>()
var buku: ContohItemFoto = ContohItemFoto()

buku.judul = "Bestie Revenge"
buku.penulis = "Toma"
buku.foto = R.drawable.bestie
buku.desc =
"\t\t\t\t\tBestie Revenge merupakan sebuah Maha Karya dari penulis Toma
Tomodachi\n\t\t\t\t\tBuku yang meraih pendapatan $100.000.000 " +
"setelah dijadikan film ini bercerita tentang dua orang sahabat
yang saling membalaskan dendam\n\t\t\t\t\tBerawal dari hal sepele, " +
"yakni kulit ayam milik RGB yang diberikan oleh Regex ke kucing
kampung."
result.add(buku)
buku = ContohItemFoto()
buku.judul = "Python for Baby"
buku.penulis = "Tyo"
buku.foto = R.drawable.python
buku.desc = ""
result.add(buku)
Pada baris = koding
buku.judul "Androiddiatas,
Kotlin" penjelasannya juga sama dengan layout
sebelumnya, yang =berbeda
buku.foto disini terletak pada baris:
R.drawable.kotlin
buku.desc = ""
gv_Buku.setOnItemClickListener
result.add(buku) { _, _, i, _ ->
val intent: Intent = Intent(applicationContext,
ContohFullFoto::class.java)
buku.judul = "IoT and IndustrylistBuku.get(i).foto)
intent.putExtra("image", 4.0"
buku.penulis = "Mhd. Khalif"
intent.putExtra("judul", listBuku.get(i).judul)
buku.foto = R.drawable.iot
intent.putExtra("penulis",
buku.desc = "" listBuku.get(i).penulis)
intent.putExtra("desc",
result.add(buku) listBuku.get(i).desc)
}
return result
}
}CEP-CCIT FTUI
buku.judul = "UI UX for E-Learning"
buku.penulis = "Afril"
buku.foto = R.drawable.uiux
buku.desc = ""
result.add(buku)
buku.judul = "Robot Petak"
buku.foto = R.drawable.robot
buku.desc = ""
result.add(buku)
return result
}
}
Pada bagian koding diatas, kita membuat sebuah fungsi yang akan membaca aksi
dari pengguna berupa sentuhan atau klik di GridView yang telah dibuat. Fungsi
setOnItemClickListener adalah fungsi yang membaca aksi pengguna saat meng klik salah
satu item yang muncul di GridView.
Baris _, _, i, _ merupakan baris parameter dari fungsi setOnItemClickListener, tanda

“_” merupakan tanda jika kita tidak akan menggunakan parameter bersangkutan agar ruang
parameter yang diminta tidak kosong. Secara bawaan, parameter dari fungsi ini berbentuk
{parent, view, position, id}, penjelasan lebih lanjut bisa dilihat pada tabel berikut:
Parameter Keterangan
parent AdapterView: The AdapterView where the click happened.
view View: The view within the AdapterView that was clicked (this
will be a view provided by the adapter)
position int: The position of the view in the adapter.
id long: The row id of the item that was clicked.
Selain itu, yang berbeda berikutnya adalah cara kita mengatur nilai masing-masing
variabel yanga da di kelas Activity ContohItemFoto.java, yang mana pada contoh
sebelumnya kita menggunakan fungsi adapter = ContohCustomAdapter(this,
getDataAnggota()), untuk memproses pemberian nilai disebuah fungsi bernama
getDataAnggota(). Fungsi tersebut akan melakukan perulangan untuk mengambuil nilai
array anggota yang telah kita deklarasikan sebelumnya.
Kali ini, kita tidak menggunakan array, kita langsung memberikan nilai masing-
masing atribut/ variabel didalam fungsi yang bernama generateDataBuku(), seperti
berikut:

CEP-CCIT FTUI
var result = ArrayList<ContohItemBuku>()
var buku: ContohItemBuku = ContohItemBuku()
buku.judul = "Bestie Revenge"

buku.foto = R.drawable.bestie
buku.desc =
"\t\t\t\t\tBestie Revenge merupakan sebuah Maha Karya dari penulis Toma
Tomodachi\n\t\t\t\t\tBuku yang meraih pendapatan $100.000.000 " +
"setelah dijadikan film ini bercerita tentang dua orang sahabat yang
saling membalaskan dendam\n\t\t\t\t\tBerawal dari hal sepele, " +
"yakni kulit ayam milik RGB yang diberikan oleh Regex ke kucing
kampung."
result.add(buku)
buku.judul = "IoT and Industry 4.0"
buku.penulis = "Mhd. Khalif"
buku.foto = R.drawable.iot
buku.desc = ""
result.add(buku)
buku.judul = "UI UX for E-Learning"
buku.penulis = "Afril"
buku.foto = R.drawable.uiux
buku.desc = ""
result.add(buku)
return result
Pada bagian baris koding diatas, kita membuat sebuah variabel objek bernama result
yang bertipe data ArrayList generic dengan merujuk pada data di kelas ContohItemBuku.
Objek ini akan menampung data yang kita atur berikutnya untuk dikirim ke kelas
ContohItemFoto untuk proses selanjutnya melalui kelas adapter.
Sedangkan variabel buku, kita gunakan untuk mengatur nilai yang akan di tampung
variabel result, variabel ini akan memanggil masing-masing variabel yang ada di kelas
ContohItemBuku satu-persatu sesuai kebutuhan, untuk diberikan nilai. Selanjutnya,
variabel buku akan diproses kelas adapter untuk di assign ke masing-masing variabel di
kelas ContohItemBuku melalui objek result dengan fungsi result.add(buku).
Untuk membaca foto, silahkan masukkan foto kedalam folder drawable lalu panggil
menggunakan fungsi R.drawable.<nama_foto_di_drawable_folder>.
Jalankan aplikasi, maka akan muncul tampilan seperti gambar berikut:

CEP-CCIT FTUI
Notes: untuk memunculkan gambar cover buku, silahkan isikan gambar di folder drawabel dalam
path /res
Berikutya kita akan membuat GridView yang tampil lebih interaktif, saat sebuah buku
di klik oleh pengguna, kita akan menampilkan detail deskripsi dari buku, untuk itu kita perlu
membuat sebuah GridView baru yang akan menampung komponen tunggal dari buku yang
dipilih pengguna, lengkap dengan komponen lain seperti judul, penulis serta deskripsi buku.
Buatlah sebuah file layout XML baru dengan nama activity_detailbuku, lalu isikan
baris kodingan berikut.

android:background="#6b8a6c"
<ImageView android:id="@+id/img_Full"
android:layout_height="295dp"/>
<TextView
android:layout_below="@+id/img_Full"
android:id="@+id/txt_Judul"
android:layout_centerInParent="true"
Program Internet-based System Automation
android:textSize="25sp" 38
CEP-CCIT FTUI android:layout_centerHorizontal="true"/>
<TextView
Agar detail buku bisa tampil sesuai dengan yang diharapkan, kita akan
membuat sebuah kelas Activity baru yang akan memproses data buku yang dipilih
oleh pengguna agar ditampilkan dalam layout_detailbuku.xml, untuk itu buatlah
sebuah kelas Activity baru dengan nama ContohDetailBuku.java dengan isi
kodingan sebagai berikut.
import kotlinx.android.synthetic.main.activity_detailbuku.*
class ContohDetailBuku : AppCompatActivity(){

setContentView(R.layout.activity_detailbuku)
val inte = intent.extras
img_Full.setImageResource(inte.getInt("image"))
txt_Judul.text = inte.getString("judul")
txt_Penulis.text = inte.getString("penulis")
txt_Desc.text = inte.getString("desc")
}
}
Jalankan program kembali, setelah muncul tampilan seperti sebelumya, pilih

salah satu buku untuk dilihat secara detail, maka akan muncul tampilan seperti
berikut.

CEP-CCIT FTUI
2.1.7 WebView
Terakhir, kita akan membahas WebView, yakni sebuah extention dari View yang
digunakan untuk menampilkan halaman HTML static atau melakukan remote halaman web
dengan URL di aplikasi Android.
Secara umum, WebView di Android akan berlaku sebagai browser yang tertanam
untuk menampilkan halaman web di layout activity dan tidak memiliki fitur-fitur normal
yang ada pada sebuah browser seperti address bar, kontrol navigasi, dll.
a. Android WebView Example
Buatlah sebuah layout XML baru dengan nama activity_webview.xml, isikan baris
koding berikut.
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_height="fill_parent" />
Berikutnya buatlah sebuah kelas Activity baru dengan nama ContohWebView lalu
isikan baris koding berikut.
class ContohWebView : AppCompatActivity() {

setContentView(R.layout.activity_webview)
var htmlKostumisasi: String = "<html><body><h1>Welcome to CCIT</h1>" +
"<h2>Welcome to CCIT</h2><h3>Welcome to CCIT</h3>" +
"<p>Ini Adalah Halaman WEB Static.</p>" +
"</body></html>";
wv_CCIT.loadData(htmlKostumisasi, "text/html", "UTF-8")
}
}
Jalankan program, maka akan muncul tampilan seperti berikut.

CEP-CCIT FTUI
b. Menampilkan Web URL di WebView
Kita akan menggunakan atribut LoadURL untuk melakukan remote terhadap konten
URL melalui aplikasi Android.
Modifikasi layout XML activity_webview.xml, isikan baris koding berikut.

android:background="#6b8a6c"
<WebView android:id="@+id/wv_CCIT"
android:layout_height="fill_parent"/>
<WebView android:id="@+id/wv_URLCCIT"
android:layout_height="fill_parent"/>
</RelativeLayout>
Buatlah kelas Activity baru dengan nama ContohWebViewURL, isikan baris koding
berikut.
class ContohWebViewURL : AppCompatActivity() {
setContentView(R.layout.activity_webview)
wv_URLCCIT.settings.javaScriptEnabled = true
wv_URLCCIT.loadUrl("https://ccit.eng.ui.ac.id/")
}
}
Pada baris koding diatas, kita menambahkan fungsi

settings.javaScriptEnabled=true agar aplikasi Android kita mengenali sintaks JavaScript

CEP-CCIT FTUI
yag ada di Web URL yang akan kita panggil. Setelahnya masukkan dalam fungsi loadUrl
alamat URL yang akan ditampilkan.
Jangan lupa untuk menambahkan internet permission di AndroidManfisest.xml

dengan menambahkan baris berikut:
<uses-permission android:name="android.permission.INTERNET"/>
Jalankan program, maka akan muncul tampilan berikut:
Latihan:
1. Buatlah sebuah aplikasi sederhana dengan memanfaatkan layout yang telah

diajarkan sebelumnya.
2. Tampilan awal aplikasi berupa gridview yang menampikan menu data-data buku.
3. Menu dalam gridview akan menampilkan menu dari layout lain saat pengguna
melakukan aksi klik.
4. Misal, menu GridView terdiri dari: Data Buku Tabel, Data Buku ListView, dll. Saat
pengguna memilih salah satu item di GridView tersebut, misalkan Data Buku Tabel,
maka akan muncul LayoutTabel dengan data buku dummy.
5. Terakhir, tambahkan menu untuk menampilkan sebuah halaman web, kita misalkan
halaman web dari Perpustakaan Kita.

CEP-CCIT FTUI
BAB 3
Android Control UI
Tujuan khusus :
Siswa dapat :
• Mengenal Control UI Android

• Menggunakan UI Control Android

CEP-CCIT FTUI
3.1 Kontrol Tatap Muka Android (Android UI Controls)

Android memiliki tipe kontrol UI yang berbeda dan tersedia untuk digunakan sebagai
tatap muka pengguna saat membangun sebuah aplikasi.
Berikut beberapa kontrol UI yang biasa digunakan saat membangun aplikasi Android:
3.1.1 TextView
Android menyediakan kontrol UI berupa TextView yang biasa digunakan untuk

mengatud dan menampilkan tulisan untuk user sesuai kebutuhan pembangunan
aplikasi. TextView bertindak seperti sebuah label dan pengguna tidak bisa
melakukan edit pada kontrol ini.
Kita bisa membuat TextView dengan dua cara, bisa melalui file XML atau terprogram
di activity. Dalam modul ini, kita akan mempelajari membuat kontrol UI yang dibahas
dalam kedua cara ini.
a. Membuat TextView di file XML

<LinearLayout
<TextView
android:id="@+id/txt_Welcome"
android:layout_marginBottom="10dp"
android:text="Welcome to CCIT FTUI"
android:textColor="#86AD33"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
Perhatikan baris koding diatas, kita melakukan pendefinisian kontrol

TextView di file layout XML untuk menampilkan tulisan dalam aplikasi Android yang
dibangun. Untuk mengatur tulisan yang ditampilkan TextView, kita bisa
menggunakan atribut android:text=”Isi Text Disini”.
b. Membuat TextView di file Activity
Berikut adalah contoh pembuatan sebuah TextView melalui file Activity.

CEP-CCIT FTUI
class MainActivity : AppCompatActivity() {

txt_Welcome.text = "Welcome to CCIT FTUI"
}
}
Sedikit berbeda dengan bahasa Java yang biasa digunakan untuk membangun
sebuah aplikasi Android, dengan bahasa Kotlin kita bisa menggunakan perintah
textView.text = “Isi Text Disini” untuk mengatur tulisan yang ditampilkan oleh
sebuah TextView tepat setelah baris perintah setContentView, sehingga baris kode
yang kita gunakan adalah txt_Welome.text = “Welcome to CCIT FTUI”.
Pada bahasa Java, kita perlu melakukan deklarasi objek TextView terlebih dahulu
dengan baris kode TextView tv = (TextView)findViewById(R.id.txt_Welcome);
lalu diikuti dengan fungsi setText() untuk mengisi tulisan di TextView, sehingga
baris kodenya adalah tv.setText(“Welcome to CCIT FTUI”);
Sekarang kita akan membuat sebuah tampilan lengkap dari kontrol TextView
Android. Buatlah sebuah project baru dengan nama ContohTextView.

CEP-CCIT FTUI
Selanjutnya isikan baris kode berikut:

<TextView
android:text="Welcome to CCIT FTUI"
<TextView
android:id="@+id/txt_Dipanggil"
android:textAllCaps="true" />
<TextView
android:id="@+id/txt_Web"
android:autoLink="email|web"
android:text="Kunjungi https://ccit.eng.ui.ac.id/ untuk melihat
layanan program kami" />
</LinearLayout>
Setelah mengisikan baris koding diatas ke file layout XML, selanjutnya buatlah beri
nilai txt_Dipanggil melalui Activity di kelas ContohTextView seperti berikut:
class ContohTextView : AppCompatActivity() {

setContentView(R.layout.activity_textview)
txt_Dipanggil.text = "Welcome to CCIT FTUI"
}
}

CEP-CCIT FTUI
Sebagai langkah terakhir, sebelum menjalankan program, jangan lupa untuk

mendeklarasikan Activity ContohTextView yang baru kita buat di
AndroidManifest.xml agar Activity yang kita buat bisa dijalankan, berikut contoh
pendeklarasiannya:
<activity android:name=".ContohTextView">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
Jika koding anda benar, maka akan muncul tampilan seperti berikut:
Dapat dilihat bahwa aplikasi yang dibuat menampilkan beberapa TextView, yang
mana TextView Welcome to CCIT FTUI dibaris kedua merupakan TextView yang kita
panggil melalui activity ContohTextView.
android: id It is used to uniquely identify the control

CEP-CCIT FTUI
android:autoLink It will automatically found and convert urls and email

addresses as a clickable links.
android: ems It is used to make the textview be exactly this many

ems wide.
android:hint It is used to display the hint text when text is empty
android:width It makes the TextView be exactly this many pixels

wide.
android:height It makes the TextView be exactly this many pixels tall.
android:text It is used to display the text.
android:textColor It is used to change the color of text.
android:gravity It is used to specify how to align the text by the view's

x and y axis.
android:maxWidth It is used to make the TextView be at most this many

pixels wide.
android:minWidth It is used to make the TextView be at least this many

pixels wide.
android:textSize It is used to specify the size of text.
android:textStyle It is used to change the style (bold, italic, bolditalic) of

text.
android:textAllCaps It is used to present the text in all CAPS
android:typeface It is used to specify the Typeface (normal, sans, serif,

monospace) for the text.

CEP-CCIT FTUI
android:textColorHighlight It is used to change the color of text selection

highlight.
android:textColorLink It is used to change the text color of links.
android:inputType It is used to specify the type of text being placed in a

text fields.
android:fontFamily It is used to specify the fontFamily for the text.
android:editable If we set, it specifies that this TextView has an input

method.
3.1.2 EditText
Di Android, EditText merupakan kontrol UI yang digunakan untuk memungkinkan

pengguna memasukkan atau memodifikasi tulisan. Ketika menggunakan kontrol
EditText di aplikasi Android, kite perlu menentukan spesifikasi dari tipe data kolom
teks yang akan menerima masukkan dari pengguna, atribut yang digunakan adalah
inputTypeattribute.
Sebagai contoh, jika kita menerima text plain, maka kita bisa mengatur spesifikasi
inputType sebagai “text”, untuk tipe password, kita bisa menggunakan inputType
“textPassword”. Kontrol EditText sendiri merupakan versi turunan dari kontrol
TextView dengan fitur tambahan dan berfungsi untuk menerima masukan
pengguna.
Sama seperti sebelumnya, kita akan mempelajari cara membuat kontrol EditText
dengan dua cara, yakni melalui file layout XML dan di kelas Activity.
a. Create a EditText in Layout File
Pertama buatlah sebuah kelas baru bernama ContohEditText dengan bahasa Kotlin

CEP-CCIT FTUI
Selanjutnya buat sebuah layout baru di direktori res/layout dengan nama

activity_edittext.xml lalu isikan baris koding berikut:

<EditText
android:id="@+id/edt_Nama"
android:hint="Subject"
android:inputType="text"/>
<TextView
android:id="@+id/txt_Tampil"
</LinearLayout>
Pada baris program di atas, kita menggunakan inputType=”text” untuk mengatur

tipe masukkan kontrol EditText yang kita gunakan. Jangan lupa menambahkan
activity ke manifest untuk menjalankan program.
b. Create EditText Control in Activity File
Berikutnya kita akan membuat kontrol EditText melalui kelas Activity, berikut baris
programnya.
class ContohEditText : AppCompatActivity() {
setContentView(R.layout.activity_edittext)
edt_Nama.hint="Masukkan Nama Anda"
}
}

CEP-CCIT FTUI
Langkah selanjutnya, kita akan mengambil isian teks yang dimasukkan pengguna di
kontrol EditText yang telah kita buat sebelumnya, tambahkan baris program Activity
seperti baris koding berikut:
class ContohEditText : AppCompatActivity() {

setContentView(R.layout.activity_edittext)
edt_Nama.hint="Masukkan Nama Anda"
edt_Nama.addTextChangedListener(object : TextWatcher{
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
}
override fun afterTextChanged(s: Editable?) {

}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
txt_Tampil.setText("Teks di EditText adalah : "+s)
}
})
}
Pada baris program diatas, kita menggunakan fungsi addTextCangedListener

untuk mendapatkan nilai teks yang dimasukkan pengguna di kontrol EditText dan
menampilkan teks tersebut saat terjadi modifikasi pada nilai EditText.
Pengambilan nilai lalu menampilkannya kembali tepat saat teks mengalami

modifikasi bisa kita lakukan dengan memanfaatkan fungsi override yang ada dalam objek
TextWatcher, yakni fungsi onTextChanged dengan menambahkan baris koding
textView.setText(“Isi teks”+objek yang menampung nilai teks).
Berdasarkan kodingan yang telah kita buat sebelumnya, maka baris koding yang
perlu kita tambahkan dalam fungsi override onTextChanged adalah
txt_Tampil.setText(“Teks di EditText adalah : “+s). Sehingga, saat program dijalankan,
akan menghasilkan output sebagai berikut:

CEP-CCIT FTUI
Pada hasil tampilan di atas, teks akan otomatis muncul saat EditTeks dimodifikasi.
android:id It is used to uniquely identify the control
android:gravity It is used to specify how to align the text like left, right,
center, top, etc.
android:text It is used to set the text.
android:hint It is used to display the hint text when text is empty
android:textColorHint It is used to change the text color of hint text.

text.

CEP-CCIT FTUI
android:background It is used to set the background color for edit text

control
android:ems It is used to make the textview be exactly this many ems

wide.
android:width It makes the TextView be exactly this many pixels wide.
android:height It makes the TextView be exactly this many pixels tall.
android:maxWidth It is used to make the TextView be at most this many

pixels wide.
android:minWidth It is used to make the TextView be at least this many

pixels wide.
android:textAllCaps It is used to present the text in all CAPS
android:typeface It is used to specify the Typeface (normal, sans, serif,

monospace) for the text.
android:textColorHighlight It is used to change the color of text selection highlight.
android:inputType It is used to specify the type of text being placed in a

text fields.
android:editable If we set false, EditText won't allow us to enter or modify

text
3.1.3 AutoCompleteTextView
Kontrol AutoCompleteTextView merupakan TextView yang bisa di-edit yang

digunakan untuk menampilkan daftar saran berdasarkan ketikan pengguna. Daftar
saran akan muncul seperti sebuah dropdown atau seperti halnya comboBox
dibahasa pemrograman Java. Pengguna bisa memilih sebuah saran untuk
melengkapi isian yang diketikkan.

CEP-CCIT FTUI
AutoCompleteTextView merupakan subclass dari kelas EditText, sehingga kita bisa

mewariskan semua properti dari EditText ke AutoCompleteTextView sesuai dengan
kebutuhan.
Daftar saran yang muncul secara umum merupakan daftar saran yang diperoleh dari
Data Adaptor, daftar saran baru akan muncul ketika penggunakan mengetikkan
jumlah minimal huruf yang telah didefinisikan di Threshold.
Threshold merupakan properti dari kontrol AutoCompleteTextView yang digunakan

untuk mendifinisikan minimal jumlah huruf yang harus diketikkan pengguna untuk
memunculkan daftar saran. Daftar saran ini akan menghilang kapan saja ketika tidak
ada ada daftar saran yang dipilih pengguna atau ketika pengguna menekan tombol
kembali atau tombol enter.
a. Membuat kontrol AutoCompleteTextView di file layout XML
Buatlah sebuah kelas baru dengan nama ContohAutoComplete di projek

sebelumnya (AplikasiKontrol).
Berikutnya buatlah sebuah layout XML baru dengan nama

activity_autocomplete.xml. Isikan baris koding berikut di file layout yang baru kita
buat.

<AutoCompleteTextView
android:id="@+id/ac_Kota "
android:layout_height="wrap_content"/>
</LinearLayout>

CEP-CCIT FTUI
Pada baris program diatas, kita membuat sebuah kontrol AutoCompleteTextView

dan memberi nama idnya ac_Kota yang akan menjadi TextView untuk pengguna
memasukkan nama kota yang ingin dimasukkan, lalu memunculkan daftar saran
kota sesuai daftar di adapter.
Selanjutnya kita beralih ke kelas Activity untuk membuat daftar saran kota serta
mengatur adapter ke kontrol AutoCompleteTextView, berikut baris kodingannya:
Hal pertama yang kita lakukan adalah membuat sebuah array untuk menampung
class ContohAutoComplete : AppCompatActivity() {
setContentView(R.layout.activity_autocomplete)
val kota = arrayOf(
"Depok","Bogor","Jakarta","Tanggerang","Bekasi","Padang","Bandung"
)
// membuat objek array baru
this,
// Layout untuk menampilkan daftar saran
android.R.layout.simple_list_item_activated_1, kota
)
// Mengatur kontrol AutoComplete
ac_Kota.setAdapter(adapter)
// AutoComplete Threshold
// Mengatur minimum jumlah huruf yang harus diketikkan,
// agar daftar saran muncul
ac_Kota.threshold = 1
}
}
daftar saran nama kota yang akan ditampilkan di daftar saran nantinya. Nama
variabel array yang kita gunakan adalah kota.
Setelah mendefinisikan sebuah array, selanjutnya kita membuat sebuah objek

adapter untuk membaca dan daftar saran nama kota yang telah kita buat
sebelumnya, objeknya kita beri nama adapter, dengan layout yang kita gunakan
untuk menampilkan daftar saran adalah layout simple_list_item_activated_1 diikuti
dengan variabel array yang telah didefinisikan sebelumnya.
Berikutnya kita atur agar kontrol AutoCompleteTextView yang telah kita buat di file
layout XML sebelumnya membaca adapter berisikan nilai array yang sebelumnya
telah dibuat dengan menggunakan fungsi setAdapter().
Terakhir, kita akan mengatur Threshold untuk menentukan jumlah minimum huruf
yang harus diketikkan pengguna agar daftar saran nama kota muncul sebagai
sebuah dropdown, untuk itu kita menggunakan fungsi threshold = <nilai>, sesuai
dengan kodingan yang telah kita buat sebelumnya, maka setting Threshold yang
kita buat adalah ac_Kota.threshold = 1, yang artinya jumlah minimum huruf yang
harus diketikkan pengguna agar daftar saran nama kota muncul adalah satu huruf.

CEP-CCIT FTUI
Ketika program dijalankan, maka akan muncul tampilan seperti berikut:
android:gravity It is used to specify how to align the text like left,

right, center, top, etc.
android:hint It is used to display the hint text when text is

empty
android:textColorHint It is used to change the text color of hint text.

CEP-CCIT FTUI
android:textStyle It is used to change the style (bold, italic,

bolditalic) of text.
android:background It is used to set the background color for

autocomplete textview control
android:ems It is used to make the textview be exactly this

many ems wide.
android:width It makes the TextView be exactly this many pixels

wide.
android:height It makes the TextView be exactly this many pixels

tall.
android:textColorHighlight It is used to change the color of text selection

highlight.
3.1.4 Button
Kontrol berikutnya yang akan dibahas adalah kontrol Button atau tombol. Kontrol
Button adalah kontrol yang digunakan untuk melakukan sebuah aksi ketika
pengguna menekan tombol.
Button pada aplikasi Android akan menampung tulisan atau ikon atau keduanya dan
memunculkan sebuah aksi ketika pengguna menyentuhnya. Android memiliki tipe-
tipe Button yang berbeda sesuai dengan kebutuhan seperti ImageButton,
ToogleButton dan RadioButton.
a. Membuat Button di file layout XML.
Buatlah sebuah kelas baru bernama ContohButton dengan bahasa Kotlin.

CEP-CCIT FTUI
Selanjutnya, buatlah sebuah layout baru dengan nama activity_button.xml lalu

ketikkan baris koding berikut:

android:orientation="vertical" android:layout_width="match_parent"
<EditText
android:hint="Masukkan Nama"
<Button
android:id="@+id/btn_Simpan"
android:text="Simpan" />
</LinearLayout>
Pada baris koding diatas, kita membuat sebuah kontrol Button dengan id
btn_Simpan dan mengatur teks Button dengan tulisan Simpan.
b. Membuat kontrol Button di file Activity.
Berikutnya kita akan membuat sebuah perintah untuk menampilkan nama yang
diketikkan pengguna di EditText setelah pengguna menekan kontrol Button, berikut
baris kodingnya:
class ContohButton : AppCompatActivity() {

setContentView(R.layout.activity_button)
btn_Simpan.text = "Simpan"
btn_Simpan.setOnClickListener(View.OnClickListener {
if (edt_Nama.text.isEmpty()) {
Toast.makeText(applicationContext, "Harap Masukkan Nama!",
Toast.LENGTH_SHORT).show()
} else {
Toast.makeText(applicationContext, "Nama Anda : "+edt_Nama.text,
}
})
}
}
Pada baris koding diatas, kita menggunakan fungsi

setOnClickListener(View.OnClickListener{}) untuk menjalankan sebuah aksi ketika
pengguna menekan atau menyentuh kontrol Button yang telah dibuat sebelumnya.
Setelahnya, kita akan melakukan pengecekkan kondisi, yakni mengecek kondisi

kontrol EditText edt_Nama, jika kontrol EditText kosong dalam artian pengguna

CEP-CCIT FTUI
tidak memasukkan teks apapun, lalu menekan tombol Simpan, maka sebuah
informasi akan muncul sesuai pengaturan.
Sebaliknya, jika pengguna memasukkan sebuah nama di kontrol EditText lalu

menekan atau menyentuh kontrol Button Simpan, makan akan muncul informasi
teks yang dituliskan oleh pengguna di kontrol EditText tersebut.
Secara umum, setiap kali pengguna menekan atau menyentuh sebuah kontrol
Button, objek Button akann menerima sebuah event on-click.
Berikut hasil tampilan ketika program dijalankan:
b. Mendefinisikan Click Event di file layout XML.
Kita bisa mendefinisikan Click Event melalui layout XML dengan

memanfaatkan atribut android:onClick dalam elemen kontrol Button
tersebut. Nama atau value atau nilai dari atribut android:onClick haruslah
nama dari sebuah fungsi yang yang akan dipanggil untuk merespon Click
Event, fungsi ini haruslah disediakan oleh Activity yang menampung file
layout XML tersebut.

CEP-CCIT FTUI
Berikut adalah contoh implementasi dari atribut android:onClick untuk kontrol

Button di file layout XML:

<EditText
<Button
android:id="@+id/btn_Simpan"
android:text="Simpan" />
<EditText
android:id="@+id/edt_NamaDua"
<Button
android:id="@+id/btn_SimpanDua"
android:text="Simpan"
android:onClick="simpanNama"/>
</LinearLayout>
Untuk kelas Activity, kita buat sebuah fungsi bernama simpanNama(), sesuai
dengan nama fungsi yang kita denifinisikan di atribut android:onClick pada file layout XML,
berikut baris kodingnya:
class ContohButton : AppCompatActivity() {

public final fun simpanNama(view: View) {
setContentView(R.layout.activity_button)
if (edt_NamaDua.text.isEmpty()) {
Toast.makeText(applicationContext, "Harap Masukkan Nama!",
} else {
Toast.makeText(applicationContext, "Nama Anda : " + edt_NamaDua.text,
}
}
}
Berikut hasil tampilan ketika program dijalankan:

CEP-CCIT FTUI

android:textStyle It is used to change the style (bold, italic, bolditalic)

of text.
android:background It is used to set the background color for button

control.
android:padding It is used to set the padding from left, right, top

and bottom.
android:drawableBottom It’s a drawable to be drawn to the below of text.

CEP-CCIT FTUI
android:drawableRight It’s a drawable to be drawn to the right of text.
android:drawableLeft It’s a drawable to be drawn to the left of text.
3.1.5 ImageButton
Pada Android, kontrol ImageButton merupakan kontrol UI yang digunakan untuk

menampilkan sebuah tombol bergambar, secara fungsional sama dengan kontrol
Button biasa, yaitu untuk melakukan aksi ketika pengguna menekan atau menyentuh
kontrol tersebut.
Atribut yang kita gunakan untuk menambahkan gambar di kontrol ImageButton

adalah android:src pada file layout XML. setImageResource() method.
a. Membuat ImageButton di file layout XML.
Untuk membuat sebuah kontrol ImageButton melalui file layout XML, langkah
pertama buatlah sebuah file layout, dalam kasus ini kita gunakan nama
activity_imagebutton.xml agar seragam dengan layout-layout sebelumnya. Isikan
baris koding berikut:

<EditText
<ImageButton
android:id="@+id/btn_Tambah"
android:src="@drawable/add_icon"/>
</LinearLayout>
Pada baris program diatas, dapat dilihat kita menggunakan atribut

android:src=”@drawable/add icon” yang artinya kita mengambil referensi
gambar untuk kontrol ImageButton di folder drawable dengan nama add icon.
b. Membuat ImageButton di file Activity.
Buatlah sebuah kelas baru bernama ContohImageButton dengan bahasa Kotlin:

CEP-CCIT FTUI
Tambahkan baris koding berikut di file layout XML untuk button kedua yang akan
diberi gambar melalui activity:

tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="45dp">
<EditText
<ImageButton
android:id="@+id/btn_Tambah"
android:src="@drawable/add_icon"/>
<ImageButton
android:id="@+id/btn_TambahDua"
android:layout_height="wrap_content" />
</LinearLayout>
Berikutnya ketikkan baris koding berikut di file Activity kelas ContohImageButton

yang telah kita buat sebelumnya.

CEP-CCIT FTUI
class ContohImageButton : AppCompatActivity() {

setContentView(R.layout.activity_imagebutton)
btn_TambahDua.setImageResource(R.drawable.add_icon)
btn_TambahDua.setOnClickListener(View.OnClickListener {
if(edt_Nama.text.isEmpty()){
Toast.makeText(applicationContext, "Nama Tidak Boleh
Kosong!", Toast.LENGTH_SHORT).show()
}else{
Toast.makeText(applicationContext, "Nama Anda :
"+edt_Nama.text, Toast.LENGTH_SHORT).show()
}
})
}
}
Perhatikan baris koding di atas, kita menggunakan fungsi

btn_TambahDua.setImageResource(R.drawable.add_icon) untuk mengatur gambar
pada kontrol Button kedua.
Ketika program dijalankan, akan muncul tampilan seperti gambar dibawah, gambar
pada kontrol ImageButton pertama kita atur melalui file layout XML, sedangkan kontrol
ImageButton kedua kita atur melalui file Activity.

CEP-CCIT FTUI
android:src It is used to specify the source file of image
android:background It is used to set the background color for an image button

control.
android:padding It is used to set the padding from left, right, top and
bottom of image button.
android:baseline It is used to set offset of the baseline within the view.
3.1.6 ToggleButton
ToogleButton adalah sebuah kontrol UI yang digunakan untuk menampilkan tombol

status ON atau OFF dengan indikator cahaya, artinya pengguna bisa menggunakan
kontrol ToogleButton untuk merubah pengaturana ntara ON atau OFF.
Secara bawaan, kontrol ToogleButton akan menampilkan status OFF, untuk

mengatur status bawaan dari sebuah kontrol ToogleButton, kita bisa memanfaatkan
atribut android:checked = “true” melalui file layout XML dalam kasus kita ingin
mengatur bawaan ToogleButton ON.
a. Membuat ToggleButton di file layout XML.
Buatlah sebuah file layout XML baru, beri nama activity_tooglebutton.xml lalu
ketikkan baris koding berikut:

<ToggleButton
android:id="@+id/tgl_Status"
android:layout_marginLeft="100dp"
android:checked="true"
android:textOff="OFF"
android:textOn="ON"/>
</RelativeLayout>
Pada baris koding diatas, terdapat atribut android:textOff = “OFF” dan

android:textOn = “ON” untuk mengatur tulisan yang tampil untuk kontrol

CEP-CCIT FTUI
ToogleButton di aplikasi Android yang dibangun. Selain itu, terdapat atribut

android:checked = “true” untuk mengatur status bawaan ToogleButton ON.
b. Membuat ToggleButton di file Activity.
Buatlah sebuah kelas baru dan beri nama ContohToogleButton menggunakan

bahasa Kotlin.
Tambahkan baris kodingan berikut di file layout XML yang telah dibuat sebelumnya
untuk kontrol ToogleButton kedua yang akan kita atur melalui file Activity:
Pada baris koding diatas yang baru kita tambahkan, kita membuat sebuah kontrol
<ToggleButton
android:id="@+id/tgl_Status"
<ToggleButton
android:id="@+id/tgl_StatusDua"
android:layout_marginTop="120dp"/>
</RelativeLayout>
ToogleButton yang baru dimana nilai teks untuk status OFF maupun OFF serta
bawaan status kontrol ToogleButton tidak kita atur melalui file layout XML.
Selanjutnya isikan baris koding berikut di kelas ContohToogleButton yang telah

dibuat sebelumnya:

CEP-CCIT FTUI
class ContohToogleButton : AppCompatActivity() {

setContentView(R.layout.activity_tooglebutton)
tgl_StatusDua.textOff = "MATI"
tgl_StatusDua.textOn = "MENYALA"
tgl_StatusDua.isChecked = true
}
}
Berikut adalah hasil tampilan saat program dijalankan, janagn lupa untuk
mendefinisikan kelas ContohToogleButton di AndroidManfiest.xml.
Pada hasil tampilan program diatas, kita bisa melihat dua buah kontrol
ToogleButton, yang mana kontrol ToogleButton yang pertama kita atur melalui
file layout XML, sedangkan kontrol ToogleButton yang kedua kita atur melalui file
Activity ContohToogleButton.
Sama halnya dengan kontrol Button, ketika pengguna melakukan aksi klik atau
sentuh pada kontrol ToogleButton, akan muncul sebuah aksi yang telah diatur di
kelas Activity. Berikut contoh respon dari kontrol ToogleButton untuk aksi dari
pengguna:

CEP-CCIT FTUI
class ContohToogleButton : AppCompatActivity() {

setContentView(R.layout.activity_tooglebutton)
tgl_StatusDua.textOff = "MATI"
tgl_StatusDua.textOn = "MENYALA"
tgl_StatusDua.isChecked = true
tgl_Status.setOnCheckedChangeListener {
buttonView, isChecked -> val pesan = "Toogle Satu " +
if (isChecked) "ON" else "OFF"
Toast.makeText(applicationContext, pesan, Toast.LENGTH_SHORT).show()
}
tgl_StatusDua.setOnCheckedChangeListener {
buttonView, isChecked -> val pesan = "Toogle Dua " +
if (isChecked) "MENYALA" else "MATI"
}
}
}
Pada baris program diatas, kita menambahkan baris kondisi untuk merespon aksi
dari pengguna terhadap masing-masing kontrol ToogleButton yang telah dibuat
sebelumnya. Fungsi setOnCheckedChangeListener akan mengecek sebuah kontrol
ToogleButton ketika mengalami perubahan status akibat aksi dari pengguna. Fungsi
ini kemudian akan menentukan respon ketika kondisi terpenuhi (true) yakni pada
bagian if (isChecked), diikuti dengan respon untuk kondisi tidak terpenuhi (false).
Berikut hasil tampilan program ketika dijalankan dan pengguna menekan kontrol
ToogleButton yang telah dibuat:

CEP-CCIT FTUI
android:checked It is used to specify the current state of toggle

button

android:textOn It is used to set the text when toggle button is in

ON / Checked state.
android:textOff It is used to set the text when toggle button is in

OFF / Unchecked state.

CEP-CCIT FTUI

android:background It is used to set the background color for toggle

button control.

and bottom.
3.1.7 CheckBox
Kontrol CheckBox adalah kontrol dengan status antara ON atau OFF, kita bisa
menggunakan banyak kontrol CheckBox pada aplikasi Android untuk mengizinkan
pengguna memilih satu atau lebih pilihan dari sekumpulan nilai yang ditawarkan.
Sama halnya dengan kontrol ToogleButton, status bawaan dari kontrol CheckBox
adalah OFF, untuk merubah status bawaan tersebut kita bisa memanfaatkan atribut
android:checked = “true” untuk kasus mengatur status bawaan kontrol CheckBox
ON pada layout XML.
a. Membuat CheckBox di file layout XML.
Buatlah sebuah layout XML baru dengan nama activity_checkbox.xml lalu isikan

android:layout_height="match_parent" tools:layout_editor_absoluteY="0dp"
<CheckBox
android:id="@+id/cb_Java"
android:text="Java"/>
</LinearLayout>

CEP-CCIT FTUI
Perhatikan baris koding diatas, kita menggunakan atribut android:checked=“true”

untuk mengatur status bawaan kontrol CheckBox menjadi ON.
b. Membuat CheckBox di file Activity.
Buatlah sebuah kelas baru dengan nama ContohCheckBox.
Lakukan sedikit modifikasi dengan pada file layout XML yang telah dibuat dengan
menambahkan dua buah kontrol ToogleButton seperti berikut:

android:layout_height="match_parent" tools:layout_editor_absoluteY="0dp"
<CheckBox
android:text="Java"/>
<CheckBox
android:id="@+id/cb_Phyton"
<CheckBox
android:id="@+id/cb_Web"
</LinearLayout>
Pada baris koding diatas, kita menmbahkan dua buah kontrol CheckBox dengan id
cb_Phyton dan cb_Web, yang mana kedua kontrol CheckBox ini tidak kita atur
status bawaannya maupun teks yang muncul sebagai labelnya.
Untuk mengatur status bawaan dan teks kedua kontrol CheckBox tersebut, kita akan
melakukan modifikasi pada file Activity yang telah kita buat sebelumnya, berikut
kodingannya:

CEP-CCIT FTUI
class ContohCheckBox : AppCompatActivity() {

setContentView(R.layout.activity_checkbox)
cb_Phyton.setText("Phyton")
cb_Phyton.isChecked = true
cb_Web.setText("WEB")
}
}
Pada baris koding diatas, dapat dilihat bahwa kita mengatur nilai teks untuk
cb_Phython dengan tulisan Phyton, kita menggunakan fungsi
cb_Phyton.setText(“Phyton”), hal yang sama kita lakukan untuk cb_Web. Selain
itu, kita juga mengatur status bawaan kontrol CheckBox Phyton menjadi true dengan
fungsi cb_Phytone.isChecked = true, sedangkan untuk cb_Web tidak kita atur
untuk status bawaannya, sehingga hasil tampilan program setelah dijalankan adalah
sebagai berikut:
Terlihat pada hasil tampilan program setelah dijalankan, untuk kontrol CheckBox
Java dan Python sudah dalam keadaan tercentang atau ON, sedangkan kontrol
CheckBox Web tidak tercentang.
c. Membuat Handle Click Event kontrol CheckBox di file layout XML.

CEP-CCIT FTUI
Pada kontrol CheckBox Web di file layout XML, tambahkan atribut

android:onClick=”<nama_fungsi>” untuk membuat sebuah handle saat
pengguna menekan kontrol CheckBox Web. Berikut baris kodingnya:
<CheckBox
android:onClick="fungsiCheckBoxWeb" />
Pada baris kodingan diatas, kita menambahkan atribut

android:onClick=”fungsiCheckBoxWeb” untuk memberikan respon kepada
pengguna setelah pengguna melakukan aksi klik pada kontrol CheckBox Web.
Fungsi ini harus dideklarasikan di file Activity sebagai bentuk respon dari aksi
pengguna.
Pada file Activity di kelas ContohCheckBox, buatlah sebuah fungsi dengan nama
yang sama seperti yang dideklarasikan di file layout XML, berikut bentuk fungsinya:

}
public fun fungsiCheckBoxWeb(view: View){
Toast.makeText(applicationContext, "Anda Memilih
WEB", Toast.LENGTH_SHORT).show()
}
}
Pada baris koding diatas, kita membuat sebuah fungsi bernama

fungsiCheckBoxWeb yang mana didalam fungsi ini kita membuat sebuah Toast
untuk menampilkan notifikasi singkat ke pengguna setelah melakukan aksi pada
kontrol CheckBox.
Berikut hasil tampilan dari program setelah dijalankan dan setelah pengguna
melakukan sebuah aksi pada kontrol CheckBox seperti menekan atau
menyentuhnya.

CEP-CCIT FTUI
d. Membuat Satu Fungsi untuk Semua kontrol CheckBox.
Kita juga bisa mengimplementasikan fungsi yang sama untuk seluruh kontrol
CheckBox yang kita buat di file layout XML. Hal yang perlu dilakukan adalah dengan
menambahkan kondisi di dalam fungsi yang telah di deklarasikan sebelumnya. Agar nama
fungsi sesuai, ganti nama fungsi yang ada di file layout XML pada atribut android:onClick
dari fungsiCheckBoxWeb menjadi fungsiCheckBox. Atur semua kontrol CheckBox di file
layout XML untuk memiliki atribut android:onClick dengan isi fungsi yang sama, yakni
fungsiCheckBox, seperti berikut:
<CheckBox
android:text="Java"
android:onClick="fungsiCheckBox" />
<CheckBox
android:id="@+id/cb_Phyton"
<CheckBox
Selanjutnya, pada file Activity ContohCheckBox, tambahkan baris koding

berikut pada fungsi fungsiCheckBox:

CEP-CCIT FTUI

}
public fun fungsiCheckBox(view: View){
when(view.id){
R.id.cb_Java ->
Toast.makeText(applicationContext, "Anda Memilih Java",
R.id.cb_Phyton ->
Toast.makeText(applicationContext, "Anda Memilih Phyton",
R.id.cb_Web ->
Toast.makeText(applicationContext, "Anda Memilih WEB",
}
}
}
Berikut adalah hasil tampilan ketika program di jalankan:
android:checked It is used to specify the current state of checkbox

CEP-CCIT FTUI

android:text It is used to set the text for checkbox.

text.
android:background It is used to set the background color for checkbox

control.
bottom.
android:onClick It’s a name of the method to invoke when the

checkbox clicked.
android:visibility It is used to control the visibility of control.
3.1.8 RadioButton dan RadioGroup
Kontrol RadioButton pada Android hakikatnya hampir sama dengan kontrol

CheckBox, yakni kontrol yang akan menyimpan status antara checked fan
unchecked. Hanya saja, kontrol RadioButton hanya mengizinkan pengguna untuk
memilih salah satu pilihan dari kelompok pilihan.
Selain itu, jika pada kontrol CheckBox pengguna bisa melakukan checked dan
unchecked, berbeda halnya pada kontrol RadioButton yang mana pengguna tidak
bisa melakukan unchecked pada kontrol RadioButton yang telah di pilih (checked),
dalam artian pengguna hanya bisa merubah status kontrol tersebut menjadi
unchecked dengan memilih pilihan lain untuk di pilih.
Kita menggunakan kontrol RadioButton pada Android bersamaan dengan sebuah

RadioGroup untuk mengkombinasikan beberapa kontrol RadioButton kedalam satu

CEP-CCIT FTUI
kelompok, hal ini bertujuan untuk memastikan bahwa pengguna hanya bisa memilih
salah satu pilihan dari sebuah kelompok pilihan.
Secara bawaan, kontrol RadioButton akan diatur OFF (unchecked), untuk merubah
status bawaan ini kita bisa menggunakan atribut android:checked = “true”.
a. Membuat RadioButton di file layout XML.
Buatlah sebuah file layout XML baru di projek sebelumnya, beri nama
activity_radiobutton.xml, isikan kodingan berikut:

<TextView
android:text="Jenis Kelamin"
android:textStyle="bold"/>
<RadioGroup
android:id="@+id/rg_JenisKelamin"
<RadioButton
android:id="@+id/rd_Pria"
android:text="Pria" />
<RadioButton
android:id="@+id/rd_Wanita"
android:text="Wanita" />
</RadioGroup>
</LinearLayout>
Pada baris program diatas, kita menempatkan kontrol RadioButton didalam sebuah
RadioGroup dengan id rg_JenisKelamin. Untuk masing-masing kontrol
RadioButton kita beri id sesuai kebutuhan.
Berikutnya buatlah sebuah kelas Kotlin baru dengan nama ContohRadioButton.

CEP-CCIT FTUI
Atur file Activity seperti sebelumnya
class ContohRadioButton : AppCompatActivity() {

setContentView(R.layout.activity_radiobutton)
}
}
Berikut adalah tampilan yang akan muncul ketika program dijalankan:
b. Membuat RadioButton di file Activity.
Modifikasi file layout XML yang telah dibuat sebelumnya, tambahkan baris koding
berikut:

CEP-CCIT FTUI

<TextView
android:id="@+id/txt_JenisKelamin"
<RadioGroup
<RadioButton
android:text="Pria"
android:checked="true"/>
<RadioButton
android:text="Wanita" />
</RadioGroup>
<TextView
android:text="Status Pernikahan"
<RadioGroup
android:id="@+id/rg_Status"
<RadioButton
android:id="@+id/rd_Menikah"
android:text="Menikah" />
<RadioButton
android:id="@+id/rd_Lajang"
android:text="Lajang" />
</RadioGroup>
</LinearLayout>

CEP-CCIT FTUI
Pada baris koding diatas, kita mengatur rd_Pria menjadi checked dengan
menggunakan atribut android:checked=”true” pada RadioGroup Jenis Kelamin.
Sedangkan untuk RadioGroup Status Pernikahan kita atur status checked yang aktif
saat program dijalankan melalui file Activity termasuk mengatur teks yang muncul
di kontrol RadioButton kelompok Status Pernikahan. Berikut kodingannya:
class ContohRadioButton : AppCompatActivity() {

setContentView(R.layout.activity_radiobutton)
rd_Menikah.setText("Menikah")
rd_Lajang.text = "Lajang"
rd_Menikah.isChecked = true
}
}
Sehingga saat program dijalankan, akan muncul tampilan seperti gambar dibawah
ini:
c. Membuat Handle Click Event RadioButton di file Activity.
Lakukan modifikasi kembali ke file XML sebelumnya, tambahkan atribut

android:onClick untuk masing-masing kontrol RadioButton. Berikut baris
kodingnya:

CEP-CCIT FTUI

<TextView
android:id="@+id/txt_JenisKelamin"
<RadioGroup
<RadioButton
android:text="Pria"
android:onClick="fungsiRBJK" />
<RadioButton
android:text="Wanita"
android:onClick="fungsiRBJK" />
</RadioGroup>
<TextView
android:text="Status Pernikahan"
<RadioGroup
android:id="@+id/rg_Status"
<RadioButton
android:id="@+id/rd_Menikah"
android:text="Menikah"
android:onClick="fungsiRBS" />
<RadioButton
android:id="@+id/rd_Lajang"
android:text="Lajang"
android:onClick="fungsiRBS" />
</RadioGroup>
</LinearLayout>
CEP-CCIT FTUI
Pada baris koding diatas, kita membuat sebuah fungsi bernama fungsiRBJK untuk
merespon pilihan pengguna untuk kelompok kontrol Radiobutton Jenis Kelamin. Kita
juga membuat fungsi bernama fungsiRBS untuk merespon pilihan pengguna pada
kelompok kontrol RadioButton Status Pernikahan.
Untuk masing-masing fungsi yang didefinisikan pada atribut android:onClick di file

layout XML, harus diimplementasikan di kelas Activity yang menampung layout XML
tersebut.
Berikut kodingan untuk fungsi fungsiRBJK dan fungsi fungsiRBS pada kelas Activity
ContohRadioButton:
public fun fungsiRBJK(view: View) {

when (view.id) {
R.id.rd_Pria ->
Toast.makeText(applicationContext, "Jenis Kelamin Pria",
R.id.rd_Wanita ->
Toast.makeText(applicationContext, "Jenis Kelamin Wanita",
}
}
public fun fungsiRBS(view: View) {

when (view.id) {
R.id.rd_Menikah ->
Toast.makeText(applicationContext, "Status Menikah",
R.id.rd_Lajang ->
Toast.makeText(applicationContext, "Status Lajang",
}
}
Pada baris koding diatas, kita bisa melihat di masing-masing fungsi kita melakukan
pengecekan dengan parameter id dari masing-masing kelompok RadioButton untuk
memberikan respon yang berbeda sesuai dengan pilihan aksi pengguna.
Selain model respon seperti kodingan diatas, kita juga bisa memanfaatkan satu nama
fungsi saja, dengan merubah semua nilai atribut android:onClick yang ada di file
layout XML activity_radiobutton.xml dengan nama fungsi yang sama, semisal
fungsiRB. Lalu, pada fungsiRB kita lakukan pengecekkan untuk id RadioGroup terlebih
dahulu, baru melakukan sub-pengecekkan didalam pengecekan id RadioGroup.
Berikut hasil keluaran aplikasi saat dijalankan:

CEP-CCIT FTUI
android:checked It is used to specify the current state of radio button

android:text It is used to set the text for radio button.
android:textStyle It is used to change the style (bold, italic, bolditalic)

of text.
android:background It is used to set the background color for radio

button control.

CEP-CCIT FTUI
bottom.
android:onClick It’s a name of the method to invoke when the radio

button clicked.
android:visibility It is used to control the visibility of control.
3.1.9 ProgressBar
Kontrol berikutnya adalah ProgressBar, yaitu kontrol UI yang diguakan untuk

mengindikasikan progres dari sebuah operasi seperti progres download dan progres
mengunggah file.
Secara bawaan, kontrol ProgressBar akan ditampilkan dalam bentuk roda berputar
(spinning wheel), namun kita bisa merubah bentuk tampilan kontrol ProgressBar
dalam bentuk garis horizontal dengan cara merubah style property ke horizontal
dengan bentuk: style=”?android:attr/progressBarStyleHorizontal”.
a. Membuat ProgressBar Android di file XML.
Buatlah sebuah file layout XML bernama activity_progressbar.xml, lalu isikan baris
koding berikut:

<ProgressBar
android:id="@+id/pb_Proses"
style="?android:attr/progressBarStyleHorizontal"
android:minHeight="50dp"
android:minWidth="250dp"
android:max="100"
android:indeterminate="true"
android:progress="1" />
</LinearLayout>

CEP-CCIT FTUI
Pada baris koding diatas, kita membuat sebuah kontrol ProgressBar dengan
mangatur stylenya sebagai
style=”?android:attr/progressBarStyleHorizontal”.
Selanjutnya, buatlah sebuah kelas Activity bernama ContohProgressBar untuk

menampung layout XML yang telah kita buat.
class ContohProgressBar : AppCompatActivity() {

setContentView(R.layout.activity_progressbar)
}
}
Berikut hasil keluaran aplikasi ketika program dijalankan:

CEP-CCIT FTUI
Pada aplikasi Android, kontrol ProgressBar mendukung dua mode untuk

menampilkan progres, yakni mode Determinate dan mode Indeterminate.
a. ProgressBar dengan mode Determinate.
Secara umum, kita menggunakan mode progres Determinate ketika kia ingin
menampilkan jumlah progres yang berjalan, contohnya adalah persentasi dari
progres download sebuah file, jumlah record yang disimpan ke database, dll.
Untuk menggunakan progres mode Determinate, kita perlu menagtur style dari
kontrol ProgressBar ke Widget_ProgressBar_Horizontal atau
progressBarStyleHorizontal serta mengatur jumlah progres menggunakan atribut
android:progress.
<ProgressBar
android:max="100"
b. ProgressBar dengan mode Indeterminate.
Mode kontrol ProgressBar Indeterminate digunakan ketika kita tidak mengetahui

seberapa panjang sebuah operasi akan berjalan atau seberapa banyak sebuah
pekerjaan yang telah selesai.
Pada mode Indeterminate, progres sebenarnya tidak akan ditampilkan, hanya

animasi putaran yang ditampilkan untuk mengindikasikan bahwa sebuah progres
sedang berjalan.
Dengan menggunakan fungsi progressBar.setIndeterminate = true di file activity

atau dengan menggunakan atribut android:indeterminate = “true” di file layout
XML, kita memunculkan mode progres Indeterminate.
<ProgressBar
android:max="100"

CEP-CCIT FTUI
android:max It is used to specify the maximum value of the progress

can take
android:progress It is used to specify default progress value.
android:background It is used to set the background color for progress bar.
android:indeterminate It is used to enable indeterminate progress mode.
android:padding It is used to set the padding for left, right, top or bottom
of progress bar.
3.1.10 Spinner
Pada aplikasi Android, Spinner adalah sebuah view yang mengizinkan seorang
pengguna untuk memilih sebuah nilai dari daftar nilai. Spinner di aplikasi Android
bertindak seperti sebuah dropdown list di bahasa pemrograman lain.
Secara umum, kontrol Spinner akan menyediakan sebuah cara yang cepat untuk
memilih satu item dari daftar nilai dan akan menampilkan sebuah menu dropdown
yang akan memunculkan kumpulan nilai ketika pengguna meng-klik atau
menyentuhnya.
kontrol Spinner akan menampilkan nilai yang dipilih saat ini secara default, dengan
menggunakan Adapter kita bisa menggabungkan item-item tersebut menjadi objek
Spinner. Adapter menarik daat dari sebuah sumber seperti array atau database dan
mengubah setiap item kedalam sebuah result view lalu dimasukkan kedalam daftar
pilihan.
a. Adapter Android
Adapter pada Android akan bertindak sebagai perantara antara sumber data dan
adapter views seperti ListView, GridView untuk mengisikan data kedalam view
adapter. Adapter kemudian akan menyimpan data tersebut lalu mengirimkannya
kedalam item-item di data set yang kemudian akan dibuatkan view untuk setiap item
di dalam daftar pilihan.
a. Membuat Spinner di file XML

CEP-CCIT FTUI
Buatlah sebuah file layout XML baru dengan nama activity_spinner.xml lalu ketikkan
<Spinner android:id="@+id/sp_Semester"
</LinearLayout>
Berikutnya buatlah sebuah kelas baru dengan bahasa Kotlin bernama

ContohSpinner.
Untuk memberikan nilai pada kontrol Spinner yang kita buat di file Activity, kita bisa
menampilkan baris kode seperti berikut:
class ContohSpinner : AppCompatActivity() {

setContentView(R.layout.activity_spinner)
val semester = arrayOf(

"Semester 1","Semester 2","Semester 3","Semester 4",
"Semester 5","Semester 6","Semester 7","Semester 8"
)

this,
android.R.layout.simple_list_item_activated_1, semester
)
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
sp_Semester.setAdapter(adapter)
}
}
Berikut adalah tampilan yang muncul saat program dijalankan:

CEP-CCIT FTUI

CEP-CCIT FTUI
BAB 4
Time Widget Android
Tujuan khusus :
Siswa dapat :
• Mengenal Time Widget Android

• Menggunakan Time Widget Android

CEP-CCIT FTUI
4.1 TimePicker
Pada Android, TimePicker adalah sebuah widget untuk memilih waktu baik
dalam format 24 jam atau format mode AM/PM. Jika kita menggunakan TimePicker,
kita bisa memastikan pengguna memilih waktu yang valid.
Terdapat dua mode TimePicker di Android, yang pertama adalah TimePicker

yang memunculkan waktu dalam mode jam, dan yang kedua adalah TimePicker
yang menampilkan waktu dalam mode spinner.
a. Membuat TimePicker di file layout XML.
Buatlah sebuah file layout XML dengan nama activity_timepicker.xml, lalu


<TimePicker android:id="@+id/tp_Waktu"
</LinearLayout>
Berikutnya buatlah sebuah kelas Activity bernama ContohTimePicker.
class ContohTimePicker : AppCompatActivity() {

setContentView(R.layout.activity_timepicker)
}
}
Berikut adalah hasil tampilan yang muncul saat program dijalankan, dimana
waktu yang ditunjukkana dalah waktu terupdate.

CEP-CCIT FTUI
a. TimePicker mode Clock (Jam)
Kita bisa mendefinisikan kontrol TimePicker untuk menampilkan waktu dalam

format jam dengan menggunakan atribut android:timePickerMode.
<TimePicker android:id="@+id/tp_Waktu "

android:timePickerMode="clock" />
Kodingan pada file layout XML diatas akan memunculkan kontrol TimePicker
dalam mode jam saat program dijalankan, seperti gambar tampilan
sebelumnye.
b. TimePicker dengan mode Spinner.

<TimePicker
android:id="@+id/tp_Waktu"
android:timePickerMode="spinner" />
Kodingan diatas akan menampilkan hasil seperti gambar dibawah ini:

CEP-CCIT FTUI
c. Mengatur mode TimePicker di file Activity
Tambahkan baris kodingan berikut di kelas ContohTimePicker yang telah

dibuat sebelumnya.
lass ContohTimePicker : AppCompatActivity() {
setContentView(R.layout.activity_timepicker)
tp_Waktu.setIs24HourView(true)
}
}
Jalankan program lalu lihat hasilnya.
android:timePickerMode It is used to specify timepicker mode, either

spinner or clock
android:background It is used to set the background color for date

picker.

CEP-CCIT FTUI
android:padding It is used to set the padding for left, right, top or

bottom of date picker.
4.2 DatePicker
Kontrol DatePicker adalah kontrol yang mengizinkan pengguna untuk

memilih tanggal berdasarkan hari, bulan dan tahun. DatePicker juga terdiri dari dua
mode, yakni kalender lengkap dan mode spinner.
a. Membuat DatePicker di file layout XML File
Buatlah sebuah file layout XML baru dengan nama activity_datepicker.xml,

lalu ketikkan kodingan berikut:
<DatePicker android:id="@+id/dp_Tanggal"
Berikutnya buatlah sebuah kelas bernama ContohDatePicker di file Activity

lalu isikan baris koding berikut:
class ContohDatePicker : AppCompatActivity() {
setContentView(R.layout.activity_datepicker)
}
}
Terdapat dua mode DatePicker yang didukung oleh Android, yakni Calender
dan Spinner.
b. Membuat DatePicker dengan mode Calendar.
Untuk membuat sebuah kontrol DatePicker dengan mode Calendar, kita

hanya perlu menambahkan atribut android:datePickerMode=”calendar”
pada file layout XML.
<DatePicker android:id="@+id/dp_Waktu"
android:datePickerMode="calendar" />
Berikut adalah bentuk tampilan yang muncul saat program dijalankan.

CEP-CCIT FTUI
c. Membuat DatePicker dengan mode Spinner
Mode Spinner adalah mode ketika kita ingin menampilkan tanggal dalam
format hari, bulan dan tahun secara terpisah.
<DatePicker android:id="@+id/dp_Waktu"
android:datePickerMode="spinner" />
Pada baris koding diatas, kita mengganti mode kalender yang kita
akan tampilkan menjadi mode spinner, untuk mencapai hal ini kita hanya
perlu menambah atribut android:datePickerMode=”spinner”.
Berikut hasil tampilan dari program setelah dijalankan:

CEP-CCIT FTUI
Jika ingin menampilkan mode spinner, namun hanya untuk memilih tanggal
saja, kita bisa menambahkan atribut android:calendarViewShown=”false”
di file layout XML.
Berikut adalah hasil tampilan program:

CEP-CCIT FTUI
android:datePickerMode It is used to specify datepicker mode either

spinner or calendar
android:background It is used to set the background color for date

picker.

bottom of date picker.
4.3 SeekBar
Kontrol SeekBar di Android merupakan ekstensi dari kontrol ProgressBar

yang bisa ditarik oleh pengguna dengan menyentuh tahan kontrol SeekBar. Kontrol
SeekBar mengizinkan pengguna untuk menarik progress level ke kiri atau ke kanan
untuk mengatur nilai, contohnya seperti mengatur kontras layar hp.
Untuk mendefinisikan nilai dari SeekBar ini, kita bisa menggunakan atribut
android:max di file layout XML.
a. Membuat SeekBar di file layout XML
Buatlah sebuah layout XML baru dengan nama activity_seekbar.xml, lalu

<SeekBar
android:id="@+id/sb_Volume"
android:max="100"
android:indeterminate="false"
android:indeterminate It is used to show the cyclic animation in seekbar

without an indication of progress.

CEP-CCIT FTUI
android:max It is used to set the maximum value of seekbar.
android:progress It is used to set the default progress value between 0

and max. It must be an integer value.
Di Android, kontrol SeekBar mendukung dua tipe mode untuk menampilkan

progres, yakni Determinate dan Indeterminate.
a. Membuat SeekBar dengan mode Determinate
Secara umum, mode Determinate digunakan ketika kita ingin menampilkan

kontrol SeekBar dengan memunculkan jumlah dari progresnya. Sebagai
contoh, ketika kita ingin menampilkan progres download.
Buatlah sebuah kelas Activity baru dengan nama ContohSeekBar.
class ContohSeekBar : AppCompatActivity() {

setContentView(R.layout.activity_seekbar)
}
}
Berikut hasil tampilan program setelah dijalankan:

CEP-CCIT FTUI
Nilai progres pada kontrol SeekBar mencapai 100 yang artinya mencapai titik
penuh progres. Untuk mengatur nilai ini, kita bisa menggunakan atribut
android:max di file layout XML.
b. Membuat SeekBar dengan mode Indeterminate
Sama dengan pembahasan sebelumnya di kontrol ProgressBar, untuk mode

Inderteminate di kontrol SeekBar juga digunakan ketika kita tidak
mengetahui berapa lama sebuah operasi akan memakan waktu atau sejauh
mana sebuah task sudah selesai.
Di mode Indeterminate, progres sebenarnya tidak akan ditampilkan,

melainkan lingkaran berputar sebagai indikasi bahwa sebuah progress
sedang berjalan.
Tambahkan baris koding berikut di file layout XML sebelumnya:

<SeekBar android:id="@+id/sb_Kontras"
android:max="100"
Pada baris koding diatas, kita menambahkan atribut

android:indeterminate=”true”, yang artinya kita membuat sebuah kontrol
SeekBar dengan mode Indeterminate.

CEP-CCIT FTUI
Berikut tampilan program setelah dijalankan, dengan sebuah SeekBar yang

berjalan menunjukkana danya progres yang sedang berjalan:
android:max It is used to specify the maximum value of the

progress can take
android:progress It is used to specify default progress value.
android:background It is used to set the background color for

progress bar.
android:indeterminate It is used to enable indeterminate progress

mode.

bottom of progress bar.
android:progressDrawable It is used to set the custom drawable xml for the

progress mode of a seekbar.

CEP-CCIT FTUI
android:thumb It is used to set the thumb icon on seekbar to

drag left or right.
4.4 AlertDialog
AlertDialog adalah sebuah kontrol yang disediakan oleh Android untuk

memunculkan sebuah dialog pop-up untuk berkomunikasi dengan user. Dialog
pop-up ini memiliki pesan dan tombol untuk merespon aksi selanjutnya.
Di Android, kontrol AlertDialog bisa memunculkan sebuah judul, tombol

sampai tiga buah, daftar item yang bisa dipilih atau layaout kostumisasi sesuai
kebutuhan.
Region Description
Title It’s an optional and it can be used to show the detailed

messages based on our requirements.
Content It is used to display a message, list or other custom layouts

Area based on our requirements.
Action It is used to display an action buttons to interact with the users.

Buttons We can use upto 3 different action buttons in alert dialog, such
as positive, negative and neutral.
Kita bisa membuat sebuah kontrol AlertDialog di file Activity menggunakan

fungsi yang berbeda-beda.
a. Fungsi-Fungsi AlertDialog
Berikut beberapa fungsi yang umum digunakan terkait kontrol AlertDialog

untuk membuat sebuah dialog pop-up di aplikasi yang sedang dibangun.

CEP-CCIT FTUI
Method Description
setTitle() It is used to set the title of alertdialog and its an optional

component.
setIcon() It is used to set the icon before the title
setMessage() It is used to set the message required message to display

in alertdialog.
setCancelable() It is used to allow users to cancel alertdialog by clicking

on outside of dialog area by setting true / false.
setPositiveButton() It is used to set the positive button for alertdialog and

we can implement click event of positive button.
setNegativeButton() It is used to set the negative button for alertdialog and

we can implement click event of negative button.
setNeutralButton() It is used to set the neutral button for alertdialog and we

can implement click event of neutral button.
b. Membuat AlertDialog
Buatlah sebuah kelas baru dan beri nama ContohAlertDialog.
Berikutnya buatlah sebuah file layout XML baru dan beri nama
activity_alertdialog.xml, lalu isikan kodingan berikut:
<Button
android:id="@+id/btn_Proses"
android:layout_marginTop="200dp" />

CEP-CCIT FTUI
Pada baris kodingan di file layout XML diatas, kita membuat sebuah kontrol
Button untuk menjalankan sebuah aksi yang implementasinya ada di kelas
Activity. Isikan baris koding berikut pada kelas Activity yang telah dibuat
sebelumnya.
class ContohAlertDialog : AppCompatActivity() {

setContentView(R.layout.activity_alertdialog)
btn_Proses.setOnClickListener(View.OnClickListener {
val obj = AlertDialog.Builder(this)
obj.setTitle("Contoh Alert Dialog!")
obj.setMessage("Pesan Alert Dialog")
obj.setPositiveButton(android.R.string.yes) { dialog, which ->

Toast.makeText(applicationContext,
android.R.string.yes, Toast.LENGTH_SHORT).show()
}
obj.setNegativeButton(android.R.string.no) { dialog, which ->

android.R.string.no, Toast.LENGTH_SHORT).show()
}
obj.setNeutralButton("Nanti") { dialog, which ->

"Nanti", Toast.LENGTH_SHORT).show()
}
obj.show()
})
}
}
Pada baris koding diatas, kita membuat sebuah fungsi onClickListener yang
akan merespon aksi klik dari pengguna terhadap kontrol Button yang telah
kita buat sebelumnya.
Selanjutnya kita mendeklarasikan sebuah nilai bernama obj yang akan

menjadi objek dari kontrol AlertDialog. Kita juga mengatur tulisan yang
muncul pada AlertDialog dengan fungsi obj.setTitle() untuk judul dari
AlertDialog, serta fungsi obj.setMessage() untuk menentukan pesan yang
dimunculkan di AlertDialog.
Selanjutnya kita menentukan tombol yang akan kita munculkan dalam dialog
pop-up yang akan muncul, dalam kasus ini kita memunculkan tiga tombol,
yakni jumlah maksimum tombol yang bisa ditampung kontrol AlertDialog.
Tombol tersebut antara lain obj.setPositiveButton() untuk pilihan Yes,

obj.setNegativeButton() untuk pilihan No serta obj.setNeutralButton()
untuk pilihan yang bukan antara Yes maupun No.

CEP-CCIT FTUI
Berikut tampilan yang muncul saat program dijalankan:
4.5 Switch
Di Android, kontrol Switch merupakan elemen UI dengan dua status, yakni

ON atau OFF yang bisa diatur dengan menggeser tombol di aplikasi. Secara bawaan,
Switch dalam keadaan OFF, kita bisa merubah status bawaan ini dengan
memanfaatkan atribut android:checked=”true” di file layout XML.
a. Membuat Switch di file layout XML
Buatlah sebuah layout XML baru dengan nama activity_switch.xml, lalu

<Switch
android:id="@+id/sw_Pilihan"
android:switchMinWidth="56dp"
android:text="Pilih"

CEP-CCIT FTUI
Pada kodingan diatas, kita mengatur status bawaan dari kontrol Switch yang
dibuat menggunakan atribut android:checke=”true”, artinya kontrol Switch
yang kita buat memiliki status bawaan awal ON.
b. Membuat Switch di file Activity
Buatlah sebuah kelas Activity bernama ContohSwitch
Berikutnya modifikasi file layout XML yang telah dibuat sebelumnya seperti
berikut:
<LinearLayout
<Switch
android:id="@+id/sw_Pilihan"
android:text="Pilih Satu"
<Switch
android:id="@+id/sw_PilihanDua"
android:layout_marginTop="120dp" />
</LinearLayout>
Selanjutnya isikan baris koding berikut di file Activity

CEP-CCIT FTUI
class ContohSwitch : AppCompatActivity() {

setContentView(R.layout.activity_switch)
sw_PilihanDua.textOff = "MATI"
sw_PilihanDua.textOn = "MENYALA"
sw_PilihanDua.isChecked = true
sw_PilihanDua.text = "Pilih Dua"
}
}
c. Membuat Handle Click Events Switch
Tambahkan kodingan berikut kedalam kelas Activity yan telah dibuat

sebelumnya:
class ContohSwitch : AppCompatActivity() {
setContentView(R.layout.activity_switch)
sw_PilihanDua.textOff = "MATI"
sw_PilihanDua.textOn = "MENYALA"
sw_PilihanDua.isChecked = true
sw_PilihanDua.text = "Pilih Dua"
sw_Pilihan.setOnCheckedChangeListener {
buttonView, isChecked -> val pesan = "Pilih Satu Berubah Status: " +
if (isChecked) "ON" else "OFF"
}
sw_PilihanDua.setOnCheckedChangeListener {
buttonView, isChecked -> val pesan = "Pilih Dua Berubah Status: " +
if (isChecked) "MENYALA" else "MATI"
}
}
}
Berikut hasil tampilan program setelah dijalankan:

CEP-CCIT FTUI
android:checked It is used to specify the current state of switch

control

android:textOn It is used to set the text when toggle button is in

ON / Checked state.
android:textOff It is used to set the text when toggle button is in

OFF / Unchecked state.

CEP-CCIT FTUI

android:background It is used to set the background color for toggle

button control.

and bottom.
4.6 RatingBar
Kontrol terakhir yang akan kita bahas adalah RatingBar. Kontrol ini digunakan
untuk mendapatkan peringkat dari pengguna. RatingBar merupakan ekstensi dari
kontrol SeekBar dan ProgressBar yang menampilkan rating/ peringkat dalam bentuk
bintang dan mengizinkan pengguna untuk memberi nilai peringkat dengan cara
menyentuh atau melakukan klik pada bintang.
RatingBar akan selalu mengembalikan nilai dalam bentuk nilai berkoma

(floating value) seperti 1.0, 2.0, 2.5, 3.0, 3.5, dll. Untuk menentukan jumlah bintang
yang tampil kita bisa menggunakan atribut android:numStars di file layout XML.
Contoh penggunaan RatingBar ini adalah seperti saat memberi peringkat kualitas
dari sebuah film, dan masih banyak contoh penggunaan lainnya.
a. Membuat RatingBar di file layout XML
Buatlah sebuah layout XML baru dengan nama activity_ratingbar.xml lalu

ketikkan baris koding berikut ini:

CEP-CCIT FTUI

<RatingBar
android:id="@+id/rtb_Kualitas"
android:numStars="5"
android:rating="3.5"/>
<Button
android:id="@+id/btn_AmbilNilai"
android:layout_alignLeft="@+id/rtb_Kualitas"
android:layout_below="@+id/rtb_Kualitas"
android:text="Get Rating"/>
<TextView
android:id="@+id/txt_TampilNilai"
android:layout_alignLeft="@+id/btn_AmbilNilai"
android:layout_below="@+id/btn_AmbilNilai"
</RelativeLayout>
Pada baris koding diatas, kita menggunakan atribut android:numStars=”5”

untuk menampilkan lima buah gambar bintang untuk RatingBar, selain itu
kita juga mengatur agar saat aplikasi dijalankan, nilai bawaan adalah 3.5
dengan pengaturan pada atribut android:rating=”3.5”, sehingga hasil
tampilan aplikasi nantinya akan seperti berikut:

CEP-CCIT FTUI
android:numStars It is used to define number of stars to display.
android:rating It is used to set the default rating value for

ratingbar.
b. Mengambil Nilai RatingBar
Untuk menerima atau mendapatkan nilai dari kontrol RatingBar, kita bisa
menggunakan fungsi getNumStars() atau getRating().
Buatlah sebuah kelas Activity baru dengan bahasa Kotlin bernama

ContohRatingBar.
Selanjutnya, ketikkan baris koding berikut di kelas Activity yang telah dibuat
untuk implementasi kedua fungsi yang telah disebutkan sebelumnya.

CEP-CCIT FTUI
class ContohRatingBar : AppCompatActivity() {

setContentView(R.layout.activity_ratingbar)
btn_AmbilNilai.setOnClickListener(View.OnClickListener {
val jml_bintang = rtb_Kualitas.numStars
val peringkat = rtb_Kualitas.rating
txt_TampilNilai.text = "Peringkat Kualitas: "+peringkat+"/"+jml_bintang
})
}
}
Berikut adalah hasil tampilan program setelah dijalankan dan ketika

pengguna menekan tombol Beri Peringkat setelah mengisi peringkat dalam
bentuk gambar bintang.
android:numStars It is used to define number of stars to display.
android:rating It is used to set the default rating value for

ratingbar.
android:background It is used to set the background color for progress

bar.

CEP-CCIT FTUI

bottom of progress bar.
Latihan:
1. Buatlah sebuah data diri pengguna yang akan menerima masukan pengguna
berupa nama, email, alamat rumah, nomor telepon, jenis kelamin dan tanggal
lahir.
2. Tambahkan kontrol RatingBar agar pengguna bisa memberikan rating dari
pelayanan yang diterima.
3. Munculkan sebuah pesan yang menginformasikan bahwa rating yang
diberikan telah berhasil dikirimkan.

CEP-CCIT FTUI
BAB 5
Basis Data
Tujuan khusus :
Siswa dapat :
• Mengenal Basis Data pada Android

• Implementasi Basis Data Android

CEP-CCIT FTUI
BAB 4
Pengenalan Basis Data
Pada project Android biasanya kita menggunakan REST service untuk

menggunakan beberapa fungsi seperti GET, POST, DELETE, dll, untuk melakukan
pengiriman data, menerima data atau keduanya.
Namun, pada REST service kita harus memiliki koneksi ke back end dan hal
tersebut menjadi sedikit merepotkan ketika nama variabel yang kita gunakan di
aplikasi android berbeda dengan nama variabel yang disediakan oleh programmer
back end. Selain nama variabel, terkadang kita juga menjumpai perbedaan dalam
pembuatan path request yang tak jarang menjadi membingungkan.
Google memperkenalkan sebuah metoda baru yang disebut Google Firebase

yang memungkinkan kita untuk membuat back end kita sendiri agar lebih mudah
dipahami ketimbang harus mencocokkan dengan back end buatan programmer lain
yang tentunya akan memakan waktu dan menguras pikiran karena logika dan gaya
pembuatan program setiap orang pastilah berbeda-beda.
Firebase mirip dengan hosting, kita hanya perlu memilih servis yang kita
butuhkan, menghubungkan servis-servis tersebut ke aplikasi yang kita bangun
sehingga aplikasi selesai dengan sempurna. Back end di Firebase hanyalah salah satu
servis saja, Google Firebase juga menyediakan sebuah JSON seperti database yang
bisa kita gunakan untuk menyimpan dan membaca data. Berbeda dengan REST yang
menggunakan fungsi GET, POST, DELTE, dll, pada Firebase kita bisa langsung
terhubung ke database.
4.1 Autentikasi Firebase
Kebanyakan aplikasi membutuhkan identifikasi pengguna demi tujuan keamanan

data pengguna. Autentikasi Firebase menyediakan servis backend, easy-to-use SDKs
dan ready-made Library UI untuk melakukan autentikasi pengguna ke aplikasi.
Autentikasi yang dilakukan menggunakan passwords, nomor hp dengan
menggabungkan penyedia identitas seperti Google, Facebook, Twitter dan masih
banyak lagi.
Firebase merupakan sebuah library yang dibangun diatas SDK Autentikasi Firebase
yang menyediakan keunggulan seperti:

CEP-CCIT FTUI
• Multi Providers: Alur sign-in untuk email/password, link email,

autentikasi via telepon, Google sign-in, Facebook login, Twitter login
dan GitHub login.
• Account Management: Alur untuk melakukan handle terhadap
management akun seperti membuat akun dan me-reset password.
• Account Linking: Alur untuk menghubungkan akun pengguna secara
aman ke penyedia layanan identitas seperti yang telah disebutkan
sebelumnya.
• Anonymous User Upgrading: Alur untuk melakukan upgrade secara
aman untuk pengguna anonimous.
• Custom Themes: Mengatur tampilan dari FirebaseUI agar sesuai
dengan aplikasi yang dibangun.
• Smart Lock for Passwords: Secara otomatis terintegrasi dengan
password yang teah tersimpan di perangkat agar bisa melakukan sign-
in secara cepat.
Agar pengguna bisa masuk kedalam aplikasi, hal pertama yang perlu
dilakukana dalah mendapatkan kredensial autentikasi dari pengguna, baik berupa
alamat email dan password atau sebuah token Oauth dari penyedia identitas.
Berikutnya kredensial ini akan dikirim ke SDK Autentikasi Firebass dimana
selanjutnya servis backend akan melakukan verifikasi terhadap kredensial yang
dikirimkan lalu memberikan respon sukses atau gagal.
Setelah kita sukses melakukan login, kita bisa mengakses informasi terkait profil
dasar pengguna dan melakukan kontrol akses pengguna ke data yang tersimpan di
Firebase.
a. Setting Awal Firebase
Jika belum pernah menggunakan Firebase sebelumya, lakukan registrasi

Firebase di halaman https://firebase.google.com/
Berikutnya buatlah sebuah project di Android Studio atau gunakan project

yang sudah ada. Kali ini kita akan membuat sebuah project baru, beri nama
PerpusKita. Pastikan minimum API Level adalah 4.1 (Jelly Bean).
Rubahlah nama kelas Activity yang muncul otomatis menjadi

KoneksiFirebase.java, begitu juga dengan file layout XML yang otomatis
muncul, rubahlah menjadi activity_login.xml.

CEP-CCIT FTUI
Pada pengenalan Firebase ini, kita akan menggunakan CardView agar

tampilan aplikasi lebih menarik. Pertama, buatlah sebuah file XML baru di folder
drawable untuk menampung komponen desain yang kita inginkan pada CardView
kita nantinya. Lakukan klik kanan pada folder drawable lalu pilih New > Drawable
resource file, beri nama gradient_bg.xml, lalu isikan baris kodingan berikut.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#047507"
android:centerColor="#9ae630"
android:endColor="#f9fc3f"
android:angle="45"
></gradient>
</shape>
</item>
</selector>
Berikutnya kita beralih ke activity_login.xml yang telah dibuat lalu isikan

baris koidngan berikut.
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/gradient_bg"
tools:context=".MainActivity">
<android.support.v7.widget.CardView
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:cardCornerRadius="15dp"
app:cardElevation="20dp"
android:id="@+id/btnLogin"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#0d6109"
android:layout_marginBottom="50dp">
<TextView
android:text="Login"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/textView"
app:fontFamily="sans-serif"
android:textColor="@android:color/background_light"
CEP-CCIT FTUI app:layout_constraintVertical_bias="1.0"/>
</android.support.v7.widget.CardView>
Langkah selanjutnya adalah membuat sebuah kelas Activity baru bernama

Beranda.java, kelas ini akan menjadi halaman yang muncul jika pengguna
melakukan login dengan benar. Pada kelas Beranda isikan baris kodingan berikut.
class Beranda : AppCompatActivity() {

setContentView(R.layout.activity_beranda)
}
}
Pada baris koding diatas kita menggunakan layout baru untuk halaman
beranda bernama activity_beranda.xml, untuk itu buatlah sebuah layout kosong
baru dengan nama activity_beranda.xml.
Kembali ke kelas ActivityLogin, isikan baris koding berikut untuk melakukan

validasi pengguna.
class MainActivity : AppCompatActivity() {

btnLogin.setOnClickListener {
val email = txt_Email.text
val password = txt_Password.text
if (email != null) {
if (password != null) {
if (email.isEmpty()|| password.isEmpty()) {
Toast.makeText(this, "Masukkan Email dan Password",
return@setOnClickListener
}
}
}
if(email!!.equals("admin@gmail.com") ||
password!!.equals("admin")){
val progressDialog = ProgressDialog(this,
R.style.Theme_AppCompat_Light_Dialog)
progressDialog.isIndeterminate = true
progressDialog.setMessage("Loading...")
progressDialog.show()
val intent = Intent (this,Beranda::class.java)
finish()
}
}
}
}
Karena pada project kali ini kita menggunakan CardView, maka kita harus
memperkenalkan design di file build.gradel(Module: app) di dalam dependencies
sebagai berikut.
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'
implementation 'com.android.support:design:28.0.0'
ProgramtestImplementation
Internet-based System Automation
'junit:junit:4.12' 117
CEP-CCIT FTUI
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-
core:3.0.2'
}
Pada baris koding diatas, kita menambahkan implementation

‘com.android.support:design:28.0.0’ yang mana bagian 28.0.0 sesuai dengan API
yang kita gunakan sebagai compileSDKVersion.
Selanjutnya pada file build.gradel(Project:<nama_project>), kita

tambahkan baris koding berikut.
allprojects {
repositories {
google()
jcenter()
maven {url 'https://maven.google.com'}
maven {url 'https://jitpack.io'}
mavenCentral()
}
}
Terlihat pada baris kodingan diatas, kita menambahkan maven{url

‘https://maven.google.com’}, maven{url ‘https://jitpack.io’} serta fungsi
mavenCentral() agar produk maven dikenali oleh aplikasi yang kita bangun.
Jalankan program, maka akan muncul tampilan seperti berikut.
Langkah selanjutnya kita akan melakukan koneksi ke Firebase untuk project

PerpusKita yang telah dibuat. Pilihlah menu Tools>Firebase sehingga akan muncul
layar Assistant seperti berikut.

CEP-CCIT FTUI
Berikutnya pilih Authentication > Email and Password Authenticatin >

Connect to Firebase, pastikan komputer terhubung ke internet.
Jika muncul layar seperti berikut, pilih Create new Firebase Project lalu kilk
Connect to Firebase, tunggu hingga proses selesai.

CEP-CCIT FTUI
Setelah selasi, maka tampilan akan berubah seperti berikut, dibawah tombol
Connect to Firebase akan muncul tanda centang.
Setelah koneksi berhasil, klik Add Firebase Authentication to your app,

akan muncul layar seperti berikut, klik Accept Changes, tunggu hingga proses Sync
selesai.

CEP-CCIT FTUI
Jika proses selesai, maka tampilan akan seperti berikut, terdapat tanda
centang dibawah tombol Add Firebase Authentication to your app. Artinya,
Firebase Authentication telah berhasil ditambahkan kedalam aplikasi kita.

CEP-CCIT FTUI
Kita kembali ke kelas PerpusKita, kita akan lakukan modifikasi pada kelas ini.
Pada langkah sebelumnya kita melakukan autentikasi dengan alamat email dan
password static yang kita taruh di dalam kondisi di badan program.
Ubahlah bagian tersebut sehingga tampilan untuk fungsi setOnClickListener

akan menjadi seperti berikut.
class PerpusKita : AppCompatActivity() {

setContentView(R.layout.activity_login)
btnLogin.setOnClickListener {
if (txt_Email.text.toString() == "" && txt_Password.text.toString()
== "") {
Toast.makeText(this, "Masukkan Email dan Password",
return@setOnClickListener
}else{
val mAuth = FirebaseAuth.getInstance()
mAuth.signInWithEmailAndPassword(txt_Email.text.toString(),
txt_Password.text.toString())
.addOnCompleteListener{
if (!it.isSuccessful){
Toast.makeText(this, "Login Gagal",
return@addOnCompleteListener
val intent = Intent (this, PerpusKita::class.java)
}
else
Jika muncul error Unresolved letakkan
reference:"Login
Toast.makeText(this, kursor di baris yang
Sukses",
bewarna merah lalu tekan Alt+Enter.
val intent = Intent (this, Beranda::class.java)
Setelah tidak }ada kesalahan dalam baris program, buka browser dan masuk
.addOnFailureListener{
kembali ke halaman https://firebase.google.com/ lalu${it.message}")
Log.d("Main", "Login Gagal: pilih Go to Console dibagian
Toast.makeText(this, "Email/Password tidak tepat",
kanan atas, maka akan muncul project yang telah kita koneksikan ke Firebase.
}
Pilihlah project
} yang akan kita Develop, dalam kasus ini PerpusKita.
}
}
}

CEP-CCIT FTUI
Akan muncul sebuah halaman Dashboard project seperti berikut.
Klik menu Develop > Authentication sehingga akan muncul tampilan

berikut, pilih Set up sign-in method.

CEP-CCIT FTUI
Setelah memilih Set up sign-in method, akan muncul tampilan berikut.
Klik bagian Email/Password yang berada di posisi paling atas, akan muncul
sebuah layar pop-up baru seperti berikut.

CEP-CCIT FTUI
Dibagian Toogle paling atas, ubah menjadi Enable lalu klik Save.
Kembali ke manu Develop > Authentication, akan muncul tampilan sepetri

berikut.

CEP-CCIT FTUI
Klik tombol Add user untuk membuat pengguna baru agar bisa melakukan
login ke aplikasi kita.
Pengguna baru telah ditambahkan, jalankan kembali aplikasi di Android

Studio lalu lakukan login dengan menggunakan email dan password pengguna
yang sebelumnya kita tambahkan di akun Firebase.

CEP-CCIT FTUI
4.2 Real-time Firebase
Database Real-time Firebase adalah sebuah host cloud database. Data

disimpan dalam bentuk JSON dan disinkronkan secara real-time untuk setiap
pengguna yang terhubung, sehingga setiap perubahan pada data dapat ditampilkan
segera setelah data mengalami perubahan.
a. Membuat Create Data Anggota
Pada layout XML sebelumya, yakni activity_beranda.xml, lakukan modifikasi

seperti berikut.

CEP-CCIT FTUI
Activity_beranda.xml

tools:context=".PerpusKita">
android:id="@+id/cardView2">
<ImageView
app:srcCompat="@drawable/logo"
android:id="@+id/imageView"
app:layout_constraintVertical_bias="0.0"/>
android:id="@+id/btnLogin"
app:cardBackgroundColor="#0d6109"
android:layout_marginBottom="50dp">
<TextView
android:text="Tambah Data Anggota"
android:id="@+id/textView"
Program Internet-based System Automationapp:fontFamily="sans-serif" 128
CEP-CCIT FTUI android:textColor="@android:color/background_light"
Berikutnya buatlah sebuah layout XML baru dan beri nama

activity_tambahanggota.xml, rancanglah tampilan seperti berikut.
Halaman ini akan kita gunakan untuk menambahkan data anggota

PerpusKita. Berikut kodingan untuk membuat layout seperti diatas.

<ImageView
<android.support.design.widget.TextInputLayout
CEP-CCIT FTUI
Buatlah sebuah kelas Activity dengan nama TambahAnggota untuk

membaca layout activity_tambahanggota.xml. Lalu pada kelas Beranda
isikan baris kodingan berikut.
class Beranda : AppCompatActivity() {
setContentView(R.layout.activity_beranda)
btnAnggota.setOnClickListener {
val inte: Intent = Intent(this, TambahAnggota::class.java)
startActivity(inte)
}
}
}
Selanjutnya kita akan menghubungkan project ke Firebase Real-time, pilih

menu Tools > Firebase. Pada jendela Firebase, pilih Realtime Firebase >
Save and retrieve data.
Karena pada project sebelumnya kita trelah melakukan koneksi ke Firebase,

maka tampilan koneksi ke Firebase sudah dalam keadaan centang.
Selanjutnya pilih Add the Realtime Database to your app > Accept
Changes.
Peratama, lakukan inisialisasi database referensi Firebase kita sebagai berikut.
lateinit var ref : DatabaseReference
Setelahnya, isikan bari kodingan berikutr di kelas TambahAnggota.
class TambahAnggota : AppCompatActivity() {

private val mDatabase = FirebaseDatabase.getInstance()
private var mDatabaseReference = mDatabase.reference
Kembali ke Firebase lalu pilih project yang dibuat lalu pilih Database
setContentView(R.layout.activity_tambahanggota) > Realtime
btnAnggota.setOnClickListener {
Database. saveData()
}
}
private fun saveData() {

val nama: String = txt_Nama.text.toString()
val status = txt_Status.text.toString()
val agt = Anggota(nama, status)
mDatabaseReference = mDatabase.reference.child("agt")
mDatabaseReference.setValue(agt).addOnCompleteListener {
Toast.makeText(this, "Berhasil Simpan Data",
txt_Nama.setText("")
txt_Status.setText("")
}
Program}Internet-based System Automation 130
CEP-CCIT
} FTUI

CEP-CCIT FTUI
Pada bagian Rules, ubah nilai false menjadi true seperti berikut, agar penyimpanan
data kita adalah public, sehingga pengguna bisa melakukan simpan dan baca data.
Jalankan aplikasi, akan muncul tampilan halaman login, lakukan lagin dengan
data sebelumnya.
Klik tombol Tambahkan Data Anggota, akan muncul halaman untuk

menambahkan data anggota, tambahkan sebuah data lalu klik tombol Simpan.

CEP-CCIT FTUI
Buka Firebase di browser kembali dan masuk ke menu Database, akan

terlihat data yang baru kita tambahkan seperti gambar berikut.
b. Membuat Read Data Firebase
Setelah melakukan penyimpanan data, berikutnya kita akan membaca data

dari Database Firebase kita. Pertama buatlah sebuah layout XML baru dengan
nama activity_tampilanggota.xml lalu buatlah sebuah kelas activity baru

CEP-CCIT FTUI
dengan nama TampilAnggota. Pada layout activity_tampilanggota.xml,

tambahkan baris kodingan berikut.
tools:context=".TampilAnggota">
Berikutnya buatlah sebuah layout XML baru dengan nama
activity_anggota.xml lalu isikan baris kodingan berikut.
<ListView
android:orientation="horizontal"
android:id="@+id/listView"
android:padding="5dip">
app:layout_constraintBottom_toTopOf="parent"
<TextView android:layout_marginTop="8dp"
android:id="@+id/txt_Nama"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
Berikutnya buat sebuah kelas activity baru dengan nama AdapterAnggota
android:layout_below="@id/txt_Nama"
lalu isikan baris kodingan berikut.
class AdapterAnggota(val ctx: Context, val layout_id: Int, val daftar_anggota:
<TextView :
List<Anggota>)
android:id="@+id/txt_Panggilan"
ArrayAdapter<Anggota>(ctx, layout_id, daftar_anggota) {
overrideandroid:layout_width="wrap_content"
fun getView(position: Int, convertView: View?, parent: ViewGroup):
View { android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/txt_Status"
val layoutInflater: LayoutInflater = LayoutInflater.from(ctx)
val android:layout_alignBottom="@+id/txt_Status"
view: View = layoutInflater.inflate(layout_id, null)
val android:textColor="#343434"
nama = view.findViewById<TextView>(R.id.txt_Nama)
val status = view.findViewById<TextView>(R.id.txt_Status)
</RelativeLayout>
val panggilan = view.findViewById<TextView>(R.id.txt_Panggilan)
val agt = daftar_anggota[position]
nama.text = agt.nama
status.text = agt.status
panggilan.text = agt.panggilan
return view
}
}
CEP-CCIT FTUI
Tambahkan sebuah tombol baru di halaman activity_beranda.xml, sehingga

memiliki tampilan seperti berikut.
Berikutnya kita akan membuat sebuah kelas yang akan menjadi kelas
deklarasi variabel yang kita butuhkan sebagai komponen dari ListView yang
dibuat. Beri nama kelas Anggota dengan baris kodingan sebagai berikut.
class Anggota (var nama : String, var status: String, var panggilan: String) {
constructor() : this("", "", "") {
}
}
Pada langkah sebelumnya kita telah membuat sebuha tombol baru di layout
XML activity_beranda.xml yakni tombol Lihat Data Anggota. Agar tombol
memiliki aksi ketika pengguna melakukan aksi tekan, maka kita perlu
membuat sebuah kelas Activity baru yang akan melakukan proses sebagai
respon terhadap aksi pengguna. Buatlah sebuah kelas Activity baru dengan
nama TampilAnggota, lalu isikan baris kodingan berikut.

CEP-CCIT FTUI
class TampilAnggota : AppCompatActivity() {

lateinit var ref: DatabaseReference
lateinit var agt: MutableList<Anggota>
lateinit var listView: ListView

setContentView(R.layout.activity_tampilanggota)
ref = FirebaseDatabase.getInstance().reference
agt = mutableListOf()
listView = findViewById(R.id.lv_Anggota)
ref.addValueEventListener(object : ValueEventListener {
override fun onCancelled(p0: DatabaseError) {
}
override fun onDataChange(p0: DataSnapshot) {

if (p0!!.exists()) {
for (h in p0.children) {
val anggota = h.getValue(Anggota::class.java)
agt.add(anggota!!)
}
val adp = AdapterAnggota(applicationContext,
R.layout.activity_anggota, agt)
listView.adapter = adp;
}
}
})
}
}
Pada baris kodingan diatas, kita membuat tiga buah variabel dengan nama
ref, agt dan listView menggunakan keyword lateinit. Keyword lateinit berfungsi
untuk mendeklarasikan sebuah variabel yang secara eksplisit bisa dikatakan bahwa
kita memberitahu sistem bahwa variabel dengan keyword ini nantinya akan diberi
nilai, dalam artian tidak akan bernilai null. Berbeda dengan deklarasi variabel biasa
yang nilainya bisa saja menjadi null.
Variabel agt kita berikan nilai mutableListOf() yang artinya elemen dalam
variabel ini bisa ditambah dan dikurangkan. Kita memanggil fungsi
addValueEventListener pada variabel ref agar sistem tetap membaca query atau
database yang kita gunakan ketika terjadi perubahan. Pada fungsi ini, kita akan
melakukan override dua buah fungsi yakni onCancelled() dan onDataChange().
onCancelled() akan ter-trigger ketika terjadi kegagalan pada server, atau

keamanan maupun rules yang ada pada Firebase. Sedangkan onDataChange()
adalah fungsi yang akan dipanggil menggunakan snapshot sebuah data, snapshot
sendiri adalah data saat ini atau terupdate di lokasi penyimpanan data.

CEP-CCIT FTUI
Setelahnya lakukan sedikit modifikasi pada kelas Beranda.java agar tombol

Lihat Data Anggota yang kita buat menjalankan sebuah aksi, tambahkan baris
kodingan berikut.
btnLihat.setOnClickListener {
val inte: Intent = Intent(this, TampilAnggota::class.java)
startActivity(inte)
}
Setelah program dijalankan, akan muncul tampilan seperti berikut ketika

pengguna memilih tombol Lihat Data Anggota.
c. Membuat Update Data Firebase
Berikutnya kita akan membuat fungsi Update pada aplikasi yang telah kita
bangun. Tombol Update dan Delete (nantinya) akan kita tempatkan didalam setiap
item di ListView.
Pertama, modifikasi layout XML activity_anggota.xml, tambahkan kontrol

TextView seperti berikut.
<TextView
android:id="@+id/txt_Update"
android:text="Update"
android:background="#c7f5a9"

CEP-CCIT FTUI
Selanjutnya ganti baris koding pada Activity TampilAnggota seperti berikut:

val adp = AdapterAnggota(applicationContext, R.layout.activity_anggota, agt)
Ganti menjadi:
val adp = AdapterAnggota(this@TampilAnggota, R.layout.activity_anggota, agt)
Tujuannya adalah agar context yang kita gunakan berikutnya adalah context
dengan life-cycle dari kelas Activity TampilAnggota, tidak lagi context secara global
seperti saat kita menggunakan applicationContext, hal ini dikarenakan ketika kita
melakukan referensi ke komponen yang ada di Activity yang sama yakni
TampilAnggota (activity lama), dan activity lama tidak bisa melakukan referensi
data gerbage collection.
Apa itu gerbage collection? Gerbage collection adalah suatu teknik untuk
mendeteksi memori yang dialokasikan ke sebuah objek secara otomatis, memori
yang dialokasikan merupakan memori yang tidak bisa digunakan lagi di program
dan mengembalikan memori yang tadi digunakan.
Secara sederhananya, kita akan memunculkan layout baru untuk proses

update di activity yang sama, yakni TampilAnggota. Karena memorinya telah
digunakan untuk menampilkan item ListView sebelumnya, maka kita tidak bisa
menggunakan kembali context yang sama untuk activity jika menggunakan
applicationContext.
Berikut adalah table referensi perbedaan antara Application Context (global)

dan Activity Context.
Capability Application Activity

Show a Dialog NO YES
Start an Activity NO YES
Layout Inflation NO YES
Start a Service YES YES
Bind to a Service YES YES
Send a Broadcast YES YES
Register BroadcastReceiver YES YES
Load Resource Values YES YES

CEP-CCIT FTUI
Tambahkan baris koding agt.clear() seperti berikut untuk membersihkan

objek kita terlebih dahulu.
override fun onDataChange(p0: DataSnapshot) {
if (p0!!.exists()) {
agt.clear()
for (h in p0.children) {
Buatlah sebuah layout XML baru dengan nama activity_updateanggota.xml

dengan kodingan sebagai berikut.
<ImageView
android:id="@+id/txtNamaUpdate"
app:layout_constraintTop_toBottomOf="@+id/imageView"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:passwordToggleTint="#0d6109">
<android.support.design.widget.TextInputEditText
android:hint="Nama Anggota"
android:id="@+id/txt_NamaUpdate"
CEP-CCIT FTUI
android:textColorLink="@android:color/holo_green_dark"/>
</android.support.design.widget.TextInputLayout>
Sehingga akan diperoleh tampilan sebagai berikut.
Buatlah sebuah kelas Activity baru dengan nama UpdateAnggota lalu isikan
baris koding berikut.
class UpdateAnggota : AppCompatActivity() {
setContentView(R.layout.activity_updateaggota)
}
}
Langkah selanjutnya kita akan melakukan modifikasi pada kelas

AdapterAnggota sehingga bisa melakukan proses update. Tambahkan baris
kodingan berikut pada kelas Activity AdapterAnggota.

CEP-CCIT FTUI
Referensi
PT. Sentra Vidya Utama. October 10, 2016. Pengenalan Android. Accessed from:
https://sevima.com/pengenalan-android/ tanggal: August 02, 2019
Tutlane. Android Introduction. Diakses dari:

https://www.tutlane.com/tutorial/android/android-introduction pada 02 Agustus 2019.
raywenderlich.com. Firebase Tutorial for Android: Getting Started. Diakses dari:

https://www.raywenderlich.com/5114-firebase-tutorial-for-android-getting-started
tanggal: 14 Agustus 2019
Google. Firebase Authentication | Firebase. Diakses dari:

https://firebase.google.com/docs/auth tanggal 14 Agustus 2019
Appnimi Academy. Firebase Realtime Database and Kotlin Tutorial - Develop Cloud
Based Task List App. Diakses dari: https://appnimiacademy.com/firebase-realtime-
database-and-kotlin-tutorial-develop-cloud-based-task-list-app/ tanggal: August 15, 2019
Wunderman Thompson Mobile. Context, What Context? - by Dave Smith of Double

Encore diakses dari: https://wundermanthompsonmobile.com/2013/06/context/ pada
tanggal: 26 Agustus 2019

CEP-CCIT FTUI

AndroidAppDev

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

AndroidAppDev

Diunggah oleh

Hak Cipta:

Format Tersedia

Mobile Application on Android Platform

• Mengenal Platform Android

Program Internet-based System Automation 1

1.1 Pengenalan Android

1.2 Fitur-Fitur Android

• Merupakan Sistem Operasi open source dimana pengembang bisa melakukan

Program Internet-based System Automation 2

• Denfan memanfaatkan teknologi WIFI, seseorang mampu terkoneksi dengan

Awalnya Google meluncurkan versi pertama dari platform Android di tanggal 5

Program Internet-based System Automation 3

Tabel 1.1 Perkembangan Versi Android

Release Date Version API Level Version Name

February 9, 2009 Android 1.1 2 Banana Bread

April 30, 2009 Android 1.5 3 Cupcake

October 26, 2009 Android 2.0 5

December 3, 2009 Android 2.0.1 6 Eclair

January 12, 2009 Android 2.1 7

May 20, 2010 Android 2.2 8

January 18, 2011 Android 2.2.1 8

November 21, 2011 Android 2.2.3 8

December 6, 2010 Android 2.3 9

February 9, 2011 Android 2.3.1 9

September 2, 2011 Android 2.3.4 10

February 22, 2011 Android 3.0.x 11

May 10, 2011 Android 3.1.x 12 Honeycomb

July 15, 2011 Android 3.2.x 13

Program Internet-based System Automation 4

Release Date Version API Level Version Name

October 18,2011 Android 4.0 14

October 19, 2011 Android 4.0.1 14

February 4, 2012 Android 4.0.4 15

July 9, 2012 Android 4.1 16

July 23, 2012 Android 4.1.1 16

October 9, 2012 Android 4.1.2 16

November 13, 2012 Android 4.2 17 Jelly Bean

November 27, 2012 Android 4.2.1 17

February 11, 2013 Android 4.2.2 17

July 24, 2013 Android 4.3 18

October 31, 2013 Android 4.4 19

Android 4.4.1, Kitkat

October 17, 2014 Android 5.0 21

October 5, 2015 Android 6.0 23

August 22, 2016 Android 7.0 24 Nougat

Program Internet-based System Automation 5

Release Date Version API Level Version Name

October 4, 2016 Android 7.1 25

Untuk setiap versinya, Google membuat banyak perubahan dan memperkenalkan

Kotlin awalnya dikembangkan oleh JetBrains, perusahaan di balik inteliJ IDEA.

Kotlin sendiri merupakan sebuah bahasa pemrograman yang menjadi bahasa

Program Internet-based System Automation 6

• Mengenal GUI Android

Program Internet-based System Automation 7

2.1 Layout Tatap Muka Android (Android UI Layouts)

a. Mendeklarasikan elemen UI di XML

Program Internet-based System Automation 8

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

override fun onCreate(savedInstanceState: Bundle?) {

Program Internet-based System Automation 9

Program Internet-based System Automation 10

b. Membuat elemen UI pada runtime

Berikut contoh pembuatan elemen UI seperti TextView, EditText dan Button di

override fun onCreate(savedInstanceState: Bundle?) {

Ketika mendefinisikan kontrol UI di layout menggunakan file XML, kita perlu