Modul 3: Dasar UI/UX & Layouting

1. XML: Bukan Bahasa Alien!

Kalau Java itu "Otak"-nya, maka XML itu "Wajah"-nya. XML (Extensible Markup Language) dipakai untuk mendesain User Interface (UI).

Bedanya sama Java, XML ini lebih gampang dibaca. Isinya cuma tag pembuka <Tag> dan properti-properti aja. Mirip kayak HTML kalau kamu pernah belajar bikin web.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Halo Ayang!"
    android:textColor="#FF0000" />

2. View vs ViewGroup (Bata & Semen)

View (Komponen)

Elemen UI yang punya wujud dan bisa disentuh user. Ibarat batu batanya.

TextView Button ImageView

ViewGroup (Wadah)

Container tak kasat mata yang ngebungkus dan ngatur posisi para View. Ibarat semennya.

LinearLayout ConstraintLayout

3. Linear vs Constraint Layout

LinearLayout

Menyusun elemen secara berbaris lurus, ketat, tanpa tumpang tindih. Cocok untuk susunan yang simpel.

Vertical

Horizontal

ConstraintLayout (The Boss)

Layout modern dari Android. Sistemnya pakai "Karet Gelang" yang mengaitkan elemen ke pinggir layar atau ke elemen lain. Sangat responsif!

Button

Eksplorasi Layout Lainnya

Sebagai tambahan wawasan, berikut adalah beberapa layout lain yang ada di Android (baik yang sudah legacy maupun yang masih sangat relevan):

1. RelativeLayout (Legacy)

Menyusun elemen relatif terhadap elemen lain. Misalnya, Tombol B ditaruh "di sebelah kanan" dan "di bawah" Tombol A. Dulu sangat populer sebelum ada ConstraintLayout.

A

B (Kanan A)

C (Bawah A)

2. TableLayout (Legacy)

Menyusun elemen dalam baris dan kolom seperti Microsoft Excel. Saat ini jarang digunakan karena kaku dan kurang responsif untuk ukuran layar yang berbeda-beda.

Col 1

Col 2

Span 2 Columns

Col 1

Col 2

3. GridLayout

Versi modern dari TableLayout. Sangat cocok untuk membuat tampilan seperti aplikasi Kalkulator atau Galeri foto yang susunannya rapi dan terkotak-kotak.

4. RecyclerView (The King of Lists)

Bukan sekadar layout, ini adalah komponen wajib untuk menampilkan daftar data panjang (seperti feed Instagram atau riwayat chat). Sangat cepat dan hemat memori!

4. Spacing: Margin vs Padding

Ini konsep yang sering bikin bingung! Padding itu jarak ke DALAM (bikin komponen melar/gendut), sedangkan Margin itu jarak ke LUAR (ngedorong komponen lain). Coba geser slider di bawah biar paham!

Padding 16dp

Margin 16dp

Tips: Di Android, ukuran spasi/kotak pakai satuan dp (Density-independent Pixels). Untuk teks pakai sp.

Isi Konten (Text)

Parent Layout

5. Kamus Atribut & Simulator

Simulator: Visibility

Coba ubah status kotak tengah (Kotak B) untuk melihat perbedaan invisible dan gone.

A

B

C

Status Kotak B: visible

Gravity vs Layout_Gravity

gravity mengatur isi (teks), layout_gravity mengatur kotak itu sendiri di dalam parent-nya.

gravity (Teks)

layout_gravity

Isi Teks

Cheat Sheet XML Lengkap

Atribut XML	Fungsi Utama
android:layout_width / height	Lebar/Tinggi View (match_parent, wrap_content, dp).
android:layout_margin	Jarak LUAR (mendorong elemen lain di sekitarnya). Bisa dispesifikkan pakai marginTop, Bottom, Start, End.
android:padding	Jarak DALAM (ruang antara batas View dengan isi/kontennya).
android:background(Tint)	Warna latar belakang. (Tint digunakan untuk memberi filter/warna tambahan).
android:elevation	Efek melayang/bayangan (3D). Makin besar angka dp, bayangan makin luas.
android:alpha	Tingkat transparansi (0.0 sampai 1.0).
android:minWidth / maxWidth	Menjamin dimensi komponen tidak kurang dari / melebihi batas ukuran ini.

Atribut (app:layout_...)	Fungsi Karet Gelang
..._constraintTop_toTopOf	Menempelkan sisi ATAS elemen ini ke sisi ATAS target (parent/ID view lain).
..._constraintTop_toBottomOf	Menempelkan sisi ATAS elemen ini ke sisi BAWAH target (berada di bawahnya).
..._constraintBaseline_to...	Menyejajarkan elemen tepat berdasarkan garis alas teksnya (berguna untuk ukuran font yang beda).
..._constraintHorizontal_bias	Mengatur posisi dari tarikan 2 sisi (0.0 condong kiri, 0.5 di tengah, 1.0 condong kanan).
..._constraintDimensionRatio	Membuat ukuran proporsional (contoh rasio "1:1" untuk persegi, "16:9" untuk video).
..._constraintHorizontal_chainStyle	Mengatur rantai sekelompok View sejajar (spread, spread_inside, packed).
..._constraintWidth_percent	Ukuran berdasarkan persen dari layar parent. Syarat mutlak: layout_width harus "0dp".

Atribut XML	Layout	Fungsi Utama
android:orientation	Linear	Mengatur tumpukan vertical (atas-bawah) atau horizontal (kiri-kanan).
android:layout_weight	Linear	Pembagian jatah ruang fleksibel (Mirip flexbox CSS). Ditaruh di View komponen anak.
android:layout_below	Relative	Memaksa View ditaruh tepat di bawah ID View lain.
android:layout_toEndOf	Relative	Memaksa View ditaruh tepat di sebelah kanan ID View lain.
android:layout_centerInParent	Relative	Meletakkan View persis di tengah-tengah Parent.
android:layout_alignParentTop	Relative	Menempelkan View di batas dinding paling atas milik Parent.

6. Hands-on Quest: Eksperimen Berbagai Layout!

Yuk, buka lagi Android Studio kalian! Kita akan mencoba coding UI menggunakan beberapa jenis layout. Buka file activity_main.xml dan ubah mode di kanan atas ke Split. Hapus semua isinya, lalu coba copy-paste misi di bawah ini satu per satu:

Layar Login Aesthetic

Perhatikan atribut app:layout_constraint... bekerja seperti karet gelang yang menarik elemen ke berbagai arah.

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent">

    <!-- Judul Halaman -->
    <TextView 
        android:id="@+id/tvTitle" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Welcome Back!" 
        android:textSize="28sp" 
        android:textStyle="bold" 
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        android:layout_marginTop="100dp" />
    
    <!-- Kolom Input Email -->
    <EditText 
        android:id="@+id/etEmail" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:hint="Masukkan Email" 
        android:padding="16dp" 
        app:layout_constraintTop_toBottomOf="@id/tvTitle" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        android:layout_marginTop="40dp" 
        android:layout_marginHorizontal="32dp" />
    
    <!-- Tombol Login -->
    <Button 
        android:id="@+id/btnLogin" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:text="LOGIN SEKARANG" 
        app:layout_constraintTop_toBottomOf="@id/etEmail" 
        app:layout_constraintStart_toStartOf="@id/etEmail" 
        app:layout_constraintEnd_toEndOf="@id/etEmail" 
        android:layout_marginTop="24dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Profil Baris-Berbaris

Hapus kode Quest 1, ganti dengan ini. Perhatikan penggunaan android:orientation="vertical" yang menyusun elemen ke bawah.

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:gravity="center" 
    android:padding="32dp">

    <ImageView 
        android:layout_width="120dp" 
        android:layout_height="120dp" 
        android:src="@mipmap/ic_launcher_round" 
        android:layout_marginBottom="16dp" />

    <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="John Doe" 
        android:textSize="24sp" 
        android:textStyle="bold" />

</LinearLayout>

Susunan Relatif

Hapus kode Quest 2. Perhatikan bagaimana btnBawah diletakkan menggunakan atribut android:layout_below.

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="16dp">

    <Button 
        android:id="@+id/btnTengah" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="TOMBOL TENGAH" 
        android:layout_centerInParent="true" />

    <Button 
        android:id="@+id/btnBawah" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="DI BAWAH TENGAH" 
        android:layout_below="@id/btnTengah" 
        android:layout_centerHorizontal="true" 
        android:layout_marginTop="16dp" />

</RelativeLayout>

Desain Kalkulator Mini

Terakhir, coba susunan tabel (TableLayout dan TableRow) ini untuk membuat formasi baris angka.

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:stretchColumns="*" 
    android:padding="16dp">

    <TableRow android:layout_marginTop="100dp">
        <Button android:text="1" />
        <Button android:text="2" />
        <Button android:text="3" />
    </TableRow>

    <TableRow>
        <Button android:text="4" />
        <Button android:text="5" />
        <Button android:text="6" />
    </TableRow>

</TableLayout>

7. Tugas UI (Challenge)

Waktunya melatih insting desainmu di XML:

Buka activity_main.xml. Hapus isinya yang lama.
Buat sebuah Profile Card sederhana menggunakan LinearLayout (Pastikan orientation-nya Vertical).
Isi dengan: 1 ImageView (gambar profil), 1 TextView (Nama), 1 TextView (Bio), dan 1 Button (Follow).
Atur biar rapi di tengah dengan android:gravity="center" pada LinearLayout utama.
Kasih margin dan padding yang pas biar nggak kelihatan sempit!
Screenshot hasil layar HP-mu! 📸

Kunci Jawaban XML:

<!-- 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:gravity="center"
    android:padding="32dp">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@mipmap/ic_launcher_round"
        android:layout_marginBottom="16dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nama Kamu"
        android:textSize="24sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mahasiswa Teladan"
        android:layout_marginBottom="24dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="FOLLOW ME!" />

</LinearLayout>

Dasar UI/UX & Layouting Android 🎨