Pertemuan 5

Input Controls &
Event Handling ๐ŸŽ›๏ธ

Berikan "Telinga" dan "Suara" pada aplikasimu! Belajar menangkap interaksi ketikan/klik user, melakukan validasi keamanan, lalu memberikan respon balasan berupa pop-up ciamik.

1. Input Controls (Gerbang Data)

Komponen UI interaktif tempat user memasukkan data sebelum diolah oleh mesin Java.

Ketik sesuatu...

EditText

Kolom teks serbaguna. Punya atribut sakti inputType untuk memaksa keyboard berubah jadi mode Angka, Email, atau Password.

Pilih Opsi

Spinner

Menu *Dropdown* minimalis. Sangat hemat ruang layar.

A
B

RadioGroup

Berisi kumpulan RadioButton. User hanya bisa memilih SALAH SATU opsi (seperti milih Gender atau Suhu).

X
Y

CheckBox

Kotak centang yang bisa dipilih LEBIH DARI SATU sekaligus (seperti memilih Extra Topping).

ImageView (Dinamis)

Bisa dimanipulasi dengan Java agar gambarnya berubah-ubah mendeteksi pilihan dari Spinner!

Info Penting: Cara Memasukkan Gambar (Drawable)

Sebelum gambar bisa dipakai di ImageView, kamu harus memasukkannya ke folder khusus di dalam struktur Android Studio:

  • Lokasi Folder: Kopi-paste file gambarmu langsung ke dalam folder app/src/main/res/drawable.
  • Format Didukung: .png, .jpg, .webp, atau Vector Asset (XML).
  • Aturan Nama File (SANGAT KETAT): HARUS huruf kecil semua, TANPA spasi (ganti spasi dengan garis bawah _), dan tidak boleh diawali oleh angka.
    โœ… Benar: kopi_hitam.png โŒ Salah: Kopi Hitam 1.png
  • Cara Panggil di XML: Gunakan atribut android:src="@drawable/kopi_hitam"
  • Cara Panggil di Java: imgView.setImageResource(R.drawable.kopi_hitam);

2. Event Handling & Validasi

Button ibarat "Bel Pintu". Percuma ditekan kalau tidak ada orang di dalam rumah yang mendengarnya! Di Java, orang yang mendengarkan ini disebut Listener.

  • setOnClickListener: Metode ajaib yang dipasang ke Button untuk mengeksekusi blok kode Java tepat saat tombol itu ditusuk jari user.
  • Validasi: Sebelum data diolah/disimpan, SATPAM form harus memeriksa apakah teks kosong? Gunakan fungsi bawaan Android: TextUtils.isEmpty(variabel).
  • setError("Pesan"): Atribut khusus milik EditText untuk memunculkan ikon tanda seru merah dan pesan *error* melayang langsung di kolom teks tersebut.

3. Pesan Balasan & Konfirmasi

Jangan biarkan *user* kebingungan! Berikan respon setelah mereka bertindak.

๐Ÿž Toast

Pesan mungil mengambang. Muncul sebentar, lalu lenyap. Tidak bisa di-klik. Murni sekadar notifikasi seliwat.

Sukses simpan data!

๐Ÿซ Snackbar

Evolusi dari Toast. Muncul tebal dari bawah. Bisa diimbuhi 1 "Tombol Aksi" interaktif di ujung kanannya.

Item dihapus Undo

๐Ÿšจ AlertDialog

Pop-up konfirmasi di tengah layar. Memaksa user memilih (misal: "Ya" atau "Tidak") sebelum proses dilanjutkan.

Simpan Data?

BATAL OK

Live Form Simulator

Coba langsung logikanya! Coba biarkan nama kosong lalu klik Daftar untuk melihat fungsi validasi error. Jika diisi dengan benar, lihat bagaimana Toast muncul di layar.

Pendaftaran App
Coffee Image

Order Kopi

Silakan isi detail pesanan

Pesan Toast Muncul!

Bedah Kode Asli

Di balik simulator keren di atas, inilah kode asli yang bekerja di Android Studio. Kamu bisa melihat struktur komponen UI-nya di tab XML dan logika validasinya di tab Java.

<!-- activity_main.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp">

    <!-- Foto Kopi Dinamis -->
    <ImageView
        android:id="@+id/imgKopi"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:src="@drawable/kopi_hitam"
        android:layout_marginBottom="16dp" />

    <!-- Label & Input Nama -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NAMA PEMESAN"
        android:textStyle="bold"
        android:textColor="#6366f1" />
    
    <EditText
        android:id="@+id/inputNama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Atas nama siapa?"
        android:layout_marginBottom="16dp" />

    <!-- Label & Spinner Menu -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MENU KOPI"
        android:textStyle="bold"
        android:textColor="#6366f1" />

    <Spinner
        android:id="@+id/spinnerMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp" />

    <!-- Label & RadioGroup Suhu -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SUHU (PILIH SATU)"
        android:textStyle="bold"
        android:textColor="#6366f1" />

    <RadioGroup
        android:id="@+id/radioSuhu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="16dp">
        
        <RadioButton android:id="@+id/radioPanas" android:text="Panas (Hot)" android:checked="true" />
        <RadioButton android:id="@+id/radioDingin" android:text="Dingin (Ice)" />
    </RadioGroup>

    <!-- Label & CheckBox Tambahan -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TAMBAHAN (OPSIONAL)"
        android:textStyle="bold"
        android:textColor="#6366f1" />

    <CheckBox
        android:id="@+id/checkEkstra"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tambah Ekstra Shot (+Rp 5.000)"
        android:layout_marginBottom="32dp" />

    <Button
        android:id="@+id/btnPesan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="PESAN SEKARANG" />

</LinearLayout>

6. Mini Challenge

Udah ngerasa jago bikin form? Buktikan dengan membuat "Aplikasi Pemesanan Tiket Bioskop" tanpa *copy-paste*!

  1. Siapkan 1 EditText (Nama Pemesan), 1 Spinner (Pilih Film), 1 RadioGroup (Pilih Studio: Reguler / Premiere), dan 1 CheckBox (Pesan Popcorn๐Ÿฟ). Serta tombol "BELI TIKET".
  2. Tulis blok setOnClickListener pada tombol beli.
  3. Validasi: Pastikan kolom Nama TIDAK KOSONG. Kalau kosong, marahi pakai setError() dan Toast!
  4. Jika lancar, munculkan AlertDialog berisi rincian pesanan.
  5. Jika user memencet "OK" di AlertDialog, munculkan Toast: "Tiket berhasil dicetak!"