TextInputLayout: ano ito, Material Design at pag-configure sa Android

Ano ang TextInputLayout sa Android

TextInputLayout — ay isang ViewGroup mula sa package na com.google.android.material.textfield na nagpapalawak ng LinearLayout at naglalaman ng EditText sa loob. Ang component ay bahagi ng Material Components library para sa Android, simula sa bersyon 1.0.0. Ang pangunahing gawain ng TextInputLayout ay magbigay ng handa nang implementasyon ng Material Design Text Fields na may minimal na pagsisikap mula sa developer.

Hindi tulad ng karaniwang EditText, pinamamahalaan ng TextInputLayout ang animation ng lumulutang na label, na itinatakda sa pamamagitan ng android:hint attribute ng panloob na EditText. Kapag walang laman ang field, ang label ay ipinapakita sa loob ng field bilang isang ordinaryong hint. Sa sandaling magsimulang mag-type ang user, ang label ay gumagalaw na may animation sa itaas na bahagi ng field, lumiliit ang laki. Ayon sa Material Design Guidelines (2025), ang ganitong animation ay nagpapabuti sa persepsyon ng form, dahil palaging nakikita ng user ang pangalan ng field, kahit matapos mag-input ng data.

Sa arkitektura, ang TextInputLayout ay nag-iimplementa ng pattern ng dekorador: ina-intercept nito ang mga event ng EditText, pinamamahalaan ang pagpapakita ng mga karagdagang elemento (label, error, icon, counter) at ini-koordina ang kanilang animation. Ang panloob na EditText ay naa-access sa pamamagitan ng getEditText() method at maaaring i-configure gamit ang mga standard attribute, kabilang ang inputType, maxLines at 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 at ang pag-configure nito

Floating label (lumulutang na label) — ay ang pangunahing kakayahan ng TextInputLayout. Kapag walang laman ang field, ang teksto mula sa android:hint ay ipinapakita sa loob ng EditText bilang ordinaryong hint. Kapag nakakuha ng focus o kapag nagta-type ng teksto, ang label ay tumataas sa itaas na bahagi ng TextInputLayout, lumiliit ang laki ng font at nagbabago ng kulay. Ang pag-uugaling ito ay lumulutas sa problema ng hindi pagkikita ng hint pagkatapos magsimula ng pag-type.

Ang pag-configure ng floating label ay ginagawa sa pamamagitan ng mga attribute ng TextInputLayout: app:hintEnabled ay tumutukoy kung ang lumulutang na label ay naka-enable (default true), app:hintAnimationEnabled ay nag-e-enable o nagdi-disable ng transition animation, app:expandedHintEnabled ay nagpapahintulot sa pagpapakita ng label kahit walang laman ang field at walang focus. Ang kulay ng label sa iba't ibang estado ay pinamamahalaan sa pamamagitan ng mga istilong colorPrimary at colorControlHighlight.

Ayon sa Google Material Components Team (2025), ang floating label ay lalong kapaki-pakinabang sa mga form na may maraming field, kung saan maaaring makalimutan ng user ang pangalan ng field pagkatapos magsimulang mag-type. Hindi tulad ng simpleng android:hint na nawawala kapag nagta-type, ang floating label ay nananatiling laging nakikita, nagbibigay ng konteksto para sa bawat field.

Pagpapakita ng error sa TextInputLayout

TextInputLayout ay nagbibigay ng built-in na sistema ng pagpapakita ng error na biswal na isinama sa input field. Kapag nagtatakda ng error sa pamamagitan ng error method, itinatampok ng component ang field (ang kulay ng linya o border ay nagiging pula) at ipinapakita ang teksto ng error sa ilalim ng field. Pinapalitan nito ang pangangailangan para sa isang hiwalay na TextView para sa mga mensahe ng error.

Ang pamamahala ng pagpapakita ng error ay ginagawa sa pamamagitan ng mga pamamaraang setError(CharSequence) at setErrorEnabled(boolean). Kapag tinawag ang setError na may teksto, ang error ay ipinapakita agad; kapag tinawag ang setError(null) — itinatago. Sinusuportahan din ng TextInputLayout ang custom na icon ng error sa pamamagitan ng attribute na app:errorIconDrawable at pamamahala ng kulay ng error sa pamamagitan ng app:errorTextColor.

Ayon sa Material Design Guidelines (2025), ang mga mensahe ng error ay dapat na tiyak at kapaki-pakinabang: sa halip na "Hindi wastong input" ay isulat "Ang email ay dapat maglaman ng @". Ang pagpapakita ng error ay dapat mangyari pagkatapos ng pag-input (pagkatapos mawala ang focus o pagkatapos ipadala ang form), hindi sa real-time — binabawasan nito ang stress ng user kapag pinupunan ang form.

// Programatikong pag-setup ng error
textInputLayout.error = "Password min 8 chars"

// Pagtatago ng error
textInputLayout.error = null

// Pag-check at pag-set ng error sa validation
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Mga icon at aksyon ng TextInputLayout

TextInputLayout ay sumusuporta sa pagpapakita ng mga icon pareho sa simula ng field (start icon) at sa dulo (end icon). Ang mga icon ay maaaring gumanap ng iba't ibang function: pagpapalit ng visibility ng password, paglilinis ng field, custom na aksyon. Ang bawat uri ng icon ay pinamamahalaan ng isang hiwalay na attribute at maaaring palitan ng custom na icon sa pamamagitan ng attribute na app:startIconDrawable o app:endIconDrawable.

End icon mode ay itinatakda sa pamamagitan ng attribute na app:endIconMode, na maaaring kumuha ng mga value: password_toggle — pagpapalit ng visibility ng password, clear_text — paglilinis ng field, dropdown_menu — arrow para sa dropdown menu, custom — custom na icon. Para sa password_toggle, awtomatikong pinamamahalaan ng TextInputLayout ang pagpapalit ng inputType sa pagitan ng textPassword at textVisiblePassword, at nag-a-animate din ng icon ng mata.

• password_toggle — icon ng mata para sa pagpapakita/pagtatago ng password, built-in na animation.
• clear_text — krus para sa paglilinis ng field, lumilitaw kapag may teksto.
• dropdown_menu — arrow para sa Exposed Dropdown Menu (Material Design 3).
• custom — anumang custom na icon na may paghawak sa pamamagitan ng 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>

Mga istilo ng TextInputLayout: FilledBox at OutlinedBox

Ang Material Components para sa Android ay nagbibigay ng dalawang pangunahing istilo para sa TextInputLayout: FilledBox (napuno) at OutlinedBox (may outline). Ang istilong FilledBox ay may kulay na background at linya sa ilalim ng field na nagbabago ng kulay kapag nakatutok. Ang istilong OutlinedBox ay may transparent na background at outline sa paligid ng buong field, na lumilikha ng mas malinaw na mga hangganan at mas angkop para sa mga form na may maraming field.

Ang pagpili ng istilo ay depende sa disenyo ng application: FilledBox ay inirerekomenda para sa madalas na ginagamit na mga form, dahil nakakaakit ito ng mas kaunting pansin sa mga indibidwal na field. OutlinedBox ay mas gusto para sa mga maikling form (login, registration), kung saan ang bawat field ay dapat na malinaw na minarkahan. Ang istilo ay itinatakda sa pamamagitan ng style attribute sa XML o sa pamamagitan ng tema ng application.

Ang Material Design 3 (M3) ay nagpakilala ng mga na-update na istilo para sa TextInputLayout na may pinahusay na typography, mga bagong color token, at suporta para sa mga dynamic na kulay ng Material You. Sa M3, ang OutlinedBox ay naging inirerekomendang default na istilo, at ang FilledBox ay nag-adjust ng mga spacing at rounding radius upang tumugma sa bagong specifikasyon.

Mga halimbawa ng code na may TextInputLayout

Isang kumpletong halimbawa ng implementasyon ng registration form na may TextInputLayout, kabilang ang validation ng email at password, pagpapakita ng error, at icon ng pagpapakita ng password. Kapag pinindot ang registration button, lahat ng field ay sinusuri at ang mga kaukulang mensahe ng error ay ipinapakita.

XML markup ng registration form

@+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>

Validation ng form sa 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
}