BAB 1

Android Intro

Tujuan khusus :

Siswa dapat :

 Mengenal Platform Android

 Mengetahui Fitur dan Teknologi yang
Ditawarkan Android
 Mengetahui Sejarah Perkembangan
Android
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.
  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 :
 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 Honeycomb

 Release Date Version API Level Version Name

May 10, 2011 Android 3.1.x 12

July 15, 2011 Android 3.2.x 13

October 18,2011 Android 4.0 14

October 19, 2011 Android 4.0.1 14

Ice Cream
November 28, 2011 Android 4.0.2 14
Sandwich
December 16, 2011 Android 4.0.3 15

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

June 23, 2014 4.4.2, 4.4.3, 19
4.4.4

October 17, 2014 Android 5.0 21

Lollipop
March 09, 2015 Android 5.1 22
 Release Date Version API Level Version Name

October 5, 2015 Android 6.0 23

Marshmallow
December 7, 2015 Android 6.0.1 23

August 22, 2016 Android 7.0 24

Nougat
October 4, 2016 Android 7.1 25

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++.
 BAB 2
Android Layout

Tujuan khusus :

Siswa dapat :

 Mengenal GUI Android

 Mengenal Layout Android
 Memahami komponen GUI Android
 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.

<?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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"/>
<Button
android:id="@+id/getName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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)
}

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.

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.

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
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"
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" Jika
android:text="Nama" />
diperhatikan,
pada </LinearLayout> 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
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:

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

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:text="TextView Satu"
android:layout_marginTop="70dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/textView"/>
 Berikutnya buatlah sebuah kelas Activity baru dan beri nama ContohLinearLayout untuk
menampung layout XML yang telah kita buat. Berikut hasil tampilan program setelah dijalankan.

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.

layout_centerHorizontal If it specified “true”, the view will be horizontally

centre aligned within its parent.
 Attribute Description

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 isikan
baris koding berikut:
 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Tombol Satu" />
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Tombol Dua" />
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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:id="@+id/btn_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Tombol Empat" />
<Button
android:id="@+id/btn_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btn_2"
android:layout_centerHorizontal="true"
android:text="Tombol Lima" />
<Button
android:id="@+id/btn_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/btn_4"
android:layout_centerHorizontal="true"
android:text="Tombol Enam" />
<Button
android:id="@+id/btn_7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/btn_1"
android:layout_toRightOf="@+id/btn_1"
android:layout_alignParentRight="true"
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”.

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() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_relativelayout)
}
}

Hasil tampilan dari program setelah dijalankan adalah sebagai berikut.

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>.

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.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<TableRow android:background="#0079D6" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="No"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Judul"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Kategori"/>
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Pengkhianatan Seorang Bestie"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Novel"/>
</TableRow>
<TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Python for Newbie"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Buku Referensi"/>
</TableRow>
 <TableRow android:background="#DAE8FC" android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Design UI UX for E-Learning"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
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() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_tablelayout)
}
}

Berikut adalah hasil tampilan program setelah dijalankan.

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:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/img_BG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/book"/>
<TextView
android:id="@+id/txt_View1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:background="#4C374A"
android:padding="10dp"
android:text="Perpustakaan Kita"
android:textColor="#FFFFFF"
android:textSize="20sp"/>
<TextView
android:id="@+id/txt_View2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:background="#AA000000"
android:padding="10dp"
android:text="21/Aug/2017"
android:textColor="#FFFFFF"
android:textSize="18sp"/>
</FrameLayout>
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() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
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.
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.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/lv_anggota"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>

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() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
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
 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.

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.
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/lv_anggota"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
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.

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip">
<TextView
android:id="@+id/txt_Nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="17dp"/>
<TextView
android:id="@+id/txt_Status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txt_Nama"
android:layout_marginTop="7dp"
android:textColor="#343434"
android:textSize="14dp"/>
<TextView
android:id="@+id/txt_Panggilan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/txt_Status"
android:layout_alignBottom="@+id/txt_Status"
android:layout_alignParentRight="true"
android:textColor="#343434"
android:textSize="14dp"/>
</RelativeLayout>

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 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)
this.txtPanggilan = row?.findViewById<TextView>(R.id.txt_Panggilan)
}
}
 Pada baris kodingan diatas, kita membuat sebuah ViewHolder, yakni sebuah 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 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:

var anggotaDto = items[position]

viewHolder.txtNama?.text = anggotaDto.nama
viewHolder.txtStatus?.text = anggotaDto.status
viewHolder.txtPanggilan?.text = anggotaDto.panggilan

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:

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
}

Parameter terakhir adalah parent: ViewGroup untuk melakukan override kelas ViewGroup.

Berikut adalah kodingan lengkap kelas ContohCustomAdapter

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>) :
 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:

package com.example.aplikasikontrol

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.AdapterView
import android.widget.ListView
 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.

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.
 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.

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

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ContohGridView"
android:background="#ffffff">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
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.

package com.example.aplikasikontrol

class ContohItemFoto {
var judul : String? = null
var penulis : String? = null
var desc : String? = null
var foto: Int? =null
}
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:

package com.example.aplikasikontrol

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

private class ViewHolder(row: View?) {
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 viewHolder: ViewHolder
if (convertView == null) {
val inflater =
activity?.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
view = inflater.inflate(R.layout.activity_listbuku, null)
viewHolder = ViewHolder(view)
view.tag = viewHolder
} else {
view = convertView
viewHolder = view.tag as ViewHolder
}
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 fun kodingan
getItem(i:diatas
Int): bisa
Any? dilihat
{ 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!!) yang
override fun getItemId(i: Int): Long {
return i.toLong()
}
override fun getCount(): Int {
return items.size
}

}
artinya kita memanggil fungsi setImageResource untuk menentukan foto yang akan
dibaca program berada atau disimpan di variabel mana.

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.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/rl_content"
android:layout_below="@+id/img_Cover">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lbl_Judul"
android:textStyle="bold|italic"
android:textSize="18sp"
android:layout_centerHorizontal="true"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lbl_Penulis"
android:textStyle="bold"
android:layout_below="@+id/lbl_Judul"
android:layout_centerHorizontal="true"/>
</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.

package com.example.aplikasikontrol

import android.content.Intent
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_gridview.*

class ContohGridView : AppCompatActivity() {

var adapter: ContohAdapterFoto? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
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)

buku = ContohItemFoto()
buku.judul = "Android Kotlin"
buku.penulis = "Toma"
buku.foto = R.drawable.kotlin
buku.desc = ""
result.add(buku)

buku = ContohItemFoto()
 Pada baris koding diatas, penjelasannya juga sama dengan layout sebelumnya,
yang berbeda disini terletak pada baris:
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)
}

buku = ContohItemFoto()
buku.judul = "UI UX for E-Learning"
buku.penulis = "Afril"
buku.foto = R.drawable.uiux
buku.desc = ""
result.add(buku)

buku = ContohItemFoto()
buku.judul = "Robot Petak"
buku.penulis = "Toma"
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:

var result = ArrayList<ContohItemBuku>()

var buku: ContohItemBuku = ContohItemBuku()

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 = "IoT and Industry 4.0"
buku.penulis = "Mhd. Khalif"
buku.foto = R.drawable.iot
buku.desc = ""
result.add(buku)

buku = ContohItemFoto()
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:

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.

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#6b8a6c"
android:padding="10dp">
<ImageView android:id="@+id/img_Full"
android:layout_width="255dp"
 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.

package com.example.aplikasikontrol

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_detailbuku.*

class ContohDetailBuku : AppCompatActivity(){

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
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.
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.
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />

Berikutnya buatlah sebuah kelas Activity baru dengan nama ContohWebView lalu isikan
baris koding berikut.

class ContohWebView : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
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.

 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.

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#6b8a6c"
android:padding="10dp">
<WebView android:id="@+id/wv_CCIT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<WebView android:id="@+id/wv_URLCCIT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>

Buatlah kelas Activity baru dengan nama ContohWebViewURL, isikan baris koding
berikut.
class ContohWebViewURL : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
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 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.