0% menganggap dokumen ini bermanfaat (0 suara)

360 tayangan177 halaman

Modul Android Studio

Diunggah oleh

elymuliani8

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

0% menganggap dokumen ini bermanfaat (0 suara)

360 tayangan177 halaman

Modul Android Studio

Diunggah oleh

elymuliani8

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 177

ABSTRACT

Materi ini mencakup pengembangan aplikasi mobile

mulai dari membuat project, menginstal SDK,
mengkonfigurasi emulator atau perangkat fisik, hingga
mengembangkan aplikasi sederhana dengan
menggunakan platform Android Studio.

Hariman Bahtiar, M.Kom

MODUL PRAKTIKUM
PEMROGRAMAN MOBILE
Android Studio Dengan Bahasa
Pemrograman Kotlin
BAB 1.
APA ITU ANDROID STUDIO
Android Studio adalah Integrated Development Environment (IDE) atau software yang bisa
digunakan untuk mengembangkan aplikasi android.

1.1 Sejarah Singkat Android Studio

Software ini diperkenalkan pertama kali pada tahun 2013 di acara Google I/O Conference.
Android Studio merupakan software resmi yang didukung penuh oleh Google sebagai perusahaan
induk Sistem Operasi Android. IDE ini dikembangkan oleh JetBrains dan dirilis pertama kali ke
publik pada tahun 2014.
Sebelum Google meresmikan dan mendukung penuh Android Studio, Google sudah lebih dulu
mendukung Eclipse. Dimana dulunya Eclipse adalah software atau IDE yang digunakan oleh para
developer android untuk mengembangkan aplikasi android. Namun kini Google sudah
menghentikan dukungan penuh terhadap Eclipse.
Meskipun begitu Eclipse masih tetap bisa digunakan untuk mendevelop aplikasi android.

1.2 Fitur-fitur

Setelah mengetahui apa itu Android Studio, kita kenali apa saja fitur-fitur yang ada pada IDE
tersebut.
Dengan menggunakan Android Studio proses menciptakan aplikasi anroid menjadi lebih mudah.
Itu karena banyaknya fitur-fitur yang tersedia, diantaranya :
• Sistem Versi Gradle yang fleksibel
• Emulator yang cepat dan dilengkapi kaya fitur
• Lingkungan yang menyatu untuk mengembangkan aplikasi android bagi semua perangkat
android (Smartphone, Tablet, Smarttv, dan Smartwacth)
• Template kode dan integrasi dengan GitHub untuk membuat fitur aplikasi yang sama dan
mengimpor kode-kode contoh
• Alat pengujian dan kerangka kerja yang ekstensif
• Dukungan C++ dan NDK
• Dukungan Google Cloud Platform sehingga mempermudah saat pengintegrasian Google
Cloud Messaging dan App Engine
• Dan banyak lagi lainnya
1.3 Spesifikasi Komputer/ Laptop
Dikutip dari situs developer.android.com, spesifikasi minimal laptop atau komputer yang bisa
menjalankan Android Studio yaitu sebagai berikut :

1
1.3.1. OS Windows
• Menggunakan OS Microsoft® Windows® 7/8/10 (32- or 64-bit)
• Ram minimal 3 GB, yang direkomendasikan 8 GB RAM; tambahan 1 GB untuk menjalankan
Emulator Android
• Ruang disk yang tersedia minimal 2 GB, Namun yang direkomendasikan yaitu 4 GB (500
MB untuk IDE + 1.5 GB untuk Android SDK and emulator system image)
• Resolusi minimal yang digunakan adalah 1280 x 800

1.3.2. Mac OS
• Mac® OS X® 10.10 (Yosemite) atau lebih tinggi sampai 10.13 (macOS High Sierra)
• Ram minimal 3 GB, yang direkomendasikan 8 GB RAM; tambahan 1 GB untuk menjalankan
Emulator Android
• Ruang disk yang tersedia minimal 2 GB, Namun yang direkomendasikan yaitu 4 GB (500
MB untuk IDE + 1.5 GB untuk Android SDK and emulator system image)
• Resolusi minimal yang digunakan adalah 1280 x 800

1.3.3. OS Linux
• GNOME or KDE desktop
• Tested on Ubuntu® 14.04 LTS, Trusty Tahr (64-bit distribution capable of running 32-bit
applications)
• distribusi 64-bit yang mampu menjalankan aplikasi 32-bit
• GNU C Library (glibc) 2.19 atau yang lebih baru
• Ram minimal 3 GB, yang direkomendasikan 8 GB RAM; tambahan 1 GB untuk menjalankan
Emulator Android
• Ruang disk yang tersedia minimal 2 GB, Namun yang direkomendasikan yaitu 4 GB (500
MB untuk IDE + 1.5 GB untuk Android SDK and emulator system image)
• Resolusi minimal yang digunakan adalah 1280 x 800

1.4 Versi-versi Android Studio

Seperti aplikasi atau software komputer pada umumnya, Android Studio juga memiliki beberapa
versi. Dikutip dari Codepolitan.com beberapa versi dari Android Studio yaitu :

• Canary : Dengan menggunakan versi ini kita akan mendapatkan semua jenis rilis. Itu artinya
kita bisa menggunakan fitur baru saat baru diluncurkan tanpa harus menunggu lama.
Biasanya update untuk canary dirilis setiap minggu.
• Dev : Versy canari yang sudah teruji secara klinis dan beberapa waktu akan dipilih dan
menjadi versi Dev. Versi ini dipakai untuk menguji fitur baru secepat mungkin ke pengguna.
• Beta : Kalau kita ingin menggunakan Android Studio dengan fitur yang baru tapi resiko
bugnya kecil maka gunakanlah versi beta. Versi ini dirilis biasanya sudah mempunyai fitur-
fitur baru tapi dengan bug yang sedikit.
• Stable : Versi ini adalah versi yang semua fiturnya sudah diuji secara penuh melalui versi-
versi diatas. Jadi versi ini memiliki stabilitas yang tinggi dan performanya sangat baik.

2
Versi Mana yang Harus dipilih ?
Jika kita pemula dan ingin mendapatkan versi yang minim masalah maka gunakanlah versi Stable.
Bahkan situs resmi Android Studio juga menyarankan dan mengarahkan kita untuk menggunakan
versi ini. Adapun versi stable yang terbaru saat ini adalah versi 3.5 (Agustus 2019). Sebelumnya
juga terdapat versi 2.3, 3.1, 3.2, dan banyak lagi lainnya.

1.5 Bahasa Pemrograman yang digunakan di Android Studio

Android Studio sendiri sudah mendukung beberapa bahasa pemrograman untuk mengembangkan
aplikasi android. Beberapa bahasa pemrograman yang bisa kita pakai untuk membuat aplikasi
android dan support menggunakan IDE Android Studio yaitu :

• Java : Pemula disarankan untuk menggunakan bahasa pemrograman Java.

• Kotlin : Jika sudah memahami Java bisa dilanjutkan dengan menggunakan bahasa
pemrograman ini.
• C++ : Namun jika kamu sudah terbiasa ngoding dengan bahasa pemrograman C++, bisa
menggunakan bahasa ini untuk mengembangkan aplikasi androidmu.

Jika ingin membuat aplikasi android menggunakan React Native ataupun Dart kita juga harus
menggunakan Android Studio, karena kita memerlukan Emulatornya untuk mengetes atau me run
aplikasi yang dibuat dengan React Native atau Dart.

1.6 Cara Mendownload dan Menginstall Android Studio

Software Android Studio bisa kita dapatkan secara gratis (free). Kita bisa langsung mengunduhnya
pada tautan resmi developer android. Berikut linknya : https://developer.android.com/studio
Sebelum menginstall Android Studio pastikan kita juga telah menginstall JDK pada laptop atau
komputer yang kita gunakan untuk mengembangkan aplikasi android.
Adapun langkah-langkah menginstall Android Studio yaitu :
• Buka file Android Studio yang sudah di download tadi
• Setelah itu klik next ketika muncul jendela welcome Android Studio setup
• Selanjutnya pasang semua komponen Android Studio dengan cara klik next
• Tentukan lokasi penyimpanan software Android Studio dan SDKnya
• Lalu klik Install, bila perlu ceklis terlebih dahulu do not create shortcuts
• Pastikan koneksi internetmu tersambung dengan baik dan stabil kecepatannya, tunggu
sampai proses installasi selesai. Lalu klik next kemudian klik finish
• Setelah itu pilih do not import settings dan launcher, software Android Studio akan
dimunculkan. Tunggu sampai proses download SDK selesai
• Akan muncul tampilan welcome Android Studio
• Klik next dan pilih mode install mau standard atau custom
• Klik next lalu pilih tema android studionya

3
• Setelah itu akan ada proses penginstallan komponen SDK, lalu klik next
• Klik finish lalu tunggu proses download komponen selesai
• Klik finish dan jendela awal Android Studio akan terbuka

1.7 Bagian-bagian Android Studio

Android Studio memiliki beberapa bagian-bagian penting pada Antar mukanya. Selain itu saat kita
membuat aplikasi dengan Android Studio setidaknya kita harus memahami apa saja struktur folder
atau project yang ada di IDE tersebut.

1.8 Cara Menginstall JDK

• Download JDK 8 (atau bisa disesuaikan dengan versi terbaru) dari situs oracle atau langsung
klik link download pilih sesuai byte OS yang kamu gunakan

• Jika sudah terdownload buka file kemudian klik next, seperti gambar berikut

4
• Pilih feature (ikuti gambar berikut) kemudian klik next

• Tunggu progress sampai dengan selesai

5
• Tentukan lokasi penyimpanan folder jdk dimana nantinya disimpan, lalu klik next

• Proses instalasi akan dimulai dan tunggu sampai selesai

6
• Jika proses instalasi sudah selesai silahkan klik close

1.9 Setting atau Konfigurasi JDK (PATH)

Supaya Android Studio bisa kita gunakan dengan normal maka setelah menginstall JDK kita harus
melakukan konfigurasi PATH JDKnya.
Langkah-langkahnya sebagai berikut.
• Copykan alamat tempat folder penginstallan jdk dengan cara : Computer > local Disk (c) >
program files > java > folder jdk > bin > javac

• Setelah itu klik kanan pada Computer > Properties > Advanced System Settings

7
• Pilih Environment Variable

• Cari variable Path dan pastekan lokasi penyimpanan folder jdk pada variable value lalu klik
ok

8
Instalasi dan Setting Path JDK sudah selesai. Selanjutnya kita akan belajar menginstall Android
Studio.

1.10 Cara Install Android Studio

Pada saat proses installasi Android Studio, komputer atau laptop harus terkoneksi internet yang
stabil, karena akan ada proses pendownloadan komponen-komponen pendukungnya.
Langsung saja berikut ini adalah langkah-langkah menginstall Android Studio :

• Langkah pertama silahkan Unduh android studio pada situs resminya.

• Centang anda menyetujui, lalu klik unduh / download

• Dan ikuti perintah selanjutnya sampai dengan proses download selesai, buka file exenya
• Tunggu sampai proses verifying selesai

9
• klik next setelah tampilan Install Android Studio muncul

• klik next untuk memasang semua komponen dari Android Studio

10
• Tentukan lokasi penyimpanan Android Studio dan SDKnya. Defaultnya tersimpan di Local
Disk (C) lalu klik Next

• Klik Install

• Tunggu sampai proses penginstallan selesai, klik next

11
• dan klik finish

Sampai disini proses install Android Studio belum selesai. Kita lanjutkan sekarang !!

12
• Akan ada dua pilihan seperti gambar dibawah ini, karena baru pertama menginstall IDE
Android Studio maka klik pilihan yang kedua yaitu Do not import settings.

• Maka akan muncul launcer aplikasi Android Studio.

• Pastikan laptop atau komputer yang digunakan terhubung dengan internet. Tunggu sampai
proses download SDK selesai.

13
• Setelah download SDK selesai maka akan muncul tampilan welcome Android Studio

• Klik next lalu pilih Mode Install (disini saya memilih custom ), kemudian klik next

14
• Pilih theme UI Android Studionya.

• Disini akan dilakukan install komponen SDK, (ceklis android virtual device) lalu klik next

15
• Klik Finish, dan tunggu proses download selesai (pastikan komputer/ laptop terhubung ke
internet)

• Proses download komponen, jika sudah klik finish.

16
• Jika proses download telah selesai maka akan ditampilkan jendela awal Android Studio

1.11 Cara Install SDK Android Studio

Setelah installasi android studio selesai bukan berarti kita langsung bisa menggunakan IDE Android Studio
begitu saja, melainkan kita juga harus menginstall SDK.

1.11.1. Apa itu SDK ?

SDK (Standard Development Kit ) merupakan kumpulan dari beberapa alat, komponen, juga
platform untuk mengembangkan aplikasi berbasis android.
SDK juga merupakan bagian dari java atau biasanya disebut juga Java SDK. SDK sendiri melingkupi
:
• Java Complier (Javac)
• Java Virtual Machine (Java Runtime Environment/JRE).
• Java Class Libraries (class yang dapat digunankan untuk menghasilkan program java)
• Java Debugger
• Dokumentasi (dalam paket download terpisah)
SDK diperlukan untuk membuat program aplikasi yang menggunakan bahasa pemrograman java. Mengapa
kita perlu menginstall SDK untuk mengembangkan aplikasi android ? Karena bahasa utama untuk membuat
aplikasi android secara native yaitu bahasa pemrograman java.

1.11.2. Cara Install SDK Android Studio

Setelah menginstall Android Studio, jendela awal yang terbuka yaitu seperti pada gambar berikut
:

17
• Pada jendela diatas pilih dan Klik Configure kemudian klik SDK Manager

• Maka akan tampil jendela seperti gambar dibawah

18
• Disini saya akan contohkan menginstall SDK Android API 28. Caranya yaitu ceklis pada SDK
yang ingin kita install lalu pilih Apply.

• Klik ok untuk melakukan proses download dan install SDK. Pastikan komputer atau laptop
terkoneksi dengan internet yang stabil.

19
• Tunggu sampai proses download dan install selesai. Lalu klik finish.

Sampai disini install SDK sudah selesai. Lalu bagaimana jika kita sudah terlanjur membuat project
baru tanpa install SDK terlebih dahulu ?
Tenang pilihan lain untuk menampilkan SDK Manager yaitu dengan cara :

• Klik tools pada menu bar yang ada di android studio

20
• Lalu pilih Android > Klik SDK Manager

• Setelah itu akan ditampilkan jendela SDK Manager yang gambarnya sudah di tampilkan di
atas.
Itulah cara install SDK Android Studio. Sebentar atau lamanya waktu yang dibutuhkan untuk
menginstall SDK tergantung dari kecepatan dan stabilnya koneksi internet yang kita digunakan.

21
BAB 2.
CARA MEMBUAT ” Hello World ” PADA ANDROID STUDIO
Setelah menginstall Android Studio pada bagian sebelumnya maka kali ini kita akan membuat
project pertama android yaitu aplikasi android ” Hello World “menggunakan Android Studio

2.1 Membuat Aplikasi Android ” Hello World”

Langsung saja ikuti langkah-langkah berikut untuk membuat project aplikasi android ” Hello World
“.

2.1.1. Buka atau Jalankan IDE Android Studio

Langkah pertama yang harus dilakukan adalah membuka aplikasi android studio yang sudah
terinstall di laptop atau komputermu. Pada tutorial ini kita menggunakan android studio versi
terbaru yaitu 3.5.

2.1.2. Buat Project Baru

Klik Start a New Android Project untuk mulai membuat project baru pada android studio.

22
2.1.3. Pilih Activity
Disadur dari android.developer.com Activity (aktivitas) adalah sebuah komponen aplikasi yang
menyediakan layar yang digunakan pengguna untuk berinteraksi guna melakukan sesuatu,
misalnya memilih nomor ponsel, mengambil foto, mengirim email, atau menampilkan peta.
Tiap Activity (aktivitas) diberi sebuah jendela untuk menggambar antarmuka penggunanya.
Jendela ini biasanya mengisi layar, namun mungkin lebih kecil daripada layar dan mengambang di
atas jendela lain.
Pilih Empty Activity kemudian klik Next

23
2.1.4. Konfigurasi Project
Setelah memilih activity, langkah selanjutnya yaitu kita harus memberikan konfigurasi pada project
android yang kita buat. Adapun yang harus di konfigurasi yaitu :

• Name : isikan nama project

• Package name : isikan nama perusahaan atau pembuat aplikasi
• Save location : tentukan file project aplikasi android ini akan disimpan pada direktori apa
• Language : pilih bahasa pemrograman yang akan digunakan, Java atau Kotlin. Pada tutorial ini kita
menggunakan Java
• Minimum API level : tentukan API berapa yang akan digunakan. Pada bulan April 2017 google
merilis daftar versi OS yang banyak digunakan tahun 2017 dan hasilnya Lollipop (OS versi 5.0
dengan SDK 21/22) ada di urutan nomor satu. Jadi untuk minimum SDKnya kita pilih API 15 yaitu
untuk versi OS Ice Cream Sandwich ke atas.

24
Supaya gak bingung silahkan lihat contoh gambar di atas. Jika sudah klik tombol finish.

2.1.5. Proses Gradle

Tunggu sampai proses gradle selesai. Ini biasanya memakan waktu beberapa menit. Lama atau
sebentarnya tergantung spesifikasi ram dan prosesor yang digunakan pada komputer atau
laptopmu.

25
2.1.6. Workspace Android Studio
Jika proses Gradle telah selesai, maka akan terbuka workspace project Android Studio seperti
gambar dibawah ini ( pertama kali terbuka adalah tab MainActivity.java. Disinilah nantinya kita
memberikan kode-kode java/kotlin agar aplikasi bisa melakukan sebuah perintah).

2.1.7. Atur Layout activity_main.xml

Klik Tab activity_main.xml yang digunakan untuk pengaturan layout dari aplikasi android yang
kita buat ( nantinya semua widget mulai dari membuat teks, tombol, gambar dan lainnya diatur di
activity_main.xml)

26
2.1.8. Jalankan Aplikasi Android
Di project pertama ini kita hanya membuat aplikasi untuk menampilkan Hello World jadi tidak
menambahkan kode apapun ada activity_main.xml dan MainActivity.java.
Setelah step 1 sampai dengan 5 selesai. Saatnya kita menjalankan ( running ) aplikasi android
pertama yang sudah dibuat. Untuk merunningnya sendiri bisa menggunakan :

• Emulator bawaan android studio (AVD)

• Langsung ke smartphone android yang kita punya
• Emulator genymotion
• Emulator Nox App Player

Di tutorial ini saya menggunakan Emulator Nox App Player untuk menjalankan project androidnya.
Maka hasilnya :

27
BAB 3.
Cara Menjalankan Project Android Langsung Di
Smartphone
Android studio sebetulnya sudah menyediakan emulator yang cukup baik untuk merunning
aplikasi. Tapi jika spek laptopnya rendah saat dijalankan emulator ini cukup lama merunning
aplikasinya dan juga bisa bikin laptop lemot. Adapun emulator-emulator lain yang bisa menjadi
alternative supaya running aplikasi jadi lebih cepat dan gak bikin laptop lemot yaitu genymotion,
bluestack dan lainnya.
Lalu bisakah running / menjalankan aplikasi yang kita buat di android studio tanpa menggunakan
emulator ? yupp sangat bisa. Kali ini kita akan bahas cara merunning project atau aplikasi langsung
di smartphone android dan memunculkannyadi laptop menggunakan vysor.
Vysor yaitu ekstensi dari google chrome dan bukan emulator, fungsinya digunakan untuk mirroring screen
smartphone ke laptop. Jadi kita bisa mengakses penuh hape kita di layar laptop.

3.1 Aktifkan Mode Pengembang/ developer

Sebelum menginstall vysor pastikan mode developer hape android diaktifkan dengan cara :

• Klik pengaturan > Tentang Perangkat > ketuk 7 kali pada nomor versi (setelah itu biasanya
ada notifikasi mode developer telah aktif). Disini saya menggunakan smartphone samsung
j1

• Mengaktifkan Mode Developer

28
• Ketuk pilihan pengembang

• Buka mode pengembang lalu aktifkan > dan ceklis mendebug usb

• Mendebug USB

3.2 Install Vysor di Laptop

Mulai install vysor yaitu :

29
• Buka google chrome

Tampilan google chrome

• Pilih setting > extensions

Setting extensions

• Klik get more extensions > ketik vysor pada kolom pencarian > kemudian cari.

Extension vysor

• Klik add to chrome > add app > tunggu sampai dengan selesaià dan akan muncul gambar
seperti ini

30
Extension vysor sudah tampil

3.3 Install Vysor di Smartphone

• Jika sudah terinstall di pc, download dan install vysor di hape android yang akan kita
gunakan. Kemudian hubungkan hape android menggunakan kabel usb ke laptop biasanya
vysor langsung mendeteksi dan menampilkan hape android yang terhubung.
• Jika vysor tidak terbuka secara otomatis, buka aplikasi vysor di google chrome atau di
pencarian start. klik view ketika jendela aplikasi vysor sudah tampil

Vysor setelah di install

Tampilan di smartphone

3.4 Running/ jalankan aplikasi

• Running aplikasi dengan cara klik run pada android studio > pilih tipe smartphone android
lalu klik ok

31
• Running project melalui vysor

• Jika berhasil maka akan tampil seperti dibawah ini :

• Hasil akhir

32
BAB 4.
Mengenal Interface dan Struktur Folder Project
Interface dan struktur folder project android studio – Kali ini kita akan mempelajari interface
(tampilan antar muka ) juga struktur folder pada IDE Android Studio supaya pas ngoding nanti
menjadi lebih mudah tidak meraba-raba feature ini itu untuk apa :D.

4.1 Antar Muka (Interface ) Android Studio

Berikut ini merupakan bagian-bagian penting dari Antar Muka (Interface) Android Studio.

4.2 Menu Bar

Seperti pada aplikasi lain Menu bar merupakan bagian antar muka (interface) pengguna yang
berisi perintah dan opsi yang dapat dipilih untuk mengeksekusi suatu perintah.

4.3 Tool Bar

Dengan tool bar kita bisa mempercepat perintah pada sebuah aplikasi.

33
4.4 Struktur Project
Pada bagian ini akan ditampilkan folder-folder dari sebuah project aplikasi android yang dibuat
menggunakan android studio. Lebih jelasnya di sub Struktur Folder Project Android Studio

4.5 Pallete
Di pallete tersedia semua tools untuk membuat aplikasi android dan enaknya lagi untuk
menggunakannya cukup dengan mendrag and drop ke design android.

4.6 Design Android

Tempat ini digunakan untuk mendesign layout aplikasi dengan cara drag and drop (tidak
mengetikan script xml)

34
4.7 Component Tree
Setelah kita menggunakan tools yang ada di pallete maka akan ditampilkan pada component
tree misal kita mendrag TextView (widget untuk membuat teks) ke design android. Maka nanti
ditampilkan di component tree TextView.

4.8 Properties
Disini akan ditampilkan pengaturan-pengaturan dari komponen yang digunakan untuk design
aplikasi. Jika TextView maka akan ditampilkan untuk mengatur warna, size dan lainnya.

35
4.9 tatus Bar
Menampilkan proses pada Android Studio. Proses Loading, Error, dan lainnya.

4.10 Struktur Folder Project Android Studio

Berikut adalah struktur folder project pada Android Studio :

36
4.10.1. Manifests
AndroidManifest.xml : File ini digunakan untuk melakukan beberapa pengaturan seperti

• Nama aplikasi
• Icon aplikasi
• Theme style
• User permission (jika membuat aplikasi yang membutuhkan akses hardware smartphone ataupun
koneksi internet )

Adapun kode-kode default pada AndroidManifest.xml yaitu :

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

37
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>

4.10.2. Java
MainActivity.java : digunakan untuk memberikan perintah agar aplikasi melakukan sesuatu
menggunakan bahasa pemrograman java.
Defaultnya MainActivity.java sebagai berikut :

package badoystudio.com.aninterface;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

38
4.10.3. res drawable
Folder yang digunakan untuk memasukan gambar pendukung aplikasi yang kita buat baik berupa
icon ataupun lainnya

4.10.4. res layout

activity_main.xml : digunakan utuk pengaturan layout untuk interface utama pada aplikasi
android yang kita buat.

4.10.5. mipmap
Folder ini digunakan untuk memasukan gambar berupa icon. Icon default aplikasi yang kita buat
juga diambil dari folder ini.

4.10.6. values

• colors.xml : file ini berisi kode-kode untuk pengaturan warna. Warna status bar, teks, ataupun
lainnya. Defaultnya sebagai berikut.

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

• dimens.xml : digunakan untuk pengaturan margin aplikasi. Defaultnya seperti dibawah ini.

39
• strings.xml : digunakan untuk pengaturan teks-teks aplikasi yang kita buat. Contoh teks yang
digunakan utnuk nama aplikasi seperti dibawah ini.

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

• styles.xml : digunakan untuk memberikan nama warna setelah kode-kode warna dimasukan atau
disetting pada color.xml. File ini juga bisa disebut theme dasar dari aplikasi android.

</resources>

40
BAB 5.
AKTIVITY
5.1 Tujuan
Codelab ini bertujuan untuk mengimplementasikan komponen Activity pada aplikasi pertama yang Anda
bangun. Harapannya aktifitas ini dapat memberi gambaran yang jelas tentang cara kerja activity.
Codelab pertama adalah dengan membuat aplikasi yang dapat menghitung volume balok. Seperti ini
tampilannya.

5.2 Logika Dasar

Melakukan input ke dalam obyek EditText → melakukan validasi input → melakukan perhitungan volume
balok ketika tombol hitung diklik.

5.3 Codelab Membuat Proyek Baru

41
Hai! Pasti sudah tidak sabar ya untuk memulai membuat aplikasi pertama kalian. Sebelum mulai lebih
lanjut, ada video menarik nih buat teman-teman supaya bisa mendapatkan gambaran terlebih dahulu
bagaimana proses pembuatan aplikasi pertama. Silakan dicek ya!
Okay, jika sudah dapat gambarannya, yuk kita lanjut untuk bikin aplikasinya. Cuss!
1. Buat proyek baru dengan klik File → New → New Project pada Android Studio Anda atau
Anda bisa memilih Start a new Android Studio project di bagian dashboard.

2. Pada bagian ini kita akan memilih tipe activity awal dari template yang telah disediakan. Saat ini
Android Studio sudah menyediakan berbagai macam template activity dari yang paling
sederhana hingga yang paling kompleks seperti:

42
Selain itu, Anda juga bisa memilih target device mana yang akan dibuat seperti Phone and
Tablet, Wear OS, TV, Android Auto atau Android Things.

43
Saat ini kita pilih tipe Empty Activity untuk belajar dari yang paling dasar, lalu klik Next untuk
melanjutkan.

3. Selanjutnya masukkan nama aplikasi dan nama package aplikasi Anda. Sebaiknya jangan
sama dengan apa yang ada di contoh, karena ini berfungsi sebagai id dari aplikasi yang Anda buat.
Kemudian Anda bisa menentukan lokasi proyek yang akan Anda buat. Setelah itu pilih tipe
gawai/peranti (device) untuk aplikasi beserta target minimum SDK yang akan digunakan. Pilihan
target Android SDK akan mempengaruhi banyaknya peranti yang dapat menggunakan aplikasi. Di
sini kita memilih nilai minimum SDK kita pasang ke Level 21 (Lollipop). Klik Finish untuk
melanjutkan.

44
4. Tampilan layar Anda akan seperti contoh di bawah ini:

5. Di sebelah kanan Anda adalah workspace di mana Activity Anda berada dan bernama
MainActivity dengan layout-nya activity_main.xml. Di sebelah kiri Anda terdapat struktur
proyek, di mana nanti kita akan banyak menambahkan berbagai komponen baru, asset dan
library. Untuk lebih mengenal Android Studio lebih dalam silakan baca materi ini
https://developer.android.com/studio/intro/index.html.
Selanjutnya kita akan mulai melakukan pengkodean aplikasi atau lebih enaknya disebut ngoding. Berikut
flow umumnya:

1. Ngoding Layout untuk user interface aplikasi.

2. Ngoding Activity untuk menambahkan logika aplikasi.

Untuk mengoptimalkan proses pengetikan, Anda dapat memanfaatkan code completion dengan menekan
ctrl + space. Android Studio juga akan otomatis mengimpor package dari komponen yang digunakan.

5.4 Codelab Layouting

5.4.1. Menambahkan Code Sederhana pada Layout Activity

1. Silakan pilih berkas activity_main.xml pada workspace Anda
(res/layout/activity_main.xml).

45
Pastikan project window pada pilihan Android seperti di bawah ini.

1. Maka akan ada tampilan seperti ini, kemudian pilih tab Code di sebelah pojok kanan atas.

Ubah layout dasar dari ConstraintLayout menjadi LinearLayout seperti berikut:

46
Selanjutnya tambahkan baris-baris yang dicetak tebal di bawah ini. Berikut adalah contoh cara
menuliskannya.

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

47
6. android:padding="16dp"
7. android:orientation="vertical">
8.
9. <TextView
10. android:layout_width="match_parent"
11. android:layout_height="wrap_content"
12. android:text="Panjang" />
13.
14. <EditText
15. android:id="@+id/edt_length"
16. android:layout_width="match_parent"
17. android:layout_height="wrap_content"
18. android:inputType="numberDecimal"
19. android:lines="1" />
20.
21. <TextView
22. android:layout_width="match_parent"
23. android:layout_height="wrap_content"
24. android:text="Lebar" />
25.
26. <EditText
27. android:id="@+id/edt_width"
28. android:layout_width="match_parent"
29. android:layout_height="wrap_content"
30. android:inputType="numberDecimal"
31. android:lines="1" />
32.
33. <TextView
34. android:layout_width="match_parent"
35. android:layout_height="wrap_content"
36. android:text="Tinggi" />
37.
38. <EditText
39. android:id="@+id/edt_height"
40. android:layout_width="match_parent"
41. android:layout_height="wrap_content"
42. android:inputType="numberDecimal"
43. android:lines="1" />
44.
45. <Button
46. android:id="@+id/btn_calculate"
47. android:layout_width="match_parent"
48. android:layout_height="wrap_content"
49. android:text="Hitung" />
50.
51. <TextView
52. android:id="@+id/tv_result"
53. android:layout_width="match_parent"
54. android:layout_height="wrap_content"

48
55. android:gravity="center"
56. android:text="Hasil"
57. android:textSize="24sp"
58. android:textStyle="bold" />
59. </LinearLayout>

Perlu diperhatikan root layout (tag layout terluar) yang dipakai di sini adalah LinearLayout. Jika kita
menggunakan Android Studio versi 3 ke atas, secara default root yang dipakai adalah ConstraintLayout.
Agar sesuai dengan latihan ini, kita tinggal menggantinya menjadi LinearLayout. Untuk Layout akan
dibahas nanti pada modul yang berbeda. Jadi ikuti saja dulu ya!
2. Perhatikan bahwa ada warning berwarna kuning pada atribut android:text di layout tersebut.

Ini karena kita melakukan hardcoding (menuliskan teks secara langsung) pada nilai string-nya. Ini
merupakan praktik yang kurang baik karena seharusnya kita menuliskan semua teks pada berkas
res/values/strings.xml dan setelah itu baru memanggilnya.

Okey, mari kita hilangkan warning tersebut dengan menekan Alt+Enter (option + return pada Mac)
atau menekan lampu kuning yang muncul pada attribut android:text. Akan muncul dialog seperti ini, pilih
extract string resource.

3. Kemudian akan muncul dialog seperti di bawah ini. Sesuaikan dengan nama yang ada.

49
Atau bisa juga melihat animasi berikut:

50
4. Fungsi extract string resource akan secara otomatis menambahkan nilai dari
android:text ke dalam berkas res/values/strings.xml.

Lakukan hal yang sama pada setiap text lainnya. Jika kita buka berkas strings.xml yang ada di
folder res/value, maka isinya akan menjadi seperti ini:

1. <resources>
2. <string name="app_name">BarVolume</string>
3. <string name="width">Lebar</string>
4. <string name="height">Tinggi</string>
5. <string name="calculate">Hitung</string>
6. <string name="result">Hasil</string>
7. <string name="length">Panjang</string>
8. </resources>

5. Maka kode di dalam activity_main.xml akan menjadi seperti ini:

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

51
17. android:layout_height="wrap_content"
18. android:inputType="numberDecimal"
19. android:lines="1" />
20.
21. <TextView
22. android:layout_width="match_parent"
23. android:layout_height="wrap_content"
24. android:text="@string/width" />
25.
26. <EditText
27. android:id="@+id/edt_width"
28. android:layout_width="match_parent"
29. android:layout_height="wrap_content"
30. android:inputType="numberDecimal"
31. android:lines="1" />
32.
33. <TextView
34. android:layout_width="match_parent"
35. android:layout_height="wrap_content"
36. android:text="@string/height" />
37.
38. <EditText
39. android:id="@+id/edt_height"
40. android:layout_width="match_parent"
41. android:layout_height="wrap_content"
42. android:inputType="numberDecimal"
43. android:lines="1" />
44.
45. <Button
46. android:id="@+id/btn_calculate"
47. android:layout_width="match_parent"
48. android:layout_height="wrap_content"
49. android:text="@string/calculate" />
50.
51. <TextView
52. android:id="@+id/tv_result"
53. android:layout_width="match_parent"
54. android:layout_height="wrap_content"
55. android:gravity="center"
56. android:text="@string/result"
57. android:textSize="24sp"
58. android:textStyle="bold" />
59. </LinearLayout>

6. Jika Anda perhatikan, hasil layout sementara akan menjadi seperti ini:

52
Selain menggunakan code seperti di atas, Anda juga dapat membuat layout dengan
menggunakan design. Untuk tutorialnya dapat Anda lihat di video berikut:

7. Setelah selesai mendesain aplikasi, silakan coba jalankan aplikasi dengan memilih menu Run
→ Run ‘app’ dari menu bar.

Selain cara di atas, Anda juga dapat menekan icon berikut di toolbar:

Kemudian akan muncul pilihan seperti ini:

53
Itu tandanya ADB (Android Debugger) pada peranti yang Anda punya telah terhubung dengan
Android Studio. Jika Anda tidak memiliki peranti, maka Anda dapat menggunakan emulator.

Pilih OK untuk menjalankan dan tunggu hingga proses building dan instalasi APK selesai. Jika
sudah, seharusnya hasilnya akan seperti ini:

54
Saat ini aplikasi telah tampil, namun ketika Anda coba untuk memasukkan angka dan klik tombol
Hitung, aplikasi tidak akan merespons. Hal ini karena kita belum menambahkan logika kode
pada MainActivity

5.4.2. Codelab Kode Logika

Menambahkan Kode Logika Sederhana pada MainActivity.

1. Selanjutnya setelah selesai, lanjutkan dengan membuka berkas MainActivity dan lanjutkan
ngoding baris-baris di bawah ini.
Tambahkan beberapa variabel yang akan digunakan untuk menampung View.

Catatan:
Perhatikan bagaimana cara menuliskan kodenya. Biasakan menekan Enter ketika mengetik
supaya komponen di-import secara otomatis, kecuali nama variabel yang Anda tentukan sendiri
seperti edtWidth harus diketik satu per satu.

55
2. Kemudian inisiasi variabel yang telah kita buat dengan menambahkan kode berikut di dalam
metode onCreate.

3. Akan muncul baris merah pada kata this. Hal ini karena ketika kita menggunakan
setOnClickListener(this), maka kita perlu menambahkan interface View.OnClickListener di kelas
MainActivity. Silakan klik di atas baris merah tersebut, kemudian tekan tombol Alt
+ Enter (option + return pada Mac) atau menekan lampu merah yang muncul lalu
pilih aksi berikut untuk implement interface.

Maka secara otomatis akan ada penambahan kode pada kelas MainActivity seperti berikut ini:

56
4. Jika terdapat baris merah seperti ini:

Jangan khawatir! Silakan klik di atas baris merah tersebut, kemudian tekan tombol Alt
+ Enter (option + return pada Mac) atau menekan lampu merah yang muncul lalu
pilih implement methods (Java) atau implement members (Kotlin).

Maka secara otomatis akan ada penambahan metode onClick di kelas MainActivity. Setelah
itu, tambahkan kode berikut ke dalam metode onClick:

1. override fun onCreate(savedInstanceState: Bundle?) {

2. super.onCreate(savedInstanceState)
3. setContentView(R.layout.activity_main)
4.
5. ...
6. }
7.
8. override fun onClick(v: View?) {
9. if (v?.id == R.id.btn_calculate) {
10. val inputLength = edtLength.text.toString().trim()
11. val inputWidth = edtWidth.text.toString().trim()
12. val inputHeight = edtHeight.text.toString().trim()

57
13.
14. val volume = inputLength.toDouble() *
inputWidth.toDouble() * inputHeight.toDouble()
15. tvResult.text = volume.toString()
16. }
17. }

5. Akhirnya kelas MainActivity akan memiliki kode seperti berikut ini:

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

2. private lateinit var edtWidth: EditText
3. private lateinit var edtHeight: EditText
4. private lateinit var edtLength: EditText
5. private lateinit var btnCalculate: Button
6. private lateinit var tvResult: TextView
7.
8. override fun onCreate(savedInstanceState: Bundle?) {
9. super.onCreate(savedInstanceState)
10. setContentView(R.layout.activity_main)
11.
12. edtWidth = findViewById(R.id.edt_width)
13. edtHeight = findViewById(R.id.edt_height)
14. edtLength = findViewById(R.id.edt_length)
15. btnCalculate = findViewById(R.id.btn_calculate)
16. tvResult = findViewById(R.id.tv_result)
17.
18. btnCalculate.setOnClickListener(this)
19. }
20.
21. override fun onClick(v: View?) {
22. if (v?.id == R.id.btn_calculate) {
23. val inputLength = edtLength.text.toString().trim()
24. val inputWidth = edtWidth.text.toString().trim()
25. val inputHeight = edtHeight.text.toString().trim()
26.
27. val volume = inputLength.toDouble() *
inputWidth.toDouble() * inputHeight.toDouble()
28. tvResult.text = volume.toString()
29. }
30. }
31. }

6. Setelah selesai, silakan jalankan aplikasi kembali. Jika sudah, seharusnya hasilnya akan seperti
ini:

58
Silakan masukkan nilai panjang, lebar, dan tinggi kemudian tekan tombol Hitung dan hasilnya
akan ditampilkan di objek textview tvResult. Namun masih ada sedikit masalah di sini, yaitu Anda
tetap melakukan proses perhitungan walaupun salah satu nilainya kosong. Hal ini akan
menyebabkan aplikasi force close karena perhitungan tidak dapat diproses. Maka untuk
mengatasinya Anda akan menggunakan percabangan untuk mengecek apakah masing-masing
EditText kosong atau tidak.

7. Silakan buka kembali kelas MainActivity. Tambahkan kode berikut ke dalam metode onClick
sebelum melakukan perhitungan.

1. override fun onClick(v: View?) {

2. if (v?.id == R.id.btn_calculate) {
3. val inputLength = edtLength.text.toString().trim()
4. val inputWidth = edtWidth.text.toString().trim()
5. val inputHeight = edtHeight.text.toString().trim()
6.
7. var isEmptyFields = false
8.
9. if (inputLength.isEmpty()) {
10. isEmptyFields = true

59
11. edtLength.error = "Field ini tidak boleh kosong"
12. }
13. if (inputWidth.isEmpty()) {
14. isEmptyFields = true
15. edtWidth.error = "Field ini tidak boleh kosong"
16. }
17. if (inputHeight.isEmpty()) {
18. isEmptyFields = true
19. edtHeight.error = "Field ini tidak boleh kosong"
20. }
21.
22. if (!isEmptyFields) {
23. val volume = inputLength.toDouble() * inputWidth.toDouble() *
inputHeight.toDouble()
24. tvResult.text = volume.toString()
25. }
26. }
27. }

8. Akhirnya kelas MainActivity akan memiliki kode seperti berikut ini:

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

60
29. if (inputLength.isEmpty()) {
30. isEmptyFields = true
31. edtLength.error = "Field ini tidak boleh kosong"
32. }
33. if (inputWidth.isEmpty()) {
34. isEmptyFields = true
35. edtWidth.error = "Field ini tidak boleh kosong"
36. }
37. if (inputHeight.isEmpty()) {
38. isEmptyFields = true
39. edtHeight.error = "Field ini tidak boleh kosong"
40. }
41.
42. if (!isEmptyFields) {
43. val volume = inputLength.toDouble() * inputWidth.toDouble() *
inputHeight.toDouble()
44. tvResult.text = volume.toString()
45. }
46. }
47. }
48. }

9. Jalan kembali aplikasi Anda dengan memilih menu Run → Run ‘app’ atau shortcut Shift +
F10. Cobalah langsung menekan tombol HITUNG tanpa mengisi EditText, maka aplikasi Anda
tidak akan force close dan akan muncul peringatan bahwa "Field ini tidak boleh kosong".

61
10. Apakah kita sudah selesai? Belum! Masih ada yang kurang. Ketika nilai volume sudah dihitung
dan kemudian terjadi pergantian orientasi (portrait-landscape) pada peranti, maka hasil
perhitungan tadi akan hilang.

Untuk mengatasinya, tambahkan metode onSaveInstanceState() pada MainActivity dan

sesuaikan seperti berikut:

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

2.
3. private lateinit var edtWidth: EditText
4. private lateinit var edtHeight: EditText
5. private lateinit var edtLength: EditText
6. private lateinit var btnCalculate: Button
7. private lateinit var tvResult: TextView
8.
9. companion object {
10. private const val STATE_RESULT = "state_result"
11. }
12.
13. override fun onCreate(savedInstanceState: Bundle?) {
14. ...
15. }
16.
17. override fun onSaveInstanceState(outState: Bundle) {
18. super.onSaveInstanceState(outState)
19. outState.putString(STATE_RESULT, tvResult.text.toString())
20. }
21.
22. ...
23. }

Catatan:

Karena onSaveInstanceState adalah class yang ada di superclass AppCompatActivity, Anda bisa membuat
fungsi secara otomatis dengan hanya mengetikkan huruf onSave... dan pilih yang hanya memiliki satu
parameter.

62
Kemudian tambahkan juga beberapa baris berikut pada baris terakhir metode onCreate.

11. Silakan jalankan kembali aplikasinya. Ulangi proses perhitungan seperti sebelumnya. Kemudian
ganti orientasi peranti Anda. Jika sudah benar maka hasil perhitungan tidak akan hilang.

5.4.3. Bedah Kode

5.4.3.1. Pembahasan tentang layout xml

Layout merupakan user interface dari suatu activity. Layout dituliskan dalam format xml (extensible
markup language).

1. xml version="1.0" encoding="utf-8"?>

Baris ini mengidentifikasi bahwa berkas ini berformat xml.

1. xmlns:android="http://schemas.android.com/apk/res/android"

63
Kode di atas menandakan namespace yang digunakan dalam keseluruhan berkas xml ini.

5.4.3.2. Macam Views

Di sini kita menggunakan beberapa komponen user interface yang disebut view. Di antaranya:

• TextView : Komponen view untuk menampilkan teks ke layar

• EditText : Komponen view untuk memberikan input teks
• Button : Komponen view untuk melakukan sebuah aksi klik
• LinearLayout : Komponen view bertipe viewgroup yang menjadi parent dari semua sub
komponen view (sub view) di dalamnya. Komponen ini bersifat sebagai kontainer untuk
komponen lain dengan orientasi secara vertikal atau horizontal.

Cara membaca :

1. <TextView

2. android:layout_width="match_parent"

3. android:layout_height="wrap_content"

4. android:text="@string/calculate"

5. android:layout_marginBottom="16dp"/>

Komponen di atas adalah sebuah TextView. Perhatikan gambar di bawah ini. Warna ungu menandakan
namespace yang digunakan; warna biru adalah atribut dari komponen dan warna hijau adalah nilai dari
atribut. Penjelasannya seperti di bawah ini:

• match_parent: Ini berarti bahwa ukuran dimensi sebuah View disesuaikan dengan ukuran layar
secara horizontal jika pada layout_width dan vertikal jika pada layout_height.
• wrap_content : Ini berarti bahwa ukuran dimensi sebuah View disesuaikan dengan ukuran
konten di dalamnya baik secara horizontal pada layout_width dan vertikal jika pada
layout_height.

64
• @string/calculate: value calculate berasal dari berkas strings.xml yang bisa Anda lihat dengan
cara menekan dan tahan tombol Ctrl (atau command) + arahkan kursor ke atasnya dan kemudian
klik sekali. .

•
Penggunaan centralize resource value akan memudahkan Anda sewaktu mengembangkan aplikasi
Android. Cara tersebut digunakan agar Anda tidak menulis nilai yang sama berulang-ulang.

5.4.3.3. Apa itu ‘@+id/’ ?

Salah satu contoh penerapan penggunaan @+id/ sebagai berikut:

1. <Button
2. android:id="@+id/btn_calculate"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:text="@string/calculate"/>

Penjelasannya sebagai berikut:

1. android:id="@+id/btn_calculate"

Jika kita memberikan id pada sebuah view maka kita telah memberikan identifier untuk view tersebut.
Pemberian id ini dimaksudkan agar kita bisa melakukan manipulasi/pengendalian pada level logic di
komponen seperti activity atau fragment.
Id di atas akan diciptakan di berkas R dan disimpan dalam bentuk hexa bertipe data integer public static
final int btn_calculate=0x7f0b0057.

65
Acuan untuk menyusun tampilan pada relativelayout akan dibahas pada modul selanjutnya.

5.4.3.4. Pembahasan tentang Logika Kode

Kode logika dituliskan ke dalam kelas Java atau Koltin. Di sinilah semua aktifitas dari suatu aplikasi
berjalan.

Menandakan bahwa kelas Java / Kotlin di atas merupakan sebuah activity karena inherit ke
superclass bernama AppCompatActivity.

66
5.4.3.5. OnClickListener

Ini adalah listener yang kita implementasikan untuk memantau kejadian klik pada komponen tombol
(button)

5.4.3.6. Views

Kode di atas mendeklarasikan semua komponen view yang akan dimanipulasi. Kita deklarasikan secara
global agar bisa dikenal di keseluruhan bagian kelas.

5.4.3.7. OnCreate

1. override fun onCreate(savedInstanceState: Bundle?) {

2. super.onCreate(savedInstanceState)
3. setContentView(R.layout.activity_main)
4.
5. edtWidth = findViewById(R.id.edt_width)
6. edtHeight = findViewById(R.id.edt_height)
7. edtLength = findViewById(R.id.edt_length)
8. btnCalculate = findViewById(R.id.btn_calculate)
9. tvResult = findViewById(R.id.tv_result)
10.
11. btnCalculate.setOnClickListener(this)
12. }

Metode onCreate() merupakan metode utama pada activity. Di sinilah kita dapat mengatur layout xml.
Semua proses inisialisasi komponen yang digunakan akan dijalankan di sini. Pada metode ini kita
casting semua komponen view yang kita telah deklarasikan sebelumnya, agar dapat kita manipulasi.

67
5.4.3.8. SetContentView

Maksud baris di atas adalah kelas MainActivity akan menampilkan tampilan yang berasal dari layout
activity_main.xml.

5.4.3.9. Casting View

Maksud dari baris di atas adalah obyek EditTextedtWidth disesuaikan (cast) dengan komponen EditText
ber-ID edt_width di layout activity_main.xml melalui metode findViewById().

5.4.3.10. SetOnClickListener

Kita memasang event click listener untuk obyek btnCalculate sehingga sebuah aksi dapat dijalankan
ketika obyek tersebut diklik. Keyword this merujuk pada obyek Activity saat ini yang telah
mengimplementasikan listener OnClickListener sebelumnya. Sehingga ketika btnCalculate diklik, maka
fungsi onClick akan dipanggil dan melakukan proses yang ada di dalamnya.

5.4.3.11. Mengambil value dari EditText

1. val inputLength = edtLength.text.toString().trim()
2. val inputWidth = edtWidth.text.toString().trim()
3. val inputHeight = edtHeight.text.toString().trim()

Sintaks .text.toString() di atas berfungsi untuk mengambil isi dari sebuah EditText kemudian
menyimpannya dalam sebuah variabel. Tambahan .trim() berfungsi untuk menghiraukan spasi jika ada,
sehingga nilai yang didapat hanya berupa angka.

68
5.4.3.12. Cek inputan yang kosong

1. var isEmptyFields = false

2.
3. if (inputLength.isEmpty()) {
4. isEmptyFields = true
5. edtLength.error = "Field ini tidak boleh kosong"
6. }
7. if (inputWidth.isEmpty()) {
8. isEmptyFields = true
9. edtWidth.error = "Field ini tidak boleh kosong"
10. }
11. if (inputHeight.isEmpty()) {
12. isEmptyFields = true
13. edtHeight.error = "Field ini tidak boleh kosong"
14. }

Sintaks .isEmpty() berfungsi untuk mengecek apakah inputan dari Editext itu masih kosong. Jika iya,
maka kita akan menampilkan pesan error dengan menggunakan .setError("Field ini tidak boleh
kosong") dan mengganti variabel Boolean isEmptyField menjadi true supaya bisa lanjut ke proses
selanjutnya.

5.4.3.13. Menampilkan data ke TextView

1. if (!isEmptyFields) {
2. val volume = inputLength.toDouble() * inputWidth.toDouble() *
inputHeight.toDouble()
3. tvResult.text = volume.toString()
4. }

Sintaks !isEmptyFields memiliki arti "jika semua inputan tidak kosong". Jika kondisi tersebut terpenuhi,
maka langkah selanjutnya yaitu melakukan proses perhitungan. Karena yang didapat dari EditText berupa
String maka Anda perlu mengkonversinya terlebih dahulu dengan cara toDouble(). Langkah terakhir yaitu
menampikan hasil perhitungan pada TextView tvResult dengan menggunakan .text. Di sini dapat kita lihat
bahwa kita perlu merubah datanya yang sebelumnya Double menjadi String dengan menggunakan
toString() karena untuk menampilkan data dengan .text harus berupa String.

5.4.3.14. Pembahasan SaveInstanceState

1. override fun onSaveInstanceState(outState: Bundle) {

2. super.onSaveInstanceState(outState)
3. outState.putString(STATE_RESULT, tvResult.text.toString())
4. }

69
Perhatikan metode onSaveInstanceState. Di dalam metode tersebut, hasil perhitungan yang ditampilkan
pada tvResult dimasukkan pada bundle kemudian disimpan isinya. Untuk menyimpan data disini
menggunakan konsep Key-Value, dengan STATE_RESULT sebagai key dan isi dari tvResult sebagai
value. Fungsi onSaveInstanceState akan dipanggil secara otomatis sebelum sebuah Activity hancur. Di
sini kita perlu menambahkan onSaveInstanceState karena ketika orientasi berubah, Activity tersebut akan
di-destroy dan memanggil fungsi onCreate lagi, sehingga kita perlu menyimpan nilai hasil perhitungan
tersebut supaya data tetap terjaga dan tidak hilang ketika orientasi berubah.

1. if (savedInstanceState != null) {
2. val result = savedInstanceState.getString(STATE_RESULT)
3. tvResult.text = result
4. }

Pada onCreate inilah kita menggunakan nilai bundle yang telah kita simpan sebelumnya pada
onSaveInstanceState. Nilai tersebut kita dapatkan dengan menggunakan Key yang sama dengan saat
menyimpan, yaitu STATE_RESULT. Kemudian kita isikan kembali pada tvResult.

70
BAB 6.
TEORI INTENT
Intent adalah mekanisme untuk melakukan sebuah action dan komunikasi antar komponen aplikasi
misal activity, services, dan broadcast receiver. Ada tiga penggunaan umum intent dalam aplikasi Android
yaitu:

• Memindahkan satu activity ke activity lain dengan atau tidak membawa data.
• Menjalankan background service, misalnya melakukan sinkronisasi ke server dan menjalankan
proses berulang (periodic/scheduler task).
• Mengirimkan obyek broadcast ke aplikasi yang membutuhkan. Misal, ketika aplikasi
membutuhkan proses menjalankan sebuah background service setiap kali aplikasi selesai
melakukan booting. Aplikasi harus bisa menerima obyek broadcast yang dikirimkan oleh
sistem Android untuk event booting tersebut.

Intent memiliki dua bentuk yaitu:

6.1 Explicit Intent

Adalah tipe Intent yang digunakan untuk menjalankan komponen dari dalam sebuah aplikasi. Explicit
intent bekerja dengan menggunakan nama kelas yang dituju misal com.dicoding.activity.DetailActivity.
Umumnya intent ini digunakan untuk mengaktifkan komponen pada satu aplikasi.

Lalu mengapa disebut Explicit Intent? Hal ini karena tujuannya sudah jelas (explicit), misal dari
MainActivity menuju ke DetailActivity. Tidak ada pilihan lain.

Berikut adalah contoh kode dari gambaran Explicit Intent di atas:

71
1. val moveIntent = Intent(this@MainActivity, DetailActivity::class.java)
2. startActivity(moveIntent)

6.2 Implicit Intent

Adalah tipe intent yang tidak memerlukan detail nama kelas yang ingin diaktifkan. Model ini
memungkinkan komponen dari aplikasi lain bisa merespon request intent yang dijalankan.

Penggunaan tipe intent ini umumnya diperuntukan untuk menjalankan fitur/fungsi dari komponen
aplikasi lain. Contohnya ketika kita membutuhkan fitur untuk mengambil foto. Daripada membuat sendiri
fungsi kamera, lebih baik kita menyerahkan proses tersebut pada aplikasi kamera bawaan dari peranti
atau aplikasi kamera lain yang telah terinstal sebelumnya di peranti.

Hal yang sama misalnya ketika kita membutuhkan fungsi berbagi konten. Kita bisa memanfaatkan intent
untuk menampilkan aplikasi mana saja yang bisa menangani fitur tersebut.

Implementasi implicit intent ini akan sangat memudahkan bagi pengembang agar tetap fokus pada
proses bisnis inti dari aplikasi yang dikembangkan.

Lalu mengapa disebut Implicit Intent? Hal ini karena tujuannya masih belum jelas (implicit), misalnya
Anda ingin membuka gallery. Maka pilihannya yaitu Anda bisa menggunakan default gallery atau
menggunakan Google Photos. Jika ada aplikasi lainnya yang bisa menangani aksi ini, maka aplikasi itu pun
akan muncul.

72
Berikut adalah contoh kode dari gambaran Implicit Intent di atas:

6.3 Tujuan
Codelab ini menitikberatkan pada implementasi intent untuk melakukan perpindahan dari activity ke
activity lain, dengan atau tidak membawa data. Beberapa bagian dari codelab ini akan menjawab
beberapa pertanyaan umum dalam pengembangan aplikasi Android sebagai berikut:

• Bagaimana berpindah dari satu activity ke activity lain?

• Bagaimana berpindah dari satu activity ke activity lain dengan membawa data?
• Menjalankan komponen di aplikasi lain untuk keperluan membuka browser atau melakukan
pemanggilan melalui aplikasi telepon bawaan?

Codelab selanjutnya adalah dengan membuat aplikasi yang dapat menerapakan kegunaan intent. Seperti
ini tampilannya.

73
6.4 Logika Dasar
Berpindah dari satu Activity ke Activity lain dengan membawa data. Activity asal akan mengirimkan
data melalui Intent dan Activity tujuan akan menerima data yang dikirimkan.

6.4.1. Codelab Intent Sederhana

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

2. Selanjutnya kita akan membangun antarmuka (interface) seperti ini:

3. Kondisikan activity_main.xml menjadi seperti ini :

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

74
7. android:padding="16dp">
8.
9. <Button
10. android:id="@+id/btn_move_activity"
11. android:layout_width="match_parent"
12. android:layout_height="wrap_content"
13. android:layout_marginBottom="16dp"
14. android:text="@string/move_activity" />
15. </LinearLayout>

4. Tambahkan juga resource string-nya. Tambahkan semua string yang akan digunakan di project ini.
Buka berkas strings.xml yang ada di folder res/value dan tambahkan kode berikut ini.

1. <resources>
2. <string name="app_name">MyIntentApp</string>
3. <string name="move_activity">Pindah Activity</string>
4. <string name="move_with_data">Pindah Activity dengan
Data</string>
5. <string name="dial_number">Dial a Number</string>
6. <string name="data_received">Data Diterima</string>
7. <string name="this_is_moveactivity">Ini MoveActivity</string>
8. </resources>

5. Kemudian masuk ke MainActivity, tambahkan beberapa baris kode yang berfungsi untuk
memperkenalkan button yang sudah ditambahkan di layout seperti ini:

1. override fun onCreate(savedInstanceState: Bundle?) {

2. super.onCreate(savedInstanceState)
3. setContentView(R.layout.activity_main)
4.
5. val btnMoveActivity: Button =
findViewById(R.id.btn_move_activity)
6. }

6. Lalu tambahkan beberapa baris yang berfungsi untuk menambahkan event onClick pada button
btnMoveActivity seperti ini.

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

2.
3. override fun onCreate(savedInstanceState: Bundle?) {
4. super.onCreate(savedInstanceState)
5. setContentView(R.layout.activity_main)
6.
7. val btnMoveActivity: Button =
findViewById(R.id.btn_move_activity)
8. btnMoveActivity.setOnClickListener(this)
9. }
10.

75
11. override fun onClick(v: View?) {
12. when (v?.id) {
13. R.id.btn_move_activity -> {
14. }
15. }
16. }
17. }

7. Button btnMoveActivity akan memiliki fungsi untuk berpindah Activity ke Activity lain. Sekarang
kita buat Activity baru dengan cara sebagai berikut: Klik kanan di package utama aplikasi
package name → New → Activity → Empty Activity.

Lalu isikan MoveActivity pada dialog. Ketika sudah klik Finish. Jangan lupa untuk memastikan bahasa
yang digunakan sudah sesuai dengan yang anda gunakan sebelumnya.

76
Untuk menandakan bahwa perpindahan activity berhasil, silakan tambahkan satu TextView dan
kondisikan activity_move.xml menjadi seperti berikut

8. Setelah Activity tujuan sudah berhasil diciptakan, sekarang saatnya menambahkan suatu Intent
pada method onClick() di MainActivity.java menjadi sebagai berikut.

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

2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/re
s/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:padding="16dp">
7. <TextView
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:text="@string/this_is_moveactivity" />
11. </RelativeLayout>

9. Setelah Activity tujuan sudah berhasil diciptakan, sekarang saatnya menambahkan suatu Intent
pada method onClick() di MainActivity.java menjadi sebagai berikut.

1. override fun onClick(v: View?) {

2. when (v?.id) {
3. R.id.btn_move_activity -> {
4. val moveIntent = Intent(this@MainActivity,
MoveActivity::class.java)
5. startActivity(moveIntent)
6. }
7. }
8. }

10. Selesai! Langkah pertama untuk memindahkan satu Activity ke Activity lain sudah selesai,
sekarang silakan jalankan aplikasi Anda dengan mengklik tombol pada menu bar. Seharusnya
sekarang anda sudah bisa memindahkan Activity dengan mengklik tombol ‘Pindah Activity’.

77
6.4.2. Bedah Kode

6.4.2.1. Register Activity

Kita telah belajar bagaimana membuat suatu activity baru. Di materi sebelumnya, syarat suatu activity
haruslah terdaftar pada berkas AndroidManifest.xml. Karena menggunakan Android Studio, proses
pendaftaran tersebut sudah dilakukan secara otomatis ketika membuat Activity baru.

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

2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3. package="com.dicoding.picodiploma.myintentapp">
4.
5. <application
6. android:allowBackup="true"
7. android:icon="@mipmap/ic_launcher"
8. android:label="@string/app_name"
9. android:supportsRtl="true"
10. android:theme="@style/AppTheme">
11. <activity android:name=".MainActivity">
12. <intent-filter>
13. <action
android:name="android.intent.action.MAIN" />
14.
15. <category
android:name="android.intent.category.LAUNCHER" />
16. </intent-filter>
17. </activity>
18. <activity android:name=".MoveActivity" />
19. </application>
20.
21. </manifest>

78
Perhatikan bahwa MoveActivity sudah teregistrasi di AndroidManifest.xml. Sekarang sudah aman jika kita
melakukan perpindahan activity dari MainActivity ke MoveActivity.

Jika kita lupa meregistrasikan Activity baru ke dalam berkas AndroidManifest.xml, maka akan terjadi eror
seperti ini "android.content.ActivityNotFoundException:Unable to find explicit activity class."

6.4.2.2. Intent Filter

Berikutnya, perhatikan pada kode dengan tag intent-filter yang ada di dalam AndroidManifest pada
bagian MainActivity.

1. <activity android:name=".MainActivity">
2. <intent-filter>
3. <action android:name="android.intent.action.MAIN" />
4. <category android:name="android.intent.category.LAUNCHER" />
5. </intent-filter>
6. </activity>

Intent-filter merupakan mekanisme untuk menentukan bagaimana suatu activity dijalankan oleh
Android Runtime (ART) atau Dalvik Virtual Machine (DVM).
1. <action android:name="android.intent.action.MAIN" />

Baris di atas bermakna bahwa MainActivity menjadi entry point ke aplikasi.

1. <category android:name="android.intent.category.LAUNCHER" />

Kode di atas menandakan bahwa MainActivity akan dikategorikan sebagai activity launcher. Ini
menandakan bahwa activity ini akan muncul di halaman home screen dalam bentuk launcher.

6.4.2.3. Pindah Activity

Selanjutnya, perhatikan kode berikut.

1. val moveIntent = Intent(this@MainActivity, MoveActivity::class.java)

2. startActivity(moveIntent)

Kita membuat suatu obyek intent dengan cara seperti di atas dengan memberikan context
(this@MainActivity) dan kelas activity tujuan (MoveActivity::class.java) pada konstruktor kelas intent.

Untuk context dapat menggunakan this yang menandakan obyek kelas saat ini. Sedangkan kelas tujuan
selalu diakhiri dengan menggunakan class.

79
Jika kita menggunakan code assistant (tekan ctrl + spasi) dari Android Studio, maka akan tampil
rekomendasi (code hint) sebagai berikut:

Pada konteks di atas kita memilih packageContext: Context , cls: Class<*> sebagai inputan untuk nilai
constructor intent.

Context adalah sebuah kelas yang digunakan untuk mengakses resource dari activity tersebut. anda akan
sering membutuhkan context pada latihan-latihan selanjutnya, seperti saat mengambil data dari
resource, mengakses SystemService, mendapatkan ApplicationInfo dan lain sebagainya.

Untuk lebih jelasnya anda bisa membaca artikel berikut:

Kemudian perhatikan baris kode berikutnya.

1. val moveIntent = Intent(this@MainActivity, MoveActivity::class.java)

2. startActivity(moveIntent)

startActivity(moveIntent) metode ini akan menjalankan activity baru tanpa membawa data. Obyek intent
yang diinputkan adalah obyek moveIntent yang ketika kode ini dijalankan maka akan membuka
MoveActivity.

Pada modul ini kita telah berhasil memindahkan satu Activity ke Activity lain dengan tidak membawa
data. Pada bagian selanjutnya kita akan membuat suatu Intent yang di dalamnya akan membawa data ke
Activity tujuan.

6.4.3. Codelab Mengirim Data pada Intent

Selanjutnya kita akan membuat sebuah Intent yang di dalamnya akan membawa data ke Activity tujuan.
Siap?

1. Buka activity_main.xml, kemudian tambahkan satu tombol lagi di bawah tombol sebelumnya.
Kode activity_main.xml kita pun, jadi seperti ini.

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

80
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a
ndroid"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:orientation="vertical"
7. android:padding="16dp">
8.
9. ...
10.
11. <Button
12. android:id="@+id/btn_move_activity_data"
13. android:layout_width="match_parent"
14. android:layout_height="wrap_content"
15. android:layout_marginBottom="16dp"
16. android:text="@string/move_with_data" />
17. </LinearLayout>

2. Setelah selesai dengan penambahan pada berkas activity_main.xml, maka lanjutkan dengan
menambahkan beberapa baris berikut di MainActivity.

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

2.
3. override fun onCreate(savedInstanceState: Bundle?) {
4. super.onCreate(savedInstanceState)
5. setContentView(R.layout.activity_main)
6.
7. ...
8.
9. val btnMoveWithDataActivity: Button = findViewById(R.id.
btn_move_activity_data)
10. btnMoveWithDataActivity.setOnClickListener(this)
11. }
12.
13. override fun onClick(v: View) {
14. when (v.id) {
15. R.id.btn_move_activity -> {
16. val moveIntent = Intent(this@MainActivity, M
oveActivity::class.java)
17. startActivity(moveIntent)
18. }
19.
20. R.id.btn_move_activity_data -> {
21.
22. }
23. }

81
24. }
25. }

3. Selanjutnya, buat Activity baru lagi seperti cara sebelumnya dan beri nama
MoveWithDataActivity.

4. Lalu pada layout activity_move_with_data.xml kita ubah layoutnya menjadi

RelativeLayout dan tambahkan sebuah TextView ber-ID untuk menampilkan data yang dikirimkan
dari Activity asal.

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

2. <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:padding="16dp">
6.
7. <TextView
8. android:id="@+id/tv_data_received"
9. android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. android:text="@string/data_received" />
12. </RelativeLayout>

5. Selanjutnya pada MoveWithDataActivity kita kondisikan TextView seperti berikut

ini :

1. class MoveWithDataActivity : AppCompatActivity() {

2.
3. override fun onCreate(savedInstanceState: Bundle?) {

82
4. super.onCreate(savedInstanceState)
5. setContentView(R.layout.activity_move_with_data)
6.
7. val tvDataReceived: TextView = findViewById(R.id.tv_data_received)
8. }
9. }

6. Selanjutnya untuk menerima data dari Activity asal, kondisikan MoveWithDataActivity

seperti berikut :

1. class MoveWithDataActivity : AppCompatActivity() {

2.
3. companion object {
4. const val EXTRA_AGE = "extra_age"
5. const val EXTRA_NAME = "extra_name"
6. }
7.
8. override fun onCreate(savedInstanceState: Bundle?) {
9. super.onCreate(savedInstanceState)
10. setContentView(R.layout.activity_move_with_data)
11.
12. val tvDataReceived: TextView =

findViewById(R.id.tv_data_received)

13.
14. val name = intent.getStringExtra(EXTRA_NAME)
15. val age = intent.getIntExtra(EXTRA_AGE, 0)
16.
17. val text = "Name : $name, \nYour Age : $age"
18. tvDataReceived.text = text
19. }
20. }

7. Dan sekarang saatnya kita menambahkan obyek Intent pada MainActivity seperti baris
yang ditebalkan.

1. override fun onClick(v: View) {

2. when (v.id) {
3. R.id.btn_move_activity -> {
4. val moveIntent = Intent(this@MainActivity, MoveActivity::class.java)
5. startActivity(moveIntent)
6. }
7.
8. R.id.btn_move_activity_data -> {
9. val moveWithDataIntent = Intent(this@MainActivity,
MoveWithDataActivity::class.java)

83
10. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME,
"DicodingAcademy Boy")
11. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5)
12. startActivity(moveWithDataIntent)
13. }
14. }
15. }

8. Maka MainActivity akan jadi seperti ini:

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

findViewById(R.id.btn_move_activity_data)

11. btnMoveWithDataActivity.setOnClickListener(this)
12. }
13.
14. override fun onClick(v: View) {
15. when (v.id) {
16. R.id.btn_move_activity -> {
17. val moveIntent = Intent(this@MainActivity,
MoveActivity::class.java)
18. startActivity(moveIntent)
19. }
20.
21. R.id.btn_move_activity_data -> {
22. val moveWithDataIntent =
Intent(this@MainActivity, MoveWithDataActivity::class.java)
23.
moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME,
"DicodingAcademy Boy")
24.
moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5)
25. startActivity(moveWithDataIntent)
26. }
27. }
28. }
29. }

84
9. Silakan jalankan aplikasi Anda, kemudian coba klik pada tombol Pindah Activity dengan
Data. Seharusnya Anda sudah bisa memindahkan satu Activity ke Activity lain dengan membawa
data.

6.4.4. Bedah Kode

Pada bagian sebelumnya Anda sudah mempelajari bagaimana memindahkan satu Activity ke Activity lain
dengan membawa data. Dan itu sangat penting karena ketika kita mengembangkan suatu aplikasi
Android yang kompleks, akan ada banyak Activity yang terlibat. Untuk memberikan pengalaman yang
baik kepada pengguna, perpindahan Activity dengan data, sangat krusial.

6.4.4.1. Konstanta
Konstanta yaitu sebuah variabel yang nilainya tetap, biasanya digunakan sebagai key(kunci) yang dipakai
untuk mengirim dan menerima data.

1. class MoveWithDataActivity : AppCompatActivity() {

2.
3. companion object {
4. const val EXTRA_AGE = "extra_age"
5. const val EXTRA_NAME = "extra_name"
6. }
7.
8. ...
9. }

Untuk membuat Konstanta di Kotlin, kita bisa menggunakan kode const val, yang artinya variabel tersebut
nilainya tetap dan tidak berubah. Nah, supaya variabel ini bisa diakses dari kelas lain, anda harus
memasukannya ke dalam companion object. Hal ini karena tidak ada tipe static di Kotlin, karena itulah
anda perlu merubahnya menjadi object supaya bisa dikakses dari luar kelas.

85
Dengan begitu, saat di MainActivity kita bisa memanggil variabel tersebut dengan cara menulis kelasnya
dulu, yaitu seperti ini MoveWithDataActivity.EXTRA_NAME.

6.4.4.2. Put Extra

Perhatikan kode di bawah ini.

1. val moveWithDataIntent = Intent(this@MainActivity,

MoveWithDataActivity::class.java)
2. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME,
"DicodingAcademy Boy")
3. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5)
4. startActivity(moveWithDataIntent)

Perbedaan mendasar antara memindahkan Activity dengan membawa data atau tidak, adalah dengan
menempatkan data ke obyek Intent pada baris ini.

1. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME,
"DicodingAcademy Boy")
2. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5)

Kita memanfaatkan metode putExtra() untuk mengirimkan data bersamaan dengan obyek Intent.
Sedangkan metode putExtra() itu sendiri merupakan metode yang menampung pasangan key-value
dan memiliki beberapa pilihan tipe input seperti berikut:

Hampir semua tipe data untuk input value didukung oleh metode putExtra().

1. moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME,
"DicodingAcademy Boy");

86
6.4.4.3. Get Data
Setelah data dikirimkan, selanjutnya adalah mengambil data tersebut.

Di sini kita akan mengirimkan data bertipe string ke MoveWithDataActivity. Di dalam

MoveWithdataActivity kita akan mengambil nilai data berdasarkan key yang dikirimkan dengan
menggunakan metode getIntent().getStringExtra(key). Implementasinya sebagai berikut:

1. val name = intent.getStringExtra(EXTRA_NAME)

Catatan : Key yang dikirimkan melalui putExtra() harus sama dengan key sewaktu mengambil nilai dari
data yang dikirimkan melalui getStringExtra().

Dalam konteks di atas, key yang digunakan untuk mengirim dan mengambil nilai data adalah sama, yaitu
EXTRA_NAME (yang bernilai “extra_name”). Nilai dari data yang dikirimkan melalui intent disimpan ke
dalam variabel name bertipe data string.

Fungsi dari EXTRA_NAME sendiri yaitu sebagai Key. Seperti yang dijelaskan pada modul, untuk mengirim
data dengan intent kita perlu mengirimnya dalam format putExtra(Key,Value). Dengan Key bertindak
sebagai kunci yang dipakai untuk mengambil data di activity tujuannya, dan value adalah data yang akan
dikirimkan. Jadi kalau dalam bahasa gampangnya dalam bentuk dialog seperti ini:

kode : "Aku mau ambil data nih?"

sistem : "data yang mana? data kan banyak?"
kode : "yang key-nya 'EXTRA_NAME ' sis (red: sistem)"
sistem : "ohh oke de', ini data value-nya"

Begitu juga dengan variable age.

1. val age = intent.getIntExtra(EXTRA_AGE, 0)

Nilai dari variabel age yang bertipe data integer berasal dari getIntent().getIntExtra(Key, nilai default).
Key yang digunakan untuk mengirimkan dan mengambil data adalah EXTRA_AGE (yang bernilai

87
“extra_age”). Nilai default di sini merupakan nilai yang akan digunakan jika ternyata datanya kosong.
Data kosong atau nilainya null bisa terjadi ketika datanya memang tidak ada, atau key-nya tidak sama.

Selamat! Anda telah mempelajari dua intent explicit dengan atau tidak membawa data.

Sebelumnya, mengirimkan data bernilai tunggal dari satu Activity ke Activity lain adalah hal yang mudah.
Bernilai tunggal karena data yang dikirimkan berasal dari satu tipe data.

Misalnya pada contoh di atas, pengiriman nilai data name dan age dilakukan secara individu. Yang satu
bertipe data string dan yang lainnya bertipe data integer.

Sekarang pertanyaanya bagaimana Anda bisa mengirimkan data dalam bentuk Plain Old Java Object
(POJO) dari satu Activity ke Activity lain melalui intent? Caranya adalah dengan mengubah obyek POJO
yang Anda miliki ke dalam bentuk obyek parcelable. Di Android Studio sudah ada fasilitas plugin bernama
Android Parcelable Generator untuk memudahkan proses tersebut.

6.4.5. Codelab Implicit Intent

Anda sudah belajar bagaimana menggunakan intent dengan tipe eksplisit. Sekarang saatnya Anda
melanjutkan ke intent dengan tipe implisit.

1. Buka kembali activity_main.xml tambahkan satu tombol lagi sebagai berikut:

1. <Button
2. android:id="@+id/btn_dial_number"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:layout_marginBottom="16dp"
6. android:text="@string/dial_number" />

Sehingga file activity_main.xml kita sekarang menjadi:

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

88
16. <Button
17. android:id="@+id/btn_move_activity_data"
18. android:layout_width="match_parent"
19. android:layout_height="wrap_content"
20. android:layout_marginBottom="16dp"
21. android:text="@string/move_with_data" />
22.
23. <Button
24. android:id="@+id/btn_dial_number"
25. android:layout_width="match_parent"
26. android:layout_height="wrap_content"
27. android:layout_marginBottom="16dp"
28. android:text="@string/dial_number" />
29. </LinearLayout>

2. Sekarang, buka kembali MainActivity dan lanjutkan menginisialisasi button yang sudah
ditambahkan:

1. override fun onCreate(savedInstanceState: Bundle?) {

2. super.onCreate(savedInstanceState)
3. setContentView(R.layout.activity_main)
4.
5. ...
6.
7. val btnDialPhone: Button = findViewById(R.id.btn_dial_number)
8. btnDialPhone.setOnClickListener(this)
9. }

3. Kemudian dengan melakukan casting tombol Dial Number, set listener dan menambahkan
action ketika tombol diklik.

1. override fun onClick(v: View) {

2. when (v.id) {
3. ...
4. R.id.btn_dial_number -> {
5. val phoneNumber = "081210841382"
6. val dialPhoneIntent = Intent(Intent.ACTION_DIAL,
Uri.parse("tel:$phoneNumber"))
7. startActivity(dialPhoneIntent)
8. }
9. }
10. }

4. Sehingga kode keseluruhan untuk kelas MainActivity saat ini adalah.

1. class MainActivity : AppCompatActivity(), View.OnClickListener {

2.
3. override fun onCreate(savedInstanceState: Bundle?) {

89
4. super.onCreate(savedInstanceState)
5. setContentView(R.layout.activity_main)
6.
7. val btnMoveActivity: Button = findViewById(R.id.btn_move_activity)
8. btnMoveActivity.setOnClickListener(this)
9.
10. val btnMoveWithDataActivity: Button =
findViewById(R.id.btn_move_activity_data)
11. btnMoveWithDataActivity.setOnClickListener(this)
12.
13. val btnDialPhone: Button = findViewById(R.id.btn_dial_number)
14. btnDialPhone.setOnClickListener(this)
15. }
16.
17. override fun onClick(v: View) {
18. when (v.id) {
19. R.id.btn_move_activity -> {
20. val moveIntent = Intent(this@MainActivity,
MoveActivity::class.java)
21. startActivity(moveIntent)
22. }
23.
24. R.id.btn_move_activity_data -> {
25. val moveWithDataIntent =
Intent(this@MainActivity, MoveWithDataActivity::class.java)
26.
moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_NAME,
"DicodingAcademy Boy")
27.
moveWithDataIntent.putExtra(MoveWithDataActivity.EXTRA_AGE, 5)
28. startActivity(moveWithDataIntent)
29. }
30.
31. R.id.btn_dial_number -> {
32. val phoneNumber = "081210841382"
33. val dialPhoneIntent = Intent(Intent.ACTION_DIAL,
Uri.parse("tel:$phoneNumber"))
34. startActivity(dialPhoneIntent)
35. }
36. }
37. }
38. }
5. Setelah selesai, silakan jalankan lagi aplikasi Anda. Yeay, Anda sudah bisa men-dial sebuah
nomor telepon melalui aplikasi bawaan dari peranti anda. Selamat!

90
6.4.6. Bedah Kode

6.4.6.1. Intent Implicit

1. val phoneNumber = "081210841382"

2. val dialPhoneIntent = Intent(Intent.ACTION_DIAL,
Uri.parse("tel:$phoneNumber"))
3. startActivity(dialPhoneIntent)

Baru saja kita mengimplementasikan penggunaan intent secara implicit untuk melakukan proses dial
sebuah nomor telepon. Pada bagian Intent(Intent.ACTION_DIAL, Uri.parse("tel:"+phoneNumber)) kita
menggunakan inputan Intent(ACTION, Uri) pada konstruktor sewaktu menciptakan obyek Intent di mana:

Action : Intent.ACTION_DIAL

Uri : Uri.parse("tel:"+phoneNumber)

Variabel ACTION_DIAL menentukan intent filter dari aplikasi-aplikasi yang bisa menangani action
tersebut. Di sini aplikasi yang memiliki kemampuan untuk komunikasi akan muncul pada opsi pilihan,
sebagaimana ditampilkan ke pengguna.

Selain ACTION_DIAL, di Android sudah tersedia berbagai action yang tinggal didefinisikan sewaktu
menciptakan obyek Intent untuk mengakomodir berbagai tujuan.

6.4.6.2. Apa itu URI (Uniform Resource Identifier)

Buat yang belum tau apa itu Uri, berikut penjelasan singkatnya:

Uri adalah sebuah untaian karakter yang digunakan untuk mengidentifikasi nama, sumber, atau layanan
di internet sesuai dengan RFC 2396. Pada Uri.parse("tel:"+phoneNumber) kita melakukan parsing Uri dari

91
bentuk teks string menjadi sebuah obyek uri dengan menggunakan metode static parse(String). Secara
struktur, dibagi menjadi:

Dimana “tel” adalah sebuah skema yang disepakati untuk sumber daya telepon dan phoneNumber
adalah variabel string yang bernilai “081210841382”. Skema lain dari Uri seperti “geo” untuk peta, “http”
untuk browser sisanya bisa dilihat di halaman ini:

6.4.6.3. Proses Intent Implicit

Pada prosesnya, pemanggilan intent secara implicit akan berjalan sesuai dengan diagram di bawah ini.

1. Aplikasi kita menjalankan intent untuk ACTION_DIAL melalui startActivity().

2. Sistem Android akan melakukan seleksi terhadap semua aplikasi yang memiliki kemampuan
untuk menangani action tersebut. Sistem Android akan menentukan aplikasi mana saja yang bisa
memproses action berdasarkan intent filter yang telah ditentukan di berkas AndroidManifest.xml
pada masing-masing aplikasi.
Sistem Android akan menampilkan opsi aplikasi-aplikasi mana saja yang bisa menangani action
tersebut ke pengguna.
Pengguna memilih salah satu opsi aplikasi dan kemudian sistem Android akan me-routing ke
activity pada aplikasi yang dipilih yang memiliki intent-filter untuk aksi ACTION_DIAL.

Aplikasi yang dipilih pun muncul di layar dengan nomor telepon yang sudah diatur

92
BAB 7.
Teori View dan View Group
7.1 Teori

Pada modul ini, Anda akan mempelajari komponen View dan ViewGroup. Kedua komponen ini dapat
berkolaborasi sehingga membentuk antarmuka dengan contoh seperti pada gambar di bawah ini:

Pada dasarnya semua elemen antar pengguna di aplikasi Android dibangun menggunakan dua buah
komponen inti, yaitu view dan viewgroup.

Sebuah view adalah obyek yang menggambar komponen tampilan ke layar yang mana pengguna dapat
melihat dan berinteraksi langsung.

Contoh komponen turunan dari view seperti :

• TextView, komponen yang berguna untuk menampilkan teks ke layar.

• Button, komponen yang membuat pengguna dapat berinteraksi dengan cara ditekan untuk
melakukan sesuatu.
• ImageView, Komponen untuk menampilkan gambar.
• RecyclerView, komponen untuk menampilkan informasi dalam bentuk list.
• GridView, komponen untuk menampilkan informasi dalam bentuk grid.
• RadioButton, komponen yang memungkinkan pengguna dapat memilih satu pilihan dari berbagai
pilihan yang disediakan.
• Checkbox, komponen yang memungkinkan pengguna dapat memilih lebih dari satu dari pilihan
yang ada.

93
Sedangkan viewgroup adalah sebuah obyek yang mewadahi obyek-obyek view dan viewgroup itu sendiri
sehingga membentuk satu kesatuan tampilan aplikasi yang utuh. Contoh komponen viewgroup adalah:

• LinearLayout
• FrameLayout
• RelativeLayout
• TableLayout

Hierarki komponen view dan viewgroup dapat digambarkan dengan diagram berikut:

94
Jika diterjemahkan di dalam sebuah viewgroup akan ditampung dua buah komponen view dan satu
komponen viewgroup yang terdiri dari 3 buah komponen view.

Salah satu contoh dari tampilan dalam file layout xml untuk merepresentasikan kolaborasi view dan
viewgroup seperti ini :

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

2. <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:orientation="vertical" >
6. <TextView android:id="@+id/text"
7. android:layout_width="wrap_content"
8. android:layout_height="wrap_content"
9. android:text="I am a TextView" />
10. <Button android:id="@+id/button"
11. android:layout_width="wrap_content"
12. android:layout_height="wrap_content"
13. android:text="I am a Button" />
14. </LinearLayout>

Obyek turunan viewgroup LinearLayout menjadi kontainer untuk obyek turunan view, button, dan
textview. Beberapa komponen viewgroup seperti linearlayout, relativelayout, framelayout, dan
tablelayout merupakan komponen yang paling banyak digunakan untuk menjadi parent/root dari
komponen-komponen view.

Berikut adalah definisi singkat dan inti dari komponen-komponen di atas terhadap penempatan
komponen view (child) di dalamnya:

95
7.1.1. LinearLayout
Akan menempatkan komponen-komponen di dalamnya secara horizontal atau vertikal. Linearlayout
memiliki atribut weight untuk masing-masing child view yang berguna untuk menentukan porsi ukuran
view dalam sebuah ruang (space) yang tersedia.

android:orientation=”vertical” android:orientation=”horizontal”

7.1.2. RelativeLayout
Layout yang lebih fleksible daripada layout yang sudah disebutkan di atas. Hal ini dikarenakan posisi dari
masing-masing komponen di dalamnya dapat mengacu secara relatif pada komponen yang lainnya dan
juga dapat mengacu secara relatif ke batas layar.

7.1.3. FrameLayout
Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada di
dalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya.
Komponen yang paling pertama pada layout ini akan menjadi alas bagi komponen-komponen di atasnya.

96
Framelayout memiliki kemampuan untuk menjadi kontainer untuk fragment-fragment di dalam sebuah
activity. Berikut ilustrasi penggunaan framelayout terhadap child view yang dimilikinya:

7.1.4. TableLayout

Susunan komponen di dalam tablelayout akan berada dalam baris dan kolom. Namun layout jenis ini
tidak akan menampilkan garis pembatas untuk baris, kolom atau cell-nya.
Salah satu perbedaan mendasar dari keempat jenis layout di atas adalah bagaimana komponen view di
dalamnya tersusun.
Kapan saatnya menggunakan linearlayout, relativelayout, framelayout dan tablelayout? Jawabannya
tergantung pada kebutuhan dan performa.
Salah satu tips performa untuk aplikasi Android adalah dengan menyusun hierarki layout dalam sebuah
file layout xml secara sederhana dan flat. Artinya, kita tidak membuat layout dengan jumlah kedalaman
yang tinggi. Selain itu, penting juga bagi kita untuk memahami dasar pembangunan antarmuka,
pengalaman pengguna ketika menggunakannya, dan selalu mencari pendekatan terbaik dalam
penggunaan komponen antarmuka.

Semua tergantung latihan dan seberapa sering kita mengubah mockup menjadi tampilan sebenarnya,
terutama dengan memaksimalkan penulisan kode antarmuka di berkas xml.

97
Ketika aplikasi Anda memuat informasi yang banyak dan melebihi ukuran layar, maka Anda
membutuhkan tampilan yang memungkinkan pengguna untuk membaca informasi dengan lengkap. Kita
membutuhkan komponen scrollview untuk mengatasi masalah ini.

7.2 ScrollView

Adalah layout yang memungkinkan komponen di dalamnya digeser (scroll) secara vertikal dan horizontal.
Komponen di dalam scrollview hanya diperbolehkan memiliki 1 parent utama dari linearlayout,
relativelayout, framelayout, atau tablelayout.

7.3 Satuan Dimensi di Android

Platform Android dikenal karena keberagamannya. Mulai ukuran perangkatnya, layar, spesifikasi, hingga
level operating system-nya. Karena keberagaman tersebut, tak heran jika dibutuhkan tampilan yang
konsisten agar aplikasi kita bisa berjalan dan tampil maksimal.

Android sendiri memiliki satuan unit dimensi untuk ukuran tinggi dan lebar sebuah komponen view atau
viewgroup. Berikut adalah esensi dari satuan dimensi unit di android.

1. Ekosistem Android dikenal dengan fragmentasi spesifikasi perangkat yang sangat bervariasi.
Beragam perangkat Android memiliki perbedaan dimensi layar dan kerapatan pixel (density).
2. Untuk tampilan yang konsisten di perangkat Android, terdapat 2 jenis satuan, yaitu dip/dp
(density-independent pixel) dan sp (scale-independent pixels).

98
3. Satuan dp/dip digunakan untuk satuan dari nilai dimensi misal width (attribut : layout_width)
dan height (attribut : layout_height) dari sebuah komponen view atau viewgroup.
4. Satuan sp digunakan untuk ukuran teks. Perbedaannya dengan dp/dip adalah satuan sp android
akan men-scale ukuran teks sesuai dengan setting ukuran teks di peranti (yang biasa dapat
diakses melalui menu settings)

Contoh 1

Misalkan ada dua tablet 7-inch (ukuran diagonal layar). Tablet pertama (A) memiliki resolusi layar
1200x1920px 320dpi. Tablet kedua (B) memiliki resolusi 2048x1536px 326dpi.

Sebuah tombol berukuran 300x300px akan tampak normal pada tablet A. Tapi tombol tersebut akan
terlihat terlalu kecil pada tablet B.

Tapi akan berbeda jika kita tentukan ukuran button-nya dengan ukuran yang bergantung pada density
layar. Bila kita menggunakan ukuran 300x300dp, maka tombol tersebut akan terlihat baik pada beragam
perangkat dengan ukuran yang berbeda.

Contoh 2 :

99
Pada gambar di atas ukuran 200dp akan dikonversi pada device mdpi (device dengan density
160dpi/dots per inch) menjadi 200px dan menjadi 400px pada device xhdpi (density 420dpi) misal
pada nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara fisik untuk beragam peranti
dengan ukuran layar yang berbeda.

7.4 Gambar untuk Semua Jenis Layar

Supaya gambar pada aplikasi Anda tetap terlihat bagus pada semua jenis handphone dengan pixel yang
berbeda-beda, maka Anda perlu menyiapkan gambar dengan berbagai versi untuk setiap jenis
handphone, jika tidak maka gambar yang tampil akan terlihat kabur(blur).

Berikut ini adalah patokan (baseline) dalam menyiapkan gambar.

Untuk menyiapkan gambar dengan format ini secara otomatis, Anda dapat memanfaatkan
Image Asset Studio yang ada di dalam Android Studio. Caranya yaitu dengan klik kanan
pada folder res dan pilih New → Image Asset.

100
ika Anda ingin mengganti icon aplikasi maka pada Icon Type pilih Launcher Icons (Adaptive
and Legacy) dengan nama tetap yaitu ic_launcher. Selanjutnya Anda hanya cukup memilih
gambar dengan klik icon folder pada Path yang ada di Source Asset. Anda juga dapat mengatur ukuran
supaya sesuai dan mengganti background seperti ini:

Hasilnya lihatlah pada folder res/mipmap maka akan tercipta file yang sesuai dengan masing-masing
density.

101
Nah, ketika aplikasi dijalankan maka ikon aplikasi akan berubah menjadi seperti berikut:

7.5 Vector Asset

Selain menggunakan gambar dengan format JPG, PNG, atau tipe bitmap lainnya, Android Studio juga
dapat menerima gambar dengan tipe vector. Kelebihan dari penggunaan vector yaitu gambar tidak akan
pecah walaupun diperbesar. Biasanya ia digunakan untuk icon di dalam aplikasi, bukan yang berupa
fotografi.

Untuk menambahkan vector image caranya yaitu dengan klik kanan pada folder res dan pilih New
→ Vector Asset.

102
Anda bisa memilih beberapa icon yang sudah disediakan oleh Android Studio dengan memilih Clip Art,
atau dengan menggunakan file sendiri yang bertipe SVG / PSD. Selain itu Anda juga bisa mengubah
ukuran, warna, dan opacity icon tersebut. Setelah usai Anda dapat mencoba memperbesar gambar
tersebut dan lihat hasilnya, gambar tidak akan pecah. Mantap!

7.6 Latihan View dan View Group

7.6.1. Tujuan
Pada latihan kali ini Anda akan mengembangkan sebuah halaman detail yang di dalamnya terdiri dari
beberapa komponen View dan Viewgroup layout. Tampilan akhir aplikasi akan seperti ini:

7.6.2. Logika
Menjalankan Aplikasi menampilkan tampilan (tampilan akan sesuai dengan apa yang dibuat di layout
editor).

7.6.3. Codelab Views and ViewGroup

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

103
2. Lalu buka berkas build.gradle (Module: app) dan tambahkan satu baris ini di bagian
dependecies:

implementation 'de.hdodenhof:circleimageview:3.1.0'

Sehingga berkas build.gradle(Module: app) kita sekarang menjadi seperti ini:

1. apply plugin: 'com.android.application'

2.
3. android {
4. ...
5. }
6.
7. dependencies {
8. ...
9. implementation 'de.hdodenhof:circleimageview:3.1.0'
10. }

Tekanlah Sync Now untuk men-download library dari CircleImageView ke dalam proyek
Android Studio Anda. Pastikan ketika melakukan proses tersebut, PC atau laptop terhubung
dengan Internet.

3. Lalu buka berkas strings.xml di res → values. Sesuaikan isinya dengan seperti ini:

1. <resources>
2. <string name="app_name">MyViewAndViews</string>
3. <string name="content_text">Google officially announced its much-
anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We
attended Google’s London UK event, mirroring the main one taking
place in San Francisco, US, where the firm unwrapped the new

104
Android 7.1 Nougat devices which will apparently usurp Google’s
long-standing Nexus series.</string>
4. <string name="content_specs_display">5.0 inches\n
5. FHD AMOLED at 441ppi\n
6. 2.5D Corning® Gorilla® Glass 4</string>
7. <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches
143.8 x 69.5 x 7.3 ~ 8.5 mm</string>
8. <string name="content_specs_battery">2,770 mAh battery\n
9. Standby time (LTE): up to 19 days\n
10. Talk time (3g/WCDMA): up to 26 hours\n
11. Internet use time (Wi-Fi): up to 13 hours\n
12. Internet use time (LTE): up to 13 hours\n
13. Video playback: up to 13 hours\n
14. Audio playback (via headset): up to 110 hours\n
15. Fast charging: up to 7 hours of use from only 15 minutes of
charging</string>
16. <string name="stock">Stock hanya 5 buah</string>
17. <string name="specification">Spesifikasi</string>
18. <string name="display">Display</string>
19. <string name="size">Size</string>
20. <string name="battery">Battery</string>
21. <string name="seller">Dijual oleh</string>
22. <string name="my_name">Narenda Wicaksono</string>
23. <string name="buy">Beli</string>
24. <string name="dummy_value">$735</string>
25. <string name="dummy_photos">6 photos</string>
26. </resources>

4. Selanjutnya, unduh asetnya di sini. Bila telah selesai, salin semua aset yang dibutuhkan ke dalam
direktori res → drawable.

105
5. Buka berkas activity_main.xml dan ubah layout utama menjadi seperti ini:

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

2. <ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent">
5.
6. </ScrollView>

6. Kemudian tambahkan layout utama di dalam ScrollView

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

7. Kemudian kita masukkan komponen di dalam LinearLayout yang sudah ditambahkan sebelumnya.

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

2. <ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent">

106
5.
6. <LinearLayout
7. android:layout_width="match_parent"
8. android:layout_height="wrap_content"
9. android:orientation="vertical">
10.
11. <FrameLayout
12. android:layout_width="match_parent"
13. android:layout_height="wrap_content">
14.
15. <ImageView
16. android:layout_width="match_parent"
17. android:layout_height="wrap_content"
18. android:adjustViewBounds="true"
19. android:scaleType="fitXY"
20. android:src="@drawable/pixel_google" />
21.
22. <TextView
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:textAppearance="@style/TextAppearance.AppCompat.Small"
26. android:textColor="@android:color/white"
27. android:layout_gravity="bottom"
28. android:layout_marginStart="16dp"
29. android:layout_marginBottom="16dp"
30. android:background="#4D000000"
31. android:drawablePadding="4dp"
32. android:gravity="center_vertical"
33. android:padding="8dp"
34. android:text="@string/dummy_photos"
35. android:drawableStart="@drawable/ic_collections_white_18dp" />
36. </FrameLayout>
37. </LinearLayout>
38. </ScrollView>

Tampilan saat ini adalah seperti ini:

107
8. Selanjutnya, tambahkan TextView di bawah FrameLayout, menjadi seperti ini:

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

108
19. android:layout_marginBottom="8dp"
20. android:text="@string/dummy_value"
21. android:textSize="32sp" />
22.
23. <TextView
24. android:layout_width="match_parent"
25. android:layout_height="wrap_content"
26. android:textSize="12sp"
27. android:layout_marginLeft="16dp"
28. android:layout_marginRight="16dp"
29. android:layout_marginBottom="16dp"
30. android:text="@string/stock" />
31.
32. <TextView
33. android:layout_width="match_parent"
34. android:layout_height="wrap_content"
35. android:layout_marginLeft="16dp"
36. android:layout_marginRight="16dp"
37. android:layout_marginBottom="16dp"
38. android:lineSpacingMultiplier="1"
39. android:text="@string/content_text" />
40.
41. </LinearLayout>
42. </ScrollView>

Tampilan saat ini adalah:

109
9. Setelah menambahkan beberapa TextView, selanjutnya kita akan menambahkan TableLayout.

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

2. <ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent">
5.
6. <LinearLayout
7. android:layout_width="match_parent"
8. android:layout_height="wrap_content"
9. android:orientation="vertical">
10.
11. <FrameLayout ...>
12. <TextView ...>
13. <TextView ...>
14. <TextView ...>
15.
16. <TextView
17. android:layout_width="match_parent"
18. android:layout_height="wrap_content"
19. android:textSize="12sp"
20. android:layout_marginLeft="16dp"
21. android:layout_marginRight="16dp"
22. android:layout_marginBottom="8dp"
23. android:text="@string/specification" />
24.
25. <TableLayout
26. android:layout_width="match_parent"
27. android:layout_height="wrap_content"
28. android:layout_marginLeft="16dp"
29. android:layout_marginRight="16dp"
30. android:layout_marginBottom="16dp">
31.
32. <TableRow
33. android:layout_width="match_parent"
34. android:layout_height="wrap_content"
35. android:layout_marginBottom="8dp">
36.
37. <TextView
38. android:layout_width="wrap_content"
39. android:layout_height="wrap_content"
40. android:textSize="14sp"
41. android:layout_marginEnd="16dp"
42. android:text="@string/display" />
43.
44. <TextView
45. android:layout_width="match_parent"
46. android:layout_height="wrap_content"

110
47. android:textSize="14sp"
48. android:layout_weight="1"
49. android:text="@string/content_specs_display" />
50. </TableRow>
51.
52. <TableRow
53. android:layout_width="match_parent"
54. android:layout_height="wrap_content"
55. android:layout_marginBottom="8dp">
56.
57. <TextView
58. android:layout_width="wrap_content"
59. android:layout_height="wrap_content"
60. android:layout_marginEnd="16dp"
61. android:textSize="14sp"
62. android:text="@string/size" />
63.
64. <TextView
65. android:layout_width="match_parent"
66. android:layout_height="wrap_content"
67. android:layout_weight="1"
68. android:textSize="14sp"
69. android:text="@string/content_specs_size" />
70. </TableRow>
71.
72. <TableRow
73. android:layout_width="match_parent"
74. android:layout_height="wrap_content"
75. android:layout_marginBottom="8dp">
76.
77. <TextView
78. android:layout_width="wrap_content"
79. android:layout_height="wrap_content"
80. android:layout_marginEnd="16dp"
81. android:textSize="14sp"
82. android:text="@string/battery" />
83.
84. <TextView
85. android:layout_width="match_parent"
86. android:layout_height="wrap_content"
87. android:layout_weight="1"
88. android:textSize="14sp"
89. android:text="@string/content_specs_battery" />
90. </TableRow>
91. </TableLayout>
92.
93. </LinearLayout>
94. </ScrollView>

111
Tampilan saat ini adalah seperti berikut:

10. Kemudian setelah menambahkan TableLayout, kita masukkan ViewGroup lagi. Tambahkan
RelativeLayout dan Button di bawah TableLayout menjadi seperti ini.

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

2. <ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent">
6.
7. <LinearLayout
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:orientation="vertical">
11.
12. <FrameLayout ...>
13. <TextView ...>
14. <TextView ...>
15. <TextView ...>

112
16. <TableLayout...>
17.
18. <RelativeLayout
19. android:layout_width="match_parent"
20. android:layout_height="wrap_content"
21. android:layout_marginLeft="16dp"
22. android:layout_marginRight="16dp"
23. android:layout_marginBottom="16dp">
24.
25. <de.hdodenhof.circleimageview.CircleImageView
26. android:id="@+id/profile_image"
27. android:layout_width="56dp"
28. android:layout_height="56dp"
29. android:layout_centerVertical="true"
30. android:layout_marginEnd="16dp"
31. android:src="@drawable/photo_2" />
32.
33. <TextView
34. android:layout_width="match_parent"
35. android:layout_height="wrap_content"
36. android:layout_centerVertical="true"
37. android:layout_toEndOf="@+id/profile_image"
38. android:text="@string/my_name" />
39. </RelativeLayout>
40.
41. <Button
42. android:text="@string/buy"
43. android:layout_width="match_parent"
44. android:layout_height="wrap_content"
45. android:layout_marginLeft="16dp"
46. android:layout_marginRight="16dp"
47. android:layout_marginBottom="16dp" />
48. </LinearLayout>
49. </ScrollView>

11. Maka hasil akhir kode pada activity_main.xml menjadi seperti ini:

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

2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent">
6.
7. <LinearLayout
8. android:layout_width="match_parent"
9. android:layout_height="wrap_content"
10. android:orientation="vertical">
11.
12. <FrameLayout

113
13. android:layout_width="match_parent"
14. android:layout_height="wrap_content">
15.
16. <ImageView
17. android:layout_width="match_parent"
18. android:layout_height="wrap_content"
19. android:adjustViewBounds="true"
20. android:scaleType="fitXY"
21. android:src="@drawable/pixel_google" />
22.
23. <TextView
24. android:layout_width="wrap_content"
25. android:layout_height="wrap_content"
26. android:textAppearance="@style/TextAppearance.AppCompat.Small"
27. android:textColor="@android:color/white"
28. android:layout_gravity="bottom"
29. android:layout_marginStart="16dp"
30. android:layout_marginBottom="16dp"
31. android:background="#4D000000"
32. android:drawablePadding="4dp"
33. android:gravity="center_vertical"
34. android:padding="8dp"
35. android:text="@string/dummy_photos"
36. android:drawableStart="@drawable/ic_collections_white_18dp" />
37. </FrameLayout>
38.
39. <TextView
40. android:layout_width="match_parent"
41. android:layout_height="wrap_content"
42. android:layout_marginLeft="16dp"
43. android:layout_marginRight="16dp"
44. android:layout_marginTop="16dp"
45. android:layout_marginBottom="8dp"
46. android:text="@string/dummy_value"
47. android:textSize="32sp" />
48.
49. <TextView
50. android:layout_width="match_parent"
51. android:layout_height="wrap_content"
52. android:textSize="12sp"
53. android:layout_marginLeft="16dp"
54. android:layout_marginRight="16dp"
55. android:layout_marginBottom="16dp"
56. android:text="@string/stock" />
57.
58. <TextView
59. android:layout_width="match_parent"
60. android:layout_height="wrap_content"
61. android:layout_marginLeft="16dp"

114
62. android:layout_marginRight="16dp"
63. android:layout_marginBottom="16dp"
64. android:lineSpacingMultiplier="1"
65. android:text="@string/content_text" />
66.
67. <TextView
68. android:layout_width="match_parent"
69. android:layout_height="wrap_content"
70. android:textSize="12sp"
71. android:layout_marginLeft="16dp"
72. android:layout_marginRight="16dp"
73. android:layout_marginBottom="8dp"
74. android:text="@string/specification" />
75.
76. <TableLayout
77. android:layout_width="match_parent"
78. android:layout_height="wrap_content"
79. android:layout_marginLeft="16dp"
80. android:layout_marginRight="16dp"
81. android:layout_marginBottom="16dp">
82.
83. <TableRow
84. android:layout_width="match_parent"
85. android:layout_height="wrap_content"
86. android:layout_marginBottom="8dp">
87.
88. <TextView
89. android:layout_width="wrap_content"
90. android:layout_height="wrap_content"
91. android:textSize="14sp"
92. android:layout_marginEnd="16dp"
93. android:text="@string/display" />
94.
95. <TextView
96. android:layout_width="match_parent"
97. android:layout_height="wrap_content"
98. android:textSize="14sp"
99. android:layout_weight="1"
100. android:text="@string/content_specs_display" />
101. </TableRow>
102.
103. <TableRow
104. android:layout_width="match_parent"
105. android:layout_height="wrap_content"
106. android:layout_marginBottom="8dp">
107.
108. <TextView
109. android:layout_width="wrap_content"
110. android:layout_height="wrap_content"

115
111. android:layout_marginEnd="16dp"
112. android:textSize="14sp"
113. android:text="@string/size" />
114.
115. <TextView
116. android:layout_width="match_parent"
117. android:layout_height="wrap_content"
118. android:layout_weight="1"
119. android:textSize="14sp"
120. android:text="@string/content_specs_size" />
121. </TableRow>
122.
123. <TableRow
124. android:layout_width="match_parent"
125. android:layout_height="wrap_content"
126. android:layout_marginBottom="8dp">
127.
128. <TextView
129. android:layout_width="wrap_content"
130. android:layout_height="wrap_content"
131. android:layout_marginEnd="16dp"
132. android:textSize="14sp"
133. android:text="@string/battery" />
134.
135. <TextView
136. android:layout_width="match_parent"
137. android:layout_height="wrap_content"
138. android:layout_weight="1"
139. android:textSize="14sp"
140. android:text="@string/content_specs_battery" />
141. </TableRow>
142. </TableLayout>
143.
144. <TextView
145. android:layout_width="match_parent"
146. android:layout_height="wrap_content"
147. android:textSize="12sp"
148. android:layout_marginLeft="16dp"
149. android:layout_marginRight="16dp"
150. android:layout_marginBottom="8dp"
151. android:text="@string/seller" />
152.
153. <RelativeLayout
154. android:layout_width="match_parent"
155. android:layout_height="wrap_content"
156. android:layout_marginLeft="16dp"
157. android:layout_marginRight="16dp"
158. android:layout_marginBottom="16dp">
159.

116
160. <de.hdodenhof.circleimageview.CircleImageView
161. android:id="@+id/profile_image"
162. android:layout_width="56dp"
163. android:layout_height="56dp"
164. android:layout_centerVertical="true"
165. android:layout_marginEnd="16dp"
166. android:src="@drawable/photo_2" />
167.
168. <TextView
169. android:layout_width="match_parent"
170. android:layout_height="wrap_content"
171. android:layout_centerVertical="true"
172. android:layout_toEndOf="@+id/profile_image"
173. android:text="@string/my_name" />
174. </RelativeLayout>
175.
176. <Button
177. android:text="@string/buy"
178. android:layout_width="match_parent"
179. android:layout_height="wrap_content"
180. android:layout_marginLeft="16dp"
181. android:layout_marginRight="16dp"
182. android:layout_marginBottom="16dp" />
183. </LinearLayout>
184. </ScrollView>

12. Terakhir, pada MainActivity tambahkan beberapa baris kode berikut:

supportActionBar?.title = "Google Pixel"

Sehingga kode yang ada di MainActivity menjadi seperti berikut:

1. class MainActivity : AppCompatActivity() {

2.
3. override fun onCreate(savedInstanceState: Bundle?) {
4. super.onCreate(savedInstanceState)
5. setContentView(R.layout.activity_main)
6.
7. supportActionBar?.title = "Google Pixel"
8. }
9. }

13. Sekarang silakan jalankan aplikasinya. Seharusnya hasilnya seperti ini:

117
7.6.4. Bedah Kode
Tidak ada yang rumit di bagian ini karena Anda hanya berhadapan dengan cara membentuk sebuah
tampilan aplikasi Android yang bagus di berkas layout xml.

7.6.4.1. CircleImageView
Di awal kita melakukan penambahan dependensi untuk menampilkan sebuah custom ImageView dalam
bentuk lingkaran. Library yang digunakan adalah CircleImageView yang dibuat oleh Henning
Dodenhoff. Library ini cukup populer dan selalu dikelola dengan baik.

1. implementation 'de.hdodenhof:circleimageview:3.1.0'

7.6.4.2. Strings.xml
Di sini kita akan menambahkan variabel-variabel konstan berupa String yang ditulis di dalam berkas
strings.xml. Tujuannya agar teks yang sama tidak ditulis dua kali, baik itu di berkas Activity maupun berkas
xml.

1. <resources>
2. <string name="app_name">MyViewAndViews</string>

118
3. <string name="content_text">Google officially announced its much-
anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We
attended Google’s London UK event, mirroring the main one taking
place in San Francisco, US, where the firm unwrapped the new Android
7.1 Nougat devices which will apparently usurp Google’s long-standing
Nexus series.</string>
4. <string name="content_specs_display">5.0 inches\n
5. FHD AMOLED at 441ppi\n
6. 2.5D Corning® Gorilla® Glass 4</string>
7. <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches
143.8 x 69.5 x 7.3 ~ 8.5 mm</string>
8. <string name="content_specs_battery">2,770 mAh battery\n
9. Standby time (LTE): up to 19 days\n
10. Talk time (3g/WCDMA): up to 26 hours\n
11. Internet use time (Wi-Fi): up to 13 hours\n
12. Internet use time (LTE): up to 13 hours\n
13. Video playback: up to 13 hours\n
14. Audio playback (via headset): up to 110 hours\n
15. Fast charging: up to 7 hours of use from only 15
minutes of charging</string>
16. <string name="stock">Stock hanya 5 buah</string>
17. <string name="specification">Spesifikasi</string>
18. <string name="display">Display</string>
19. <string name="size">Size</string>
20. <string name="battery">Battery</string>
21. <string name="seller">Dijual oleh</string>
22. <string name="my_name">Narenda Wicaksono</string>
23. <string name="buy">Beli</string>
24. <string name="dummy_value">$735</string>
25. <string name="dummy_photos">6 photos</string>
26. </resources>

Bila diperhatikan, jika kita ingin menampilkan teks ‘content_specs_size’, kita hanya perlu menuliskan
nama atribut di dalam obyek TextView yang diinginkan.

1. <TextView
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content"
4. android:textSize="14sp"
5. android:layout_weight="1"
6. android:text="@string/content_specs_size" />

Dengan memanfaatkan strings.xml, Anda akan lebih mudah membuat aplikasi yang mendukung lebih dari
satu bahasa.

119
7.7 View dan ViewGroup

Pembahasan mengenai Activity sebelumnya akan memudahkan Anda untuk memahami atribut dan
namespace yang digunakan pada berkas layout xml. Anda dapat membaca kembali topik activity bila
ada bagian yang Anda lupa.

Ingat, semua komponen view dan viewgroup memiliki dua buah atribut penting yang harus selalu
diberikan nilai untuk mengatur posisi dirinya di dalam sebuat layout, yaitu:

• layout_width
• layout_height

Kita akan menggunakan sebuah obyek ScrollView yang akan menjadi root untuk tampilan halaman
aplikasi. Kita menggunakan ScrollView sebagai root karena kita ingin halaman aplikasi bisa di-scroll ke
bawah dan ke atas. Hal ini akan memudahkan pengguna untuk melihat tampilan secara menyeluruh.

1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent">
4.
5. <LinearLayout
6. android:layout_width="match_parent"
7. android:layout_height="wrap_content"
8. android:orientation="vertical">
9.
10. ...
11.
12. </LinearLayout>
13. </ScrollView>

Seperti telah dijelaskan sebelumnya, ScrollView hanya dapat memiliki satu layout Viewgroup sebagai
root untuk obyek View di dalamnya. Di sini susunan komponen View akan berorientasi vertikal.

1. <FrameLayout
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content">
4.
5. <ImageView
6. android:layout_width="match_parent"

120
7. android:layout_height="wrap_content"
8. android:adjustViewBounds="true"
9. android:scaleType="fitXY"
10. android:src="@drawable/pixel_google" />
11.
12. <TextView
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:textAppearance="@style/TextAppearance.AppCompat.Small"
16. android:textColor="@android:color/white"
17. android:layout_gravity="bottom"
18. android:layout_marginStart="16dp"
19. android:layout_marginBottom="16dp"
20. android:background="#4D000000"
21. android:drawablePadding="4dp"
22. android:gravity="center_vertical"
23. android:padding="8dp"
24. android:text="@string/dummy_photos"
25. android:drawableStart="@drawable/ic_collections_white_18dp" />
26. </FrameLayout>

Gambar pixel_google yang tampil akan menjadi alas bagi obyek TextView yang berada di atasnya. Ini
seperti sifat dari komponen FrameLayout itu sendiri.

1. <TableLayout
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content"
4. android:layout_marginLeft="16dp"
5. android:layout_marginRight="16dp"
6. android:layout_marginBottom="16dp">
7.
8. <TableRow
9. android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. android:layout_marginBottom="8dp">
12.
13. <TextView
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:textSize="14sp"
17. android:layout_marginEnd="16dp"
18. android:text="@string/display" />
19.
20. <TextView
21. android:layout_width="match_parent"
22. android:layout_height="wrap_content"
23. android:textSize="14sp"
24. android:layout_weight="1"
25. android:text="@string/content_specs_display" />

121
26. </TableRow>
27.
28. <TableRow
29. android:layout_width="match_parent"
30. android:layout_height="wrap_content"
31. android:layout_marginBottom="8dp">
32.
33. <TextView
34. android:layout_width="wrap_content"
35. android:layout_height="wrap_content"
36. android:layout_marginEnd="16dp"
37. android:textSize="14sp"
38. android:text="@string/size" />
39.
40. <TextView
41. android:layout_width="match_parent"
42. android:layout_height="wrap_content"
43. android:layout_weight="1"
44. android:textSize="14sp"
45. android:text="@string/content_specs_size" />
46. </TableRow>
47.
48. <TableRow
49. android:layout_width="match_parent"
50. android:layout_height="wrap_content"
51. android:layout_marginBottom="8dp">
52.
53. <TextView
54. android:layout_width="wrap_content"
55. android:layout_height="wrap_content"
56. android:layout_marginEnd="16dp"
57. android:textSize="14sp"
58. android:text="@string/battery" />
59.
60. <TextView
61. android:layout_width="match_parent"
62. android:layout_height="wrap_content"
63. android:layout_weight="1"
64. android:textSize="14sp"
65. android:text="@string/content_specs_battery" />
66. </TableRow>
67. </TableLayout>

Kita menggunakan TableLayout untuk menampilkan informasi spesifikasi dari perangkat Google Pixel.
TableLayout yang kita gunakan sangatlah sederhana. Tidak ada garis pembatas untuk kolom dan baris
bahkan cell-nya.

Hanya dengan menggunakan TableRow kita bisa menambahkan sebuah baris baru di dalam sebuah
TableLayout.

122
1. <RelativeLayout
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content"
4. android:layout_marginLeft="16dp"
5. android:layout_marginRight="16dp"
6. android:layout_marginBottom="16dp">
7.
8. <de.hdodenhof.circleimageview.CircleImageView
9. android:id="@+id/profile_image"
10. android:layout_width="56dp"
11. android:layout_height="56dp"
12. android:layout_centerVertical="true"
13. android:layout_marginEnd="16dp"
14. android:src="@drawable/photo_2" />
15.
16. <TextView
17. android:layout_width="match_parent"
18. android:layout_height="wrap_content"
19. android:layout_centerVertical="true"
20. android:layout_toEndOf="@+id/profile_image"
21. android:text="@string/my_name" />
22. </RelativeLayout>

Selanjutnya, kita menggunakan sebuah RelativeLayout untuk menampilkan sebuah gambar dan teks.
Posisi dari teks mengacu ke sebelah kanan dari image dan posisi keduanya disesuaikan untuk berada di
tengah secara vertikal.

1. supportActionBar?.title = "Google Pixel"

Baris di atas akan mengganti nilai dari judul halaman pada ActionBar di dalam MainActivity. Kita
menggunakan supportActionBar karena kelas MainActivity inherit kepada AppCompatActivity, yang
merupakan kelas turunan Activity. Kelas tersebut sudah menyediakan fasilitas komponen ActionBar dan
mendukung semua versi OS Android.

123
BAB 8.
Teori Style dan Theme
8.1 Teori

Pada bagian ini, Anda akan mempelajari prinsip desain yang ada di Android. Anda juga akan mempelajari
bagaimana menerapkan struktur dan tampilan view dalam sebuah berkas style.

Prinsip dasar dalam merancang antarmuka aplikasi Android harus mematuhi kaidah yang ditetapkan oleh
Design Guideline. Guideline ini dibuat oleh tim Android di Google. Beberapa prinsipnya adalah:

1. Menampilkan informasi yang hanya dibutuhkan.

2. Jika aplikasi meminta izin pengguna untuk melakukan sebuah aksi, maka pengembang harus
menyediakan mekanisme untuk membatalkan izin tersebut.
3. Lakukan interupsi jika diperlukan.
4. Menggunakan teks secara singkat. Gunakan gambar untuk menjelaskan informasi secara lebih
deskriptif.
5. Jaga data pengguna.
6. Permudah pengguna untuk melakukan sesuatu yang penting secara cepat.
7. Jika terlihat sama, maka perilaku haruslah sama.
8. Bantu pengguna untuk membuat keputusan tapi tetap biarkan pengguna menentukan
keputusannya.

8.2 Best Practice

Terdapat beberapa langkah terbaik (best practice) yang harus diperhatikan ketika mengembangkan
sebuah aplikasi Android, di antaranya:

1. Desain yang baik untuk performa aplikasi

Aplikasi yang dirancang dengan baik harus dapat dijalankan dengan cepat dan jika terdapat
proses yang memakan waktu, maka jalankan di background dan asynchronous.
2. Desain yang baik agar aplikasi dapat bersifat responsif
Berikan feedback ke pengguna terhadap aksi yang dilakukannya. Contohnya, jika pengguna
menekan sebuah tombol, maka aplikasi harus menampilkan efek tekan.
3. Desain yang mengakomodasi kebutuhan informasi pengguna
Aplikasi Anda harus menampilkan informasi yang dibutuhkan pengguna. Bila diperlukan, aplikasi
perlu menampilkan informasi terakhir yang diperoleh, sehingga pengguna tidak perlu lagi
menunggu aplikasi memuat data dari server.
4. Desain untuk optimasi pengunaan baterai
Usahakan agar aplikasi menggunakan daya baterai yang kecil. Minimalisir penggunaan
background service yang tidak perlu. Berhentikan semua listener jika aplikasi tidak

124
sedang dijalankan. Manfaatkan alarmmanager dan jobscheduler jika memang terdapat task
yang harus dilakukan secara berkala.
5. Desain untuk efisiensi pengunaan koneksi jaringan
Aplikasi yang baik adalah yang efisien dalam memanfaatkan koneksi ke jaringan internet. Ia
task mana yang perlu dijalankan saat perangkat pengguna terhubung ke wifi
memilah-milah
(unmetered network) atau pun network lain. Penggunaan koneksi jaringan yang baik akan
menjadi hal wajib jika aplikasi Anda ingin tetap digunakan oleh pengguna.

Nilai yang bagus pada poin tampilan akan mendukung kualitas fungsi aplikasi yang dibuat. Pengguna akan
mempertahankan aplikasi Anda dan tetap menggunakannya selama aplikasi dibutuhkan dan memenuhi
poin-poin di atas.

Kembali pada topik style dan theme. Jika Anda pernah mengembangkan sebuah aplikasi berbasis web,
maka sudah pasti tidak asing lagi dengan CSS (Cascading Style Sheet). Ia mengatur tampilan dari sebuah
halaman website. Pendekatan yang serupa juga berlaku di Android. Inilah yang dinamakan style.

Style merupakan sebuah kumpulan properti yang dibutuhkan untuk mendefinisikan bagaimana sebuah
komponen view dan layar jendela (bisa activity maupun fragment) ditampilkan. Contoh properti ini
adalah height, width, background_color.

Style terdefinisi dalam file xml sendiri. Anda bisa menemukannya di res → values → styles.xml.

Sebagai contoh, Anda memiliki sebuah textview yang berisi berbagai atribut seperti contoh kode di bawah
ini. Textview ini berguna untuk menampilkan konten dari detail informasi yang terdapat di keseluruhan
aplikasi.

1. <TextView
2. android:layout_width="match_parent"
3. android:layout_height="wrap_content"
4. android:textColor="#00FF00"
5. android:typeface="monospace"
6. android:text="@string/hello" />

Sangat tidak efektif jika kita melakukan copy paste dari satu layout xml ke layout xml lainnya. Kita
dapat menyederhanakan hal tersebut menjadi:

1. <TextView
2. style="@style/CodeFont"
3. android:text="@string/hello" />

Attribute layout_width, layout_height, textcolor, dan typeface bisa kita pindahkan menjadi sebuah style
sendiri untuk textview tersebut dan dapat digunakan kembali untuk semua obyek textview sejenis.

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

125
2. <resources>
3. <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
4. <item name="android:layout_width">match_parent</item>
5. <item name="android:layout_height">wrap_content</item>
6. <item name="android:textcolor">#00FF00</item>
7. <item name="android:typeface">monospace</item>
8. </style>
9. </resources>

Beberapa aturan yang harus diperhatikan ketika kita menggunakan styles yaitu:

1. Semua style yang dibuat harus berada dalam tag resources.

2. Semua style yang ingin didefinisikan harus berada dalam tag style

<style name="CodeFont" parent="@android:style/TextAppearance.Medium">

Name : Nama dari style yang Anda buat.

Parent : Nilai style yang akan mewarisi style (termasuk attribute di dalamnya) yang telah ada,
umumnya bawaan dari sdk ataupun platform.

Style yang diwarisi akan dapat diubah dan ditambahkan atributnya dalam style baru yang Anda
buat. Android sudah menyediakan beragam style yang bisa Anda gunakan untuk beragam
tampilan.

3. Semua atribut yang didefinisikan dalam sebuah style harus berada dalam tag item

<item name="android:layout_width">match_parent</item>

Name : Nama atribut yang ingin didefinisikan.

Match_parent : Nilai dari atribut tersebut.

Andaikan dalam satu kasus Anda ingin membuat turunan dari style yang telah Anda buat.
Misalnya Anda ingin membuat style CodeFont berwarna merah, Anda dapat melakukannya
dengan cara berikut ini:

1. <style name="CodeFont.Red">
2. <item name="android:textColor">#FF0000</item>
3. </style>

atau berwarna merah dan juga dengan ukuran yang besar menjadi seperti ini :

1. <style name="CodeFont.Red">
2. <item name="android:textColor">#FF0000</item>
3. <item name="android:textSize">30sp</item>
4. </style>

126
Mudah bukan? Anda baru saja belajar tentang bagaimana sebuah style dibuat dan diimplementasikan.
Selanjutnya Anda akan mempelajari theme.

Theme atau tema itu sendiri merupakan sebuah style yang diterapkan khusus untuk activity dan
application pada berkas AndroidManifest.xml. Pada proyek sebelumnya, kita mendefinisikannya dengan
cara berikut ini:

1. android:theme="@style/Theme.MyViewAndViews"

Di mana AppTheme pada themes.xml berisi :

1. <resources>
2. <style name="Theme.MyViewAndViews"
parent="Theme.MaterialComponents.DayNight.DarkActionBar">
3. 
4. <item name="colorPrimary">@color/purple_500</item>
5. <item name="colorPrimaryVariant">@color/purple_700</item>
6. <item name="colorOnPrimary">@color/white</item>
7. 
8. <item name="colorSecondary">@color/teal_200</item>
9. <item name="colorSecondaryVariant">@color/teal_700</item>
10. <item name="colorOnSecondary">@color/black</item>
11. 
12. <item name="android:statusBarColor"
tools:targetApi="l">?attr/colorPrimaryVariant</item>
13. 
14. </style>
15. </resources>

Sebuah styles yang inherit ke tema MaterialComponents untuk varian DayNight dan memiliki
DarkActionBar. Semua nilai pada atribut terdapat pada berkas colors.xml yang berisi.

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

2. <resources>
3. <color name="purple_200">#FFBB86FC</color>
4. <color name="purple_500">#FF6200EE</color>
5. <color name="purple_700">#FF3700B3</color>
6. <color name="teal_200">#FF03DAC5</color>
7. <color name="teal_700">#FF018786</color>
8. <color name="black">#FF000000</color>
9. <color name="white">#FFFFFFFF</color>
10. </resources>

Saat ini, pengembangan aplikasi Android mengacu pada implementasi prinsip material design untuk
merancang user interface dan user experience. Anda bisa mempelajari lebih lanjut tentang
material design pada tautan berikut:

127
Semenjak material design ditetapkan sebagai acuan utama untuk pengembangan user interface dan
user experience, terdapat penyederhanaan komponen inti yang digunakan. Pada gambar di atas,
terlihat titik-titik mana saja yang hanya kita gunakan untuk menjadi fondasi dasar style aplikasi yang
dibuat.

8.3 Latihan

8.3.1. Tujuan
Pada codelab kali kita akan menerapkan style dan theme pada contoh aplikasi yang telah kita buat
sebelumnya pada modul Views dan Viewgroup. Beberapa poin yang didapatkan pada materi ini adalah:

1. Bagaimana memanfaatkan style pada aplikasi?

2. Bagaimana memanfaatkan theme pada aplikasi?

Hasil dari aplikasi yang dibuat akan jadi seperti ini:

128
8.3.2. Codelab Style dan Theme
1. Buka kembali proyek sebelumnya (MyViewAndViews) atau unduh di sini :
2. Buka berkas colors.xml di res → values → colors.xml. Ubah setiap nilai yang ada saat
ini dengan nilai-nilai berikut :

1. <resources>
2. <color name="gray">#607D8B</color>
3. <color name="gray_light">#B0BEC5</color>
4. <color name="gray_dark">#455A64</color>
5. <color name="orange">#FF5722</color>
6. <color name="orange_light">#FFAB91</color>
7. <color name="orange_dark">#E64A19</color>
8. <color name="black">#FF000000</color>
9. <color name="white">#FFFFFFFF</color>
10. <color name="colorSubtitle">#757575</color>
11. </resources>

Catatan:
Anda juga dapat memilih warna sendiri dengan bantuan Color Tool. Biasanya warna utama
ada di angka 500, dark di angka 700, dan light di angka 200.

3. Selanjutnya, buka berkas style/theme di res → values dan tambahkan beberapa style
seperti di bawah ini:

Pada file themes.xml:

1. <resources xmlns:tools="http://schemas.android.com/tools">
2. 
3. <style name="Theme.MyViewAndViews"
parent="Theme.MaterialComponents.DayNight.DarkActionBar">
4. 
5. <item name="colorPrimary">@color/gray</item>
6. <item name="colorPrimaryVariant">@color/gray_dark</item>
7. <item name="colorOnPrimary">@color/white</item>
8. 
9. <item name="colorSecondary">@color/orange_light</item>
10. <item name="colorSecondaryVariant">@color/orange_dark</item>
11. <item name="colorOnSecondary">@color/black</item>
12.
13. 
14. <item name="android:statusBarColor"
tools:targetApi="l">?attr/colorPrimaryVariant</item>
15. 
16. </style>
17.

129
18. <style name="TextContent">
19. <item name="android:layout_width">wrap_content</item>
20. <item name="android:layout_height">wrap_content</item>
21. <item name="android:layout_marginLeft">16dp</item>
22. <item name="android:layout_marginRight">16dp</item>
23. </style>
24.
25. <style name="TextContent.Small">
26. <item
name="android:textAppearance">@style/TextAppearance.MaterialCompone
nts.Subtitle1</item>
27. </style>
28.
29. <style name="TextContent.Small.White">
30. <item
name="android:textColor">@android:color/white</item>
31. </style>
32.
33. <style name="TextContent.Subtitle">
34. <item name="android:textColor">@color/colorSubtitle</item>
35. <item name="android:textSize">12sp</item>
36. </style>
37.
38. <style name="TextSpec">
39. <item name="android:textSize">14sp</item>
40. </style>
41.
42. <style name="TextSpec.Field">
43. <item name="android:layout_width">wrap_content</item>
44. <item name="android:layout_height">wrap_content</item>
45. <item name="android:layout_marginRight">16dp</item>
46. <item name="android:textColor">@color/colorSubtitle</item>
47.
48. </style>
49.
50. <style name="TextSpec.Value">
51. <item name="android:layout_width">match_parent</item>
52. <item name="android:layout_height">wrap_content</item>
53. <item name="android:layout_weight">1</item>
54. </style>
55.
56. </resources>

Pada file themes.xml (night):

130
4. 
5. <item name="colorPrimary">@color/gray_light</item>
6. <item name="colorPrimaryVariant">@color/gray</item>
7. <item name="colorOnPrimary">@color/black</item>
8. 
9. <item name="colorSecondary">@color/orange_light</item>
10. <item name="colorSecondaryVariant">@color/orange_light</item>
11. <item name="colorOnSecondary">@color/black</item>
12. 
13. <item name="android:statusBarColor"
tools:targetApi="l">?attr/colorPrimaryVariant</item>
14. 
15. </style>
16. </resources>

4. Jika selesai, kita akan implementasikan beberapa style yang baru saja dibuat ke dalam berkas
activity_main.xml dan kondisikan seperti ini:

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

2. <ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/activity_main"
4. android:layout_width="match_parent"
5. android:layout_height="match_parent"
6. android:background="@android:color/white">
7.
8. <LinearLayout
9. android:layout_width="match_parent"
10. android:layout_height="wrap_content"
11. android:orientation="vertical">
12.
13. <FrameLayout
14. android:layout_width="match_parent"
15. android:layout_height="wrap_content">
16.
17. <ImageView
18. android:layout_width="match_parent"
19. android:layout_height="wrap_content"
20. android:adjustViewBounds="true"
21. android:scaleType="fitXY"
22. android:src="@drawable/pixel_google" />
23.
24. <TextView
25. style="@style/TextContent.Small.White"
26. android:layout_gravity="bottom"
27. android:layout_marginStart="16dp"
28. android:layout_marginBottom="16dp"
29. android:background="#4D000000"

131
30.
android:drawableStart="@drawable/ic_collections_white_18dp"
31. android:drawablePadding="4dp"
32. android:gravity="center_vertical"
33. android:padding="8dp"
34. android:text="@string/dummy_photos" />
35. </FrameLayout>
36.
37. <TextView
38. style="@style/TextContent"
39. android:layout_marginTop="16dp"
40. android:layout_marginBottom="8dp"
41. android:text="@string/dummy_value"
42. android:textSize="32sp" />
43.
44. <TextView
45. style="@style/TextContent.Subtitle"
46. android:layout_marginBottom="16dp"
47. android:text="@string/stock" />
48.
49. <TextView
50. style="@style/TextContent"
51. android:layout_marginBottom="16dp"
52. android:lineSpacingMultiplier="1"
53. android:text="@string/content_text" />
54.
55. <TextView
56. style="@style/TextContent.Subtitle"
57. android:layout_marginBottom="8dp"
58. android:text="@string/specification" />
59.
60. <TableLayout
61. android:layout_width="match_parent"
62. android:layout_height="wrap_content"
63. android:layout_marginLeft="16dp"
64. android:layout_marginRight="16dp"
65. android:layout_marginBottom="16dp">
66.
67. <TableRow
68. android:layout_width="match_parent"
69. android:layout_height="wrap_content"
70. android:layout_marginBottom="8dp">
71.
72. <TextView
73. style="@style/TextSpec.Field"
74. android:text="@string/display" />
75.
76. <TextView
77. style="@style/TextSpec.Value"

132
78.
android:text="@string/content_specs_display" />
79. </TableRow>
80.
81. <TableRow
82. android:layout_width="match_parent"
83. android:layout_height="wrap_content"
84. android:layout_marginBottom="8dp">
85.
86. <TextView
87. style="@style/TextSpec.Field"
88. android:text="@string/size" />
89.
90. <TextView
91. style="@style/TextSpec.Value"
92. android:text="@string/content_specs_size"
/>
93. </TableRow>
94.
95. <TableRow
96. android:layout_width="match_parent"
97. android:layout_height="wrap_content"
98. android:layout_marginBottom="8dp">
99.
100. <TextView
101. style="@style/TextSpec.Field"
102. android:text="@string/battery" />
103.
104. <TextView
105. style="@style/TextSpec.Value"
106.
android:text="@string/content_specs_battery" />
107. </TableRow>
108. </TableLayout>
109.
110. <TextView
111. style="@style/TextContent.Subtitle"
112. android:layout_marginBottom="8dp"
113. android:text="@string/seller" />
114.
115. <RelativeLayout
116. android:layout_width="match_parent"
117. android:layout_height="wrap_content"
118. android:layout_marginLeft="16dp"
119. android:layout_marginRight="16dp"
120. android:layout_marginBottom="16dp">
121.
122. <de.hdodenhof.circleimageview.CircleImageView
123. android:id="@+id/profile_image"

133
124. android:layout_width="56dp"
125. android:layout_height="56dp"
126. android:layout_centerVertical="true"
127. android:layout_marginRight="16dp"
128. android:src="@drawable/photo_2" />
129.
130. <TextView
131. style="@style/TextContent"
132. android:layout_toEndOf="@+id/profile_image"
133. android:text="@string/my_name" />
134. </RelativeLayout>
135.
136. <Button
137. android:layout_width="match_parent"
138. android:layout_height="wrap_content"
139. android:layout_marginLeft="16dp"
140. android:layout_marginRight="16dp"
141. android:layout_marginBottom="16dp"
142. android:text="@string/buy" />
143. </LinearLayout>
144. </ScrollView>

5. Jika selesai coba jalankan aplikasi Anda. Seharusnya hasilnya seperti ini:

Perhatikan bagaimana penulisan di setiap obyek TextView menjadi lebih sederhana:

134
1. <TextView
2. style="@style/TextContent.Subtitle"
3. android:layout_marginBottom="8dp"
4. android:text="@string/seller" />

6. Masih ada yang perlu kita perbaiki. Tombol masih berada dalam kondisi default.
Yuk coba ubah agar lebih menyatu dengan tema aplikasi. Buka kembali themes.xml/styles.xml
dan tambahkan kode berikut di atas tag </resources>.

1. <style name="ButtonGeneral">
2. <item name="android:backgroundTint">@color/orange</item>
3. <item name="android:layout_width">match_parent</item>
4. <item name="android:layout_height">wrap_content</item>
5. <item name="android:layout_marginRight">16dp</item>
6. <item name="android:layout_marginLeft">16dp</item>
7. <item name="android:layout_marginBottom">16dp</item>
8. </style>
7. Pada activity_main.xml kondisikan bagian obyek Button menjadi seperti ini:

1. <Button
2. android:text="@string/buy"
3. style="@style/ButtonGeneral"/>
8. Jalankan aplikasi Anda. Seharusnya tampilannya akan menjadi seperti ini:

135
Sekarang coba Anda klik dan tahan tombolnya. Bila perangkat Android Anda berada di
bawah Lollipop (API level 21), seharusnya tombol akan berwarna lebih gelap. Sedangkan
jika di atas Lollipop, akan ada efek air (ripple) ketika tombol Anda tekan.

Sistem akan secara otomatis mengambil nilai accentColor sebagai nilai warna indikator
aktif untuk Button dan nilai pada atribut colorButtonNormal sebagai nilai gelap ketika
obyek Button ditekan.

8.3.3. Bedah Kode

8.3.3.1. Theme
Pada berkas themes.xml/styles.xml, terdapat tema default yang digunakan di project Anda, yaitu
AppTheme yang kodenya seperti berikut:

Pada file themes.xml:

Berkas ini menentukan tema dari keseluruhan aplikasi. Dapat dilihat tema yang digunakan di sini yaitu
Theme.MaterialComponents.DayNight.DarkActionBar yang merupakan tema Material Design
Component dengan background putih dan action bar berwarna gelap. Beberapa atribut yang dapat
dikustomisasi di dalamnya yaitu:

• colorPrimary : warna utama aplikasi yang tampil pada Action Bar dan komponen
Button.
• colorPrimaryVariant : variasi dari warna utama yang biasanya digunakan pada Status
Bar.

136
• colorOnPrimary : warna yang digunakan ketika ada text/icon di atas warna primary.
• colorSecondary : warna utama sekunder yang tampil pada Action Bar dan komponen
EditText.
• colorSecondaryVariant : variasi dari warna sekunder.
• colorOnSecondary : warna yang digunakan ketika ada teks/icon di atas warna
sekunder.
• android:statusBarColor : warna yang digunakan untuk status bar.

Jika dilihat, value pada masing-masing attribute menggunakan awalan @color/, yang artinya mengarah
ke berkas color.xml. Mari kita lihat berkas tersebut:

Berkas ini digunakan untuk menyimpan segala macam resource warna yang diperlukan. Sehingga
ketika Anda ingin mengubah suatu warna yang digunakan di banyak tempat, Anda dapat mengubahnya
di berkas ini saja.

8.3.4. Style
Selesai! Saat ini Anda sudah memahami bagaimana Theme dan Style diterapkan dalam membangun
sebuah aplikasi di Android. Pengelompokan atribut untuk view yang sama akan lebih memudahkan Anda
dalam menentukan dan menyeragamkan format view yang akan ditampilkan ke dalam layar.

Contohnya lihat kode berikut:

137
1. <TextView
2. style="@style/TextContent.Subtitle"
3. android:layout_marginBottom="8dp"
4. android:text="@string/seller" />

Anda bisa menyusun View menjadi lebih rapi dan cepat, ketika Anda memiliki komponen yang
sama. Anda bisa memanggil style tersebut setiap halaman yang Anda butuhkan.

138
BAB 9.
RecyclerView
1.1 Teori RecyclerView

Sangat sederhana tapi sangat berarti. Mengapa? Pada dasarnya interaksi umum antara pengguna dengan
aplikasi dalam menampilkan data dengan jumlah yang banyak adalah dengan menggunakan list yang bisa
di-scroll ke atas dan ke bawah. Nah, untuk membuat list tersebut, Anda dapat menggunakan komponen
RecyclerView.

RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih ketimbang
pendahulunya, yakni ListView. Gambar di bawah menunjukkan perbedaan ListView dan RecyclerView,
jika Anda menggunakan ListView objek dari tiap item akan dibuat semuanya dari awal sampai akhir.
Sedangkan jika Anda menggunakan RecyclerView, objek yang dibuat hanya sebatas ukuran layar dan
beberapa di atas dan di bawahnya saja. Selanjutnya ia menggunakan kembali item yang sudah tidak
terlihat.

Apa dampaknya? Mungkin jika datanya sedikit tidak terasa, tetapi bagaimana jika datanya 1000? Tentu
dengan menggunakan RecyclerView aplikasi akan menjadi lebih efisien dan tidak menghabiskan memori.

Sebenarnya masalah pada ListView dapat diatasi dengan menggunakan ViewHolder pattern., namun
penggunaannya belum diharuskan di ListView. Berbeda dengan RecyclerView yang mewajibkan
menggunakan ViewHolder.

Selanjutnya lihatlah gambar penerapan RecyclerView berikut ini:

139
Gambar di atas menerangkan beberapa komponen yang harus Anda ketahui sebelum menggunakan
recyclerview.

1. RecyclerView dan LayoutManager: Komponen antarmuka yang bertugas untuk menampilkan

data set yang dimiliki di dalamnya. Layoutmanager akan mengatur posisi tampilan data baik itu
secara list (vertikal), grid (baris dan kolom) atau staggered grid (grid yang memiliki susunan tak
seragam / tak beraturan).

2. Adapter: Komponen yang akan mengatur bagaimana menampilkan data set ke dalam
RecyclerView. Di sinilah terjadi proses pengisian tampilan (ViewInflate) dari file layout xml untuk
tiap elemen dari data yang sebelumnya terpasang (bind) ke dalam RecyclerView.
3. Dataset: Kumpulan data yang dimiliki dan ingin ditampilkan. Bisa berupa array, list maupun obyek
map.
4. Item Animator: Ini yang spesial. Kita bisa pasang animasi untuk tiap item di dalamnya. Contoh
animasi yang umum seperti penambahan (add) dan penghapusan (removal) item. Kita akan
mempelajari hal ini pada materi terpisah.

Langkah-langkah mengimplementasikan recyclerview sebagai berikut :

140
1. Tambahkan dependencies komponen recyclerview pada file build.gradle level modul.
2. Tambahkan obyek RecyclerView di berkas layout xml dari activity / fragment.
3. Definisikan model kelas (POJO) yang akan digunakan sebagai data source.
4. Buat berkas layout xml untuk baris item di RecyclerView.
5. Buat sebuah kelas adapter yang inherit ke RecyclerView.Adapter dan ViewHolder untuk
menampilkan tiap elemen data.
6. Definisikan obyek RecyclerView berikut dengan bentuk yang diinginkan (bisa dalam bentuk list,
grid, atau staggered) dan selanjutnya pasang obyek adapter (binding) agar bisa menampilkan
koleksi data ke dalam RecyclerView.

9.1 Mode List pada RecyclerView

9.1.1. Tujuan
Pada codelab kali ini kalian akan mempelajari cara menampilkan data Pahlawan ke dalam sebuah
RecyclerView. Beberapa poin yang akan diulas dalam materi ini adalah :

1. Bagaimana menggunakan Recyclerview?

2. Berbagai macam Recyclerview seperti list, grid, dan card.
3. Membuat onClick pada Recyclerview.
4. Menambahkan menu pada Action Bar.

Contoh dari RecyclerView yang akan kita buat dalam dalam bentuk list, grid dan list dengan bentuk
kartu menggunakan cardview di mana semuanya berada dalam satu halaman saja.

141
9.1.2. Logika Dasar
Melakukan klik ke button → memanggil fragment atau activity dengan atau tanpa data → menampilkan
activity atau fragment yang dituju.

9.1.3. Codelab RecyclerView Mode List

1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:

2. Setelah terbentuk, tambahkan beberapa dependensi yang akan kita gunakan pada berkas
build.gradle (module: app) di bagian dependencies seperti berikut:

1. implementation 'androidx.recyclerview:recyclerview:1.1.0'
2. implementation 'androidx.cardview:cardview:1.0.0'
3. implementation 'de.hdodenhof:circleimageview:3.1.0'
4. implementation 'com.github.bumptech.glide:glide:4.11.0'

Sehingga secara keseluruhan berkas build.gradle(module: app) Anda akan seperti ini:

1. apply plugin: 'com.android.application'

2.
3. android {
4. compileSdkVersion 30
5. defaultConfig {
6. applicationId "com.dicoding.myrecyclerview"
7. minSdkVersion 19
8. targetSdkVersion 30
9. versionCode 1
10. versionName "1.0"
11. testInstrumentationRunner
"androidx.test.runner.AndroidJUnitRunner"
12. }
13. buildTypes {

142
14. release {
15. minifyEnabled false
16. proguardFiles getDefaultProguardFile('proguard-android-
optimize.txt'), 'proguard-rules.pro'
17. }
18. }
19. }
20.
21. dependencies {
22. implementation 'androidx.appcompat:appcompat:1.2.0'
23. implementation 'com.google.android.material:material:1.2.1'
24. implementation
'androidx.constraintlayout:constraintlayout:2.0.4'
25. implementation 'androidx.recyclerview:recyclerview:1.1.0'
26. implementation 'androidx.cardview:cardview:1.0.0'
27. implementation 'de.hdodenhof:circleimageview:3.1.0'
28. implementation 'com.github.bumptech.glide:glide:4.11.0'
29. androidTestImplementation 'androidx.test:runner:1.3.0'
30. androidTestImplementation 'androidx.test.espresso:espresso-
core:3.3.0'
31. }

Setelah itu klik Sync Now untuk mengunduh library tersebut:

3. Selanjutnya pada activity_main.xml lengkapi kodenya menjadi seperti berikut:

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

2. <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:id="@+id/activity_main"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent">
7.
8. <androidx.recyclerview.widget.RecyclerView
9. android:id="@+id/rv_heroes"
10. android:layout_width="match_parent"
11. android:layout_height="match_parent"
12. tools:listitem="@layout/item_row_hero" />
13. </RelativeLayout>

Akan ada tanda merah di @layout/item_row_hero. Ini karena layout item_row_hero belum
ditambahkan.

4. Saatnya kita membuat sebuah item tampilan dalam bentuk berkas layout xml yang akan
ditampilkan di RecyclerView. Karena data pertama kali akan ditampilkan dalam bentuk list, maka
kita buat layout dengan cara klik kanan pada direktori layout → new → layout resource

143
file dan kemudian beri nama item_row_hero. Jangan lupa untuk mengubah RootElement
menjadi menjadi LinearLayout.

5. Setelah terbentuk kita lengkapi tampilan tersebut menjadi seperti ini:

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

2. <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:tools="http://schemas.android.com/tools"
4. android:layout_width="match_parent"
5. android:layout_height="wrap_content"
6. android:orientation="horizontal"
7. android:padding="16dp">
8.
9. <de.hdodenhof.circleimageview.CircleImageView
10. android:id="@+id/img_item_photo"
11. android:layout_width="55dp"
12. android:layout_height="55dp"
13. android:layout_marginEnd="16dp"
14. tools:src="@tools:sample/avatars" />
15.
16. <LinearLayout
17. android:layout_width="match_parent"
18. android:layout_height="wrap_content"
19. android:orientation="vertical">
20.
21. <TextView
22. android:id="@+id/tv_item_name"
23. android:layout_width="match_parent"
24. android:layout_height="wrap_content"

144
25. android:layout_marginBottom="8dp"
26. android:textSize="16sp"
27. android:textStyle="bold"
28. tools:text="@string/heroes_name" />
29.
30. <TextView
31. android:id="@+id/tv_item_detail"
32. android:layout_width="match_parent"
33. android:layout_height="wrap_content"
34. android:ellipsize="end"
35. android:maxLines="2"
36. tools:text="@string/detail" />
37. </LinearLayout>
38. </LinearLayout>

tools:text bisa kita gunakan untuk placeholder di dalam editor layout. Atribut ini tidak akan
terbawa saat run-time dan hanya akan tampak di dalam preview editor saja.

Catatan:
Pastikan untuk ukuran android:layout_height menggunakan wrap_content semua, supaya ketika
dijalankan tidak ada layout kosong / space lebar karena menggunakan match_parent, hal ini
karena 1 item nya dihitung 1 layar.

Akan ada yang eror pada bagian @string/heroes_name dan @string/detail. Seperti pada modul
sebelumnya, Anda perlu menambahkan data String pada bagian res → values → strings.xml.

1. <resources>
2. <string name="app_name">My Application</string>
3. <string name="heroes_name">Nama Pahlawan</string>
4. <string name="detail">Detail</string>
5. </resources>

6. Kemudian buat sebuah kelas model data bernama Hero dengan cara klik kanan pada
nama package → new → Java/Kotlin class.

Beri nama Hero dan pilih Class. Kemudian tekan Enter.

145
Setelah itu kita bisa menambahkan kode menjadi seperti berikut:

1. data class Hero(

2. var name: String = "",
3. var detail: String = "",
4. var photo: Int = 0
5. )

Catatan:
Untuk bahasa Kotlin, Anda sudah bisa memanfaatkan constructor, getter, dan setter secara
otomatis dari sebuah data classes . Jadi Anda tak perlu menambahkan kode apapun lagi.

7. Karena di latihan ini Anda akan menampilkan foto pahlawan , maka Anda perlu mengunduh
berkas fotonya di sini. Setelah selesai extract berkas tersebut dan copy paste semua
berkasnya ke folder drawable.

146
Catatan:
Ingat bahwa nama file yang ada di dalam resource drawable harus menggunakan huruf kecil
dan underscore saja.

8. Setelah selesai kita akan membuat beberapa kelas terkait koleksi data yang ingin ditampilkan.

Buat object baru dengan nama HeroesData dengan cara yang klik kanan pada nama
package → new → Kotlin Class/File.

Setelah itu kita bisa menambahkan kode menjadi seperti berikut:

1. object HeroesData {
2. private val heroNames = arrayOf("Ahmad Dahlan",
3. "Ahmad Yani",
4. "Sutomo",
5. "Gatot Soebroto",
6. "Ki Hadjar Dewantarai",
7. "Mohammad Hatta",

147
8. "Soedirman",
9. "Soekarno",
10. "Soepomo",
11. "Tan Malaka")
12.
13. private val heroDetails = arrayOf("Salah seorang ulama dan
khatib terkemuka di Masjid Besar Kasultanan Yogyakarta pada masa itu,
dan ibu dari K.H. Ahmad Dahlan adalah puteri dari H. Ibrahim yang
juga menjabat penghulu Kesultanan Ngayogyakarta Hadiningrat pada masa
itu. KH. Ahmad Dahlan telah mempelopori kebangkitan ummat Islam untuk
menyadari nasibnya sebagai bangsa terjajah yang masih harus belajar
dan berbuat.",
14. "Jenderal TNI Anumerta Ahmad Yani (juga dieja Achmad Yani; lahir
di Purworejo, Jawa Tengah, 19 Juni 1922 – meninggal di Lubang Buaya,
Jakarta, 1 Oktober 1965 pada umur 43 tahun) adalah komandan Tentara
Nasional Indonesia Angkatan Darat, dan dibunuh oleh anggota Gerakan 30
September saat mencoba untuk menculik dia dari rumahnya.",
15. "Sutomo (lahir di Surabaya, Jawa Timur, 3 Oktober 1920 –
meninggal di Padang Arafah, Arab Saudi, 7 Oktober 1981 pada umur 61
tahun) lebih dikenal dengan sapaan akrab oleh rakyat sebagai Bung
Tomo, adalah pahlawan yang terkenal karena peranannya dalam
membangkitkan semangat rakyat untuk melawan kembalinya penjajah
Belanda melalui tentara NICA, yang berakhir dengan pertempuran 10
November 1945 yang hingga kini diperingati sebagai Hari Pahlawan.",
16. "Jenderal TNI (Purn.) Gatot Soebroto (lahir di Sumpiuh,
Banyumas, Jawa Tengah, 10 Oktober 1907 – meninggal di Jakarta, 11
Juni 1962 pada umur 54 tahun) adalah tokoh perjuangan militer
Indonesia dalam merebut kemerdekaan dan juga pahlawan nasional
Indonesia. Ia dimakamkan di Ungaran, kabupaten Semarang.",
17. "Raden Mas Soewardi Soerjaningrat (EBI: Suwardi Suryaningrat,
sejak 1922 menjadi Ki Hadjar Dewantara, EBI: Ki Hajar Dewantara,
beberapa menuliskan bunyi bahasa Jawanya dengan Ki Hajar Dewantoro;
lahir di Pakualaman, 2 Mei 1889 – meninggal di Yogyakarta, 26 April
1959 pada umur 69 tahun; selanjutnya disingkat sebagai \"Soewardi\"
atau \"KHD\") adalah aktivis pergerakan kemerdekaan Indonesia,
kolumnis, politisi, dan pelopor pendidikan bagi kaum pribumi Indonesia
dari zaman penjajahan Belanda. Ia adalah pendiri Perguruan Taman
Siswa, suatu lembaga pendidikan yang memberikan kesempatan bagi para
pribumi untuk bisa memperoleh hak pendidikan seperti halnya para
priyayi maupun orang-orang Belanda.",
18. "Dr.(HC) Drs. H. Mohammad Hatta (lahir dengan nama Mohammad
Athar, dikenal sebagai Bung Hatta; lahir di Fort de Kock (sekarang
Bukittinggi, Sumatera Barat), Hindia Belanda, 12 Agustus 1902 –
meninggal di Jakarta, 14 Maret 1980 pada umur 77 tahun) adalah tokoh
pejuang, negarawan, ekonom, dan juga Wakil Presiden Indonesia yang
pertama. Ia bersama Soekarno memainkan peranan penting untuk
memerdekakan bangsa Indonesia dari penjajahan Belanda sekaligus
memproklamirkannya pada 17 Agustus 1945. Ia juga pernah menjabat
sebagai Perdana Menteri dalam Kabinet Hatta I, Hatta II, dan RIS. Ia

148
mundur dari jabatan wakil presiden pada tahun 1956, karena berselisih
dengan Presiden Soekarno. Hatta juga dikenal sebagai Bapak Koperasi
Indonesia.",
19. "Jenderal Besar Raden Soedirman (EYD: Sudirman; lahir 24 Januari
1916 – meninggal 29 Januari 1950 pada umur 34 tahun) adalah seorang
perwira tinggi Indonesia pada masa Revolusi Nasional Indonesia.
Menjadi panglima besar Tentara Nasional Indonesia pertama, ia secara
luas terus dihormati di Indonesia. Terlahir dari pasangan rakyat biasa
di Purbalingga, Hindia Belanda, Soedirman diadopsi oleh pamannya yang
seorang priyayi. Setelah keluarganya pindah ke Cilacap pada tahun
1916, Soedirman tumbuh menjadi seorang siswa rajin; ia sangat aktif
dalam kegiatan ekstrakurikuler, termasuk mengikuti program kepanduan
yang dijalankan oleh organisasi Islam Muhammadiyah. Saat di sekolah
menengah, Soedirman mulai menunjukkan kemampuannya dalam memimpin dan
berorganisasi, dan dihormati oleh masyarakat karena ketaatannya pada
Islam. Setelah berhenti kuliah keguruan, pada 1936 ia mulai bekerja
sebagai seorang guru, dan kemudian menjadi kepala sekolah, di sekolah
dasar Muhammadiyah; ia juga aktif dalam kegiatan Muhammadiyah lainnya
dan menjadi pemimpin Kelompok Pemuda Muhammadiyah pada tahun 1937.
Setelah Jepang menduduki Hindia Belanda pada 1942, Soedirman tetap
mengajar. Pada tahun 1944, ia bergabung dengan tentara Pembela Tanah
Air (PETA) yang disponsori Jepang, menjabat sebagai komandan batalion
di Banyumas. Selama menjabat, Soedirman bersama rekannya sesama
prajurit melakukan pemberontakan, namun kemudian diasingkan ke
Bogor.",
20. "Dr.(H.C.) Ir. H. Soekarno (ER, EYD: Sukarno, nama lahir: Koesno
Sosrodihardjo) (lahir di Surabaya, Jawa Timur, 6 Juni 1901 –
meninggal di Jakarta, 21 Juni 1970 pada umur 69 tahun) adalah
Presiden pertama Republik Indonesia yang menjabat pada periode 1945–
1967. Ia memainkan peranan penting dalam memerdekakan bangsa Indonesia
dari penjajahan Belanda. Ia adalah Proklamator Kemerdekaan Indonesia
(bersama dengan Mohammad Hatta) yang terjadi pada tanggal 17 Agustus
1945. Soekarno adalah yang pertama kali mencetuskan konsep mengenai
Pancasila sebagai dasar negara Indonesia dan ia sendiri yang
menamainya.",
21. "Prof. Mr. Dr. Soepomo (Ejaan Soewandi: Supomo; lahir di
Sukoharjo, Jawa Tengah, 22 Januari 1903 – meninggal di Jakarta, 12
September 1958 pada umur 55 tahun) adalah seorang pahlawan nasional
Indonesia. Soepomo dikenal sebagai arsitek Undang-undang Dasar 1945,
bersama dengan Muhammad Yamin dan Soekarno.",
22. "Tan Malaka atau Ibrahim gelar Datuk Sutan Malaka (lahir di
Nagari Pandam Gadang, Suliki, Lima Puluh Kota, Sumatera Barat, 2 Juni
1897 – meninggal di Desa Selopanggung, Kediri, Jawa Timur, 21
Februari 1949 pada umur 51 tahun) adalah seorang pembela kemerdekaan
Indonesia, tokoh Partai Komunis Indonesia, juga pendiri Partai Murba,
dan merupakan salah satu Pahlawan Nasional Indonesia.")
23.
24. private val heroesImages = intArrayOf(R.drawable.ahmad_dahlan,
25. R.drawable.ahmad_yani,

149
26. R.drawable.bung_tomo,
27. R.drawable.gatot_subroto,
28. R.drawable.ki_hadjar_dewantara,
29. R.drawable.mohammad_hatta,
30. R.drawable.sudirman,
31. R.drawable.sukarno,
32. R.drawable.supomo,
33. R.drawable.tan_malaka)
34.
35. val listData: ArrayList<Hero>
36. get() {
37. val list = arrayListOf<Hero>()
38. for (position in heroNames.indices) {
39. val hero = Hero()
40. hero.name = heroNames[position]
41. hero.detail = heroDetails[position]
42. hero.photo = heroesImages[position]
43. list.add(hero)
44. }
45. return list
46. }
47. }

9. Sekarang kita akan membuat sebuah adapter yang akan memformat bagaimana tiap elemen
dari koleksi data ditampilkan. Buat kelas adapter secara manual dengan klik kanan pada
package utama → new → Kotlin/Java Class dan beri nama ListHeroAdapter.

Setelah kelas adapter berhasil dibuat, lengkapi kodenya menjadi seperti berikut:

1. class ListHeroAdapter :
RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>{
2.
3. }

10. Maka akan ada garis merah dan ListViewHolder juga akan merah. Kita resolve satu-persatu.
Pertama adalah kita tekan alt+enter/klik tombol merah pada ListViewHolder dan pilih
Create class 'ListViewHolder':

150
Kemudian pilih ListHeroAdapter untuk membuat kelas tersebut di dalam ListHeroAdapter

Maka kode saat ini menjadi seperti ini:

1. class ListHeroAdapter :
RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>{
2. inner class ListViewHolder()
3. }

Masih ada garis merah, arahkan kursor ke teks class ListHeroAdapter kita lakukan
lagi alt+enter / klik tombol merah dan pilih implement members (Kotlin) atau
implement methods(Java).

Kemudian pilih ketiga metode dari RecyclerView.Adapter.

Maka kode saat ini menjadi seperti ini:

151
1. class ListHeroAdapter :
RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {
2.
3. override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
ListViewHolder {
4. TODO("not implemented") //To change body of created functions
use File | Settings | File Templates.
5. }
6.
7. override fun onBindViewHolder(holder: ListViewHolder, position:
Int) {
8. TODO("not implemented") //To change body of created functions
use File | Settings | File Templates.
9. }
10.
11. override fun getItemCount(): Int {
12. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.
13. }
14.
15. inner class ListViewHolder()
16. }

Masih ada garis merah, hal ini karena ListViewHolder seharusnya inherit ke
RecyclerView.ViewHolder, maka ubah kodenya menjadi seperti ini :

1. class ListHeroAdapter : RecyclerView.Adapter<ListHeroAdapter.ListViewH

older>() {
2. ...
3.
4. inner class ListViewHolder() : RecyclerView.ViewHolder {
5. }
6. }

11. Masih ada garis merah kita lakukan lagi alt+enter / klik tombol merah dan pilih Create
constructor matching super(Java) atau Add constructor paremeter from
ViewHolder(View).

12. Maka kode saat ini menjadi seperti ini:

152
1. class ListHeroAdapter :
RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {
2. ...
3.
4. inner class ListViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView) {
5.
6. }
7. }

Kemudian isi ListViewHolder dengan kode berikut untuk inisialisasi view yang ada di
dalam layout item:

1. class ListHeroAdapter :
RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {
2.
3. ...
4. inner class ListViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView) {
5. var tvName: TextView = itemView.findViewById(R.id.tv_item_name)
6. var tvDetail: TextView =
itemView.findViewById(R.id.tv_item_detail)
7. var imgPhoto: ImageView =
itemView.findViewById(R.id.img_item_photo)
8. }
9. }

Kemudian buatlah dan constructor untuk list seperti ini:

1. class ListHeroAdapter(private val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {
2. ...
3. }

Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode
lengkap dari kelas ListHeroAdapter sebagai berikut:

1. class ListHeroAdapter(val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {
2.
3. override fun onCreateViewHolder(parent: ViewGroup, viewType:
Int): ListViewHolder {
4. val view: View =
LayoutInflater.from(parent.context).inflate(R.layout.item_row_hero
, parent, false)
5. return ListViewHolder(view)
6. }

153
7.
8. override fun onBindViewHolder(holder: ListViewHolder, position:
Int) {
9. val hero = listHero[position]
10.
11. Glide.with(holder.itemView.context)
12. .load(hero.photo)
13. .apply(RequestOptions().override(55, 55))
14. .into(holder.imgPhoto)
15.
16. holder.tvName.text = hero.name
17. holder.tvDetail.text = hero.detail
18. }
19.
20. override fun getItemCount(): Int {
21. return listHero.size
22. }
23.
24. inner class ListViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView) {
25. var tvName: TextView =
itemView.findViewById(R.id.tv_item_name)
26. var tvDetail: TextView =
itemView.findViewById(R.id.tv_item_detail)
27. var imgPhoto: ImageView =
itemView.findViewById(R.id.img_item_photo)
28. }
29. }

Catatan:
Variabel parent didapat dari parameter yang ada pada fungsi onCreateViewHolder. Apabila
hasil generate pada Android Studio Anda berbeda (misal viewGroup, bukan parent). Silakan
sesuaikan saja dengan parameternya atau nama variabelnya.

13. Kemudian kita modifikasi berkas kelas MainActivity kita inisiasikan RecyclerView yang sudah
dibuat di activity_main.

1. class MainActivity : AppCompatActivity() {

2. private lateinit var rvHeroes: RecyclerView
3.
4. override fun onCreate(savedInstanceState: Bundle?) {
5. super.onCreate(savedInstanceState)
6. setContentView(R.layout.activity_main)
7.
8. rvHeroes = findViewById(R.id.rv_heroes)
9. rvHeroes.setHasFixedSize(true)
10. }
11. }

154
14. Selanjutnya setelah diinisiasikan, kita akan panggil data yang sudah kita buat di kelas
HeroesData.

1. class MainActivity : AppCompatActivity() {

2. private lateinit var rvHeroes: RecyclerView
3. private var list: ArrayList<Hero> = arrayListOf()
4.
5. override fun onCreate(savedInstanceState: Bundle?) {
6. super.onCreate(savedInstanceState)
7. setContentView(R.layout.activity_main)
8.
9. rvHeroes = findViewById(R.id.rv_heroes)
10. rvHeroes.setHasFixedSize(true)
11.
12. list.addAll(HeroesData.listData)
13. showRecyclerList()
14. }
15.
16. private fun showRecyclerList() {
17. rvHeroes.layoutManager = LinearLayoutManager(this)
18. val listHeroAdapter = ListHeroAdapter(list)
19. rvHeroes.adapter = listHeroAdapter
20. }
21. }

15. Jalankan aplikasi yang dibuat. Hasilnya kurang lebih akan seperti gambar di bawah ini:

155
Sekarang mari kita buat sebuah RecyclerView dengan memanfaatkan fasilitas menu.

16. Langkah pertama adalah dengan membuat resource directory terkait. Resource
directory menu secara bawaan tidak disediakan. Kita harus membuatnya terlebih dahulu.
Klik kanan pada direktori res → new → Android Resource Directory. Setelah muncul
dialog box seperti di bawah ini, isikan menu pada field directory name. Klik OK untuk
menyelesaikannya.

Sebuah RecyclerView untuk menampilkan data Pahlawan Republik Indonesia sudah tercipta.
17. Kemudian, klik kanan pada direktori tersebut → new → Menu Resource File. Beri
nama menu_main pada field file name.

Maka hasilnya akan terlihat seperti ini:

156
Setelah itu, lengkapi kodenya menjadi seperti berikut:

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

2. <menu xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto">
4. <item
5. android:id="@+id/action_list"
6. android:title="List"
7. app:showAsAction="never"/>
8. <item
9. android:id="@+id/action_grid"
10. android:title="Grid"
11. app:showAsAction="never"/>
12. <item
13. android:id="@+id/action_cardview"
14. android:title="with CardView"
15. app:showAsAction="never"/>
16. </menu>

Jangan lupa untuk memindahkan text ke strings.xml. Caranya alt+enter → Extract

string resource.

Maka menu_main menjadi seperti berikut:

157
1. <?xml version="1.0" encoding="utf-8"?>
2. <menu xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:app="http://schemas.android.com/apk/res-auto">
4. <item
5. android:id="@+id/action_list"
6. android:title="@string/list"
7. app:showAsAction="never" />
8. <item
9. android:id="@+id/action_grid"
10. android:title="@string/grid"
11. app:showAsAction="never" />
12. <item
13. android:id="@+id/action_cardview"
14. android:title="@string/with_cardview"
15. app:showAsAction="never" />
16. </menu>

Dan pada bagian res → values → strings.xml, tambahkan juga string berikut:

1. <resources>
2. <string name="app_name">My Application</string>
3. <string name="heroes_name">Nama Pahlawan</string>
4. <string name="detail">Detail</string>
5. <string name="list">List</string>
6. <string name="grid">Grid</string>
7. <string name="with_cardview">with CardView</string>
8. <string name="favorite">Favorite</string>
9. <string name="share">Share</string>
10. </resources>

18. Setelah selesai, saatnya kita pasang menu tersebut di MainActivity dengan menambahkan
metode berikut:

1. class MainActivity : AppCompatActivity() {

2. ...
3.
4. override fun onCreateOptionsMenu(menu: Menu): Boolean {
5. menuInflater.inflate(R.menu.menu_main, menu)
6. return super.onCreateOptionsMenu(menu)
7. }
8.
9. override fun onOptionsItemSelected(item: MenuItem): Boolean {
10. setMode(item.itemId)
11. return super.onOptionsItemSelected(item)
12. }
13.
14. private fun setMode(selectedMode: Int) {
15. when (selectedMode) {

158
16. R.id.action_list -> {
17. }
18.
19. R.id.action_grid -> {
20. }
21.
22. R.id.action_cardview -> {
23. }
24. }
25. }
26. }

Untuk metode di atas, Anda bisa menggunakan Ctrl (tahan) + Spasi untuk menampilkan
code assistant pada Android Studio.

Kode di kelas MainActivityakan berubah menjadi seperti ini:

1. class MainActivity : AppCompatActivity() {

159
27. override fun onOptionsItemSelected(item: MenuItem): Boolean
{
28. setMode(item.itemId)
29. return super.onOptionsItemSelected(item)
30. }
31.
32. private fun setMode(selectedMode: Int) {
33. when (selectedMode) {
34. R.id.action_list -> {
35. }
36.
37. R.id.action_grid -> {
38. }
39.
40. R.id.action_cardview -> {
41. }
42. }
43. }
44. }

Jalankan kembali aplikasi Anda. Tampilannya kurang lebih akan menjadi seperti gambar di bawah
ini:

160
9.2 Mode Grid pada RecyclerView

9.2.1. Codelab RecyclerView Mode Grid

Pada modul sebelumnya, kita telah membuat menu pada aplikasi daftar Pahlawan yang sedang kita buat.
Mari kita lanjutkan pembuatan bentuk dari RecyclerView dalam bentuk grid.

1. Buat sebuah berkas layout xml baru dengan nama item_grid_hero

Setelah itu lengkapi kodenya menjadi seperti berikut :

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

2. Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout xml tersebut. Buat sebuah kelas
baru dengan nama GridHeroAdapter.

161
Kemudian kita lakukan hal yang sama dengan pembuatan ListHeroAdapter, lengkapi kodenya
menjadi seperti berikut:

1. class GridHeroAdapter :
RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {
2. }

Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu
merahnya. Setelah memperbaiki maka akan menjadi seperi ini:

1. class GridHeroAdapter :

RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {

2. override fun onCreateViewHolder(parent: ViewGroup, viewType:

Int): GridViewHolder {
3. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.
4. }
5.
6. override fun onBindViewHolder(holder: GridViewHolder, position: Int)
{
7. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.
8. }
9.
10. override fun getItemCount(): Int {
11. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.
12. }
13.
14. inner class GridViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView)
15. }

Kemudian buatlah constructor untuk list seperti ini:

162
1. class GridHeroAdapter(val listHero: ArrayList<Hero>) :
RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {
2. ...
3. }

Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode
lengkap dari kelas GridHeroAdapter sebagai berikut:

1. class GridHeroAdapter(val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {
2.
3. override fun onCreateViewHolder(parent: ViewGroup, viewType:
Int): GridViewHolder {
4. val view: View =
LayoutInflater.from(parent.context).inflate(R.layout.item_grid_hero
, parent, false)
5. return GridViewHolder(view)
6. }
7.
8. override fun onBindViewHolder(holder: GridViewHolder, position:
Int) {
9. Glide.with(holder.itemView.context)
10. .load(listHero[position].photo)
11. .apply(RequestOptions().override(350, 550))
12. .into(holder.imgPhoto)
13. }
14.
15. override fun getItemCount(): Int {
16. return listHero.size
17. }
18.
19. inner class GridViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView) {
20. var imgPhoto: ImageView =
itemView.findViewById(R.id.img_item_photo)
21. }
22. }

3. Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan menambahkan satu
metode berikut:

1. private fun showRecyclerGrid() {

2. rvHeroes.layoutManager = GridLayoutManager(this, 2)
3. val gridHeroAdapter = GridHeroAdapter(list)
4. rvHeroes.adapter = gridHeroAdapter
5. }

Dan lengkapi metode setMode() menjadi seperti berikut:

163
1. private fun setMode(selectedMode: Int) {
2. when (selectedMode) {
3. R.id.action_list -> {
4. showRecyclerList()
5. }
6.
7. R.id.action_grid -> {
8. showRecyclerGrid()
9. }
10.
11. R.id.action_cardview -> {
12.
13. }
14. }
15. }

4. Ini akan mengubah tampilan ketika pengguna memilih salah satu bentuk layout. Sekarang
jalankan kembali aplikasinya. Akan ada dua bentuk dari RecyclerView yaitu list dan grid.

164
9.2.2. Mode CardView pada RecyclerView
Pada modul ini kita akan membuat bentuk RecyclerView dengan komponen CardView. Komponen ini
akan menampilkan data selayaknya sebuah kartu. Pendekatan ini hanya diperuntukkan bila item list
memiliki lebih dari satu action.

1. Pertama, buat kembali berkas layout xml item_cardview_hero. Jangan lupa untuk mengganti
Root element menjadi CardView.

Setelah itu lengkapi kodenya menjadi seperti berikut:

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

2. <androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
3. xmlns:card_view="http://schemas.android.com/apk/res-auto"
4. xmlns:tools="http://schemas.android.com/tools"
5. android:id="@+id/card_view"
6. android:layout_width="match_parent"
7. android:layout_height="wrap_content"
8. android:layout_gravity="center"
9. android:layout_marginLeft="8dp"
10. android:layout_marginTop="4dp"
11. android:layout_marginRight="8dp"
12. android:layout_marginBottom="4dp"
13. card_view:cardCornerRadius="4dp">
14.
15. <RelativeLayout
16. android:layout_width="match_parent"
17. android:layout_height="200dp"
18. android:padding="8dp">
19.
20. <ImageView
21. android:id="@+id/img_item_photo"
22. android:layout_width="150dp"

165
23. android:layout_height="220dp"
24. android:layout_marginBottom="4dp"
25. android:scaleType="centerCrop"
26. tools:src="@tools:sample/avatars" />
27.
28. <TextView
29. android:id="@+id/tv_item_name"
30. android:layout_width="match_parent"
31. android:layout_height="wrap_content"
32. android:layout_marginLeft="16dp"
33. android:layout_marginTop="16dp"
34. android:layout_marginRight="16dp"
35. android:layout_marginBottom="8dp"
36. android:layout_toEndOf="@id/img_item_photo"
37. android:layout_toRightOf="@id/img_item_photo"
38. android:textSize="16sp"
39. android:textStyle="bold"
40. tools:text="@string/heroes_name" />
41.
42. <TextView
43. android:id="@+id/tv_item_detail"
44. android:layout_width="match_parent"
45. android:layout_height="match_parent"
46. android:layout_above="@+id/layout_button"
47. android:layout_below="@id/tv_item_name"
48. android:layout_marginLeft="16dp"
49. android:layout_marginRight="16dp"
50. android:layout_toEndOf="@id/img_item_photo"
51. android:layout_toRightOf="@id/img_item_photo"
52. android:ellipsize="end"
53. android:maxLines="5"
54. tools:text="@string/detail" />
55.
56. <LinearLayout
57. android:id="@+id/layout_button"
58. android:layout_width="match_parent"
59. android:layout_height="wrap_content"
60. android:layout_alignParentBottom="true"
61. android:layout_marginStart="16dp"
62. android:layout_marginLeft="16dp"
63. android:layout_toEndOf="@id/img_item_photo"
64. android:layout_toRightOf="@id/img_item_photo"
65. android:orientation="horizontal">
66.
67. <Button
68. android:id="@+id/btn_set_favorite"
69. style="@style/Widget.AppCompat.Button.Colored"
70. android:layout_width="match_parent"
71. android:layout_height="wrap_content"

166
72. android:layout_weight="1"
73. android:text="@string/favorite"
74. android:textSize="12sp" />
75.
76. <Button
77. android:id="@+id/btn_set_share"
78. style="@style/Widget.AppCompat.Button.Colored"
79. android:layout_width="match_parent"
80. android:layout_height="wrap_content"
81. android:layout_weight="1"
82. android:text="@string/share"
83. android:textSize="12sp" />
84. </LinearLayout>
85. </RelativeLayout>
86. </androidx.cardview.widget.CardView>

2. Setelah selesai, buat kembali kelas Adapter dengan nama CardViewHeroAdapter.

Kemudian kita lakukan hal yang sama dengan pembuatan LisHeroAdapter. Lengkapi kodenya
menjadi seperti berikut:

1. class CardViewHeroAdapter :
RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>{
2. }

Setelah itu kita akan perbaiki eror dengan cara menekan alt+enter atau klik lampu
merahnya. Setelah memperbaiki maka akan menjadi seperi ini:

1. class CardViewHeroAdapter :
RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>() {
2. override fun onCreateViewHolder(parent: ViewGroup, viewType:
Int): CardViewViewHolder {
3. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.
4. }
5.
6. override fun onBindViewHolder(holder: CardViewViewHolder,
position: Int) {
7. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.

167
8. }
9.
10. override fun getItemCount(): Int {
11. TODO("not implemented") //To change body of created
functions use File | Settings | File Templates.
12. }
13.
14. inner class CardViewViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView) {
15.
16. }
17. }

Kemudian buatlah dan constructor untuk list seperti ini:

1. class CardViewHeroAdapter(private val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>() {
2. ...
3. }

Setelah itu kita bisa melengkapi kode kode hasil dari turunan RecyclerView.Adapter. Maka kode
lengkap dari kelas CardViewHeroAdapter sebagai berikut:

1. class CardViewHeroAdapter(private val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<CardViewHeroAdapter.CardViewViewHolder>() {
2.
3. override fun onCreateViewHolder(parent: ViewGroup, viewType:
Int): CardViewViewHolder {
4. val view: View =
LayoutInflater.from(parent.context).inflate(R.layout.item_cardview_
hero, parent, false)
5. return CardViewViewHolder(view)
6. }
7.
8. override fun onBindViewHolder(holder: CardViewViewHolder,
position: Int) {
9. val hero = listHero[position]
10.
11. Glide.with(holder.itemView.context)
12. .load(hero.photo)
13. .apply(RequestOptions().override(350, 550))
14. .into(holder.imgPhoto)
15.
16. holder.tvName.text = hero.name
17. holder.tvDetail.text = hero.detail
18.

168
19. holder.btnFavorite.setOnClickListener {
Toast.makeText(holder.itemView.context, "Favorite " +
listHero[holder.adapterPosition].name, Toast.LENGTH_SHORT).show() }
20.
21. holder.btnShare.setOnClickListener {
Toast.makeText(holder.itemView.context, "Share " +
listHero[holder.adapterPosition].name, Toast.LENGTH_SHORT).show() }
22.
23. holder.itemView.setOnClickListener {
Toast.makeText(holder.itemView.context, "Kamu memilih " +
listHero[holder.adapterPosition].name, Toast.LENGTH_SHORT).show() }
24. }
25.
26. override fun getItemCount(): Int {
27. return listHero.size
28. }
29.
30. inner class CardViewViewHolder(itemView: View) :
RecyclerView.ViewHolder(itemView) {
31. var imgPhoto: ImageView =
itemView.findViewById(R.id.img_item_photo)
32. var tvName: TextView =
itemView.findViewById(R.id.tv_item_name)
33. var tvDetail: TextView =
itemView.findViewById(R.id.tv_item_detail)
34. var btnFavorite: Button =
itemView.findViewById(R.id.btn_set_favorite)
35. var btnShare: Button =
itemView.findViewById(R.id.btn_set_share)
36. }
37. }

3. Setelah selesai, kita perlu menambahkan satu metode lagi untuk menampilkan bentuk
RecyclerView ini. Caranya lengkapi kode pada MainActivity menjadi seperti berikut:

1. private fun showRecyclerCardView() {

2. rvHeroes.layoutManager = LinearLayoutManager(this)
3. val cardViewHeroAdapter = CardViewHeroAdapter(list)
4. rvHeroes.adapter = cardViewHeroAdapter
5. }

Dan update metode onOptionsItemSelected() menjadi seperti berikut:

1. private fun setMode(selectedMode: Int) {

2. when (selectedMode) {
3. R.id.action_list -> {
4. showRecyclerList()
5. }

169
6.
7. R.id.action_grid -> {
8. showRecyclerGrid()
9. }
10.
11. R.id.action_cardview -> {
12. showRecyclerCardView()
13. }
14. }
15. }

4. Jalankan kembali aplikasinya. Seharusnya Anda sudah bisa menampilkan tiga bentuk
RecyclerView yang telah kita rencanakan sebelumnya.
5. Untuk mempercantik tampilan dan memenuhi target di awal, kita akan menambah metode
untuk mengubah judul halaman setiap melakukan perubahan bentuk dari RecyclerView.

1. private fun setActionBarTitle(title: String) {

2. supportActionBar?.title = title
3. }

Kemudian tambahkan variable baru diatas metode onCreate() seperti berikut:

1. private var title: String = "Mode List"

Dan kita update kembali metode setMode sehingga menjadi seperti berikut:

1. private fun setMode(selectedMode: Int) {

2. when (selectedMode) {
3. R.id.action_list -> {
4. title = "Mode List"
5. showRecyclerList()
6. }
7.
8. R.id.action_grid -> {
9. title = "Mode Grid"
10. showRecyclerGrid()
11. }
12.
13. R.id.action_cardview -> {
14. title = "Mode CardView"
15. showRecyclerCardView()
16. }
17. }
18. setActionBarTitle(title)
19. }

170
Dan pada metode onCreate() tambahkan baris ini setActionBarTitle("Mode List"); sebelum kita
memanggil metode showRecyclerList(); untuk mengganti title sejak pertama kali aplikasi
dijalankan.

1. override fun onCreate(savedInstanceState: Bundle?) {

2. super.onCreate(savedInstanceState)
3. setContentView(R.layout.activity_main)
4. setActionBarTitle(title)
5.
6. ...
7. }

6. Jalankan kembali aplikasinya. Sekarang judul halaman akan berubah seiring perubahan bentuk
RecyclerView.

9.3 ItemOnClickListener pada RecyclerView

9.3.1. Codelab ItemOnClickListener

Listview memiliki listener untuk melakukan sebuah aksi ketika salah satu item pada list dipilih. Sementara
itu, pada RecyclerView kita harus membuatnya secara manual.

Pada modul ini, kita akan mengupas bagaimana caranya menangani kejadian ketika salah satu item pada
list di RecyclerView dipilih.

171
1. Bukalah kelas CardViewHeroAdapter dan perhatikan kode berikut:

1. holder.btnFavorite.setOnClickListener {
2. Toast.makeText(holder.itemView.context, "Favorite " +
listHero[position].name, Toast.LENGTH_SHORT).show()
3. }
4.
5. holder.btnShare.setOnClickListener {
6. Toast.makeText(holder.itemView.context, "Share " +
listHero[position].name, Toast.LENGTH_SHORT).show()
7. }

Jika diperhatikan, kode di atas digunakan untuk menambahkan onClick untuk btnFavorite dan btnShare.

Lalu bagaimana mengimplementasikan untuk seluruh item di dalam RecyclerView?

172
Tambahkan kode berikut di dalam CardViewHeroAdapter.

1. holder.itemView.setOnClickListener {
2. Toast.makeText(holder.itemView.context, "Kamu memilih " +
listHero[position].name, Toast.LENGTH_SHORT).show()
3. }

Jika diperhatikan kembali metode setOnClickListener berada di dalam kelas Adapter, bagaimana
cara menerapkan agar bisa kita tangani di kelas Activity?

2. Bukalah kelas ListHeroAdapter, tambahkan interface berikut dan implementasikan onClick ke

kelas interface berikut:

1. class ListHeroAdapter(val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<ListHeroAdapter.ListViewHolder>() {
2. private lateinit var onItemClickCallback: OnItemClickCallback
3.
4. fun setOnItemClickCallback(onItemClickCallback:
OnItemClickCallback) {
5. this.onItemClickCallback = onItemClickCallback
6. }
7.
8. ...
9.

173
10. override fun onBindViewHolder(holder: ListViewHolder,
position: Int) {
11. ...
12.
13. holder.itemView.setOnClickListener {
onItemClickCallback.onItemClicked(listHero[holder.adapterPosition])
}
14. }
15.
16. ...
17.
18. interface OnItemClickCallback {
19. fun onItemClicked(data: Hero)
20. }
21. }

Kemudian bukalah MainActivity dan tambahkan satu metode ini untuk menandakan item mana
yang dipilih.

1. private fun showSelectedHero(hero: Hero) {

2. Toast.makeText(this, "Kamu memilih " + hero.name,
Toast.LENGTH_SHORT).show()
3. }

Kemudian tambahkan pada masing-masing metode di list seperti berikut:

1. private fun showRecyclerList() {

2. rvHeroes.layoutManager = LinearLayoutManager(this)
3. val listHeroAdapter = ListHeroAdapter(list)
4. rvHeroes.adapter = listHeroAdapter
5.
6. listHeroAdapter.setOnItemClickCallback(object :
ListHeroAdapter.OnItemClickCallback {
7. override fun onItemClicked(data: Hero) {
8. showSelectedHero(data)
9. }
10. })
11. }

Lakukan juga untuk metode grid!

3. Bukalah GridHeroAdapter tambahkan kode berikut di dalamnya:

1. class GridHeroAdapter(val listHero: ArrayList<Hero>) :

RecyclerView.Adapter<GridHeroAdapter.GridViewHolder>() {
2. private lateinit var onItemClickCallback: OnItemClickCallback
3.

174
4. fun setOnItemClickCallback(onItemClickCallback:
OnItemClickCallback) {
5. this.onItemClickCallback = onItemClickCallback
6. }
7.
8. ...
9.
10. override fun onBindViewHolder(holder: GridViewHolder,
position: Int) {
11. ...
12.
13. holder.itemView.setOnClickListener {
onItemClickCallback.onItemClicked(listHero[holder.adapterPosition])
}
14. }
15.
16. ...
17.
18. interface OnItemClickCallback {
19. fun onItemClicked(data: Hero)
20. }
21. }

Kemudian bukalah MainActivity dan tambahkanlah metode grid seperti berikut:

1. private fun showRecyclerGrid() {

2. rvHeroes.layoutManager = GridLayoutManager(this, 2)
3. val gridHeroAdapter = GridHeroAdapter(list)
4. rvHeroes.adapter = gridHeroAdapter
5.
6. gridHeroAdapter.setOnItemClickCallback(object :
GridHeroAdapter.OnItemClickCallback {
7. override fun onItemClicked(data: Hero) {
8. showSelectedHero(data)
9. }
10. })
11. }

4. Sekarang jalankan kembali aplikasinya. Klik salah satu item pada RecyclerView bentuk list dan
grid. Seharusnya sebuah obyek Toast akan tampil ketika salah satu item ditekan.

175
176

Anda mungkin juga menyukai

Mempelajari Dasar Dasar Laravel A-Z v1.0 - 12661
Belum ada peringkat
Mempelajari Dasar Dasar Laravel A-Z v1.0 - 12661
420 halaman
Modul Praktikum Administrasi Server Instal Debian
Belum ada peringkat
Modul Praktikum Administrasi Server Instal Debian
160 halaman
Modul 1 Praktikum Pemrograman Mobile
Belum ada peringkat
Modul 1 Praktikum Pemrograman Mobile
23 halaman
Modul IoT
Belum ada peringkat
Modul IoT
85 halaman
7 Modul Webiste
Belum ada peringkat
7 Modul Webiste
282 halaman
03 - Ide Android Studio
Belum ada peringkat
03 - Ide Android Studio
62 halaman
Modul Mobile Programming v2
Belum ada peringkat
Modul Mobile Programming v2
151 halaman
Ebook Jquery
100% (1)
Ebook Jquery
61 halaman
Apa Itu React JS Dan Bagaimana Cara Menggunakannya
Belum ada peringkat
Apa Itu React JS Dan Bagaimana Cara Menggunakannya
28 halaman
Pemrograman Aplikasi Mobile Putri Elfa E
Belum ada peringkat
Pemrograman Aplikasi Mobile Putri Elfa E
184 halaman
Modul Praktikum Aplikasi Android
Belum ada peringkat
Modul Praktikum Aplikasi Android
168 halaman
Django Tutorial (Seri 01-05)
Belum ada peringkat
Django Tutorial (Seri 01-05)
111 halaman
Membangun Website Toko Online Dengan Laravel Nuxtjs Dan Payment Gateway Dark
100% (5)
Membangun Website Toko Online Dengan Laravel Nuxtjs Dan Payment Gateway Dark
1.067 halaman
Modul Android Gabungan 1
Belum ada peringkat
Modul Android Gabungan 1
125 halaman
Modul CodeIgniter Update Lengkap
Belum ada peringkat
Modul CodeIgniter Update Lengkap
91 halaman
Buku Cara Cepat Pengolahan Citra Dengan C# - Sharp
50% (2)
Buku Cara Cepat Pengolahan Citra Dengan C# - Sharp
104 halaman
Membuat Server Lokal Dengan Linux Debian PDF
Belum ada peringkat
Membuat Server Lokal Dengan Linux Debian PDF
63 halaman
Flutter Dari Noll
100% (2)
Flutter Dari Noll
66 halaman
Pemrograman Web
100% (1)
Pemrograman Web
155 halaman
Reactjs Untuk Jquery Developer PDF
100% (1)
Reactjs Untuk Jquery Developer PDF
37 halaman
Cloud Computing With Nodejs (Indonesian)
100% (1)
Cloud Computing With Nodejs (Indonesian)
93 halaman
Android Developer Fundamentals Course Concepts Idn
Belum ada peringkat
Android Developer Fundamentals Course Concepts Idn
457 halaman
VueJS - Framework Dengan Kekuatan Super
Belum ada peringkat
VueJS - Framework Dengan Kekuatan Super
17 halaman
Flutter Tutorial
Belum ada peringkat
Flutter Tutorial
185 halaman
Mobile Programming TI
Belum ada peringkat
Mobile Programming TI
162 halaman
Docker Dasar
Belum ada peringkat
Docker Dasar
123 halaman
Untitled
Belum ada peringkat
Untitled
85 halaman
KURIKULUM Idn Akhwat
Belum ada peringkat
KURIKULUM Idn Akhwat
32 halaman
Membangun Website Donasi Online Dengan Laravel Vue Js Tailwind Css Dan Payment Gateway Dark
100% (2)
Membangun Website Donasi Online Dengan Laravel Vue Js Tailwind Css Dan Payment Gateway Dark
805 halaman
Buku Saku Laravel
Belum ada peringkat
Buku Saku Laravel
40 halaman
Modern React
Belum ada peringkat
Modern React
34 halaman
(Tutor C#) Perjalanan Ke Desa LINQ
Belum ada peringkat
(Tutor C#) Perjalanan Ke Desa LINQ
127 halaman
Silabus - Full Stack ASPNET Core MVC and RESTful API ASPNET Core
Belum ada peringkat
Silabus - Full Stack ASPNET Core MVC and RESTful API ASPNET Core
3 halaman
Pemrograman Web Mobile Dengan Apache Cor
Belum ada peringkat
Pemrograman Web Mobile Dengan Apache Cor
110 halaman
Github
Belum ada peringkat
Github
44 halaman
Pengenalan Nodejs
100% (1)
Pengenalan Nodejs
105 halaman
Django Rest Framework Tutorial (Seri 01-05)
Belum ada peringkat
Django Rest Framework Tutorial (Seri 01-05)
118 halaman
Java Fundamental (JSE) PDF
Belum ada peringkat
Java Fundamental (JSE) PDF
213 halaman
MikroTik HotSpot Server
Belum ada peringkat
MikroTik HotSpot Server
348 halaman
Final Gabung Modul 6 Sistem Informatika Jaringan Dan Aplikasi 2022
Belum ada peringkat
Final Gabung Modul 6 Sistem Informatika Jaringan Dan Aplikasi 2022
128 halaman
Buku Ajar Pemrograman Internet
Belum ada peringkat
Buku Ajar Pemrograman Internet
133 halaman
Membuat Login Email Di Android Studio Dengan Firebase
Belum ada peringkat
Membuat Login Email Di Android Studio Dengan Firebase
24 halaman
Kumpulan PHP Script
100% (1)
Kumpulan PHP Script
21 halaman
Modul Praktikum 3
Belum ada peringkat
Modul Praktikum 3
4 halaman
Modul Web Programming III
Belum ada peringkat
Modul Web Programming III
103 halaman
4341-Article Text-17155-3-10
Belum ada peringkat
4341-Article Text-17155-3-10
119 halaman
Buku Pemrograman Web X Mobile Untuk Smart IoT, Big Data App & Lainnya v4.06
Belum ada peringkat
Buku Pemrograman Web X Mobile Untuk Smart IoT, Big Data App & Lainnya v4.06
240 halaman
Split Screen & Java - Android Studio
Belum ada peringkat
Split Screen & Java - Android Studio
39 halaman
Tutorial Instalasi Server Ubuntu 20
100% (2)
Tutorial Instalasi Server Ubuntu 20
15 halaman
SecStory-v2 0 PDF
100% (1)
SecStory-v2 0 PDF
163 halaman
Vue - Js Fundamental
100% (2)
Vue - Js Fundamental
111 halaman
Modul Dasar Docker Portainer
Belum ada peringkat
Modul Dasar Docker Portainer
49 halaman
MODUL 2 - Mengenal Struktur Widget
Belum ada peringkat
MODUL 2 - Mengenal Struktur Widget
14 halaman
Cara Cepat Membangun Website Dari Nol Studi Kasus Web Dealer Motor Digabungkan
Belum ada peringkat
Cara Cepat Membangun Website Dari Nol Studi Kasus Web Dealer Motor Digabungkan
100 halaman
Modul PPB - Sem 1
Belum ada peringkat
Modul PPB - Sem 1
24 halaman
Paket 1
Belum ada peringkat
Paket 1
11 halaman
Pengenalan Dan Pembuatan Project Android Studio
Belum ada peringkat
Pengenalan Dan Pembuatan Project Android Studio
18 halaman
Materi Tutorial Android Studio
Belum ada peringkat
Materi Tutorial Android Studio
41 halaman
Instalasi Android Studio
Belum ada peringkat
Instalasi Android Studio
28 halaman
MODUL 1 Instalasi Dan Pengenalan Android Studio
Belum ada peringkat
MODUL 1 Instalasi Dan Pengenalan Android Studio
22 halaman