TextInputLayout: apa itu, Material Design dan pengaturan di Android

Apa itu TextInputLayout di Android

TextInputLayout — adalah ViewGroup dari paket com.google.android.material.textfield yang memperluas LinearLayout dan berisi EditText di dalamnya. Komponen ini adalah bagian dari pustaka Material Components untuk Android, mulai dari versi 1.0.0. Tugas utama TextInputLayout adalah menyediakan implementasi siap pakai Material Design Text Fields dengan usaha minimal dari pengembang.

Tidak seperti EditText standar, TextInputLayout mengelola animasi label mengambang, yang diatur melalui atribut android:hint dari EditText internal. Ketika kolom kosong, label ditampilkan di dalam kolom sebagai petunjuk biasa. Begitu pengguna mulai mengetik, label bergerak dengan animasi ke bagian atas kolom, memperkecil ukurannya. Menurut Material Design Guidelines (2025), animasi semacam ini meningkatkan persepsi formulir, karena pengguna selalu melihat nama kolom, bahkan setelah memasukkan data.

Secara arsitektural, TextInputLayout mengimplementasikan pola dekorator: ia mencegat event EditText, mengelola penampilan elemen tambahan (label, error, ikon, penghitung) dan mengoordinasikan animasinya. EditText internal dapat diakses melalui metode getEditText() dan dapat dikonfigurasi dengan atribut standar, termasuk inputType, maxLines, dan hint.

<!-- Basic TextInputLayout markup -->
@+id/tilEmail
android:layout_width="match_parent"
android:layout_height="wrap_content">

    @+id/etEmail
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

Floating label dan pengaturannya

Floating label (label mengambang) — adalah kemampuan utama TextInputLayout. Ketika kolom kosong, teks dari android:hint ditampilkan di dalam EditText sebagai petunjuk biasa. Saat menerima fokus atau saat mengetik teks, label naik ke bagian atas TextInputLayout, memperkecil ukuran font dan mengubah warna. Perilaku ini memecahkan masalah ketidakjelasan petunjuk setelah mulai mengetik.

Pengaturan floating label dilakukan melalui atribut TextInputLayout: app:hintEnabled menentukan apakah label mengambang diaktifkan (default true), app:hintAnimationEnabled mengaktifkan atau menonaktifkan animasi transisi, app:expandedHintEnabled mengizinkan penampilan label bahkan ketika kolom kosong dan tidak dalam fokus. Warna label dalam berbagai keadaan dikelola melalui gaya colorPrimary dan colorControlHighlight.

Menurut Google Material Components Team (2025), floating label sangat berguna dalam formulir dengan banyak kolom, di mana pengguna mungkin lupa nama kolom setelah mulai mengetik. Tidak seperti android:hint sederhana yang menghilang saat mengetik, floating label tetap terlihat selalu, menyediakan konteks untuk setiap kolom.

Menampilkan error di TextInputLayout

TextInputLayout menyediakan sistem penampilan error bawaan yang terintegrasi secara visual dengan kolom input. Saat mengatur error melalui metode error, komponen menyorot kolom (warna garis atau batas berubah menjadi merah) dan menampilkan teks error di bawah kolom. Ini menggantikan kebutuhan akan TextView terpisah untuk pesan error.

Pengelolaan penampilan error dilakukan melalui metode setError(CharSequence) dan setErrorEnabled(boolean). Saat memanggil setError dengan teks, error ditampilkan segera; saat memanggil setError(null) — disembunyikan. TextInputLayout juga mendukung ikon error kustom melalui atribut app:errorIconDrawable dan pengelolaan warna error melalui app:errorTextColor.

Menurut Material Design Guidelines (2025), pesan error harus spesifik dan berguna: daripada "Input tidak valid" tulis "Email harus mengandung @". Penampilan error harus terjadi setelah input selesai (setelah kehilangan fokus atau setelah mengirim formulir), bukan secara real-time — ini mengurangi stres pengguna saat mengisi formulir.

// Pengaturan error secara terprogram
textInputLayout.error = "Password min 8 chars"

// Menyembunyikan error
textInputLayout.error = null

// Memeriksa dan mengatur error validasi
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Ikon dan tindakan TextInputLayout

TextInputLayout mendukung penampilan ikon baik di awal kolom (start icon) maupun di akhir (end icon). Ikon dapat menjalankan berbagai fungsi: mengubah visibilitas sandi, membersihkan kolom, tindakan kustom. Setiap jenis ikon dikelola oleh atribut terpisah dan dapat diganti dengan ikon kustom melalui atribut app:startIconDrawable atau app:endIconDrawable.

End icon mode diatur melalui atribut app:endIconMode, yang dapat mengambil nilai: password_toggle — mengalihkan visibilitas sandi, clear_text — membersihkan kolom, dropdown_menu — panah untuk menu dropdown, custom — ikon kustom. Untuk password_toggle, TextInputLayout secara otomatis mengelola pengalihan inputType antara textPassword dan textVisiblePassword, serta menganimasikan ikon mata.

• password_toggle — ikon mata untuk menampilkan/menyembunyikan sandi, animasi bawaan.
• clear_text — tanda silang untuk membersihkan kolom, muncul saat ada teks.
• dropdown_menu — panah untuk Exposed Dropdown Menu (Material Design 3).
• custom — ikon kustom apa pun dengan penanganan melalui setEndIconOnClickListener.

<!-- TextInputLayout with password toggle icon -->
@+id/tilPassword
android:layout_width="match_parent"
app:endIconMode="password_toggle"
app:passwordToggleTint="@color/primary">

    @+id/etPassword
    android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

Gaya TextInputLayout: FilledBox dan OutlinedBox

Material Components untuk Android menyediakan dua gaya utama untuk TextInputLayout: FilledBox (terisi) dan OutlinedBox (dengan garis tepi). Gaya FilledBox memiliki latar belakang berwarna dan garis di bawah kolom yang berubah warna saat fokus. Gaya OutlinedBox memiliki latar belakang transparan dan garis tepi di sekitar seluruh kolom, menciptakan batas yang lebih jelas dan lebih cocok untuk formulir dengan banyak kolom.

Pemilihan gaya tergantung pada desain aplikasi: FilledBox direkomendasikan untuk formulir yang sering digunakan, karena menarik lebih sedikit perhatian ke kolom individu. OutlinedBox lebih disukai untuk formulir pendek (login, registrasi), di mana setiap kolom harus ditandai dengan jelas. Gaya diatur melalui atribut style di XML atau melalui tema aplikasi.

Material Design 3 (M3) memperkenalkan gaya yang diperbarui untuk TextInputLayout dengan tipografi yang ditingkatkan, token warna baru, dan dukungan untuk warna dinamis Material You. Di M3, OutlinedBox menjadi gaya default yang direkomendasikan, dan FilledBox menyesuaikan jarak dan radius pembulatan agar sesuai dengan spesifikasi baru.

Contoh kode dengan TextInputLayout

Contoh lengkap implementasi formulir registrasi dengan TextInputLayout, termasuk validasi email dan sandi, penampilan error, dan ikon tampilkan sandi. Saat menekan tombol registrasi, semua kolom diperiksa dan pesan error yang sesuai ditampilkan.

Markup XML formulir registrasi

@+id/tilName
app:boxBackgroundMode="outlined">
    @+id/etName
    android:hint="Name" />
</...TextInputLayout>

@+id/tilRegEmail
app:boxBackgroundMode="outlined">
    @+id/etRegEmail
    android:hint="Email"
    android:inputType="textEmailAddress" />
</...TextInputLayout>

@+id/tilRegPassword
app:boxBackgroundMode="outlined"
app:endIconMode="password_toggle">
    @+id/etRegPassword
    android:hint="Password"
    android:inputType="textPassword" />
</...TextInputLayout>

Validasi formulir di Kotlin

private fun validateForm(): Boolean {
    var isValid = true

    if (etName.text.isNullOrBlank()) {
        tilName.error = "Enter your name"
        isValid = false
    } else {
        tilName.error = null
    }

    val email = etRegEmail.text.toString()
    if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        tilRegEmail.error = "Invalid email format"
        isValid = false
    } else {
        tilRegEmail.error = null
    }

    val password = etRegPassword.text.toString()
    if (password.length < 8) {
        tilRegPassword.error = "Password min 8 chars"
        isValid = false
    } else {
        tilRegPassword.error = null
    }

    return isValid
}