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.
EditText
Kolom teks serbaguna. Punya atribut sakti inputType untuk memaksa keyboard berubah jadi mode Angka, Email, atau Password.
Spinner
Menu *Dropdown* minimalis. Sangat hemat ruang layar.
RadioGroup
Berisi kumpulan RadioButton. User hanya bisa memilih SALAH SATU opsi (seperti milih Gender atau Suhu).
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.
๐ซ Snackbar
Evolusi dari Toast. Muncul tebal dari bawah. Bisa diimbuhi 1 "Tombol Aksi" interaktif di ujung kanannya.
๐จ AlertDialog
Pop-up konfirmasi di tengah layar. Memaksa user memilih (misal: "Ya" atau "Tidak") sebelum proses dilanjutkan.
Simpan Data?
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.
Order Kopi
Silakan isi detail pesanan
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*!
- Siapkan 1 EditText (Nama Pemesan), 1 Spinner (Pilih Film), 1 RadioGroup (Pilih Studio: Reguler / Premiere), dan 1 CheckBox (Pesan Popcorn๐ฟ). Serta tombol "BELI TIKET".
- Tulis blok
setOnClickListenerpada tombol beli. - Validasi: Pastikan kolom Nama TIDAK KOSONG. Kalau kosong, marahi pakai
setError()dan Toast! - Jika lancar, munculkan AlertDialog berisi rincian pesanan.
- Jika user memencet "OK" di AlertDialog, munculkan Toast: "Tiket berhasil dicetak!"
Kunci Jawaban Full Logic (Java):
// Di dalam blok onCreate, saat memasang Listener pada tombol Beli:
btnBeliTiket.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String nama = inputNama.getText().toString();
// 1. Validasi Nama
if (TextUtils.isEmpty(nama)) {
inputNama.setError("Nama tidak boleh kosong!");
Toast.makeText(MainActivity.this, "Isi nama dulu ya!", Toast.LENGTH_SHORT).show();
return; // Hentikan eksekusi
}
// 2. Ambil Pilihan Film (Spinner)
String film = spinnerFilm.getSelectedItem().toString();
// 3. Ambil Tipe Studio (RadioGroup)
int selectedStudioId = radioGroupStudio.getCheckedRadioButtonId();
if (selectedStudioId == -1) {
Toast.makeText(MainActivity.this, "Pilih tipe studio dulu!", Toast.LENGTH_SHORT).show();
return;
}
RadioButton radioStudio = findViewById(selectedStudioId);
String studio = radioStudio.getText().toString();
// 4. Ambil Opsi Popcorn (CheckBox)
String popcorn = checkPopcorn.isChecked() ? "Ya (Combo Popcorn)" : "Tidak Pakai";
// 5. Bangun String Pesan & Tampilkan AlertDialog Konfirmasi
String detailPesanan = "Film: " + film + "\nStudio: " + studio + "\nPopcorn: " + popcorn;
new AlertDialog.Builder(MainActivity.this)
.setTitle("Konfirmasi Tiket: " + nama)
.setMessage(detailPesanan)
.setPositiveButton("OKE, CETAK TIKET", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this, "Tiket berhasil dicetak!", Toast.LENGTH_LONG).show();
}
})
.setNegativeButton("BATAL", null)
.show();
}
});