BAB III

MEMBUAT USER INTERFACE (UI) INTERAKTIF SEDERHANA

Materi Pembelajaran:
1. Membuat aplikasi interaktif sederhana dengan mengimplementasikan metode onClick
counting up dan tap toast
2. Mengedit layout dalam XML
3. Menggunakan layout editor dalam mendesain layout

Tujuan Pembelajaran:
1. Mahasiswa dapat membuat aplikasi interaktif sederhana dengan mengimplementasikan
metode onClick counting up dan tap toast
2. Mahasiswa dapat mengedit layout dalam XML
3. Mahasiswa dapat menggunakan layout editor dalam mendesain layout

1.1. Pengantar
Antarmuka pengguna / User Interface (UI) yang muncul di layar perangkat Android terdiri
dari hierarki objek yang disebut view - setiap elemen layar adalah View. Klas View
merupakan blok komponen dasar untuk semua komponen UI, dan kelas dasar untuk kelas
yang menyediakan komponen UI interaktif seperti button, checkbox, dan segala macam input
text. Subclass View yang umum digunakan dalam beberapa materi yang akan dipelajari
meliputi:
 TextView untuk menampilkan teks.
 EditText untuk memungkinkan pengguna memasukkan dan mengedit teks.
 Button dan unsur-unsur yang dapat diklik lainnya (seperti RadioButton, CheckBox,
dan Spinner) untuk memberikan interaksi yang interaktif
 ScrollView dan RecyclerView untuk menampilkan item yang dapat digulir atau di
scroll
 ImageView untuk menampilkan gambar.
 ConstraintLayout dan LinearLayout untuk memuat View elemen lain dan
memposisikannya.
Kode Java yang menampilkan dan menjalankan UI terdapat dalam kelas yang merupakan
extends Activity. Sebuah Activity biasanya berhubungan dengan tampilan layout UI yang
didefinisikan sebagai XML (eXtended Markup Language) file. File XML ini biasanya
dinamai menurut namanya Activity dan mendefinisikan tata letak View elemen di layar.
Misalnya, MainActivity kode di aplikasi Hello World menampilkan tata letak yang
ditentukan dalam activity_main.xml file tata letak, yang menyertakan  TextView dengan teks
"Hello World".

1 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
Dalam aplikasi yang lebih kompleks, sebuah Activity mungkin mengimplementasikan aksi
untuk merespon tap pengguna, menggambar konten grafis, atau meminta data dari database
atau internet. Dalam praktik ini, Anda mempelajari cara membuat aplikasi interaktif pertama
Anda — aplikasi yang memungkinkan interaksi pengguna. Anda membuat aplikasi
menggunakan template Empty Activity. Anda juga mempelajari cara menggunakan layout
editor untuk mendesain layout, dan cara mengedit tata letak dalam XML. Selamat Mencoba!
Aplikasi HelloToast terdiri dari dua elemen Button dan satu TextView. Saat pengguna
mengetuk Button pertama, maka akan menampilkan pesan singkat (sebuah Toast) di
layar. Mengetuk Button yang kedua akan menambah hitungan yang ditampilkan
di TextView, yang dimulai dari nol.
Bentuk aplikasi sebagai berikut:

1.2. Buat dan Jelajah a New Project

Dalam praktik ini, Anda mendesain dan mengimplementasikan proyek untuk aplikasi
HelloToast.

A. Membuat Proyek Android Studio

Mulai Android Studio dan buat proyek baru dengan parameter berikut:

2 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 Pilih Run > Run App atau klik ikon Run    di toolbar untuk membangun dan
menjalankan aplikasi di emulator atau perangkat Anda.
B. Jelajahi Layout Editor
Android Studio menyediakan editor layout untuk membuat layout elemen antarmuka
pengguna (UI) aplikasi dengan cepat. Ini memungkinkan Anda menyeret elemen ke
desain visual dan tampilan blueprint, memposisikannya dalam layout, menambahkan
constrainrs, dan menyeting atribut. Constraint menentukan posisi elemen UI dalam
layout. Constraint mengatur posisi atau penyelarasan ke tampilan lain, parent layout,
atau pedoman yang tidak terlihat.
Jelajahi layout editor, dan lihat gambar di bawah saat Anda mengikuti penjelasan
yang diberi nomor:

3 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 1. Dalam folder app> res> layout di Project> panel Android , klik dua
kali file activity_main.xml untuk membukanya, jika belum dibuka.
2. Klik tab Desain jika belum dipilih. Anda menggunakan tab Desain untuk
memanipulasi elemen dan layout, dan tab Teks untuk mengedit kode XML untuk
layout.
3. Palletes panel menunjukkan elemen UI yang dapat Anda gunakan dalam layout
aplikasi Anda.
4. Component Tree menunjukkan tampilan hirarki dari elemen UI. Elemen View
diatur ke dalam hierarki parents dan children, di mana anak mewarisi atribut
induknya. Pada gambar di atas, TextView adalah anak
dari ConstraintLayout. Anda
5. Panel desain dan layout blueprint yang menampilkan elemen UI dalam
layout. Pada gambar di atas, tata letak hanya menampilkan satu elemen:
TextView yang menampilkan "Hello World".
6. The Atribut menampilkan tab Atribut panel untuk pengaturan properti pada
elemen UI.

1.3. Menambahkan Elemen View di Layout Editor

Dalam tugas ini Anda membuat layout UI untuk aplikasi HelloToast di layout editor
menggunakan fitur ConstraintLayout. Anda dapat membuat contraint secara manual,
seperti yang ditunjukkan nanti, atau secara otomatis menggunakan alat Autoconnect .

A. Periksa Element Constraints

Ikuti langkah ini:
1. Buka activity_main.xml dari Project > panel Android jika belum
terbuka. Jika tab Desain belum dipilih, klik tab tersebut.

Jika tidak ada blueprint, klik Select Design Surface tombol  pada toolbar dan
memilih Desain + Blueprint .
2. Tool Autoconnect  ini juga terletak pada toolbar. Ini diaktifkan secara
default. Untuk langkah ini, pastikan tool tersebut tidak dinonaktifkan.

3. Klik  tombol perbesar untuk memperbesar panel design dan blueuntuk

tampilan close-up.

4 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 4. Pilih TextView di panel Component Tree. Sorot TextView  "Hello World" pada panel
design dan blueprint, sehingga constraint untuk elemen terlihat.
5. Lihat gambar di bawah ini,  Klik gagang melingkar di sisi kanan TextView untuk
menghapus constraint horizontal yang mengikat tampilan ke sisi kanan layout. 
TextView melompat ke sisi kiri karena tidak lagi diberikan constraint ke sisi
kanan. Untuk menambahkan kembali batasan horizontal, klik gagang yang sama dan
seret garis ke sisi kanan tata letak.

Di blueprint atau panel design, pegangan (handles) berikut ini muncul di elemen TextView :
 Constraint Handle: Untuk membuat constraint seperti yang ditampilkan pada
gambar di atas, klik constraint handle, yang ditampilkan sebagai lingkaran di sisi
elemen. Lalu seret gagang ke gagang pembatas lain, atau ke batas induk. Garis zig-
zag mewakili batasan.

 Rezising Handle: Untuk mengubah ukuran elemen, seret handle pengubah ukuran
persegi. Pegangan berubah menjadi sudut miring saat Anda menyeretnya.

B. Tambahkan tombol ke Layout

Saat diaktifkan, tool Autoconnect secara otomatis membuat dua atau lebih constraint
untuk elemen UI ke parent layout. Setelah Anda menyeret elemen ke layout, maka
akan membuat constraint berdasarkan posisi elemen.
Ikuti langkah-langkah berikut untuk menambahkan Button:

5 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 1. Mulailah dengan layout yang kosong. Elemen TextView tidak diperlukan, maka
sementara itu masih dipilih, tekan Delete atau memilih Edit > Hapus . Anda
sekarang memiliki layout yang benar-benar kosong.
2. Seret Button dari panel Palette ke posisi mana pun di layout. Jika Anda
melepas Button di area tengah atas layout, constraint mungkin muncul secara
otomatis. Jika tidak, Anda dapat menyeret batasan ke sisi atas, sisi kiri, dan kanan
layoutseperti yang ditunjukkan pada gambar di bawah.

C. Tambahkan Tombol kedua pada Layout

1. Seret Button lain dari panel Palette ke tengah layout seperti yang ditunjukkan
pada gambar di bawah. Autoconnect dapat memberikan constraint horizontal untuk
Anda (jika tidak, Anda dapat menyeretnya sendiri).
2. Seret pembatas vertikal ke bagian bawah tata letak (lihat gambar di bawah).

6 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
Anda dapat menghapus batasan dari elemen dengan memilih elemen dan mengarahkan kursor

ke atasnya untuk menampilkan tombol Clear Constraint  . Klik tombol ini untuk
menghapus semua constraint pada elemen yang dipilih. Untuk menghapus satu batasan, klik
handle yang dimaksud dan hapus.
Untuk menghapus semua batasan di seluruh tata letak, klik alat Clear All Constraints di
toolbar. Alat ini berguna jika Anda ingin mengulangi semua batasan dalam tata letak Anda.

1.4. Mengubah Atribut Element UI

Panel Atribut menyediakan akses untuk semua XML atribut Anda dapat menetapkan
untuk elemen UI. Anda bisa menemukan atribut (dikenal sebagai properti ) yang umum
untuk semua tampilan dalam  kelas View .
Dalam tugas ini Anda memasukkan values baru dan mengubah value untuk
atribut Button, yang berlaku untuk sebagian besar tipe View.
A. Ubah ukuran Tombol
Layout Editor memberikan handle pengubah ukuran di keempat sudut  View sehingga
Anda dapat mengubah ukuran View dengan  cepat. Anda dapat menyeret handle di setiap
sudut View untuk mengubah ukurannya, tetapi disertai dengan melakukan hardcode pada
dimensi tinggi dan lebar. Hindari melakukan hardcode untuk sebagian besar elemen View,
karena melakukan hardcode untuk dimensi (ukuran) tidak dapat langsung beradaptasi dengan
konten dan ukuran layar yang berbeda.
Sebagai gantinya, gunakan panel Attributes di sisi kanan layout editor untuk memilih
mode ukuran yang tidak menggunakan hardcode. Panel Atribut  termasuk panel ukuran
persegi disebut view inspector di bagian atas. Simbol di dalam kotak mewakili pengaturan
tinggi dan lebar sebagai berikut:

7 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
Pada gambar di atas:
1. Height Control . Kontrol ini menentukan atribut layout_height dan muncul dalam
dua segmen di sisi atas dan bawah persegi. Sudut menunjukkan bahwa kontrol ini
disetel ke wrap_content, yang berarti View akan meluas secara vertikal sesuai dengan
defaultnya. "8" menunjukkan margin standar yang disetel ke 8dp.
2. Weight Control . Kontrol ini menentukan layout_width dan muncul di dua segmen di
sisi kiri dan kanan persegi. Sudut menunjukkan bahwa kontrol ini disetel
ke wrap_content, yang berarti keinginan View akan meluas secara horizontal sesuai
kebutuhan agar sesuai dengan isinya, hingga margin 8 dp.
3. Atribut tombol tutup panel. Klik untuk menutup panel.
Ikuti langkah ini:
1. Pilih bagian atas Button di panel Component Tree .
2. Klik tab Attributes di sisi kanan jendela layout editor.

3. Klik kontrol lebar dua kali — klik pertama mengubahnya menjadi Fixed dengan garis
lurus, dan klik kedua mengubahnya menjadi Match Constraints dengan kumparan
pegas, seperti yang ditunjukkan pada gambar di bawah.

8 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
Sebagai hasil dari perubahan kontrol lebar, layout_width atribut
di panel Attributes menunjukkan nilai match_constraint dan Button elemen membentang
secara horizontal untuk mengisi ruang antara sisi kiri dan kanan layout.
4. Pilih Button yang kedua, dan buat perubahan yang sama pada layout_width seperti
langkah sebelumnya, seperti yang ditunjukkan pada gambar di bawah.

Seperti yang dijelaskan di langkah sebelumnya, atribut layout_width dan layout_height

di panel Attributes berubah saat Anda mengubah kontrol tinggi dan lebar di

9 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
inspector. Atribut ini dapat mengambil salah satu dari tiga nilai layout,
yaitu ConstraintLayout:
 Pengaturan match_constraint yang merupakan bagian elemen View untuk mengisi
parent dengan melebarkan dan meninggikan margin, jika salah satu diatur. Parent
dalam hal ini adalah ConstraintLayout. Anda mempelajari lebih lanjut
tentang ConstraintLayout di tugas berikutnya.
 Pengaturan wrap_content. Untuk melebarkan dimensi elemen view selebar konten
yang ada di dalamnya. Jika tidak ada konten, elemen View tersebut menjadi tidak
terlihat.
 Untuk menentukan ukuran tetap yang menyesuaikan dengan ukuran layar perangkat,
gunakan fixed number of density ( dp unit) yang . Misalnya, 16dp berarti 16 density-
independent pixels.
Tip : Jika Anda mengubah layout_width atribut menggunakan menu pop-upnya,
atribut layout_width disetel ke nol karena tidak ada dimensi yang ditetapkan. Pengaturan ini
sama dengan match_constraint- tampilan dapat diperluas sebanyak mungkin untuk memenuhi
batasan dan pengaturan margin.
B. Ubah atribut Tombol
Untuk mengidentifikasi setiap View secara unik dalam layout Activity, setiap View atau
subclass View (seperti Button) membutuhkan ID yang unik. Dan agar bisa digunakan,
elemen Button membutuhkan teks. Elemen Viewjuga bisa memiliki latar belakang yang bisa
berupa warna atau gambar.
Panel Atribut menyediakan untuk semua atribut yang dapat disetting ke elemen View. Anda
dapat memasukkan nilai-nilai untuk setiap atribut, seperti android:id, background, textColor,
dan atribut text.
Gambar berikut menunjukkan cara melakukan langkah-langkah ini:
1. Setelah memilih Button yang pertama,  edit ID di bagian
atas panel Attributes menjadi button_toast untuk atribut android:id tersebut, yang
digunakan untuk mengidentifikasi elemen dalam layout.
2. Setel atribut background ke @ color / colorPrimary . (Saat Anda memasukkan @c ,
pilihan muncul untuk memudahkan pemilihan.)
3. Setel atribut textColor ke @android: color / white .
4. Edit atribut text ke Toast .

10 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 5. Lakukan perubahan atribut dengan cara yang sama untuk Button yang kedua 
menggunakan button_count sebagai ID, Count untuk atribut text, dan warna yang
sama untuk latar belakang dan teks seperti langkah sebelumnya.
colorPrimary adalah warna utama tema, salah satu warna dasar tema yang ditentukan
sebelumnya di file resource (sumberdaya) colors.xml. Ini digunakan untuk app
bar. Menggunakan warna dasar untuk elemen UI lainnya akan membuat UI yang seragam. 

1.5. Menambah TextEdit dan Menyetel Attributnya

Salah satu keuntungan dari ConstraintLayout adalah kemampuan untuk menyelaraskan
atau membatasi elemen relatif terhadap elemen lainnya. Dalam tugas ini, Anda akan
menambahkan  TextView di tengah layout, dan mengconstrainnya secara horizontal ke
margin dan vertikal ke kedua elemen Button. Anda kemudian akan mengubah atribut
untuk TextView di panel Atribut .
A. Tambahkan TextView dan constraint
1. Seperti yang ditunjukkan pada gambar di bawah, drag TextView dari panel Palette ke
bagian atas layout, dan tarik pembatas dari atas TextView ke handle di bagian
bawah Button Toast. Ini membuat constraint TextView menjadi di bawah Button.

11 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 2. Seperti yang diperlihatkan dalam gambar di bawah, seret pembatas dari
bawah TextView ke handle di bagian atas Button count, dan dari sisi TextView ke
sisi layout. Ini memberikan constraint TextView berada di tengah layout antara kedua
elemen Button.

12 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 B. Setel Atribut TextView
Dengan posisi TextView yang diseleksi buka panel Attributes, jika belum terbuka. Atur
atribut TextView seperti yang ditunjukkan pada gambar di bawah ini. Atribut yang belum
Anda temui dijelaskan setelah gambar:
1. Setel ID ke show_count .
2. Setel text ke 0 .
3. Setel textSize ke 160sp .
4. Setel textStyle ke B (tebal) dan textAlignment ke ALIGNCENTER (tengah paragraf).
5. Ubah kontrol ukuran horizontal dan vertikal ( layout_width dan layout_height)
menjadi match_constraint .
6. Setel textColor ke @ color / colorPrimary .
7. Geser ke bawah panel dan klik View all attributes, geser ke bawah halaman kedua
atribut background, lalu masukkan # FFFF00 untuk bayangan kuning.
8. Geser ke bawah menuju gravity, expand gravity, dan pilih center_ver (untuk vertikal-
tengah).

13 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
  textSize: Ukuran teks file TextView. Untuk pelajaran ini, ukurannya disetel ke 160sp. 
Sp singkatan pixel skala-independen , dan seperti dp, adalah unit yang yang
digunakan untuk density layar dan huruf preferensi ukuran pengguna. Gunakan unit
dp saat Anda menentukan ukuran font sehingga ukurannya disesuaikan dengan
density layar dan preferensi pengguna.
 textStyle dan textAlignment: Style teks, atur ke B (tebal) dalam pelajaran ini, dan
perataan teks, atur ke ALIGNCENTER(tengah paragraf).
 gravity:atribut gravity menentukan bagaimana View sejajar dalam parent
View atau ViewGroup. Pada langkah ini, Anda memusatkan TextView untuk
dipusatkan secara vertikal di dalam induk ConstraintLayout.
Anda mungkin memperhatikan bahwa atribut background berada di halaman
pertama panel Attributes untuk Button, tetapi di halaman kedua panel Attributes untuk
TextView. Perubahan panel Atribut  untuk masing-masing jenis View: Atribut yang paling
populer untuk View muncul di halaman pertama, dan sisanya tercantum pada halaman

kedua. Untuk kembali ke halaman pertama dari panel Attributes , klik  ikon di

toolbar di bagian atas panel.

14 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
1.6. Mengedit Layout dalam XML

Layout aplikasi Hello Toast hampir selesai! Namun, tanda seru muncul di samping
setiap elemen UI di Component Tree. Arahkan penunjuk Anda ke atas tanda seru ini untuk
melihat pesan peringatan, seperti yang ditunjukkan di bawah ini. Peringatan yang sama
muncul untuk ketiga elemen: string yang di-hardcode harus menggunakan resources.

Cara termudah untuk memperbaiki masalah layout adalah dengan mengedit layout
dalam XML. Meskipun layout editor adalah tool yang ampuh, beberapa perubahan lebih
mudah dilakukan secara langsung di sourcecode XML.

A. Buka Kode XML untuk Layout

Untuk tugas ini, buka activity_main.xml file jika belum dibuka, dan klik tab Teks

 di bagian bawah layout editor.

Editor XML muncul, menggantikan panel design dan blueprint. Seperti yang Anda lihat
pada gambar di bawah ini, yang menunjukkan bagian dari kode XML untuk layout, tanda
seru disorot — string yang di-hardcode "Toast" dan "Count". (Hardcode "0"juga disorot
tetapi tidak ditampilkan pada gambar.) Arahkan penunjuk Anda "Toast"ke string
hardcode untuk melihat pesan peringatan.

15 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 B. Ekstrak sumber daya string
Alih-alih string hard-coding, praktik terbaiknya adalah menggunakan sumber daya string,
yang mewakili string. Memiliki string dalam file terpisah membuatnya lebih mudah untuk
mengelolanya, terutama jika Anda menggunakan string ini lebih dari sekali. Selain itu,
sumber daya string bersifat wajib untuk menerjemahkan dan melokalkan aplikasi Anda,
karena Anda perlu membuat file sumber daya string untuk setiap bahasa.
1. Klik sekali pada kata "Toast"(peringatan pertama yang disorot).
2. Tekan Alt-Enter di Windows atau Option-Enter di macOS dan pilih Extract string
resource dari menu popup.
3. Masukkan button_label_toast untuk Resource name.
4. Klik OK . string resource dibuat dalam file values/res/string.xml, dan string dalam
kode Anda diganti dengan referensi ke resource:
@string/button_label_toast
5. Ekstrak string yang tersisa: button_label_count untuk "Count",
dan count_initial_value dengan "0".
6. Di panel Project> Android , expand values dalam res , lalu klik dua
kali strings.xml untuk melihat sumber daya string Anda di strings.xmlfile:

16 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
<resources>
    <string name="app_name">Hello Toast</string>
    <string name="button_label_toast">Toast</string>
    <string name="button_label_count">Count</string>
    <string name="count_initial_value">0</string>
</resources>

7. Anda memerlukan string lain untuk digunakan dalam tugas berikutnya yang
menampilkan pesan. Tambahkan ke file strings.xml resource string lain yang diberi
nama toast_message untuk frasa "Hello Toast!":
<resources>
    <string name="app_name">Hello Toast</string>
    <string name="button_label_toast">Toast</string>
    <string name="button_label_count">Count</string>
    <string name="count_initial_value">0</string>
    <string name="toast_message">Hello Toast!</string>
</resources>

1.7. Menambah onClick handlers untuk button

Dalam tugas ini, Anda menambahkan metode Java untuk setiap Button
di MainActivitymengeksekusi bahwa ketika pengguna mengetuk tersebut Button.

A. Menambahkan atribut dan handler onClick ke setiap Tombol

Click Handler adalah metode yang dipanggil ketika pengguna mengklik atau men-tap pada
elemen UI. Di Android Studio Anda bisa menentukan nama metode onClick
di panel Atribut tab Desain. Anda juga bisa menentukan nama metode handler di editor
XML dengan menambahkan properti android:onClick ke Button. Anda akan menggunakan
metode terakhir karena Anda belum membuat handler method, dan editor XML menyediakan
cara otomatis untuk membuat metode tersebut.
1. Dengan editor XML terbuka (tab Text), temukan Button dengan android:id ubah
menjadi button_toast:
<Button
        android:id="@+id/button_toast"
        android:layout_width="0dp"
        ...
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

2. Tambahkan atribut android:onClick ke akhir button_toast elemen setelah atribut

terakhir dan sebelum />indikator akhir:

17 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 android:onClick="showToast" />

3. Klik ikon bohlam merah yang muncul di samping atribut. Pilih Create click handler,
pilih MainActivity , dan klik OK .
Jika ikon bohlam merah tidak muncul, klik nama metode ( "showToast"). Tekan Alt-
Enter ( Option-Enter di Mac), pilih Create 'showToast (view)' in MainActivity , dan klik OK .
Tindakan ini membuat metode placeholder untuk showToast() metode di MainActivity,
seperti yang diperlihatkan di akhir langkah-langkah ini.
4. Ulangi dua langkah terakhir dengan button_count Button:
Tambahkan android:onClickatribut di akhir, dan tambahkan handler klik:
android:onClick="countUp" />

Kode XML untuk elemen UI di dalam ConstraintLayout sekarang terlihat seperti ini:

<Button
        android:id="@+id/button_toast"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:onClick="showToast"/>

    <Button
        android:id="@+id/button_count"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:background="@color/colorPrimary"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:onClick="countUp" />

    <TextView
        android:id="@+id/show_count"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"

18 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
        android:background="#FFFF00"
        android:gravity="center_vertical"
        android:text="@string/count_initial_value"
        android:textAlignment="center"
        android:textColor="@color/colorPrimary"
        android:textSize="160sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/button_count"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button_toast" />

5. Jika MainActivity.java belum terbuka, expand java di Project > Android View,

expand com.example.android.hellotoast , lalu klik dua kali MainActivity . Editor
kode muncul dengan kode di MainActivity:

package com.example.android.hellotoast;

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

public class MainActivity extends AppCompatActivity {

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

    public void showToast(View view) {

    }

    public void countUp(View view) {

    }
}

B. Edit penangan Tombol Toast

Anda sekarang akan mengedi tmetode showToast() — penangan klik Toast

Button di MainActivity— sehingga ini menampilkan pesan. Toast menyediakan cara untuk
menampilkan pesan sederhana di jendela popup kecil. Ini hanya mengisi jumlah ruang yang
dibutuhkan untuk pesan. Aktivitas saat ini tetap terlihat dan interaktif. Toast dapat berguna
untuk menguji interaktivitas dalam aplikasi Anda — tambahkan Toast pesan untuk
menunjukkan hasil dari mengetuk Button atau melakukan suatu tindakan.

Ikuti langkah-langkah berikut untuk mengedit click handler Toast Button :

19 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 1. Temukan metode yang baru dibuat showToast().
public void showToast(View view) {
}

2. Untuk membuat sebuah instance Toast, panggil metode pabrikan makeText() dalam

kelas Toast
public void showToast(View view) {
    Toast toast = Toast.makeText(
}

Pernyataan ini tidak lengkap sampai Anda menyelesaikan semua langkah.

3. Berikan konteks aplikasi Activity. Karena Toast tampil di atas Activity UI, sistem
memerlukan informasi tentang arus Activity. Saat Anda sudah berada dalam
konteks Activity yang konteksnya Anda butuhkan, gunakan this sebagai jalan pintas.
Toast toast = Toast.makeText(this,

4. Sediakan pesan untuk ditampilkan, seperti string resource (yang toast_messageAnda

buat di langkah sebelumnya). String resource toast_message diidentifikasi
oleh R.string.
Toast toast = Toast.makeText(this, R.string.toast_message,
5. Berikan durasi untuk tampilan. Misalnya, Toast.LENGTH_SHORT menampilkan “Toast”
dalam waktu yang relatif singkat.
Toast toast = Toast.makeText(this, R.string.toast_message,
                                          Toast.LENGTH_SHORT);
Durasi tampilan Toast tampilan dapat berupa Toast.LENGTH_LONG
atau Toast.LENGTH_SHORT. Panjang sebenarnya sekitar 3,5 detik untuk
panjang Toast dan 2 detik untuk pendek Toast.
6. Tunjukkan Toast dengan mengkoneksikan method show(). Berikut ini adalah seluruh
metode showToast():
public void showToast(View view) {
   Toast toast = Toast.makeText(this, R.string.toast_message,
                                          Toast.LENGTH_SHORT);
   toast.show();
}

Jalankan aplikasi dan verifikasi bahwa pesan  Toast tersebut muncul

saat tombol Toast diketuk (Tap).

20 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
C. Edit Count Button handler
Anda sekarang akan mengedit metode countUp() — Click Handle Hitung Button dalam
MainActivity — sehingga metode ini menampilkan hitungan saat ini setelah Count
diketuk. Setiap ketukan meningkatkan hitungan satu kali.
Kode untuk handler harus:
 Memantau penghitungan saat berubah.
 Mengirim hitungan yang diperbarui ke TextView untuk menampilkannya.
Ikuti langkah-langkah berikut untuk mengedit Click Handler Button :
1. Temukan metode yang baru dibuat countUp().
public void countUp(View view) {
}

2. Untuk melacak penghitungan, Anda memerlukan variabel private. Setiap

tap tombol Count meningkatkan nilai variabel ini. Coding yang berikut ini, ketika
disorot akan muncul warna merah dan menampilkan ikon bola lampu merah:
public void countUp(View view) {
    mCount++;
}

Jika ikon bohlam merah tidak muncul, pilih ekspresi mCount++ tersebut. Bola lampu merah
akhirnya muncul.
3. Klik ikon bohlam merah dan pilih Create Field 'mCount' dari menu popup. Ini
membuat private member variable di bagian atas MainActivity, dan Android Studio
berasumsi bahwa Anda menginginkannya menjadi integer ( int):

21 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 public class MainActivity extends AppCompatActivity {
    private int mCount;

4. Ubah pernyataan private member variable untuk menginisialisasi variabel menjadi

nol:
public class MainActivity extends AppCompatActivity {
    private int mCount = 0;

5. Bersamaan dengan variabel di atas, Anda juga memerlukan private member variable
untuk referensi TextView show_count, yang akan Anda tambahkan ke click
handler. Panggil variabel ini mShowCount:
public class MainActivity extends AppCompatActivity {
    private int mCount = 0;
    private TextView mShowCount;

6. Sekarang setelah Anda memilikinya mShowCount, Anda bisa mendapatkan referensi

ke TextView menggunakan ID yang Anda setel di file layout. Untuk mendapatkan
referensi ini hanya sekali, tentukan dalam metode onCreate(). Seperti yang Anda
pelajari di materi lain, metode onCreate() ini digunakan untuk memekarkan layout ,
yang berarti menyetel tampilan konten layar ke layout XML. Anda juga bisa
menggunakannya untuk mendapatkan referensi ke elemen UI lainnya dalam layout,
seperti TextView. Temukan metode onCreate() di MainActivity:
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

7. Tambahkan pernyataan findViewById di akhir metode:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mShowCount = (TextView) findViewById(R.id.show_count);
}

 View, sama halnya seperti string, adalah resources yang dapat memiliki id.  findViewById

mengambil ID dari tampilan sebagai parameter dan mengembalikan View. Karena metode

mengembalikan View, Anda harus meng-cast hasil ke tipe view yang Anda harapkan, dalam
kasus ini (TextView).
8. Sekarang bahwa Anda telah menyeting mShowCount pada TextView, Anda dapat
menggunakan variabel untuk mengatur teks dalam TextViewuntuk nilai
variabel mCountvariabel. Tambahkan coding berikut ke metode countUp():

22 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m
 if (mShowCount != null)
            mShowCount.setText(Integer.toString(mCount));

Seluruh metode countUp() sekarang terlihat seperti ini:

public void countUp(View view) {
    ++mCount;
    if (mShowCount != null)
        mShowCount.setText(Integer.toString(mCount));
}

9. Jalankan aplikasi untuk memverifikasi bahwa hitungan bertambah saat Anda meng-
tap tombol Count .

23 | M o d u l P r a k ti k u m P e m r o g r a m a n M o b i l e
I n d r a G r i h a T o fi k I s a , S . T . , M . K o m