TextInputLayout: यह क्या है, Material Design और Android में सेटअप

Android में TextInputLayout क्या है

TextInputLayout com.google.android.material.textfield पैकेज से एक ViewGroup है जो LinearLayout का विस्तार करता है और अपने अंदर एक EditText रखता है। यह घटक Android के लिए Material Components लाइब्रेरी का हिस्सा है, संस्करण 1.0.0 से शुरू। TextInputLayout का मुख्य उद्देश्य डेवलपर की ओर से न्यूनतम प्रयास के साथ Material Design टेक्स्ट फ़ील्ड का तैयार कार्यान्वयन प्रदान करना है।

एक मानक EditText के विपरीत, TextInputLayout फ्लोटिंग लेबल की एनिमेशन का प्रबंधन करता है, जो आंतरिक EditText के android:hint विशेषता के माध्यम से सेट किया जाता है। जब फ़ील्ड खाली होता है, तो लेबल फ़ील्ड के अंदर एक सामान्य संकेत के रूप में दिखाई देता है। जैसे ही उपयोगकर्ता टाइप करना शुरू करता है, लेबल एनिमेटेड रूप से फ़ील्ड के शीर्ष पर चला जाता है, आकार में छोटा हो जाता है। Material Design Guidelines (2025) के अनुसार, यह एनिमेशन फॉर्म की धारणा में सुधार करता है क्योंकि उपयोगकर्ता डेटा दर्ज करने के बाद भी हमेशा फ़ील्ड का नाम देखता है।

आर्किटेक्चर की दृष्टि से, TextInputLayout डेकोरेटर पैटर्न लागू करता है: यह EditText की घटनाओं को इंटरसेप्ट करता है, अतिरिक्त तत्वों (लेबल, त्रुटि, आइकन, काउंटर) के प्रदर्शन का प्रबंधन करता है, और उनकी एनिमेशन का समन्वय करता है। आंतरिक EditText getEditText() विधि के माध्यम से सुलभ है और इसे inputType, maxLines और 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) TextInputLayout की मुख्य विशेषता है। जब फ़ील्ड खाली होता है, तो android:hint का टेक्स्ट EditText के अंदर एक सामान्य प्लेसहोल्डर के रूप में प्रदर्शित होता है। जब फ़ील्ड फोकस प्राप्त करता है या टेक्स्ट दर्ज किया जाता है, तो लेबल TextInputLayout के शीर्ष पर उठ जाता है, फ़ॉन्ट आकार कम करता है और रंग बदलता है। यह व्यवहार उपयोगकर्ता के टाइप करना शुरू करने के बाद संकेत के अदृश्य होने की समस्या को हल करता है।

फ्लोटिंग लेबल का कॉन्फ़िगरेशन TextInputLayout विशेषताओं के माध्यम से किया जाता है: app:hintEnabled निर्धारित करता है कि फ्लोटिंग लेबल सक्षम है या नहीं (डिफ़ॉल्ट true), app:hintAnimationEnabled संक्रमण एनिमेशन को सक्षम या अक्षम करता है, app:expandedHintEnabled फ़ील्ड के खाली और फोकस में न होने पर भी लेबल प्रदर्शित करने की अनुमति देता है। विभिन्न अवस्थाओं में लेबल का रंग colorPrimary और colorControlHighlight शैलियों के माध्यम से प्रबंधित किया जाता है।

Google Material Components Team (2025) के अनुसार, फ्लोटिंग लेबल विशेष रूप से कई फ़ील्ड वाले फॉर्म में उपयोगी है, जहां उपयोगकर्ता टाइप करना शुरू करने के बाद फ़ील्ड का नाम भूल सकता है। एक साधारण android:hint के विपरीत जो इनपुट पर गायब हो जाता है, फ्लोटिंग लेबल हर समय दृश्यमान रहता है, प्रत्येक फ़ील्ड के लिए संदर्भ प्रदान करता है।

TextInputLayout में त्रुटि प्रदर्शन

TextInputLayout एक अंतर्निर्मित त्रुटि प्रदर्शन प्रणाली प्रदान करता है जो इनपुट फ़ील्ड के साथ दृष्टिगत रूप से एकीकृत है। जब setError विधि के माध्यम से त्रुटि सेट की जाती है, तो घटक फ़ील्ड को हाइलाइट करता है (लाइन या आउटलाइन का रंग लाल हो जाता है) और फ़ील्ड के नीचे त्रुटि टेक्स्ट प्रदर्शित करता है। यह त्रुटि संदेशों के लिए अलग TextView की आवश्यकता को समाप्त करता है।

त्रुटि प्रदर्शन का प्रबंधन setError(CharSequence) और setErrorEnabled(boolean) विधियों के माध्यम से किया जाता है। टेक्स्ट के साथ setError कॉल करने पर त्रुटि तुरंत दिखाई देती है; setError(null) कॉल करने पर यह छिप जाती है। TextInputLayout app:errorIconDrawable विशेषता के माध्यम से कस्टम त्रुटि आइकन और app:errorTextColor के माध्यम से त्रुटि रंग प्रबंधन का भी समर्थन करता है।

Material Design Guidelines (2025) के अनुसार, त्रुटि संदेश विशिष्ट और सहायक होने चाहिए: “अमान्य इनपुट” के बजाय “ईमेल में @ होना चाहिए” लिखें। त्रुटि प्रदर्शन इनपुट पूरा होने के बाद होना चाहिए (फोकस खोने पर या फॉर्म सबमिट करने के बाद), रीयल-टाइम में नहीं — इससे फॉर्म भरते समय उपयोगकर्ता का तनाव कम होता है।

// प्रोग्रामेटिक रूप से त्रुटि सेटअप
textInputLayout.error = "Password min 8 chars"

// त्रुटि छिपाना
textInputLayout.error = null

// सत्यापन त्रुटि जांच और सेट
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

TextInputLayout में आइकन और क्रियाएं

TextInputLayout फ़ील्ड की शुरुआत (start icon) और अंत (end icon) दोनों पर आइकन प्रदर्शित करने का समर्थन करता है। आइकन विभिन्न कार्य कर सकते हैं: पासवर्ड दृश्यता टॉगल करना, फ़ील्ड साफ़ करना, कस्टम क्रियाएं। प्रत्येक आइकन प्रकार एक अलग विशेषता द्वारा नियंत्रित होता है और app:startIconDrawable या app:endIconDrawable विशेषता के माध्यम से कस्टम से बदला जा सकता है।

एंड आइकन मोड app:endIconMode विशेषता के माध्यम से सेट किया जाता है, जो निम्न मान ले सकता है: password_toggle — पासवर्ड दृश्यता टॉगल करना, clear_text — फ़ील्ड साफ़ करना, dropdown_menu — ड्रॉपडाउन सूची के लिए तीर, custom — कस्टम आइकन। password_toggle के लिए, TextInputLayout स्वचालित रूप से inputType को textPassword और textVisiblePassword के बीच स्विच करता है, और आंख के आइकन को एनिमेट भी करता है।

• password_toggle — पासवर्ड दिखाने/छिपाने के लिए आंख का आइकन, अंतर्निर्मित एनिमेशन।
• clear_text — फ़ील्ड साफ़ करने के लिए क्रॉस आइकन, टेक्स्ट होने पर दिखाई देता है।
• dropdown_menu — Exposed Dropdown Menu (Material Design 3) के लिए तीर।
• custom — 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>

TextInputLayout शैलियां: FilledBox और OutlinedBox

Android के लिए Material Components TextInputLayout के लिए दो मुख्य शैलियां प्रदान करता है: FilledBox (भरा हुआ) और OutlinedBox (सीमा सहित)। FilledBox शैली में रंगीन पृष्ठभूमि और फ़ील्ड के नीचे एक रेखा होती है जो फोकस करने पर रंग बदलती है। OutlinedBox शैली में पारदर्शी पृष्ठभूमि और पूरे फ़ील्ड के चारों ओर एक सीमा होती है, जो स्पष्ट सीमाएं बनाती है और कई फ़ील्ड वाले फॉर्म के लिए बेहतर उपयुक्त होती है।

शैली का चुनाव ऐप डिज़ाइन पर निर्भर करता है: FilledBox बार-बार उपयोग किए जाने वाले फॉर्म के लिए अनुशंसित है क्योंकि यह अलग-अलग फ़ील्ड पर कम ध्यान आकर्षित करता है। OutlinedBox छोटे फॉर्म (लॉगिन, रजिस्ट्रेशन) के लिए प्राथमिकता है जहां प्रत्येक फ़ील्ड स्पष्ट रूप से चिह्नित होनी चाहिए। शैली XML में style विशेषता या ऐप थीम के माध्यम से सेट की जाती है।

Material Design 3 (M3) ने TextInputLayout के लिए बेहतर टाइपोग्राफी, नए रंग टोकन और Material You डायनामिक रंगों के समर्थन के साथ अद्यतन शैलियां पेश कीं। M3 में, OutlinedBox डिफ़ॉल्ट रूप से अनुशंसित शैली बन गया, और FilledBox ने नई विशिष्टता से मेल खाने के लिए अपने पैडिंग और बॉर्डर रेडियस को अनुकूलित किया।

TextInputLayout के साथ कोड उदाहरण

TextInputLayout के साथ रजिस्ट्रेशन फॉर्म को लागू करने का एक पूर्ण उदाहरण, जिसमें ईमेल और पासवर्ड सत्यापन, त्रुटि प्रदर्शन और पासवर्ड दिखाने का आइकन शामिल है। रजिस्ट्रेशन बटन दबाने पर, सभी फ़ील्ड की जाँच की जाती है और संबंधित त्रुटि संदेश प्रदर्शित किए जाते हैं।

रजिस्ट्रेशन फॉर्म का XML लेआउट

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

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
}