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
}