Kotlin Android Fundamentals 10.3: সবার জন্য ডিজাইন

এই কোডল্যাবটি অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টাল কোর্সের অংশ। আপনি যদি ক্রমানুসারে কোডল্যাবগুলির মাধ্যমে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন৷ সমস্ত কোর্স কোডল্যাব অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টাল কোডল্যাব ল্যান্ডিং পৃষ্ঠায় তালিকাভুক্ত করা হয়েছে।

এই কোডল্যাবটি এমন একটি সিরিজের অংশ যা আপনাকে Android অ্যাপ ডিজাইনের মূল বিষয়গুলি শেখায় এবং Google ডেভেলপার গ্রুপ (GDG) মিটআপগুলি খুঁজে বের করে এমন একটি অ্যাপ তৈরি করার মাধ্যমে আপনাকে গাইড করে৷ অ্যাপটি একটি সুন্দর এবং অ্যাক্সেসযোগ্য উপায়ে আসন্ন মিলন সম্পর্কে তথ্য প্রদর্শন করে।

আমরা সুপারিশ করি যে আপনি এই সিরিজের তিনটি কোডল্যাব ক্রমানুসারে করুন, কারণ তারা ধাপে ধাপে কাজগুলির মাধ্যমে অগ্রসর হয়:

• 10.1 শৈলী এবং থিম
• 10.2 উপাদান নকশা, মাত্রা, এবং রং
• 10.3 সবার জন্য ডিজাইন

ভূমিকা

একটি অ্যাপকে সর্বাধিক ব্যবহারকারীদের দ্বারা ব্যবহারযোগ্য করে তোলার অর্থ বোঝায়, আপনি এটির আনন্দের জন্য বা ব্যবসায়িক উদ্দেশ্যে বিকাশ করছেন কিনা। এটি সম্পাদন করার জন্য একাধিক মাত্রা রয়েছে।

• RTL ভাষা সমর্থন করুন। ইউরোপীয় এবং অন্যান্য অনেক ভাষা বাম থেকে ডানে পঠিত হয়, এবং সেই লোকেলগুলি থেকে উদ্ভূত অ্যাপগুলি সাধারণত সেই ভাষাগুলির জন্য উপযুক্ত করার জন্য ডিজাইন করা হয়৷ আরবি ভাষার মতো ডান থেকে বামে প্রচুর সংখ্যক ভাষাভাষী সহ অন্যান্য অনেক ভাষা পড়ে। আপনার সম্ভাব্য শ্রোতা বাড়াতে আপনার অ্যাপটিকে ডান-থেকে-বামে (RTL) ভাষায় কাজ করুন।
• অ্যাক্সেসযোগ্যতার জন্য স্ক্যান করুন। অন্য কেউ কীভাবে আপনার অ্যাপটি অনুভব করতে পারে তা অনুমান করা সমস্যা সহ একটি বিকল্প। অ্যাক্সেসিবিলিটি স্ক্যানার অ্যাপ্লিকেশানটি লুপ থেকে অনুমান কাজ করে এবং আপনার অ্যাপ্লিকেশানটি বিশ্লেষণ করে, যেখানে আপনি এটির অ্যাক্সেসযোগ্যতা উন্নত করতে পারেন তা চিহ্নিত করে৷
• বিষয়বস্তুর বিবরণ সহ টকব্যাকের জন্য ডিজাইন করুন। দৃষ্টি প্রতিবন্ধকতা একজনের ধারণার চেয়ে বেশি সাধারণ, এবং অনেক ব্যবহারকারী, শুধু অন্ধ নয়, স্ক্রিন রিডার ব্যবহার করেন। বিষয়বস্তুর বিবরণ হল এমন বাক্যাংশ যা স্ক্রিন রিডার বলতে পারে যখন একজন ব্যবহারকারী স্ক্রীনের কোনো উপাদানের সাথে ইন্টারঅ্যাক্ট করে।
• সাপোর্ট নাইট মোড । অনেক দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য, পর্দার রঙ পরিবর্তন করা বৈসাদৃশ্য উন্নত করে এবং তাদের আপনার অ্যাপের সাথে দৃশ্যত কাজ করতে সাহায্য করে। অ্যান্ড্রয়েড নাইট মোড সমর্থন করার জন্য এটিকে সহজ করে তোলে এবং ব্যবহারকারীদের ডিফল্ট স্ক্রীন রঙের একটি সহজ বিকল্প দিতে আপনার সর্বদা নাইট মোড সমর্থন করা উচিত।

এই কোডল্যাবে, আপনি এই বিকল্পগুলির প্রতিটি অন্বেষণ করেন এবং GDG ফাইন্ডার অ্যাপে এটির জন্য সমর্থন যোগ করেন।

এছাড়াও আপনি আপনার অ্যান্ড্রয়েড অ্যাপের সাহায্যে চিপস কীভাবে ব্যবহার করবেন তাও শিখুন। আপনি আপনার অ্যাপটিকে আরও আকর্ষণীয় করতে চিপস ব্যবহার করতে পারেন, এটিকে অ্যাক্সেসযোগ্য রেখে৷

আপনি ইতিমধ্যে কি জানা উচিত

আপনার সাথে পরিচিত হওয়া উচিত:

• কীভাবে অ্যাপ্লিকেশানগুলি তৈরি করবেন যেগুলিতে কার্যকলাপ এবং টুকরো রয়েছে এবং ডেটা পাস করার টুকরোগুলির মধ্যে নেভিগেট করবেন৷
• একটি ব্যবহারকারী ইন্টারফেস, বিশেষ করে, RecyclerView বিন্যাস করার জন্য ভিউ এবং ভিউ গ্রুপ ব্যবহার করে।
• একটি সুগঠিত এবং দক্ষ অ্যাপ তৈরি করতে প্রস্তাবিত আর্কিটেকচার সহ ViewModel সহ আর্কিটেকচার উপাদানগুলি কীভাবে ব্যবহার করবেন৷
• ডেটা বাইন্ডিং, কোরোটিন এবং কিভাবে মাউস ক্লিক পরিচালনা করতে হয়।
• একটি রুম ডাটাবেস ব্যবহার করে কীভাবে ইন্টারনেটের সাথে সংযোগ এবং স্থানীয়ভাবে ডেটা ক্যাশে করবেন।
• কিভাবে ভিউ প্রপার্টি সেট করতে হয় এবং কিভাবে এক্সএমএল রিসোর্স ফাইল থেকে রিসোর্স এক্সট্রাক্ট করতে হয় এবং ব্যবহার করতে হয়।
• আপনার অ্যাপের চেহারা কাস্টমাইজ করতে শৈলী এবং থিমগুলি কীভাবে ব্যবহার করবেন।
• কিভাবে উপাদান উপাদান, মাত্রা সম্পদ, এবং কাস্টম রঙ ব্যবহার করবেন।

আপনি কি শিখবেন

• সর্বাধিক সংখ্যক ব্যবহারকারীর দ্বারা কীভাবে আপনার অ্যাপটি ব্যবহারযোগ্য করবেন।
• ডান-থেকে-বামে (RTL) ভাষার জন্য আপনার অ্যাপটি কীভাবে কাজ করবেন।
• কীভাবে আপনার অ্যাপের অ্যাক্সেসযোগ্যতা মূল্যায়ন করবেন।
• স্ক্রিন রিডারগুলির সাথে আপনার অ্যাপকে আরও ভালভাবে কাজ করতে কীভাবে সামগ্রীর বিবরণ ব্যবহার করবেন৷
• চিপস কিভাবে ব্যবহার করবেন।
• কীভাবে আপনার অ্যাপটিকে ডার্ক মোড দিয়ে কাজ করবেন।

আপনি কি করবেন

• RTL ভাষার জন্য কাজ করে অ্যাক্সেসযোগ্যতা উন্নত করতে একটি প্রদত্ত অ্যাপের মূল্যায়ন করুন এবং প্রসারিত করুন।
• কোথায় অ্যাক্সেসযোগ্যতা উন্নত করা যেতে পারে তা নির্ধারণ করতে আপনার অ্যাপ স্ক্যান করুন।
• ছবির জন্য বিষয়বস্তুর বিবরণ ব্যবহার করুন।
• কিভাবে অঙ্কনযোগ্য ব্যবহার করতে হয় তা শিখুন।
• আপনার অ্যাপে নাইট মোড ব্যবহার করার ক্ষমতা যোগ করুন।

GDG-ফাইন্ডার স্টার্টার অ্যাপটি এই কোর্সে আপনি এখন পর্যন্ত যা শিখেছেন তার উপর তৈরি করে।

অ্যাপটি তিনটি স্ক্রীন লেআউট করার জন্য ConstraintLayout ব্যবহার করে। দুটি স্ক্রীন শুধুমাত্র লেআউট ফাইল যা আপনি অ্যান্ড্রয়েডে রঙ এবং পাঠ্য অন্বেষণ করতে ব্যবহার করবেন।

তৃতীয় পর্দা একটি GDG সন্ধানকারী. GDGs, বা Google বিকাশকারী গোষ্ঠীগুলি হল ডেভেলপারদের সম্প্রদায় যেগুলি Android সহ Google প্রযুক্তিগুলিতে ফোকাস করে৷ সারা বিশ্বে GDG গুলি মিটআপ, সম্মেলন, অধ্যয়ন জ্যাম এবং অন্যান্য ইভেন্টগুলি হোস্ট করে৷

আপনি এই অ্যাপটি বিকাশ করার সাথে সাথে আপনি GDG-এর আসল তালিকাতে কাজ করেন। ফাইন্ডার স্ক্রীন দূরত্ব অনুসারে GDG গুলি সাজানোর জন্য ডিভাইসের অবস্থান ব্যবহার করে।

আপনি যদি ভাগ্যবান হন এবং আপনার অঞ্চলে একটি GDG থাকে, তাহলে আপনি ওয়েবসাইটটি দেখতে পারেন এবং তাদের ইভেন্টগুলির জন্য সাইন আপ করতে পারেন! GDG ইভেন্টগুলি অন্যান্য Android ডেভেলপারদের সাথে দেখা করার এবং শিল্পের সেরা অনুশীলনগুলি শেখার একটি দুর্দান্ত উপায় যা এই কোর্সের সাথে খাপ খায় না৷

নীচের স্ক্রিনশটগুলি দেখায় যে কীভাবে আপনার অ্যাপ এই কোডল্যাবের শুরু থেকে শেষ পর্যন্ত পরিবর্তিত হবে।

বাম-থেকে-ডান (LTR) এবং ডান-থেকে-বাম (RTL) ভাষার মধ্যে প্রধান পার্থক্য হল প্রদর্শিত বিষয়বস্তুর দিকনির্দেশ। যখন UI দিক LTR থেকে RTL তে পরিবর্তিত হয় (বা তদ্বিপরীত), তখন একে প্রায়ই মিররিং বলা হয়। মিররিং টেক্সট, টেক্সট ফিল্ড আইকন, লেআউট এবং দিকনির্দেশ সহ আইকন (যেমন তীর) সহ বেশিরভাগ স্ক্রীনকে প্রভাবিত করে। অন্যান্য আইটেমগুলি মিরর করা হয় না, যেমন নম্বর (ঘড়ি, ফোন নম্বর), আইকন যার দিকনির্দেশ নেই (বিমান মোড, ওয়াইফাই), প্লেব্যাক নিয়ন্ত্রণ এবং বেশিরভাগ চার্ট এবং গ্রাফ।

যে ভাষাগুলি RTL পাঠ্য দিকনির্দেশ ব্যবহার করে সেগুলি বিশ্বব্যাপী এক বিলিয়নেরও বেশি লোক ব্যবহার করে। অ্যান্ড্রয়েড বিকাশকারীরা সারা বিশ্বে রয়েছে, এবং তাই একটি GDG ফাইন্ডার অ্যাপকে RTL ভাষা সমর্থন করতে হবে৷

ধাপ 1: RTL সমর্থন যোগ করুন

এই ধাপে, আপনি GDG ফাইন্ডার অ্যাপটিকে RTL ভাষাগুলির সাথে কাজ করতে পারেন৷

1. GDGFinderMaterial অ্যাপটি ডাউনলোড করুন এবং চালান, যা এই কোডল্যাবের স্টার্টার অ্যাপ বা পূর্ববর্তী কোডল্যাবের চূড়ান্ত কোড থেকে চালিয়ে যান।
2. অ্যান্ড্রয়েড ম্যানিফেস্ট খুলুন।
3. <application> বিভাগে, অ্যাপটি আরটিএল সমর্থন করে তা নির্দিষ্ট করতে নিম্নলিখিত কোডটি যোগ করুন।

<application
        ...
        android:supportsRtl="true">

4. ডিজাইন ট্যাবে activity_main.xml খুলুন।
5. প্রিভিউ ড্রপডাউন মেনুর জন্য লোকেল থেকে, ডান থেকে বামে প্রিভিউ বেছে নিন। (যদি আপনি এই মেনুটি খুঁজে না পান তবে এটিকে উন্মোচন করতে ফলকটি প্রশস্ত করুন বা বৈশিষ্ট্য ফলকটি বন্ধ করুন।)

টিপ: আপনার অ্যাপটি কীভাবে RTL-এ দৃশ্যমানভাবে উপস্থাপন করে তা পরীক্ষা করার জন্য আপনাকে আপনার ডিভাইসে ভাষা পরিবর্তন করতে হবে না।

6. প্রিভিউতে , লক্ষ্য করুন যে হেডার "GDG Finder" ডানদিকে সরানো হয়েছে, এবং বাকি স্ক্রীন প্রায় একই রকম রয়েছে। সামগ্রিকভাবে, এই পর্দা পাসযোগ্য. কিন্তু টেক্সট ভিউতে সারিবদ্ধকরণটি এখন ভুল, কারণ এটি ডানদিকের পরিবর্তে বাম দিকে সারিবদ্ধ।

7. আপনার ডিভাইসে এটি কাজ করতে, আপনার ডিভাইস বা এমুলেটর সেটিংসে , বিকাশকারী বিকল্পগুলিতে , ফোর্স RTL লেআউট নির্বাচন করুন। (যদি আপনি বিকাশকারী বিকল্পগুলি চালু করতে চান, বিল্ড নম্বরটি খুঁজুন এবং এটিতে ক্লিক করুন যতক্ষণ না আপনি একটি ডেভেলপার ইঙ্গিত করে টোস্ট না পান৷ এটি ডিভাইস এবং অ্যান্ড্রয়েড সিস্টেমের সংস্করণ অনুসারে পরিবর্তিত হয়৷)

8. অ্যাপটি চালান এবং ডিভাইসে যাচাই করুন যে মূল স্ক্রীনটি পূর্বরূপের মতোই দেখা যাচ্ছে। লক্ষ্য করুন যে FAB এখন বাম দিকে এবং হ্যামবার্গার মেনু ডানদিকে সুইচ করা হয়েছে!
9. অ্যাপে, নেভিগেশন ড্রয়ার খুলুন এবং অনুসন্ধান স্ক্রিনে নেভিগেট করুন। নীচে দেখানো হিসাবে, আইকনগুলি এখনও বাম দিকে রয়েছে এবং কোনও পাঠ্য দৃশ্যমান নয়৷ দেখা যাচ্ছে যে পাঠ্যটি আইকনের বাম দিকে স্ক্রীনের বাইরে রয়েছে। কারণ কোডটি ভিউ বৈশিষ্ট্য এবং লেআউট সীমাবদ্ধতায় বাম/ডান স্ক্রীন রেফারেন্স ব্যবহার করে।

ধাপ 2: বাম এবং ডান পরিবর্তে শুরু এবং শেষ ব্যবহার করুন

স্ক্রীনে "বাম" এবং "ডান" (যখন আপনি পর্দার মুখোমুখি হন) পরিবর্তন হয় না, এমনকি পাঠ্যের দিক পরিবর্তন হলেও। উদাহরণস্বরূপ, layout_constraintLeft_toLeftOf সবসময় উপাদানটির বাম দিকটিকে পর্দার বাম দিকে সীমাবদ্ধ করে। আপনার অ্যাপের ক্ষেত্রে, উপরের স্ক্রিনশটে দেখানো হিসাবে RTL ভাষায় পাঠ্যটি স্ক্রীনের বাইরে রয়েছে।

এটি ঠিক করতে, "বাম" এবং "ডান" এর পরিবর্তে Start এবং End পরিভাষা ব্যবহার করুন। এই পরিভাষাটি বর্তমান ভাষায় পাঠ্যের দিকনির্দেশের জন্য পাঠ্যের শুরু এবং পাঠের শেষটি যথাযথভাবে সেট করে, যাতে মার্জিন এবং বিন্যাসগুলি স্ক্রিনের সঠিক অঞ্চলে থাকে।

1. list_item.xml Open ।
2. Start এবং End রেফারেন্স দিয়ে Left এবং Right যেকোনো রেফারেন্স প্রতিস্থাপন করুন।

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. ImageView এর layout_marginLeft দিয়ে layout_marginStart করুন। এটি আইকনটিকে পর্দার প্রান্ত থেকে দূরে সরানোর জন্য মার্জিনটিকে সঠিক জায়গায় নিয়ে যায়।

<ImageView
android:layout_marginStart="
?

4. fragment_gdg_list.xml খুলুন। পূর্বরূপ ফলকে GDG-এর তালিকা পরীক্ষা করুন। লক্ষ্য করুন যে আইকনটি এখনও ভুল দিকে নির্দেশ করছে কারণ এটি মিরর করা হয়েছে (যদি আইকনটি মিরর করা না হয় তবে নিশ্চিত করুন যে আপনি এখনও ডান থেকে বাম পূর্বরূপ দেখছেন)। মেটেরিয়াল ডিজাইনের নির্দেশিকা অনুসারে, আইকনগুলি মিরর করা উচিত নয়।
5. res/drawable/ic_gdg.xml খুলুন।
6. XML কোডের প্রথম লাইনে, মিররিং অক্ষম করতে android:autoMirrored="true" খুঁজুন এবং মুছুন।
7. পূর্বরূপ চেক করুন বা অ্যাপটি আবার চালান এবং অনুসন্ধান GDG স্ক্রীন খুলুন। লেআউট এখন ঠিক করা উচিত!

টিপ: অ্যান্ড্রয়েড স্টুডিও আপনাকে হলুদ-হাইলাইট টিপস দেয় শুরু এবং শেষ বৈশিষ্ট্যগুলির ব্যবহারকে উত্সাহিত করতে৷

আপনার XML লেআউটে Left এবং Right সমস্ত ঘটনা খুঁজে পেতে কেস ম্যাচিং সহ অনুসন্ধান-এবং-প্রতিস্থাপন ব্যবহার করুন।

ধাপ 3: Android স্টুডিওকে আপনার জন্য কাজ করতে দিন

আগের অনুশীলনে, আপনি RTL ভাষা সমর্থন করার জন্য আপনার প্রথম পদক্ষেপ নিয়েছিলেন। সৌভাগ্যবশত, অ্যান্ড্রয়েড স্টুডিও আপনার অ্যাপ স্ক্যান করতে পারে এবং আপনার জন্য অনেক বেসিক সেট আপ করতে পারে।

1. list_item.xml- এ, TextView-এ, layout_marginStart এ TextView এ পরিবর্তন layout_marginLeft , যাতে স্ক্যানার কিছু খুঁজে পায়।

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. অ্যান্ড্রয়েড স্টুডিওতে, রিফ্যাক্টর বেছে নিন > যেখানে সম্ভব সেখানে আরটিএল সমর্থন যোগ করুন এবং ম্যানিফেস্ট আপডেট করার জন্য বাক্সে চেক করুন এবং শুরু এবং শেষ বৈশিষ্ট্যগুলি ব্যবহার করার জন্য লেআউট ফাইলগুলি।

3. রিফ্যাক্টরিং প্রিভিউ প্যানে, অ্যাপ ফোল্ডারটি খুঁজুন এবং এটি সমস্ত বিবরণের জন্য খোলা না হওয়া পর্যন্ত প্রসারিত করুন।
4. অ্যাপ ফোল্ডারের অধীনে, লক্ষ্য করুন যে layout_marginLeft যেটি আপনি পরিবর্তন করেছেন তা রিফ্যাক্টরের কোড হিসাবে তালিকাভুক্ত করা হয়েছে।

5. লক্ষ্য করুন যে প্রিভিউ সিস্টেম এবং লাইব্রেরি ফাইলগুলিকেও তালিকাভুক্ত করে। লেআউট এবং l ayout-watch-v20 এবং অ্যাপের অংশ নয় এমন অন্য যেকোন ফোল্ডারে ডান-ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে বাদ দিন বেছে নিন।

6. এগিয়ে যান এবং এখন রিফ্যাক্টর করুন। (যদি আপনি সিস্টেম ফাইল সম্পর্কে একটি পপআপ পান, নিশ্চিত করুন যে আপনি আপনার অ্যাপ কোডের অংশ নয় এমন সমস্ত ফোল্ডার বাদ দিয়েছেন।)

7. লক্ষ্য করুন যে layout_marginLeft আবার layout_marginStart এ পরিবর্তিত হয়েছে।

দ্রষ্টব্য: RTL এর সাথে সঠিকভাবে আচরণ করার জন্য কিছু View উপাদানের আরও কাস্টমাইজেশন প্রয়োজন। UI এর উপর আরও সুনির্দিষ্ট নিয়ন্ত্রণের জন্য 4টি ভিন্ন API রয়েছে যা আপনি ব্যবহার করতে পারেন:

• android:layoutDirection একটি কম্পোনেন্টের লেআউটের দিকনির্দেশ সেট করতে।
• android:textDirection একটি উপাদানের পাঠ্যের দিকনির্দেশ সেট করতে।
• android:textAlignment অ্যালাইনমেন্ট একটি উপাদানের পাঠ্যের প্রান্তিককরণ সেট করতে।
• getLayoutDirectionFromLocale() হল প্রোগ্রাম্যাটিকভাবে লোকেল পাওয়ার একটি পদ্ধতি যা দিকনির্দেশ নির্দিষ্ট করে।

ধাপ 3: লোকেলের জন্য ফোল্ডারগুলি অন্বেষণ করুন

এখন পর্যন্ত, আপনি অ্যাপের জন্য ব্যবহৃত ডিফল্ট ভাষার দিক পরিবর্তন করেছেন। একটি প্রোডাকশন অ্যাপের জন্য, আপনি strings.xml ফাইলটিকে একটি অনুবাদকের কাছে পাঠাবেন যাতে এটি একটি নতুন ভাষায় অনুবাদ করা যায়। এই কোডল্যাবের জন্য, অ্যাপটি স্প্যানিশ ভাষায় একটি strings.xml ফাইল সরবরাহ করে (আমরা অনুবাদগুলি তৈরি করতে Google অনুবাদ ব্যবহার করেছি, তাই সেগুলি নিখুঁত নয়।)

1. অ্যান্ড্রয়েড স্টুডিওতে, প্রজেক্ট ভিউকে প্রজেক্ট ফাইলে স্যুইচ করুন।
2. res ফোল্ডারটি প্রসারিত করুন এবং res/values ​​এবং res/values-es এর জন্য ফোল্ডারগুলি লক্ষ্য করুন। ফোল্ডারের নামের "es" হল স্প্যানিশ ভাষার কোড । মান-"ভাষা কোড" ফোল্ডারে প্রতিটি সমর্থিত ভাষার জন্য মান থাকে। একটি এক্সটেনশন ছাড়া মান ফোল্ডারে ডিফল্ট সম্পদ রয়েছে যা অন্যথায় প্রযোজ্য।

3. মান- es এ , strings.xml খুলুন এবং লক্ষ্য করুন যে সমস্ত স্ট্রিং স্প্যানিশ ভাষায় রয়েছে।
4. অ্যান্ড্রয়েড স্টুডিওতে, ডিজাইন ট্যাবে activity_main.xml খুলুন।
5. প্রিভিউ ড্রপডাউনের লোকেলে স্প্যানিশ বেছে নিন। আপনার টেক্সট এখন স্প্যানিশ হওয়া উচিত.

6. [ঐচ্ছিক] আপনি যদি একটি RTL ভাষায় দক্ষ হন, তাহলে সেই ভাষায় একটি মান ফোল্ডার এবং একটি strings.xml তৈরি করুন এবং এটি আপনার ডিভাইসে কীভাবে প্রদর্শিত হবে তা পরীক্ষা করুন।
7. [ঐচ্ছিক] আপনার ডিভাইসে ভাষা সেটিংস পরিবর্তন করুন এবং অ্যাপটি চালান। নিশ্চিত করুন যে আপনি আপনার ডিভাইসটিকে এমন কোনো ভাষায় পরিবর্তন করবেন না যেটি আপনি পড়েন না, কারণ এটিকে পূর্বাবস্থায় ফেরানো কিছুটা চ্যালেঞ্জিং করে তোলে!

আগের টাস্কে, আপনি আপনার অ্যাপটি ম্যানুয়ালি পরিবর্তন করেছেন এবং তারপরে অতিরিক্ত RTL উন্নতিগুলি পরীক্ষা করতে Android স্টুডিও ব্যবহার করেছেন।

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

ধাপ 1: অ্যাক্সেসিবিলিটি স্ক্যানার ইনস্টল করুন এবং চালান

1. প্লে স্টোর খুলুন এবং প্রয়োজনে সাইন ইন করুন। আপনি আপনার শারীরিক ডিভাইস বা এমুলেটরে এটি করতে পারেন। এই কোডল্যাব এমুলেটর ব্যবহার করে।
   

দ্রষ্টব্য: আপনার এমুলেটরে প্লে স্টোর না থাকলে, আপনাকে একটি নতুন এমুলেটর তৈরি করতে হতে পারে। নিশ্চিত করুন যে আপনি এমন একটি বিকল্প নির্বাচন করেছেন যাতে এমুলেটর তৈরি করার সময় "প্লে স্টোর" আইকন সক্রিয় থাকে৷

গুরুত্বপূর্ণ: এমুলেটর থেকে প্লে স্টোর ব্যবহার করতে, আপনাকে একটি অ্যাকাউন্ট দিয়ে লগ ইন করতে হবে। আপনি আপনার নিয়মিত অ্যাকাউন্ট ব্যবহার করতে পারেন, অথবা আপনি এমুলেটর দিয়ে পরীক্ষার জন্য একটি অ্যাকাউন্ট তৈরি করতে পারেন। আপনি যে কোনো অ্যাকাউন্ট তৈরি করেন তা বাস্তব, এবং আপনি আসল প্লে পরিষেবার সাথে সংযোগ করছেন, এটির একটি অনুকরণ করা সংস্করণ নয়!

গুরুত্বপূর্ণ: আপনি বিলিং বিকল্প সেট আপ এড়িয়ে যেতে পারেন!

2. প্লে স্টোরে, Google LLC দ্বারা অ্যাক্সেসিবিলিটি স্ক্যানার অনুসন্ধান করুন। নিশ্চিত করুন যে আপনি সঠিক অ্যাপটি পেয়েছেন, Google দ্বারা ইস্যু করা হয়েছে, কারণ যেকোনো স্ক্যানিংয়ের জন্য অনেক অনুমতির প্রয়োজন হয়!

3. এমুলেটরে স্ক্যানার ইনস্টল করুন।
4. একবার ইন্সটল হলে ওপেন এ ক্লিক করুন।
5. শুরু করুন ক্লিক করুন ।
6. সেটিংসে অ্যাক্সেসিবিলিটি স্ক্যানার সেটআপ শুরু করতে ওকে ক্লিক করুন৷

7. ডিভাইসের অ্যাক্সেসিবিলিটি সেটিংসে যেতে অ্যাক্সেসিবিলিটি স্ক্যানারে ক্লিক করুন।

8. এটি সক্রিয় করতে পরিষেবা ব্যবহার করুন ক্লিক করুন।

9. অন-স্ক্রীন নির্দেশাবলী অনুসরণ করুন এবং সমস্ত অনুমতি প্রদান করুন।
10. তারপর OK Got it এ ক্লিক করুন এবং হোম স্ক্রিনে ফিরে আসুন। আপনি পর্দায় কোথাও একটি টিক চিহ্ন সহ একটি নীল বোতাম দেখতে পারেন। এই বোতামটি ক্লিক করলে অগ্রভাগে অ্যাপটির জন্য পরীক্ষা শুরু হয়। আপনি বোতামটি টেনে পুনরায় অবস্থান করতে পারেন। এই বোতামটি যেকোনও অ্যাপের উপরে থাকে, তাই আপনি যেকোনও সময় টেস্টিং ট্রিগার করতে পারেন।

স্ক্যানারটি বন্ধ করতে, সেটিংসে যান এবং অ্যাক্সেসিবিলিটি স্ক্যানারটি বন্ধ করুন।

11. আপনার অ্যাপ খুলুন বা চালান।
12. নীল বোতামে ক্লিক করুন এবং অতিরিক্ত নিরাপত্তা সতর্কতা এবং অনুমতি গ্রহণ করুন।

আপনি যখন প্রথমবার অ্যাক্সেসিবিলিটি স্ক্যানার আইকনে ক্লিক করেন, অ্যাপটি আপনার স্ক্রিনে সবকিছু দেখানোর জন্য অনুমতি চায়। এটি একটি খুব ভীতিকর অনুমতি মত মনে হচ্ছে, এবং এটা.

আপনার প্রায় কখনই এর মতো অনুমতি দেওয়া উচিত নয়, কারণ অনুমতিটি অ্যাপগুলিকে আপনার ইমেল পড়তে বা এমনকি আপনার ব্যাঙ্ক অ্যাকাউন্টের তথ্য পেতে দেয়! যাইহোক, অ্যাক্সেসিবিলিটি স্ক্যানার এর কাজ করার জন্য, এটিকে আপনার অ্যাপটিকে একজন ব্যবহারকারী যেভাবে পরীক্ষা করে তা পরীক্ষা করতে হবে—তাই এটির এই অনুমতির প্রয়োজন৷

গুরুত্বপূর্ণ: আপনি এই অনুমতি সক্ষম করার আগে, আপনার ইনস্টল করা অ্যাপটি Google LLC দ্বারা অ্যাক্সেসিবিলিটি স্ক্যানার কিনা তা নিশ্চিত করতে দুবার চেক করুন।

13. নীল বোতামে ক্লিক করুন এবং বিশ্লেষণ সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন। আপনি নীচের স্ক্রিনশটের মতো কিছু দেখতে পাবেন, যার শিরোনাম এবং FAB লাল রঙে বক্স করা হয়েছে। এটি এই স্ক্রিনে অ্যাক্সেসযোগ্যতার উন্নতির জন্য দুটি পরামর্শ নির্দেশ করে।

14. GDG ফাইন্ডারের চারপাশে থাকা বাক্সে ক্লিক করুন। এটি অতিরিক্ত তথ্য সহ একটি ফলক খোলে, যেমন নীচে দেখানো হয়েছে, চিত্রের বৈসাদৃশ্যের সমস্যাগুলি নির্দেশ করে৷
15. ইমেজ কনট্রাস্ট তথ্য প্রসারিত করুন, এবং টুলটি প্রতিকারের পরামর্শ দেয়।
16. পরবর্তী আইটেমের তথ্য পেতে ডানদিকের তীরগুলিতে ক্লিক করুন৷

17. আপনার অ্যাপে, GDG এর জন্য আবেদন করুন স্ক্রিনে নেভিগেট করুন এবং অ্যাক্সেসিবিলিটি স্ক্যানার অ্যাপ দিয়ে স্ক্যান করুন। এটি বাম দিকে নীচে দেখানো হিসাবে বেশ কয়েকটি পরামর্শ দেয়। 12, সঠিক হতে. ন্যায্য হতে, তাদের মধ্যে কিছু অনুরূপ আইটেম জন্য সদৃশ হয়.
18. "স্ট্যাক" ক্লিক করুন নীচের টুলবারে আইকনটি সমস্ত পরামর্শের একটি তালিকা পেতে, যেমনটি ডান স্ক্রিনশটে নীচে দেখানো হয়েছে। আপনি এই কোডল্যাবে এই সমস্ত সমস্যার সমাধান করুন।

অ্যান্ড্রয়েড অ্যাক্সেসিবিলিটি স্যুট , Google-এর অ্যাপ্লিকেশানগুলির একটি সংগ্রহ, অ্যাপগুলিকে আরও অ্যাক্সেসযোগ্য করতে সহায়তা করার জন্য সরঞ্জামগুলি অন্তর্ভুক্ত করে৷ এতে টকব্যাকের মতো টুল রয়েছে। TalkBack হল একটি স্ক্রিন রিডার যা শ্রবণ, হ্যাপটিক এবং কথ্য প্রতিক্রিয়া প্রদান করে, যা ব্যবহারকারীদের তাদের চোখ ব্যবহার না করেই তাদের ডিভাইসে নেভিগেট করতে এবং সামগ্রী ব্যবহার করতে দেয়।

এটি দেখা যাচ্ছে যে টকব্যাক শুধুমাত্র অন্ধ ব্যক্তিরাই ব্যবহার করেন না, কিন্তু এমন অনেক লোকই ব্যবহার করেন যাদের কোনো না কোনোভাবে দৃষ্টি প্রতিবন্ধকতা রয়েছে। বা এমনকি যারা শুধু তাদের চোখ বিশ্রাম চান!

সুতরাং, অ্যাক্সেসিবিলিটি সবার জন্য! এই কাজটিতে, আপনি TalkBack ব্যবহার করে দেখুন এবং এটির সাথে ভালভাবে কাজ করার জন্য আপনার অ্যাপ আপডেট করুন।

ধাপ 1: অ্যাক্সেসিবিলিটি স্যুট ইনস্টল করুন এবং চালান

অনেক ফিজিক্যাল ডিভাইসে টকব্যাক প্রি-ইনস্টল করা আছে, কিন্তু একটি এমুলেটরে, আপনাকে এটি ইনস্টল করতে হবে।

1. প্লে স্টোর খুলুন।
2. অ্যাক্সেসিবিলিটি স্যুট খুঁজুন। নিশ্চিত করুন যে এটি Google দ্বারা সঠিক অ্যাপ।
3. এটি ইনস্টল করা না থাকলে, অ্যাক্সেসিবিলিটি স্যুট ইনস্টল করুন।
4. ডিভাইসে TalkBack সক্ষম করতে, সেটিংস > অ্যাক্সেসিবিলিটিতে নেভিগেট করুন এবং পরিষেবা ব্যবহার করুন নির্বাচন করে TalkBack চালু করুন। অ্যাক্সেসিবিলিটি স্ক্যানারের মতোই, স্ক্রিনের বিষয়বস্তু পড়ার জন্য TalkBack-এর অনুমতির প্রয়োজন। একবার আপনি অনুমতির অনুরোধগুলি গ্রহণ করলে, TalkBack আপনাকে কীভাবে কার্যকরভাবে TalkBack ব্যবহার করতে হয় তা শেখানোর জন্য টিউটোরিয়ালের একটি তালিকা সহ আপনাকে স্বাগত জানায়৷
5. এখানে বিরতি দিন এবং টিউটোরিয়ালগুলি নিন, যদি আপনার কাজ শেষ হয়ে গেলে টকব্যাকটি কীভাবে বন্ধ করতে হয় তা শিখতে ছাড়া অন্য কোনও কারণ না থাকে৷
6. টিউটোরিয়ালটি ছেড়ে যেতে, এটি নির্বাচন করতে পিছনের বোতামে ক্লিক করুন, তারপর স্ক্রিনের যে কোনও জায়গায় ডবল-ট্যাপ করুন৷

টিপ: আপনি যদি কিছু শুনতে না পান...ভলিউম চালু করুন!

টিপ: একটি আইটেম ক্লিক করতে, এটি ডাবল-ট্যাপ করুন; স্ক্রোল বা টেনে আনতে, ডবল-ট্যাপ করুন এবং টেনে আনুন।

7. টকব্যাকের সাথে জিডিজি ফাইন্ডার অ্যাপ ব্যবহার করে অন্বেষণ করুন। এমন জায়গাগুলি লক্ষ্য করুন যেখানে TalkBack আপনাকে স্ক্রীন বা নিয়ন্ত্রণ সম্পর্কে কোনও দরকারী তথ্য দেয় না৷ আপনি পরবর্তী অনুশীলনে এটি ঠিক করতে যাচ্ছেন।

ধাপ 2: একটি বিষয়বস্তুর বিবরণ যোগ করুন

বিষয়বস্তু বর্ণনাকারী হল বর্ণনামূলক লেবেল যা দর্শনের অর্থ ব্যাখ্যা করে। আপনার বেশিরভাগ দৃশ্যের বিষয়বস্তুর বিবরণ থাকা উচিত।

1. GDG ফাইন্ডার অ্যাপটি চলমান এবং ট্যালব্যাক সক্ষম করে, GDG স্ক্রিনে প্রয়োগ করার জন্য নেভিগেট করুন।
2. মূল ছবিতে আলতো চাপুন ... এবং কিছুই হবে না।
3. add_gdg_fragment.xml খুলুন।
4. ImageView -তে, নীচে দেখানো হিসাবে একটি বিষয়বস্তু বর্ণনাকারী বৈশিষ্ট্য যোগ করুন। stage_image_description স্ট্রিংটি আপনার জন্য strings.xml এ প্রদান করা হয়েছে।

android:contentDescription="@string/stage_image_description"

5. আপনার অ্যাপ চালান।
6. GDG চালানোর জন্য আবেদন করতে নেভিগেট করুন এবং ছবিতে ক্লিক করুন। আপনি এখন ইমেজ একটি সংক্ষিপ্ত বিবরণ শুনতে হবে.
7. [ঐচ্ছিক] এই অ্যাপে অন্যান্য ছবির জন্য বিষয়বস্তুর বিবরণ যোগ করুন। একটি প্রোডাকশন অ্যাপে, সমস্ত ছবিতে বিষয়বস্তুর বিবরণ থাকতে হবে।

ধাপ 3: সম্পাদনাযোগ্য পাঠ্য ক্ষেত্রে ইঙ্গিত যোগ করুন

সম্পাদনাযোগ্য উপাদানগুলির জন্য, যেমন একটি EditText , আপনি XML-এ android:hint ব্যবহার করতে পারেন যাতে ব্যবহারকারীরা কী টাইপ করবেন তা নির্ধারণ করতে পারেন৷ একটি ইঙ্গিত সর্বদা UI এ দেখায় কারণ এটি একটি ইনপুট ক্ষেত্রের ডিফল্ট পাঠ্য।

1. এখনও add_gdg_fragment.xml- এ
2. নির্দেশিকা হিসাবে নীচের কোড ব্যবহার করে বিষয়বস্তুর বিবরণ এবং ইঙ্গিত যোগ করুন।

textViewIntro যোগ করুন:

android:contentDescription="@string/add_gdg"

সম্পাদনা পাঠে যথাক্রমে যোগ করুন:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. লেবেলে একটি বিষয়বস্তুর বিবরণ যোগ করুন labelTextWhy .

android:contentDescription="@string/motivation" 

4. EditTextWhy এ একটি ইঙ্গিত যোগ করুন। একবার আপনি সম্পাদনা বাক্সগুলি লেবেল করে ফেললে, লেবেলে একটি বিষয়বস্তুর বিবরণ যোগ করুন এবং বাক্সে একটি ইঙ্গিতও দিন৷

android:hint="@string/enter_motivation"

5. জমা বোতামের জন্য একটি বিষয়বস্তুর বিবরণ যোগ করুন। সমস্ত বোতাম টিপলে কি হবে তার একটি বিবরণ থাকতে হবে।

android:contentDescription="@string/submit_button_description"

6. ট্যালব্যাক সক্ষম করে আপনার অ্যাপটি চালান এবং একটি GDG চালানোর জন্য আবেদন করতে ফর্মটি পূরণ করুন৷

ধাপ 4: একটি বিষয়বস্তু গোষ্ঠী তৈরি করুন

UI নিয়ন্ত্রণের জন্য যে TalkBack-কে একটি গোষ্ঠী হিসাবে বিবেচনা করা উচিত, আপনি সামগ্রী গ্রুপিং ব্যবহার করতে পারেন৷ সম্পর্কিত বিষয়বস্তু যা একসাথে গোষ্ঠীবদ্ধ করা হয়, একসাথে ঘোষণা করা হয়। সহায়ক প্রযুক্তির ব্যবহারকারীদের তখন স্ক্রিনে সমস্ত তথ্য আবিষ্কার করার জন্য সোয়াইপ, স্ক্যান বা অপেক্ষা করতে হবে না। এটি স্ক্রিনে নিয়ন্ত্রণগুলি কীভাবে প্রদর্শিত হবে তা প্রভাবিত করে না।

UI উপাদানগুলিকে গোষ্ঠীভুক্ত করতে, সেগুলিকে একটি ViewGroup এ মোড়ানো, যেমন একটি LinearLayout . GDG ফাইন্ডার অ্যাপে, labelTextWhy এবং editTextWhy উপাদানগুলি গোষ্ঠীবদ্ধ করার জন্য চমৎকার প্রার্থী কারণ তারা শব্দার্থগতভাবে একত্রিত।

1. add_gdg_fragment.xml খুলুন।
2. একটি বিষয়বস্তু গোষ্ঠী তৈরি করতে LabelTextWhy এবং LinearLayout এর চারপাশে একটি লিনিয়ার EditTextWhy মোড়ানো। কপি করুন এবং নিচের কোড পেস্ট করুন. এই LinearLayout এ ইতিমধ্যেই আপনার প্রয়োজনীয় কিছু স্টাইলিং রয়েছে। (নিশ্চিত করুন যে button LinearLayout বাইরে রয়েছে।)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. সমস্ত কোড সঠিকভাবে ইন্ডেন্ট করতে কোড > রিফরম্যাট কোড বেছে নিন।
4. লেবেল থেকে সমস্ত লেআউট মার্জিন সরান labelTextWhy এবং editTextWhy .
5. লেবেল টেক্সট কেন, labelTextWhy contentGroup layout_constraintTop_toTopOf সীমাবদ্ধতা পরিবর্তন করুন।

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. editTextWhy এ layout_constraintBottom_toBottomOf সীমাবদ্ধতাকে contentGroup এ কেন পরিবর্তন করুন।

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. ত্রুটিগুলি পরিত্রাণ পেতে সম্পাদনা contentGroup এবং সামগ্রী EditTextRegion Button সীমাবদ্ধ করুন৷

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. LinearLayout মার্জিন যোগ করুন। ঐচ্ছিকভাবে, একটি মাত্রা হিসাবে এই মার্জিনটি বের করুন।

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

আপনার যদি সাহায্যের প্রয়োজন হয়, তাহলে সমাধান কোডে add_gdg_fragment.xml এর বিপরীতে আপনার কোড পরীক্ষা করুন।

9. আপনার অ্যাপটি চালান এবং টকব্যাকের সাথে GDG স্ক্রীন চালানোর জন্য প্রয়োগ করুন ।

ধাপ 5: একটি লাইভ অঞ্চল যোগ করুন

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

একটি লাইভ অঞ্চল অ্যাক্সেসিবিলিটি পরিষেবাগুলিকে নির্দেশ করে যে কোনও ভিউ পরিবর্তিত হলে ব্যবহারকারীকে জানানো উচিত কিনা। উদাহরণস্বরূপ, ব্যবহারকারীকে একটি ভুল পাসওয়ার্ড বা নেটওয়ার্ক ত্রুটি সম্পর্কে অবহিত করা আপনার অ্যাপটিকে আরও অ্যাক্সেসযোগ্য করার একটি দুর্দান্ত উপায়৷ এই উদাহরণে, এটি সহজ রাখার জন্য, আপনি যখন সাবমিট বোতামটি তার অবস্থা পরিবর্তন করেন তখন আপনি ব্যবহারকারীকে জানান।

1. add_gdg_fragment.xml খুলুন।
2. প্রদত্ত submit স্ট্রিং রিসোর্স ব্যবহার করে জমা দিতে বোতামের টেক্সট অ্যাসাইনমেন্ট পরিবর্তন করুন।

android:text="@string/submit"

3. android:accessibilityLiveRegion অ্যাট্রিবিউট সেট করে বোতামে একটি লাইভ অঞ্চল যোগ করুন। আপনি টাইপ করার সাথে সাথে, আপনার কাছে এর মানটির জন্য বেশ কয়েকটি বিকল্প রয়েছে। পরিবর্তনের গুরুত্বের উপর নির্ভর করে, আপনি ব্যবহারকারীকে বাধা দেবেন কিনা তা চয়ন করতে পারেন। "জোরকারী" মান সহ, অ্যাক্সেসিবিলিটি পরিষেবাগুলি এই দৃষ্টিভঙ্গির পরিবর্তনগুলি অবিলম্বে ঘোষণা করতে চলমান বক্তৃতায় বাধা দেয়। আপনি যদি "কোনটিই" তে মান সেট করেন তবে কোন পরিবর্তন ঘোষণা করা হবে না। "ভদ্র" তে সেট করুন, অ্যাক্সেসিবিলিটি পরিষেবাগুলি পরিবর্তনগুলি ঘোষণা করে, কিন্তু তাদের পালা অপেক্ষা করুন৷ "ভদ্র" মান সেট করুন।

android:accessibilityLiveRegion="polite"

4. অ্যাড প্যাকেজে, AddGdgFragment.kt খুলুন।
5. showSnackBarEvent Observer ভিতরে, আপনি SnackBar দেখানো শেষ করার পরে, বোতামের জন্য একটি নতুন বিষয়বস্তুর বিবরণ এবং পাঠ্য সেট করুন।

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. আপনার অ্যাপটি চালান এবং বোতামে ক্লিক করুন। দুর্ভাগ্যবশত, বোতাম এবং ফন্ট খুব ছোট!

ধাপ 6: বোতামের স্টাইলিং ঠিক করুন

1. add_gdg_fragment.xml এ, বোতামের width এবং height wrap_content এ পরিবর্তন করুন, যাতে পুরো লেবেলটি দৃশ্যমান হয় এবং বোতামটি একটি ভাল আকারের হয়৷

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. বাটন থেকে backgroundTint , টেক্সট textSize textColor মুছুন যাতে অ্যাপটি আরও ভাল থিম স্টাইলিং ব্যবহার করে।
3. textViewIntro থেকে textColor বৈশিষ্ট্য মুছুন। থিম রং ভাল বৈসাদৃশ্য প্রদান করা উচিত.
4. অ্যাপটি চালান। আরও অনেক বেশি ব্যবহারযোগ্য সাবমিট বোতামটি লক্ষ্য করুন। সাবমিট এ ক্লিক করুন এবং লক্ষ্য করুন কিভাবে এটি হয়ে গেছে।

চিপস হল কমপ্যাক্ট উপাদান যা একটি বৈশিষ্ট্য, পাঠ্য, সত্তা বা কর্মের প্রতিনিধিত্ব করে। তারা ব্যবহারকারীদের তথ্য প্রবেশ করতে, একটি পছন্দ নির্বাচন করতে, বিষয়বস্তু ফিল্টার করতে বা একটি ক্রিয়া ট্রিগার করার অনুমতি দেয়।

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

চিপস drawables ব্যবহার. অ্যান্ড্রয়েড ড্রয়েবলগুলি আপনাকে স্ক্রিনে চিত্র, আকার এবং অ্যানিমেশন আঁকতে দেয় এবং সেগুলির একটি নির্দিষ্ট আকার থাকতে পারে বা গতিশীল আকারের হতে পারে৷ আপনি ছবিগুলিকে অঙ্কনযোগ্য হিসাবে ব্যবহার করতে পারেন, যেমন GDG অ্যাপের ছবিগুলি৷ এবং আপনি কল্পনা করতে পারেন এমন কিছু আঁকতে আপনি ভেক্টর অঙ্কন ব্যবহার করতে পারেন। এছাড়াও 9-প্যাচ ড্রয়েবল নামে একটি রিসাইজযোগ্য ড্রয়েবল রয়েছে যা এই কোডল্যাবে কভার করা হয়নি। GDG লোগো, drawable/ic_gdg.xml- এ, আরেকটি অঙ্কনযোগ্য।

অঙ্কনযোগ্যগুলি দৃশ্য নয়, তাই আপনি একটি ConstraintLayout এর ভিতরে সরাসরি অঙ্কনযোগ্য রাখতে পারবেন না, আপনাকে এটি একটি ImageView ভিতরে রাখতে হবে। আপনি একটি পাঠ্য দৃশ্য বা একটি বোতামের জন্য একটি পটভূমি প্রদান করতে অঙ্কনযোগ্য ব্যবহার করতে পারেন এবং পটভূমি পাঠ্যের পিছনে আঁকা হয়।

ধাপ 1: GDG-এর তালিকায় চিপ যোগ করুন

নীচের চেক করা চিপ তিনটি অঙ্কনযোগ্য ব্যবহার করে। ব্যাকগ্রাউন্ড এবং চেক মার্ক প্রতিটি একটি অঙ্কনযোগ্য. চিপটি স্পর্শ করলে একটি লহরী প্রভাব তৈরি হয়, যা একটি বিশেষ RippleDrawable দিয়ে করা হয় যা রাষ্ট্রীয় পরিবর্তনের প্রতিক্রিয়ায় একটি লহরী প্রভাব দেখায়।

এই টাস্কে, আপনি GDG-এর তালিকায় চিপ যোগ করেন, এবং যখন সেগুলি নির্বাচন করা হয় তখন তাদের অবস্থা পরিবর্তন করতে বলুন৷ এই অনুশীলনে, আপনি অনুসন্ধান স্ক্রিনের শীর্ষে চিপস নামক বোতামগুলির একটি সারি যুক্ত করুন৷ প্রতিটি বোতাম GDG তালিকা ফিল্টার করে যাতে ব্যবহারকারী শুধুমাত্র নির্বাচিত অঞ্চল থেকে ফলাফল পান। যখন একটি বোতাম নির্বাচন করা হয়, বোতামটি তার পটভূমি পরিবর্তন করে এবং একটি টিক চিহ্ন দেখায়।

1. fragment_gdg_list.xml খুলুন।
2. HorizontalScrollView এর ভিতরে একটি com.google.android.material.chip.ChipGroup তৈরি করুন HorizontalScrollView. এর singleLine প্রপার্টি true তে সেট করুন, যাতে সমস্ত চিপ একটি অনুভূমিকভাবে স্ক্রোলযোগ্য লাইনে সারিবদ্ধ হয়। singleSelection বৈশিষ্ট্যটিকে true হিসাবে সেট করুন যাতে গ্রুপে শুধুমাত্র একটি চিপ একবারে নির্বাচন করা যায়। এখানে কোড আছে.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. লেআউট ফোল্ডারে, একটি Chip লেআউট সংজ্ঞায়িত করার জন্য, region.xml নামে একটি নতুন লেআউট রিসোর্স ফাইল তৈরি করুন।
4. r egion.xml- এ, নিচের মতো একটি Chip লেআউট দিয়ে সমস্ত কোড প্রতিস্থাপন করুন। লক্ষ্য করুন যে এই Chip একটি উপাদান উপাদান। এছাড়াও লক্ষ্য করুন যে আপনি সম্পত্তি app:checkedIconVisible সেট করে চেক মার্ক পেয়েছেন। আপনি অনুপস্থিত selected_highlight রঙের জন্য একটি ত্রুটি পাবেন।

<?xml version="1.0" encoding="utf-8"?>

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. অনুপস্থিত selected_highlight রঙ তৈরি করতে, selected_highlight কার্সার রাখুন, উদ্দেশ্য মেনু আনুন এবং নির্বাচিত হাইলাইটের জন্য রঙের সংস্থান তৈরি করুন । ডিফল্ট বিকল্পগুলি ঠিক আছে, তাই ঠিক আছে ক্লিক করুন । ফাইলটি res/color ফোল্ডারে তৈরি করা হয়েছে।
6. res/color/selected_highlight.xml খুলুন। এই রঙের রাজ্যের তালিকায়, <selector> হিসাবে এনকোড করা, আপনি বিভিন্ন রাজ্যের জন্য বিভিন্ন রং প্রদান করতে পারেন। প্রতিটি রাজ্য এবং সংশ্লিষ্ট রঙ একটি <item> হিসাবে এনকোড করা হয়। এই রং সম্পর্কে আরো জন্য রঙ থিমিং দেখুন.

7. <selector> এর ভিতরে, রাজ্য তালিকায় একটি ডিফল্ট রঙ colorOnSurface সহ একটি আইটেম যোগ করুন। রাষ্ট্রীয় তালিকায়, সর্বদা সমস্ত রাজ্যকে কভার করা গুরুত্বপূর্ণ। এটি করার একটি উপায় হল একটি ডিফল্ট রঙ থাকা।

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. ডিফল্ট রঙের উপরে, colorPrimaryVariant এর একটি রঙের সাথে একটি item যোগ করুন এবং নির্বাচিত অবস্থা true হলে এর ব্যবহার সীমাবদ্ধ করুন। রাজ্যের তালিকাগুলি একটি কেস স্টেটমেন্টের মতো উপরে থেকে নীচে পর্যন্ত কাজ করা হয়। যদি রাজ্যগুলির কোনওটি মেলে না, তবে ডিফল্ট রাজ্য প্রযোজ্য হবে৷

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

ধাপ 2: চিপগুলির সারিটি প্রদর্শন করুন

GDG অ্যাপ জিডিজি আছে এমন অঞ্চলগুলি দেখানো চিপগুলির একটি তালিকা তৈরি করে৷ যখন একটি চিপ নির্বাচন করা হয়, অ্যাপটি শুধুমাত্র সেই অঞ্চলের জন্য GDG ফলাফল প্রদর্শন করতে ফলাফলগুলিকে ফিল্টার করে৷

দ্রষ্টব্য: এই তালিকাটি কীভাবে তৈরি করা হয় এবং ফলাফলগুলি কীভাবে ফিল্টার করা হয়, এই কোডল্যাবের অংশ নয়৷ আপনি যদি জানতে চান কিভাবে GDG-এর তালিকা পাওয়া যায় এবং কীভাবে ফিল্টারিং প্রয়োগ করা হয়, অনুসন্ধান এবং নেটওয়ার্ক প্যাকেজে ফাইলগুলি পরীক্ষা করুন। বিশেষ করে, GdgListViewModel পরীক্ষা করুন।

1. অনুসন্ধান প্যাকেজে, GdgListFragment.kt খুলুন।
2. onCreateView() -এ, return স্টেটমেন্টের ঠিক উপরে, viewModel.regionList এ একজন পর্যবেক্ষক যোগ করুন এবং onChanged() ওভাররাইড করুন। ভিউ মডেল দ্বারা প্রদত্ত অঞ্চলের তালিকা পরিবর্তিত হলে, চিপগুলি পুনরায় তৈরি করা প্রয়োজন। সরবরাহকৃত data null হলে অবিলম্বে ফিরে আসার জন্য একটি বিবৃতি যোগ করুন।

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. onChanged() এর ভিতরে, নাল টেস্টের নীচে, chipGroup ক্যাশে করার জন্য binding.regionList নামক একটি নতুন ভেরিয়েবলে regionList করুন।

val chipGroup = binding.regionList

4. নীচে, chipGroup.context থেকে চিপগুলি স্ফীত করার জন্য একটি নতুন layoutInflator তৈরি করুন।

val inflator = LayoutInflater.from(chipGroup.context)

5. ডেটাবাইন্ডিং ত্রুটি থেকে পরিত্রাণ পেতে আপনার প্রকল্পটি পরিষ্কার এবং পুনর্নির্মাণ করুন।

regionList নীচে, আপনি এখন অঞ্চল তালিকার প্রতিটি অঞ্চলের জন্য একটি প্রকৃত চিপ তৈরি করতে পারেন।

6. একটি পরিবর্তনশীল তৈরি করুন, children , সমস্ত চিপগুলি ধরে রাখার জন্য। প্রতিটি চিপ তৈরি করতে এবং ফেরত দিতে পাস করা data এটিকে একটি ম্যাপিং ফাংশন বরাদ্দ করুন।

val children = data.map {} 

7. ল্যাম্বডা মানচিত্রের ভিতরে, প্রতিটি regionName জন্য, একটি চিপ তৈরি করুন এবং স্ফীত করুন। সম্পূর্ণ কোড নীচে আছে.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. ল্যাম্বডার ভিতরে, chip ফেরত দেওয়ার ঠিক আগে, একটি ক্লিক শ্রোতা যোগ করুন। যখন chip ক্লিক করা হয়, তখন এটির স্থিতি checked করে সেট করুন। ভিউমডেল-এ viewModel onFilterChanged() কল করুন, যা এই ফিল্টারের ফলাফল নিয়ে আসা ইভেন্টগুলির একটি ক্রম ট্রিগার করে।

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. লাম্বার শেষে, চিপগ্রুপ থেকে সমস্ত বর্তমান ভিউ মুছে ফেলুন, তারপর chipGroup children থেকে সমস্ত চিপ যোগ chipGroup । (আপনি চিপগুলি আপডেট করতে পারবেন না, তাই আপনাকে chipGroup বিষয়বস্তুগুলি সরিয়ে ফেলতে হবে এবং পুনরায় তৈরি করতে হবে।)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

আপনার সম্পূর্ণ পর্যবেক্ষক নিম্নরূপ হওয়া উচিত:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. আপনার অ্যাপটি চালান এবং আপনার নতুন চিপগুলি ব্যবহার করতে অনুসন্ধান স্ক্রীন খুলতে GDGS অনুসন্ধান করুন৷ আপনি প্রতিটি চিপে ক্লিক করার সাথে সাথে অ্যাপটি তার নীচের ফিল্টার গ্রুপগুলি প্রদর্শন করবে।

গুরুত্বপূর্ণ। যদি মানচিত্র শুরু করা আপনাকে তালিকা পেতে সাহায্য না করে, এমুলেটরে এই কাজটি করতে, যে কোনো চলমান এমুলেটর বন্ধ করুন। অ্যাপটি চালান, একটি নতুন এমুলেটর শুরু করুন এবং সেই এমুলেটরে ম্যাপ অ্যাপটি শুরু করুন, তারপর অ্যাপটি চালান।

নাইট মোড আপনার অ্যাপটিকে একটি গাঢ় থিমে রং পরিবর্তন করতে দেয়, উদাহরণস্বরূপ, যখন ডিভাইস সেটিংস নাইট মোড সক্ষম করতে সেট করা থাকে। নাইট মোডে, অ্যাপ্লিকেশানগুলি তাদের ডিফল্ট আলোর ব্যাকগ্রাউন্ডগুলিকে অন্ধকারে পরিবর্তন করে এবং সেই অনুযায়ী অন্যান্য সমস্ত স্ক্রীন উপাদানগুলিকে পরিবর্তন করে৷

ধাপ 1: রাতের মোড সক্ষম করুন

আপনার অ্যাপের জন্য গাঢ় থিম প্রদান করতে, আপনি এটির থিম Light থিম থেকে পরিবর্তন করে DayNight নামক একটি থিমে রাখুন। মোডের উপর নির্ভর করে DayNight থিম হালকা বা অন্ধকার দেখায়।

1. styles.xml, AppTheme প্যারেন্ট থিমকে Light থেকে DayNight নাইট এ পরিবর্তন করুন।

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. MainActivity onCreate( onCreate() পদ্ধতিতে, অন্ধকার থিমটি প্রোগ্রামে চালু করতে AppCompatDelegate.setDefaultNightMode() এ কল করুন।

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. অ্যাপটি চালান এবং যাচাই করুন যে এটি অন্ধকার থিমে স্যুইচ করেছে।

ধাপ 2: আপনার নিজের গাঢ় থিম রঙ প্যালেট তৈরি করুন

ডার্ক থিম কাস্টমাইজ করতে, ডার্ক থিম ব্যবহারের জন্য -night কোয়ালিফায়ার দিয়ে ফোল্ডার তৈরি করুন। উদাহরণস্বরূপ, values-night নামে একটি ফোল্ডার তৈরি করে আপনি নাইট মোডে নির্দিষ্ট রঙ থাকতে পারেন।

1. material.io কালার পিকার টুলে যান এবং নাইট-থিম কালার প্যালেট তৈরি করুন। উদাহরণস্বরূপ, আপনি এটি একটি গাঢ় নীল রঙের উপর ভিত্তি করে করতে পারেন।
2. colors.xml ফাইল তৈরি করে ডাউনলোড করুন।
3. আপনার প্রকল্পের সমস্ত ফোল্ডার তালিকাভুক্ত করতে প্রকল্প ফাইল দৃশ্যে স্যুইচ করুন।
4. রেস ফোল্ডারটি খুঁজুন এবং এটি প্রসারিত করুন।
5. একটি res/values-নাইট রিসোর্স ফোল্ডার তৈরি করুন।
6. res/values-night রিসোর্স ফোল্ডারে নতুন colors.xml ফাইল যোগ করুন।
7. আপনার অ্যাপটি চালান, এখনও নাইট মোড সক্ষম করে, এবং অ্যাপটি আপনার res/values-night- এর জন্য সংজ্ঞায়িত নতুন রং ব্যবহার করা উচিত। লক্ষ্য করুন যে চিপগুলি নতুন গৌণ রঙ ব্যবহার করে।

অ্যান্ড্রয়েড স্টুডিও প্রকল্প: জিডিজিফাইন্ডার ফাইনাল ।

RTL ভাষা সমর্থন করুন

• Android ম্যানিফেস্টে, android:supportsRtl="true" সেট করুন।
• আপনি এমুলেটরে RTL এর পূর্বরূপ দেখতে পারেন, এবং আপনি স্ক্রীন লেআউট চেক করতে আপনার নিজের ভাষা ব্যবহার করতে পারেন। একটি ডিভাইস বা এমুলেটরে, সেটিংস খুলুন এবং বিকাশকারী বিকল্পগুলিতে , ফোর্স RTL লেআউট নির্বাচন করুন।
• Start এবং End রেফারেন্স দিয়ে Left এবং Right রেফারেন্স প্রতিস্থাপন করুন।
• android:autoMirrored="true" মুছে দিয়ে অঙ্কনযোগ্যগুলির জন্য মিররিং অক্ষম করুন৷
• রিফ্যাক্টর চয়ন করুন > Android স্টুডিওকে আপনার জন্য কাজ করতে দিতে যেখানে সম্ভব সেখানে RTL সমর্থন যোগ করুন ।
• ভাষা-নির্দিষ্ট সম্পদ সংরক্ষণ করতে মান-"ভাষা কোড" ফোল্ডারগুলি ব্যবহার করুন।

অ্যাক্সেসযোগ্যতার জন্য স্ক্যান করুন

• প্লে স্টোরে, Google LLC-এর অ্যাক্সেসিবিলিটি স্ক্যানার পান এবং স্ক্রিন উপাদানগুলিকে উন্নত করার জন্য স্ক্যান করতে এটি চালান।

বিষয়বস্তুর বিবরণ সহ টকব্যাকের জন্য ডিজাইন করুন

• Google দ্বারা Android অ্যাক্সেসিবিলিটি স্যুট ইনস্টল করুন, যার মধ্যে TalkBack অন্তর্ভুক্ত রয়েছে৷
• সমস্ত UI উপাদানে বিষয়বস্তুর বিবরণ যোগ করুন। উদাহরণ স্বরূপ:
  android:contentDescription="@string/stage_image_description"
• একটি সম্পাদনাযোগ্য উপাদানের জন্য যেমন একটি EditText , ব্যবহারকারীকে কী টাইপ করতে হবে সে সম্পর্কে একটি ইঙ্গিত প্রদান করতে XML-এ একটি android:hint বৈশিষ্ট্য ব্যবহার করুন৷
• একটি ভিউ গ্রুপে সম্পর্কিত উপাদানগুলি মোড়ানোর মাধ্যমে সামগ্রী গোষ্ঠী তৈরি করুন৷
• android:accessibilityLiveRegion এর সাথে ব্যবহারকারীদের অতিরিক্ত প্রতিক্রিয়া জানাতে একটি লাইভ অঞ্চল তৈরি করুন।

Use Chips to implement a filter

• Chips are compact elements that represent an attribute, text, entity, or action.
• To create a group of chips, use a com.google.android.material.chip.ChipGroup .
• Define the layout for one com.google.android.material.chip.Chip .
• If you want your chips to change colors, provide a color state list as a <selector> with stateful colors:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• Bind the chips to live data by adding an observer to the data in the view model.
• To display the chips, create an inflator for the chip group:
  LayoutInflater.from(chipGroup.context)
• Create the chips, add a click listener that triggers the desired action, and add the chips to the chip group.

Support dark mode

• Use the DayNight AppTheme to support dark mode.
• You can set dark mode programmatically:
  AppCompatDelegate.setDefaultNightMode()
• Create a res/values-night resource folder to provide custom colors and values for dark mode.

Android developer documentation:

• LayoutDirection (RTL)
• Bidirectionality
• Get started with Accessibility Scanner
• TalkBack
• TalkBack gestures
• Drawables overview docs
• Content descriptors
• Content grouping
• Live regions
• NinePatch drawables
• Draw 9-patch tool
• Chips
• ChipGroup
• Dark theme
• Color theming
• Color tool
• Animate drawable graphics

Other resources:

• Developing Android Apps with Kotlin (Udacity course)
• Kotlin Bootcamp for Programmers (Udacity course)
• Kotlin Bootcamp for Programmers codelabs

এই বিভাগে একজন প্রশিক্ষকের নেতৃত্বে একটি কোর্সের অংশ হিসাবে এই কোডল্যাবের মাধ্যমে কাজ করা শিক্ষার্থীদের জন্য সম্ভাব্য হোমওয়ার্ক অ্যাসাইনমেন্ট তালিকাভুক্ত করা হয়েছে। নিম্নলিখিতগুলি করা প্রশিক্ষকের উপর নির্ভর করে:

• প্রয়োজনে হোমওয়ার্ক বরাদ্দ করুন।
• শিক্ষার্থীদের সাথে যোগাযোগ করুন কিভাবে হোমওয়ার্ক অ্যাসাইনমেন্ট জমা দিতে হয়।
• হোমওয়ার্ক অ্যাসাইনমেন্ট গ্রেড.

প্রশিক্ষকরা এই পরামর্শগুলি যতটা কম বা যতটা চান ততটা ব্যবহার করতে পারেন, এবং তাদের উপযুক্ত মনে করে অন্য কোনও হোমওয়ার্ক বরাদ্দ করতে নির্দ্বিধায় করা উচিত।

আপনি যদি এই কোডল্যাবের মাধ্যমে নিজে থেকে কাজ করে থাকেন, তাহলে আপনার জ্ঞান পরীক্ষা করার জন্য এই হোমওয়ার্ক অ্যাসাইনমেন্টগুলি ব্যবহার করুন।

প্রশ্ন 1

Which of the following is mandatory for supporting RTL languages?

▢ Replace Left and Right in properties with Start and End

▢ Switch to an RTL language

▢ Make sure all icons use android:autoMirrored="true"

▢ Provide content descriptions

প্রশ্ন 2

Which of the following accessibility tools comes built in with most Android devices?

▢ TalkBack

▢ Accessibility Scanner

▢ In Android Studio, Refactor > Add RTL support where possible

▢ Lint

প্রশ্ন 3

Which of the following is not true about chips?

▢ You display chips as part of a ChipGroup .

▢ You can provide a color state list for a ChipGroup .

▢ Chips are compact elements that represent an input, attribute, or action.

▢ You must always enable DarkTheme if your app uses chips.

Question 4

Which theme gives you styling for dark and light modes?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Question 5

What is a live region?

▢ A node that contains information that is important for the user

▢ A region of the screen that changes shape according to Material guidelines

▢ A view that allows streaming video

▢ An animated drawable