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 স্বয়ংক্রিয়ভাবে textPassword এবং textVisiblePassword-এর মধ্যে inputType সুইচ করে এবং চোখের আইকন অ্যানিমেট করে।

• 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
}