Pada tutorial sebelumnya, kita telah membahas konsep dasar layout dan berbagai jenis ViewGroup yang digunakan untuk menata tampilan aplikasi. Kini, saatnya kita fokus pada “isi” dari layout tersebut, yaitu berbagai komponen UI atau Widget (View) yang berinteraksi langsung dengan pengguna. Memahami komponen-komponen dasar ini adalah kunci untuk membangun antarmuka yang fungsional dan intuitif. 💡

Artikel ini akan memperkenalkan beberapa komponen UI paling sering digunakan, atribut pentingnya, dan bagaimana cara memanfaatkannya dalam desain aplikasi Anda.

## Apa itu Komponen UI (Widget/View)?

Dalam konteks Android, View adalah objek dasar untuk semua komponen UI. Ia adalah blok bangunan terkecil yang bisa diletakkan di layar. Widget adalah istilah lain yang sering digunakan, merujuk pada View yang sudah “siap pakai” seperti Button, TextView, atau ImageView.

Setiap View memiliki serangkaian atribut yang bisa diatur untuk mengontrol tampilan, ukuran, posisi, dan perilakunya. Atribut-atribut ini biasanya didefinisikan dalam file XML layout.

## Komponen UI Dasar yang Sering Digunakan

Mari kita bahas beberapa komponen UI yang akan menjadi “sahabat” Anda dalam membangun aplikasi Android.

1. TextView

TextView adalah komponen UI paling dasar untuk menampilkan teks kepada pengguna.

• Fungsi: Menampilkan teks statis.
• Atribut Penting:
  • android:text: Menentukan teks yang akan ditampilkan.
  • android:textSize: Mengatur ukuran teks (misalnya, "18sp"). Satuan sp (scale-independent pixel) direkomendasikan untuk teks agar ukurannya disesuaikan dengan preferensi pengguna.
  • android:textColor: Mengatur warna teks (misalnya, "#FFFFFF" atau @color/black).
  • android:textStyle: Mengatur gaya teks ("bold", "italic", atau "normal").
  • android:maxLines: Membatasi jumlah baris teks yang ditampilkan.
• Contoh Penggunaan: Judul, deskripsi, pesan informasi.
  XML

  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Selamat Datang di Malang!"
      android:textSize="24sp"
      android:textColor="@color/purple_700"
      android:textStyle="bold" />
  

2. Button

Button adalah komponen yang dapat diklik pengguna untuk memicu suatu aksi dalam aplikasi.

• Fungsi: Memicu event saat diklik.
• Atribut Penting:
  • android:text: Teks yang ditampilkan pada tombol.
  • android:onClick: Menentukan nama method di Activity yang akan dipanggil saat tombol diklik (ini adalah cara lama, sekarang lebih sering menggunakan listener di kode Java/Kotlin).
  • android:backgroundTint: Mengatur warna latar belakang tombol (pada material design).
• Contoh Penggunaan: Tombol “Login”, “Kirim”, “Batal”, “Selanjutnya”.
  XML

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Klik Saya"
      android:onClick="onButtonClick" />
  

3. EditText

EditText adalah komponen input teks yang memungkinkan pengguna untuk mengetik dan memasukkan data.

• Fungsi: Menerima input teks dari pengguna.
• Atribut Penting:
  • android:hint: Teks petunjuk yang muncul saat kolom input kosong (misalnya, "Masukkan nama Anda").
  • android:inputType: Menentukan jenis input keyboard yang akan muncul (misalnya, "text", "number", "textPassword", "textEmailAddress").
  • android:maxLines: Membatasi jumlah baris input.
• Contoh Penggunaan: Kolom nama pengguna, kata sandi, email, pesan.
  XML

  <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Nama Lengkap"
      android:inputType="textPersonName" />
  

4. ImageView

ImageView digunakan untuk menampilkan gambar di aplikasi Anda.

• Fungsi: Menampilkan gambar.
• Atribut Penting:
  • android:src: Menentukan sumber gambar yang akan ditampilkan. Gambar biasanya diletakkan di direktori res/drawable/.
  • android:scaleType: Mengatur bagaimana gambar diskalakan atau diposisikan di dalam ImageView (misalnya, "centerCrop", "fitCenter", "matrix").
• Contoh Penggunaan: Logo, ikon, foto profil, gambar produk.
  XML

  <ImageView
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:src="@drawable/logo_malang" // Asumsi ada gambar logo_malang.png di drawable
      android:scaleType="centerCrop"
      android:contentDescription="Logo Kota Malang" />
  

5. CheckBox

CheckBox adalah komponen yang memungkinkan pengguna untuk memilih satu atau lebih opsi dari daftar.

• Fungsi: Memilih opsi yang bersifat boolean (benar/salah).
• Atribut Penting:
  • android:text: Teks yang ditampilkan di samping checkbox.
  • android:checked: Mengatur apakah checkbox awalnya dicentang ("true") atau tidak ("false").
• Contoh Penggunaan: “Setuju dengan Syarat dan Ketentuan”, “Ingat Saya”, pilihan fitur.
  XML

  <CheckBox
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Saya setuju dengan syarat dan ketentuan"
      android:checked="false" />
  

## Atribut Umum untuk Semua View

Selain atribut spesifik untuk masing-masing komponen, ada beberapa atribut umum yang dimiliki oleh hampir semua View:

• android:id: Sebuah ID unik untuk mengidentifikasi View tersebut dalam file XML dan kode Java/Kotlin (misalnya, @+id/myTextView). Ini sangat penting untuk dapat mengakses dan memodifikasi View secara programatis.
• android:layout_width: Lebar View. Bisa berupa ukuran spesifik ("100dp"), match_parent (selebar induknya), atau wrap_content (selebar konten di dalamnya).
• android:layout_height: Tinggi View. Sama seperti layout_width.
• android:padding: Jarak antara konten View dengan batas View itu sendiri.
• android:layout_margin: Jarak antara batas View dengan batas View di sekitarnya.

## Praktik: Membangun Form Sederhana

Mari kita coba membuat form pendaftaran sederhana menggunakan ConstraintLayout dan komponen-komponen yang telah kita pelajari.

1. Buka activity_main.xml di Android Studio, pastikan Anda di tab Design.
2. Ubah ViewGroup utama menjadi ConstraintLayout jika belum.
3. Tambahkan TextView untuk Judul:
   • Seret TextView dari Palette.
   • Atur android:text menjadi “Form Pendaftaran”.
   • Atur android:textSize="24sp" dan android:textStyle="bold".
   • Tambahkan constraint ke atas dan ke samping (start dan end) untuk memusatkannya di bagian atas.
4. Tambahkan EditText untuk Nama:
   • Seret EditText (Text – PlainText) dari Palette.
   • Atur android:hint="Nama Lengkap".
   • Atur android:id="@+id/etNama".
   • Tambahkan constraint ke bawah TextView judul, serta ke samping kiri dan kanan parent.
5. Tambahkan EditText untuk Email:
   • Seret EditText (Text – Email) dari Palette.
   • Atur android:hint="Email".
   • Atur android:id="@+id/etEmail".
   • Tambahkan constraint ke bawah EditText Nama, serta ke samping kiri dan kanan parent.
6. Tambahkan CheckBox untuk Persetujuan:
   • Seret CheckBox dari Palette.
   • Atur android:text="Saya setuju dengan kebijakan privasi".
   • Atur android:id="@+id/cbPrivacy".
   • Tambahkan constraint ke bawah EditText Email, serta ke samping kiri parent.
7. Tambahkan Button untuk Daftar:
   • Seret Button dari Palette.
   • Atur android:text="Daftar Sekarang".
   • Atur android:id="@+id/btnDaftar".
   • Tambahkan constraint ke bawah CheckBox, serta ke samping kiri dan kanan parent untuk memusatkannya.

Hasilnya akan terlihat seperti form sederhana yang terorganisir. ConstraintLayout akan memastikan bahwa form ini tetap terlihat baik di berbagai ukuran layar.

## Kesimpulan 🎯

Menguasai komponen UI dasar adalah langkah penting dalam perjalanan Anda sebagai pengembang Android. Setiap View memiliki peran spesifik dan serangkaian atribut yang memungkinkan Anda menyesuaikan tampilan dan perilakunya. Dengan menggabungkan ViewGroup dan berbagai View ini, Anda dapat mulai membangun antarmuka aplikasi yang menarik dan fungsional.

Di tutorial berikutnya, kita akan belajar bagaimana menghubungkan komponen UI ini dengan kode Java/Kotlin, sehingga aplikasi Anda bisa merespons interaksi pengguna.