Error State — কী, ফিল্ড ত্রুটি প্রদর্শন এবং Android-এ বাস্তবায়ন

Android-এ ফিল্ড ত্রুটি অবস্থা কী?

Error State একটি ইনপুট ফিল্ডের একটি বিশেষ প্রদর্শন মোড যা সক্রিয় হয় যখন প্রবেশ করানো ডেটা যাচাইকরণে ব্যর্থ হয়। দৃশ্যতভাবে, Error State তিনটি উপাদান অন্তর্ভুক্ত করে: ফিল্ডের সীমানা বা পটভূমির রঙের পরিবর্তন (সাধারণত লাল), ত্রুটির বর্ণনা দিয়ে ফিল্ডের নীচে একটি টেক্সট বার্তার উপস্থিতি, এবং ঐচ্ছিকভাবে একটি আইকন বা হাইলাইট। Error State-এর উদ্দেশ্য হল ব্যবহারকারীর দৃষ্টি তাত্ক্ষণিকভাবে সমস্যাযুক্ত ফিল্ডের দিকে আকর্ষণ করা এবং ত্রুটিটি কীভাবে ঠিক করা যায় তা পরামর্শ দেওয়া।

Android-এ, Error State Material Design Components থেকে TextInputLayout স্তরে বাস্তবায়িত হয়। TextInputLayout EditText-কে মোড়ানো করে এবং এর অবস্থাগুলি পরিচালনা করে: normal, focused, error, disabled। setError(String) পদ্ধতি ফিল্ডটিকে ত্রুটি অবস্থায় পরিবর্তন করে, সীমানার রঙ পরিবর্তন করে এবং বার্তা প্রদর্শন করে। যখন টেক্সট পরিবর্তিত হয় বা setError(null) কল করা হয়, ফিল্ডটি normal-এ ফিরে আসে।

Material Design Guidelines অনুসারে, Error State লক্ষণীয় হওয়া উচিত কিন্তু প্রভাবশালী নয়। লাল সীমানার রঙ সাধারণ অবস্থার সাথে বিপরীত হওয়া উচিত কিন্তু ইন্টারফেসকে ওভারলোড করা উচিত নয়। ত্রুটির বার্তায় সমস্যা এবং এটি সমাধানের উপায় সম্পর্কে নির্দিষ্ট তথ্য থাকা উচিত। একটি ত্রুটি আইকন (যেমন, বিস্ময়চিহ্ন সহ একটি লাল বৃত্ত) ভিজ্যুয়াল সংকেতকে শক্তিশালী করে।

TextInputLayout-এ setError কীভাবে কাজ করে

setError(CharSequence errorText) পদ্ধতি TextInputLayout-কে ত্রুটি অবস্থায় পরিবর্তন করে। errorText প্যারামিটার হল টেক্সট যা ফিল্ডের নীচে প্রদর্শিত হয়। যদি null পাস করা হয়, ত্রুটিটি পরিষ্কার হয়ে যায়। TextInputLayout অ্যানিমেশন পরিচালনা করে: ত্রুটি টেক্সট একটি মসৃণ ফেড-ইনের সাথে উপস্থিত হয়, সীমানা লাল হয়ে যায়। একটি ত্রুটি আইকন (ডিফল্ট: একটি বৃত্তে বিস্ময়চিহ্ন) ফিল্ডের শেষে দেখানো হয়।

গুরুত্বপূর্ণ বিবরণ: ত্রুটি বার্তার জন্য স্থান সংরক্ষণ করতে setError-এর আগে setErrorEnabled(true) কল করতে হবে। অন্যথায়, ত্রুটি উপস্থিত হলে লেআউট "লাফিয়ে" উঠতে পারে কারণ স্থান সংরক্ষিত নেই। লেআউট স্থানান্তর এড়াতে XML-এ app:errorEnabled="true" এর মাধ্যমে সর্বদা ত্রুটি সমর্থন সক্ষম করার পরামর্শ দেওয়া হয়।

setError পদ্ধতি স্বয়ংক্রিয়ভাবে পরিষ্কার হয়ে যায় যখন ফিল্ড টেক্সট পরিবর্তিত হয় যদি setErrorEnabled(true) সক্ষম থাকে। এই আচরণ রিয়েল-টাইম যাচাইকরণের জন্য সুবিধাজনক: ব্যবহারকারী যতক্ষণ সাথে ত্রুটি ঠিক করা শুরু করে, লাল সীমানা অদৃশ্য হয়ে যায় এবং ফিল্ডটি স্বাভাবিক অবস্থায় ফিরে আসে। তবে, জটিল পরিস্থিতির জন্য এই অটো-ক্লিয়ার অবাঞ্ছিত হতে পারে — এই ধরনের ক্ষেত্রে, ত্রুটিটি ম্যানুয়ালি পরিচালনা করুন।

val til = findViewById<TextInputLayout>(R.id.til_email)

// ত্রুটি সমর্থন সক্ষম করুন (অন্যথায় XML-এ সেট করুন)
til.isErrorEnabled = true

// ত্রুটি বার্তা সেট করুন
til.error = "Invalid email address"

// ত্রুটি পরিষ্কার করুন
til.error = null

// ত্রুটি আছে কিনা পরীক্ষা করুন
if (til.error != null) {
    // ফিল্ডটি ত্রুটি অবস্থায় আছে
}

উদাহরণটি setError/isErrorEnabled অ্যাক্সেস করতে Kotlin বৈশিষ্ট্য ব্যবহার করে। TextInputLayout স্বয়ংক্রিয়ভাবে UI আপডেট করে: boxStrokeColor পরিবর্তন করে, ত্রুটি আইকন দেখায়, ত্রুটি টেক্সট প্রদর্শন করে। যদি EditText-এ টেক্সট পরিবর্তিত হয়, ত্রুটিটি স্বয়ংক্রিয়ভাবে পরিষ্কার হয়ে যায়। ম্যানুয়াল রিসেটের জন্য, error = null সেট করুন।

ত্রুটি প্রদর্শনের বিকল্প উপায়

সব প্রোজেক্ট Material Design Components ব্যবহার করে না। কাস্টম ত্রুটি প্রদর্শনের জন্য, আপনি EditText-এর নীচে একটি পৃথক TextView ব্যবহার করতে পারেন যা ত্রুটিতে দৃশ্যমান হয়। এই পদ্ধতি শৈলী এবং বার্তা অবস্থানের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। উদাহরণস্বরূপ, আপনি বার্তাটি ফিল্ডের ডানদিকে রাখতে পারেন, একটি ভিন্ন পটভূমির রঙ ব্যবহার করতে পারেন, বা টেক্সটের বামদিকে একটি আইকন যুক্ত করতে পারেন।

Jetpack Compose-এ, Error State OutlinedTextField বা TextField-এ isError প্যারামিটারের মাধ্যমে বাস্তবায়িত হয়। যখন isError = true হয়, সীমানা লাল হয়ে যায়, এবং আপনি supportingText-এর মাধ্যমে ত্রুটি টেক্সট দেখাতে পারেন। Compose-এ টেক্সট পরিবর্তনে অন্তর্নির্মিত অটো-ক্লিয়ার নেই — ডেভেলপার remember এবং mutableStateOf ব্যবহার করে ম্যানুয়ালি ত্রুটি অবস্থা পরিচালনা করে।

গ্রুপ ত্রুটির জন্য (একাধিক ফিল্ডের জন্য একটি একক বার্তা, যেমন, "সমস্ত আবশ্যক ফিল্ড পূরণ করুন"), ফর্মের শীর্ষে Snackbar, Dialog বা ইনলাইন ব্লক ব্যবহার করুন। একটি গ্রুপ ত্রুটি পৃথক ফিল্ডের Error State-কে প্রতিস্থাপন করে না বরং এটির পরিপূরক করে। ব্যবহারকারী প্রথমে সাধারণ বার্তাটি দেখে, তারপর ত্রুটিযুক্ত নির্দিষ্ট ফিল্ডগুলি সন্ধান করে।

ত্রুটিগুলির রঙ, আইকন এবং অ্যানিমেশন

Material Design Components-এ Error State-এর রঙ boxStrokeErrorColor বৈশিষ্ট্য বা থিমের colorError বৈশিষ্ট্যের মাধ্যমে নিয়ন্ত্রিত হয়। ডিফল্টরূপে, সিস্টেম লাল রঙ ব্যবহার করা হয়, তবে এটি অ্যাপ থিমে বা সরাসরি TextInputLayout-এ app:boxStrokeErrorColor="@color/customErrorColor" এর মাধ্যমে ওভাররাইড করা যেতে পারে। ডার্ক থিম সমর্থনের জন্য, হালকা এবং ডার্ক মোডের জন্য ভিন্ন রঙ সহ একটি সিলেক্টর ব্যবহার করার পরামর্শ দেওয়া হয়।

ত্রুটি আইকন app:errorIconDrawable এর মাধ্যমে কনফিগার করা হয়। ডিফল্টরূপে, একটি বৃত্তে বিস্ময়চিহ্ন প্রদর্শিত হয়। এটি একটি কাস্টম আইকন দিয়ে প্রতিস্থাপিত করা যেতে পারে বা app:errorIconDrawable="@null" সেট করে সম্পূর্ণরূপে সরানো যেতে পারে। আইকনটি TextInputLayout-এর শেষে প্রদর্শিত হয় এবং একটি অতিরিক্ত ভিজ্যুয়াল মার্কার হিসাবে কাজ করে। Material Design 3-এ, অ্যাক্সেসিবিলিটির জন্য ত্রুটি আইকন বাধ্যতামূলক।

ত্রুটি উপস্থিতির অ্যানিমেশন TextInputLayout-এ নির্মিত: টেক্সট একটি মসৃণ অস্বচ্ছতা পরিবর্তনের সাথে নীচ থেকে উপরে স্লাইড করে। কাস্টম অ্যানিমেশনের জন্য, Transition API বা MotionLayout ব্যবহার করুন। উদাহরণস্বরূপ, ত্রুটিতে ফিল্ড নাড়ানো অতিরিক্ত মনোযোগ আকর্ষণ করে। তবে, অ্যানিমেশনের অত্যধিক ব্যবহার UX-কে খারাপ করে — বার্তার মসৃণ উপস্থিতি যথেষ্ট।

যাচাইকরণের সময় ত্রুটি অবস্থা পরিচালনা

Error State পরিচালনা দুটি ধাপে বিভক্ত: ফিল্ড যাচাইকরণের সময় ত্রুটি সেট করা এবং সংশোধনের সময় ত্রুটি পরিষ্কার করা। সহজতম ক্ষেত্রে, যাচাইকরণ TextWatcher.afterTextChanged-এ কল করা হয়: যদি মান অবৈধ হয়, তাহলে একটি ত্রুটি বার্তা সহ setError কল করা হয়। যদি বৈধ হয়, setError(null) কল করা হয়। যখন setError(null) অবস্থা পরিষ্কার করে তখন TextInputLayout স্বয়ংক্রিয়ভাবে ত্রুটি লুকিয়ে ফেলে।

ফর্ম যাচাইকরণের জন্য, ত্রুটিগুলি ফর্ম জমা দেওয়ার পর্যায়ে সেট করা হয়। সমস্ত ফিল্ডের মাধ্যমে লুপ করুন, প্রতিটি যাচাই করুন, অবৈধ ফিল্ডের জন্য ত্রুটি সেট করুন এবং প্রথম ত্রুটিযুক্ত ফিল্ডে ফোকাস করুন। এই প্রক্রিয়া চলাকালীন জমা বোতামটি অবরুদ্ধ থাকে। যদি ফর্মটি বড় হয়, তাহলে প্রথম ত্রুটিযুক্ত ফিল্ডে স্ক্রোল করার এবং স্বয়ংক্রিয়ভাবে এটিতে ফোকাস সেট করার পরামর্শ দেওয়া হয়।

একক ত্রুটি ফোকাস নিয়ম: ফর্ম জমা দেওয়ার সময়, শুধুমাত্র প্রথম ত্রুটিযুক্ত ফিল্ডে ফোকাস সেট করুন। ব্যবহারকারী একবারে একটি ত্রুটি ঠিক করে, এবং সংশোধনের পরে, পরবর্তী ত্রুটিযুক্ত ফিল্ডটি স্বয়ংক্রিয়ভাবে ফোকাস পায়। এই ধাপে ধাপে পদ্ধতি জ্ঞানীয় বোঝা হ্রাস করে। Material TextInputLayout ত্রুটি সেট করার সময় ফোকাস আটকায় না — এটি requestFocus()-এর মাধ্যমে ম্যানুয়ালি করতে হবে।

Error State নিয়ে কাজ করার সময় সাধারণ ভুল

প্রথম ভুল — isErrorEnabled-এর অভাব। যদি setError-এর আগে setErrorEnabled কল না করা হয়, তাহলে ত্রুটি বার্তা উপস্থিত হলে লেআউট স্থানান্তরিত হতে পারে। এটি বিশেষভাবে গুরুত্বপূর্ণ যদি ফিল্ডটি স্ক্রিনের মাঝখানে থাকে — ব্যবহারকারী তার স্ক্রোল অবস্থান হারিয়ে ফেলে। ত্রুটি সেট করার আগে XML-এ app:errorEnabled="true" এর মাধ্যমে বা প্রোগ্রামেটিকভাবে সর্বদা setErrorEnabled(true) সক্ষম করুন।

দ্বিতীয় ভুল — অত্যধিক দীর্ঘ ত্রুটি বার্তা। দীর্ঘ টেক্সট একাধিক লাইনে মোড়ানো হয় এবং পার্শ্ববর্তী ফিল্ডগুলিকে ওভারল্যাপ করতে পারে। প্রস্তাবিত ত্রুটি বার্তার দৈর্ঘ্য 20-40 অক্ষর। যদি আরও তথ্যের প্রয়োজন হয়, তাহলে সাধারণ অবস্থায় helperText বা অতিরিক্ত ব্যাখ্যার জন্য টুলটিপ ব্যবহার করুন। সংক্ষিপ্ততা একটি ভাল Error State-এর ভিত্তি।

তৃতীয় ভুল — অ্যাক্সেসিবিলিটি উপেক্ষা করা। Error State স্ক্রিন রিডারের জন্য অ্যাক্সেসযোগ্য হতে হবে। TextInputLayout স্বয়ংক্রিয়ভাবে contentDescription-এর মাধ্যমে ত্রুটি ঘোষণা করে, কিন্তু কাস্টম বাস্তবায়নগুলিকে ম্যানুয়ালি এটি করতে হবে। ত্রুটি বার্তাগুলির জন্য announceForAccessibility() বা android:importantForAccessibility ব্যবহার করুন। TalkBack ব্যবহারকারীদের ত্রুটি উপস্থিত হওয়ার সাথে সাথেই শুনতে হবে।