অ্যান্ড্রয়েড কোটলিন ফান্ডামেন্টালস 08.2: ইন্টারনেট থেকে ছবি লোড করা এবং প্রদর্শন করা

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

এই কোডল্যাবগুলি Android Kotlin Fundamentals কোর্সের অংশ৷ আপনি যদি ক্রমানুসারে কোডল্যাবগুলির মাধ্যমে কাজ করেন তবে আপনি এই কোর্সের সর্বাধিক মূল্য পাবেন৷

এই সিরিজের কোডল্যাবগুলি হল:

• 8.1 ইন্টারনেট থেকে ডেটা পাওয়া
• 8.2 ইন্টারনেট থেকে ছবি লোড করা এবং প্রদর্শন করা
• 8.3 ইন্টারনেট ডেটা সহ ফিল্টারিং এবং বিস্তারিত ভিউ

ভূমিকা

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

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

• কীভাবে টুকরো তৈরি এবং ব্যবহার করবেন।
• ভিউ মডেল, ভিউ মডেল ফ্যাক্টরি, ট্রান্সফর্মেশন এবং LiveData সহ আর্কিটেকচারের উপাদানগুলি কীভাবে ব্যবহার করবেন।
• কীভাবে একটি REST ওয়েব পরিষেবা থেকে JSON পুনরুদ্ধার করবেন এবং Retrofit এবং Moshi লাইব্রেরি ব্যবহার করে Kotlin অবজেক্টে সেই ডেটা পার্স করবেন।
• কিভাবে একটি RecyclerView দিয়ে একটি গ্রিড লেআউট তৈরি করবেন।
• Adapter , ViewHolder এবং DiffUtil কীভাবে কাজ করে।

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

• একটি ওয়েব URL থেকে একটি চিত্র লোড এবং প্রদর্শন করতে গ্লাইড লাইব্রেরি কীভাবে ব্যবহার করবেন।
• কিভাবে একটি RecyclerView এবং একটি গ্রিড অ্যাডাপ্টার ব্যবহার করে ছবির একটি গ্রিড প্রদর্শন করতে হয়।
• ছবিগুলি ডাউনলোড এবং প্রদর্শনের সময় সম্ভাব্য ত্রুটিগুলি কীভাবে পরিচালনা করবেন৷

আপনি কি করবেন

• Mars সম্পত্তি ডেটা থেকে ছবির URL পেতে MarsRealEstate অ্যাপটি পরিবর্তন করুন এবং সেই ছবি লোড ও প্রদর্শন করতে গ্লাইড ব্যবহার করুন।
• অ্যাপটিতে একটি লোডিং অ্যানিমেশন এবং ত্রুটি আইকন যোগ করুন।
• মঙ্গল গ্রহের সম্পত্তি চিত্রগুলির একটি গ্রিড প্রদর্শন করতে একটি RecyclerView ব্যবহার করুন৷
• RecyclerView এ স্থিতি এবং ত্রুটি হ্যান্ডলিং যোগ করুন।

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

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

একটি ওয়েব URL থেকে একটি ফটো প্রদর্শন করা সোজা মনে হতে পারে, তবে এটিকে ভালভাবে কাজ করার জন্য বেশ কিছু প্রকৌশল রয়েছে৷ ছবিটি ডাউনলোড করতে হবে, বাফার করতে হবে এবং এর সংকুচিত বিন্যাস থেকে একটি ছবিতে ডিকোড করতে হবে যা অ্যান্ড্রয়েড ব্যবহার করতে পারে। ইমেজ একটি ইন-মেমরি ক্যাশে, একটি স্টোরেজ-ভিত্তিক ক্যাশে, বা উভয় ক্যাশে করা উচিত। এই সব কম-অগ্রাধিকার পটভূমি থ্রেডে ঘটতে হবে যাতে UI প্রতিক্রিয়াশীল থাকে। এছাড়াও, সেরা নেটওয়ার্ক এবং CPU পারফরম্যান্সের জন্য, আপনি একবারে একাধিক ছবি আনতে এবং ডিকোড করতে চাইতে পারেন। নেটওয়ার্ক থেকে কীভাবে কার্যকরভাবে ছবি লোড করতে হয় তা শেখা নিজেই একটি কোডল্যাব হতে পারে।

সৌভাগ্যবশত, আপনি আপনার ছবিগুলি ডাউনলোড, বাফার, ডিকোড এবং ক্যাশে করতে গ্লাইড নামে একটি সম্প্রদায়-উন্নত লাইব্রেরি ব্যবহার করতে পারেন৷ গ্লাইড আপনাকে স্ক্র্যাচ থেকে এই সমস্ত কিছু করার চেয়ে অনেক কম কাজ দেয়।

গ্লাইড মূলত দুটি জিনিস প্রয়োজন:

• আপনি যে ছবিটি লোড করতে এবং দেখাতে চান তার URL।
• একটি ImageView অবজেক্ট সেই ছবিটি প্রদর্শন করতে।

এই কাজটিতে, আপনি রিয়েল এস্টেট ওয়েব পরিষেবা থেকে একটি একক চিত্র প্রদর্শন করতে গ্লাইড ব্যবহার করতে শিখবেন। আপনি সেই চিত্রটি প্রদর্শন করেন যা ওয়েব পরিষেবাটি ফেরত দেওয়া বৈশিষ্ট্যগুলির তালিকায় প্রথম মঙ্গল গ্রহের সম্পত্তির প্রতিনিধিত্ব করে। এখানে আগে এবং পরে স্ক্রিনশট আছে:

ধাপ 1: গ্লাইড নির্ভরতা যোগ করুন

1. শেষ কোডল্যাব থেকে MarsRealEstate অ্যাপটি খুলুন। (আপনি যদি অ্যাপটি না থাকে তবে আপনি এখানে MarsRealEstateNetwork ডাউনলোড করতে পারেন।)
2. এটি কী করে তা দেখতে অ্যাপটি চালান। (এটি একটি সম্পত্তির পাঠ্য বিবরণ প্রদর্শন করে যা অনুমানিকভাবে মঙ্গলে উপলব্ধ।)
3. build.gradle খুলুন (মডিউল: অ্যাপ) ।
4. dependencies বিভাগে, গ্লাইড লাইব্রেরির জন্য এই লাইনটি যোগ করুন:

implementation "com.github.bumptech.glide:glide:$version_glide"

লক্ষ্য করুন যে সংস্করণ নম্বরটি ইতিমধ্যে প্রকল্প গ্রেডল ফাইলে আলাদাভাবে সংজ্ঞায়িত করা হয়েছে।

5. নতুন নির্ভরতার সাথে প্রকল্পটি পুনর্নির্মাণ করতে এখন সিঙ্ক এ ক্লিক করুন।

ধাপ 2: ভিউ মডেল আপডেট করুন

এরপর আপনি একটি একক মঙ্গল গ্রহের সম্পত্তির জন্য লাইভ ডেটা অন্তর্ভুক্ত করতে OverviewViewModel ক্লাস আপডেট করেন।

1. overview/OverviewViewModel.kt খুলুন। _response এর জন্য LiveData ঠিক নীচে, একটি MarsProperty অবজেক্টের জন্য অভ্যন্তরীণ (পরিবর্তনযোগ্য) এবং বহিরাগত (অপরিবর্তনীয়) উভয় লাইভ ডেটা যোগ করুন।
   
   অনুরোধ করা হলে MarsProperty ক্লাস ( com.example.android.marsrealestate.network.MarsProperty ) আমদানি করুন৷

private val _property = MutableLiveData<MarsProperty>()

val property: LiveData<MarsProperty>
   get() = _property

2. getMarsRealEstateProperties() পদ্ধতিতে, try/catch {} ব্লকের ভিতরের লাইনটি খুঁজুন যেটি বৈশিষ্ট্যের সংখ্যায় _response.value সেট করে। নীচে দেখানো পরীক্ষা যোগ করুন. MarsProperty অবজেক্ট উপলব্ধ থাকলে, এই পরীক্ষাটি _property LiveData এর মান listResult প্রথম সম্পত্তিতে সেট করে।

if (listResult.size > 0) {   
    _property.value = listResult[0]
}

সম্পূর্ণ try/catch {} ব্লক এখন এইরকম দেখাচ্ছে:

try {
   var listResult = getPropertiesDeferred.await()
   _response.value = "Success: ${listResult.size} Mars properties retrieved"
   if (listResult.size > 0) {      
       _property.value = listResult[0]
   }
 } catch (e: Exception) {
    _response.value = "Failure: ${e.message}"
 }

3. res/layout/fragment_overview.xml ফাইলটি খুলুন। <TextView> উপাদানে, android:text পরিবর্তন করুন LiveData property imgSrcUrl উপাদানের সাথে আবদ্ধ করতে:

android:text="@{viewModel.property.imgSrcUrl}"

4. অ্যাপটি চালান। TextView প্রথম মঙ্গল প্রপার্টিতে শুধুমাত্র ছবির URL প্রদর্শন করে। আপনি এখন পর্যন্ত যা করেছেন তা হল ভিউ মডেল এবং সেই URL এর জন্য লাইভ ডেটা সেট আপ করা।

ধাপ 3: একটি বাঁধাই অ্যাডাপ্টার তৈরি করুন এবং গ্লাইড কল করুন

এখন আপনার কাছে প্রদর্শনের জন্য একটি চিত্রের URL আছে এবং সেই চিত্রটি লোড করার জন্য গ্লাইডের সাথে কাজ শুরু করার সময় এসেছে৷ এই ধাপে, আপনি একটি ImageView এর সাথে যুক্ত একটি XML অ্যাট্রিবিউট থেকে URL নিতে একটি বাঁধাই অ্যাডাপ্টার ব্যবহার করেন এবং আপনি চিত্রটি লোড করতে গ্লাইড ব্যবহার করেন৷ বাইন্ডিং অ্যাডাপ্টারগুলি হল এক্সটেনশন পদ্ধতি যা ডেটা পরিবর্তিত হলে কাস্টম আচরণ প্রদান করতে একটি ভিউ এবং আবদ্ধ ডেটার মধ্যে বসে। এই ক্ষেত্রে, কাস্টম আচরণ হল একটি ইউআরএল থেকে একটি ইমেজ ImageView লোড করার জন্য গ্লাইডকে কল করা।

1. BindingAdapters.kt খুলুন। এই ফাইলটি বাইন্ডিং অ্যাডাপ্টারগুলি ধরে রাখবে যা আপনি পুরো অ্যাপ জুড়ে ব্যবহার করেন।
2. একটি bindImage() ফাংশন তৈরি করুন যা একটি ImageView এবং একটি String পরামিতি হিসাবে নেয়। @BindingAdapter দিয়ে ফাংশনটি টীকা করুন। @BindingAdapter টীকাটি ডেটা বাইন্ডিংকে বলে যে আপনি এই বাঁধাই অ্যাডাপ্টারটি কার্যকর করতে চান যখন একটি XML আইটেমের imageUrl বৈশিষ্ট্য থাকে৷
   
   অনুরোধ করা হলে androidx.databinding.BindingAdapter এবং android.widget.ImageView আমদানি করুন।

@BindingAdapter("imageUrl")
fun bindImage(imgView: ImageView, imgUrl: String?) {

}

3. bindImage() ফাংশনের ভিতরে, imgUrl আর্গুমেন্টের জন্য একটি let {} ব্লক যোগ করুন:

imgUrl?.let { 
}

4. let {} ব্লকের ভিতরে, ইউআরএল স্ট্রিং (এক্সএমএল থেকে) একটি Uri অবজেক্টে রূপান্তর করতে নীচে দেখানো লাইন যোগ করুন। অনুরোধ করা হলে androidx.core.net.toUri আমদানি করুন।
   
   আপনি চূড়ান্ত Uri অবজেক্টটি HTTPS স্কিম ব্যবহার করতে চান, কারণ আপনি যে সার্ভার থেকে ছবিগুলি টানছেন তার জন্য সেই স্কিমটি প্রয়োজন৷ HTTPS স্কিম ব্যবহার করতে, toUri বিল্ডারের সাথে buildUpon.scheme("https") যোগ করুন। toUri() পদ্ধতিটি অ্যান্ড্রয়েড কেটিএক্স কোর লাইব্রেরি থেকে একটি কোটলিন এক্সটেনশন ফাংশন, তাই মনে হচ্ছে এটি String ক্লাসের অংশ।

val imgUri = imgUrl.toUri().buildUpon().scheme("https").build()

5. এখনও ভিতরে let {} , Uri অবজেক্ট থেকে ইমেজ ImageView লোড করতে Glide.with() কল করুন। অনুরোধ করা হলে com.bumptech.glide.Glide আমদানি করুন।
   

Glide.with(imgView.context)
       .load(imgUri)
       .into(imgView)

ধাপ 4: লেআউট এবং টুকরা আপডেট করুন

যদিও গ্লাইড ছবিটি লোড করেছে, এখনও দেখার কিছু নেই। পরবর্তী ধাপ হল ইমেজ প্রদর্শনের জন্য একটি ImageView সহ লেআউট এবং টুকরো আপডেট করা।

1. res/layout/gridview_item.xml খুলুন। এটি সেই লেআউট রিসোর্স ফাইল যা আপনি কোডল্যাবে পরে RecyclerView এ প্রতিটি আইটেমের জন্য ব্যবহার করবেন। আপনি শুধুমাত্র একক চিত্র দেখানোর জন্য এখানে অস্থায়ীভাবে এটি ব্যবহার করেন।
2. <ImageView> উপাদানের উপরে, ডেটা বাইন্ডিংয়ের জন্য একটি <data> উপাদান যোগ করুন এবং OverviewViewModel ক্লাসে আবদ্ধ করুন:

<data>
   <variable
       name="viewModel"
       type="com.example.android.marsrealestate.overview.OverviewViewModel" />
</data>

3. নতুন ইমেজ লোডিং বাইন্ডিং অ্যাডাপ্টার ব্যবহার করতে ImageView উপাদানটিতে একটি app:imageUrl অ্যাট্রিবিউট যোগ করুন:

app:imageUrl="@{viewModel.property.imgSrcUrl}"

4. overview/OverviewFragment.kt খুলুন। onCreateView() পদ্ধতিতে, FragmentOverviewBinding ক্লাসকে স্ফীত করে এবং বাইন্ডিং ভেরিয়েবলে বরাদ্দ করে এমন লাইনটি মন্তব্য করুন। এটা শুধুমাত্র সাময়িক; আপনি পরে এটিতে ফিরে যাবেন।

//val binding = FragmentOverviewBinding.inflate(inflater)

5. পরিবর্তে GridViewItemBinding ক্লাস স্ফীত করার জন্য একটি লাইন যোগ করুন। com.example.android.marsrealestate. databinding.GridViewItemBinding যখন অনুরোধ করা হয়।

দ্রষ্টব্য: এই পরিবর্তনের ফলে Android স্টুডিওতে ডেটা-বাইন্ডিং ত্রুটি হতে পারে। এই ত্রুটিগুলি সমাধান করতে, আপনাকে অ্যাপটি পরিষ্কার এবং পুনর্নির্মাণ করতে হতে পারে।

val binding = GridViewItemBinding.inflate(inflater)

6. অ্যাপটি চালান। এখন আপনি ফলাফল তালিকায় প্রথম MarsProperty থেকে ছবির ফটো দেখতে হবে।
   

ধাপ 5: সাধারণ লোডিং এবং ত্রুটি চিত্র যোগ করুন

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

1. res/drawable/ic_broken_image.xml খুলুন এবং ডানদিকে প্রিভিউ ট্যাবে ক্লিক করুন। ত্রুটি চিত্রের জন্য, আপনি বিল্ট-ইন আইকন লাইব্রেরিতে উপলব্ধ ভাঙা-চিত্র আইকন ব্যবহার করছেন। এই ভেক্টর অঙ্কনযোগ্য আইকন ধূসর রঙ করতে android:tint বৈশিষ্ট্য ব্যবহার করে।

2. res/drawable/loading_animation.xml খুলুন। এই অঙ্কনযোগ্য একটি অ্যানিমেশন যা <animate-rotate> ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়েছে। অ্যানিমেশনটি কেন্দ্র বিন্দুর চারপাশে আঁকানো যায় এমন একটি চিত্র, loading_img.xml ঘোরায়। (আপনি প্রিভিউতে অ্যানিমেশন দেখতে পাচ্ছেন না।)

3. BindingAdapters.kt ফাইলে ফিরে যান। bindImage() পদ্ধতিতে, load() এবং into() মধ্যে apply() ফাংশন কল করতে Glide.with() এ কল আপডেট করুন। অনুরোধ করা হলে com.bumptech.glide.request.RequestOptions আমদানি করুন।
   
   এই কোডটি লোড করার সময় ব্যবহার করার জন্য স্থানধারক লোডিং ইমেজ সেট করে ( loading_animation অঙ্কনযোগ্য)। ইমেজ লোডিং ব্যর্থ হলে কোডটি ব্যবহার করার জন্য একটি ইমেজও সেট করে ( broken_image অঙ্কনযোগ্য)। সম্পূর্ণ bindImage() পদ্ধতি এখন এই মত দেখায়:

@BindingAdapter("imageUrl")
fun bindImage(imgView: ImageView, imgUrl: String?) {
    imgUrl?.let {
        val imgUri = 
           imgUrl.toUri().buildUpon().scheme("https").build()
        Glide.with(imgView.context)
                .load(imgUri)
                .apply(RequestOptions()
                        .placeholder(R.drawable.loading_animation)
                        .error(R.drawable.ic_broken_image))
                .into(imgView)
    }
}

4. অ্যাপটি চালান। আপনার নেটওয়ার্ক সংযোগের গতির উপর নির্ভর করে, আপনি সংক্ষিপ্তভাবে লোডিং চিত্রটি দেখতে পাবেন যখন গ্লাইড ডাউনলোড করে এবং সম্পত্তি চিত্রটি প্রদর্শন করে। কিন্তু আপনি এখনও ভাঙা-ছবির আইকনটি দেখতে পাবেন না, এমনকি যদি আপনি আপনার নেটওয়ার্ক বন্ধ করে দেন—আপনি কোডল্যাবের শেষ অংশে এটি ঠিক করেন।

আপনার অ্যাপ এখন ইন্টারনেট থেকে সম্পত্তির তথ্য লোড করে। প্রথম MarsProperty তালিকা আইটেম থেকে ডেটা ব্যবহার করে, আপনি ভিউ মডেলে একটি LiveData সম্পত্তি তৈরি করেছেন এবং আপনি একটি ImageView তৈরি করতে সেই সম্পত্তি ডেটা থেকে চিত্র URL ব্যবহার করেছেন। কিন্তু লক্ষ্য হল আপনার অ্যাপের ইমেজের একটি গ্রিড প্রদর্শন করা, তাই আপনি একটি GridLayoutManager সাথে একটি RecyclerView ব্যবহার করতে চান।

ধাপ 1: ভিউ মডেল আপডেট করুন

এই মুহূর্তে ভিউ মডেলটিতে একটি _property LiveData রয়েছে যা একটি MarsProperty অবজেক্ট ধারণ করে - ওয়েব পরিষেবা থেকে প্রতিক্রিয়া তালিকায় প্রথমটি। এই ধাপে, আপনি MarsProperty অবজেক্টের সম্পূর্ণ তালিকা ধরে রাখতে সেই LiveData পরিবর্তন করেন।

1. overview/OverviewViewModel.kt খুলুন।
2. ব্যক্তিগত _property ভেরিয়েবলকে _properties এ পরিবর্তন করুন। MarsProperty অবজেক্টের একটি তালিকা হতে টাইপ পরিবর্তন করুন।

private val _properties = MutableLiveData<List<MarsProperty>>()

3. বহিরাগত property লাইভ ডেটা properties সাথে প্রতিস্থাপন করুন। এখানেও LiveData প্রকারের তালিকা যোগ করুন:

 val properties: LiveData<List<MarsProperty>>
        get() = _properties

4. getMarsRealEstateProperties() পদ্ধতিতে নিচে স্ক্রোল করুন। try {} ব্লকের ভিতরে, আপনি আগের টাস্কে যে পুরো পরীক্ষাটি যোগ করেছেন তা নীচে দেখানো লাইন দিয়ে প্রতিস্থাপন করুন। যেহেতু listResult ভেরিয়েবলে MarsProperty অবজেক্টের একটি তালিকা রয়েছে, আপনি সফল প্রতিক্রিয়ার জন্য পরীক্ষা করার পরিবর্তে এটিকে _properties.value এ বরাদ্দ করতে পারেন।

_properties.value = listResult

সম্পূর্ণ try/catch ব্লক এখন এই মত দেখায়:

try {
   var listResult = getPropertiesDeferred.await()
   _response.value = "Success: ${listResult.size} Mars properties retrieved"
   _properties.value = listResult
} catch (e: Exception) {
   _response.value = "Failure: ${e.message}"
}

ধাপ 2: লেআউট এবং টুকরা আপডেট করুন

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

1. res/layout/gridview_item.xml খুলুন। OverviewViewModel থেকে MarsProperty এ ডেটা বাইন্ডিং পরিবর্তন করুন এবং ভেরিয়েবলের নাম পরিবর্তন করুন "property" ।

<variable
   name="property"
   type="com.example.android.marsrealestate.network.MarsProperty" />

2. <ImageView> -এ , MarsProperty অবজেক্টে ছবির URL উল্লেখ করতে app:imageUrl অ্যাট্রিবিউট পরিবর্তন করুন:

app:imageUrl="@{property.imgSrcUrl}"

3. overview/OverviewFragment.kt খুলুন। onCreateview() এ, FragmentOverviewBinding স্ফীত করে এমন লাইনটি আনকমেন্ট করুন। GridViewBinding স্ফীত করে এমন লাইনটি মুছুন বা মন্তব্য করুন। এই পরিবর্তনগুলি আপনার শেষ টাস্কে করা অস্থায়ী পরিবর্তনগুলিকে পূর্বাবস্থায় ফিরিয়ে আনে।

val binding = FragmentOverviewBinding.inflate(inflater)
 // val binding = GridViewItemBinding.inflate(inflater)

4. res/layout/fragment_overview.xml খুলুন। সম্পূর্ণ <TextView> উপাদান মুছুন।
5. পরিবর্তে এই <RecyclerView> উপাদানটি যোগ করুন, যা একটি একক আইটেমের জন্য একটি GridLayoutManager এবং grid_view_item লেআউট ব্যবহার করে:

<androidx.recyclerview.widget.RecyclerView
            android:id="@+id/photos_grid"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:padding="6dp"
            android:clipToPadding="false"
            app:layoutManager=
               "androidx.recyclerview.widget.GridLayoutManager"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:spanCount="2"
            tools:itemCount="16"
            tools:listitem="@layout/grid_view_item" />

ধাপ 3: ফটো গ্রিড অ্যাডাপ্টার যোগ করুন

এখন fragment_overview লেআউটে একটি RecyclerView আছে যখন grid_view_item লেআউটে একটি একক ImageView রয়েছে। এই ধাপে, আপনি একটি RecyclerView অ্যাডাপ্টারের মাধ্যমে RecyclerView এ ডেটা আবদ্ধ করুন।

দ্রষ্টব্য: RecyclerView কোডল্যাবগুলি পর্যালোচনা করার জন্য এটি একটি ভাল সময় হতে পারে!

1. overview/PhotoGridAdapter.kt খুলুন।
2. নিচে দেখানো কনস্ট্রাক্টর প্যারামিটার সহ PhotoGridAdapter ক্লাস তৈরি করুন। PhotoGridAdapter ক্লাস ListAdapter প্রসারিত করে, যার কন্সট্রাকটরের তালিকা আইটেমের ধরন, ভিউ হোল্ডার এবং একটি DiffUtil.ItemCallback বাস্তবায়ন প্রয়োজন।
   
   অনুরোধ করা হলে androidx.recyclerview.widget.ListAdapter এবং com.example.android.marsrealestate.network.MarsProperty ক্লাস ইমপোর্ট করুন। নিম্নলিখিত ধাপে, আপনি এই কন্সট্রাক্টরের অন্যান্য অনুপস্থিত অংশগুলি বাস্তবায়ন করেন যা ত্রুটি তৈরি করছে।

class PhotoGridAdapter : ListAdapter<MarsProperty,
        PhotoGridAdapter.MarsPropertyViewHolder>(DiffCallback) {

}

3. PhotoGridAdapter ক্লাসের যে কোনো জায়গায় ক্লিক করুন এবং ListAdapter পদ্ধতিগুলি বাস্তবায়ন করতে Control+i টিপুন, যা onCreateViewHolder() এবং onBindViewHolder() ।

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PhotoGridAdapter.MarsPropertyViewHolder {
   TODO("not implemented") 
}

override fun onBindViewHolder(holder: PhotoGridAdapter.MarsPropertyViewHolder, position: Int) {
   TODO("not implemented") 
}

4. PhotoGridAdapter শ্রেণীর সংজ্ঞার শেষে, আপনি যে পদ্ধতিগুলি যোগ করেছেন তার পরে, নীচে দেখানো হিসাবে DiffCallback জন্য একটি সহচর বস্তুর সংজ্ঞা যোগ করুন।
   
   অনুরোধ করা হলে androidx.recyclerview.widget.DiffUtil আমদানি করুন।
   
   DiffCallback অবজেক্টটি DiffUtil.ItemCallback প্রসারিত করে আপনি যে ধরনের অবজেক্টের সাথে তুলনা করতে চান— MarsProperty ।

companion object DiffCallback : DiffUtil.ItemCallback<MarsProperty>() {
}

5. এই বস্তুর তুলনামূলক পদ্ধতিগুলি বাস্তবায়ন করতে Control+i টিপুন, যেগুলি হল areItemsTheSame() এবং areContentsTheSame() ।

override fun areItemsTheSame(oldItem: MarsProperty, newItem: MarsProperty): Boolean {
   TODO("not implemented") 
}

override fun areContentsTheSame(oldItem: MarsProperty, newItem: MarsProperty): Boolean {
   TODO("not implemented") }

6. areItemsTheSame() পদ্ধতির জন্য, TODO সরান। কোটলিনের রেফারেন্সিয়াল ইকুইলিটি অপারেটর ( === ) ব্যবহার করুন, যা oldItem এবং newItem জন্য অবজেক্ট রেফারেন্স একই হলে true দেখায়।

override fun areItemsTheSame(oldItem: MarsProperty, 
                  newItem: MarsProperty): Boolean {
   return oldItem === newItem
}

7. areContentsTheSame() এর জন্য, শুধুমাত্র oldItem এবং newItem এর আইডিতে স্ট্যান্ডার্ড সমতা অপারেটর ব্যবহার করুন।

override fun areContentsTheSame(oldItem: MarsProperty, 
                  newItem: MarsProperty): Boolean {
   return oldItem.id == newItem.id
}

8. এখনও PhotoGridAdapter ক্লাসের ভিতরে, সঙ্গী বস্তুর নীচে, MarsPropertyViewHolder জন্য একটি অভ্যন্তরীণ শ্রেণীর সংজ্ঞা যোগ করুন, যা RecyclerView.ViewHolder প্রসারিত করে।
   
   অনুরোধ করা হলে androidx.recyclerview.widget.RecyclerView এবং com.example.android.marsrealestate.databinding.GridViewItemBinding আমদানি করুন।
   
   MarsProperty লেআউটে আবদ্ধ করার জন্য আপনার GridViewItemBinding ভেরিয়েবলের প্রয়োজন, তাই ভেরিয়েবলটিকে MarsPropertyViewHolder এ পাস করুন। কারণ বেস ViewHolder ক্লাসের কনস্ট্রাক্টরে একটি ভিউ প্রয়োজন, আপনি এটিকে বাইন্ডিং রুট ভিউ পাস করেন।

class MarsPropertyViewHolder(private var binding: 
                   GridViewItemBinding):
       RecyclerView.ViewHolder(binding.root) {

}

9. MarsPropertyViewHolder এ, একটি bind() পদ্ধতি তৈরি করুন যা একটি MarsProperty অবজেক্টকে একটি আর্গুমেন্ট হিসেবে নেয় এবং সেই বস্তুতে binding.property সেট করে। সম্পত্তি সেট করার পরে executePendingBindings() কল করুন, যার ফলে আপডেটটি অবিলম্বে কার্যকর হয়।

fun bind(marsProperty: MarsProperty) {
   binding.property = marsProperty
   binding.executePendingBindings()
}

দ্রষ্টব্য: এই পরিবর্তনের ফলে Android স্টুডিওতে ডেটা-বাইন্ডিং ত্রুটি হতে পারে। এই ত্রুটিগুলি সমাধান করতে, আপনাকে অ্যাপটি পরিষ্কার এবং পুনর্নির্মাণ করতে হতে পারে।

10. onCreateViewHolder() এ, TODO সরিয়ে নিন এবং নীচে দেখানো লাইন যোগ করুন। অনুরোধ করা হলে android.view.LayoutInflater আমদানি করুন।
    
    onCreateViewHolder() পদ্ধতিটিকে একটি নতুন MarsPropertyViewHolder ফেরত দিতে হবে, যা GridViewItemBinding স্ফীত করে এবং আপনার মূল ViewGroup প্রসঙ্গ থেকে LayoutInflater ব্যবহার করে তৈরি করা হয়েছে।

   return MarsPropertyViewHolder(GridViewItemBinding.inflate(
      LayoutInflater.from(parent.context)))

11. onBindViewHolder() পদ্ধতিতে, TODO সরান এবং নীচে দেখানো লাইন যোগ করুন। এখানে আপনি getItem() কল করুন বর্তমান RecyclerView অবস্থানের সাথে যুক্ত MarsProperty অবজেক্ট পেতে এবং তারপর সেই সম্পত্তিটিকে MarsPropertyViewHolder এ bind() পদ্ধতিতে পাস করুন।

val marsProperty = getItem(position)
holder.bind(marsProperty)

ধাপ 4: বাইন্ডিং অ্যাডাপ্টার যোগ করুন এবং অংশগুলি সংযুক্ত করুন

অবশেষে, MarsProperty অবজেক্টের তালিকা সহ PhotoGridAdapter আরম্ভ করতে একটি BindingAdapter ব্যবহার করুন। RecyclerView ডেটা সেট করতে একটি BindingAdapter ব্যবহার করলে MarsProperty অবজেক্টের তালিকার জন্য LiveData স্বয়ংক্রিয়ভাবে পর্যবেক্ষণ করতে ডেটা বাইন্ডিং হয়। তারপর বাইন্ডিং অ্যাডাপ্টারটি স্বয়ংক্রিয়ভাবে কল করা হয় যখন MarsProperty তালিকা পরিবর্তন হয়।

1. BindingAdapters.kt খুলুন।
2. ফাইলের শেষে, একটি bindRecyclerView() পদ্ধতি যোগ করুন যা একটি RecyclerView এবং MarsProperty অবজেক্টের একটি তালিকা আর্গুমেন্ট হিসেবে নেয়। একটি @BindingAdapter দিয়ে সেই পদ্ধতিটি টীকা করুন।
   
   অনুরোধ করা হলে androidx.recyclerview.widget.RecyclerView এবং com.example.android.marsrealestate.network.MarsProperty আমদানি করুন।
   

@BindingAdapter("listData")
fun bindRecyclerView(recyclerView: RecyclerView, 
    data: List<MarsProperty>?) {
}

3. bindRecyclerView() ফাংশনের ভিতরে, recyclerView.adapter কে PhotoGridAdapter এ কাস্ট করুন এবং ডেটা সহ adapter.submitList() কল করুন। একটি নতুন তালিকা উপলব্ধ হলে এটি RecyclerView কে বলে।

অনুরোধ করা হলে com.example.android.marsrealestate.overview.PhotoGridAdapter আমদানি করুন।

val adapter = recyclerView.adapter as PhotoGridAdapter
adapter.submitList(data)

4. res/layout/fragment_overview.xml খুলুন। RecyclerView এলিমেন্টে app:listData অ্যাট্রিবিউট যোগ করুন এবং ডেটা বাইন্ডিং ব্যবহার করে viewmodel.properties এ সেট করুন।

app:listData="@{viewModel.properties}"

5. overview/OverviewFragment.kt খুলুন। onCreateView() এ, setHasOptionsMenu() এ কল করার ঠিক আগে, একটি নতুন PhotoGridAdapter অবজেক্টে binding.photosGrid এ RecyclerView অ্যাডাপ্টার আরম্ভ করুন।

binding.photosGrid.adapter = PhotoGridAdapter()

6. অ্যাপটি চালান। আপনি MarsProperty ইমেজ একটি গ্রিড দেখতে হবে. আপনি যখন নতুন ছবি দেখতে স্ক্রোল করেন, অ্যাপটি নিজেই ছবিটি প্রদর্শন করার আগে লোডিং-প্রগ্রেস আইকন দেখায়। আপনি যদি বিমান মোড চালু করেন, যে ছবিগুলি এখনও লোড হয়নি সেগুলি ভাঙা-ছবি আইকন হিসাবে প্রদর্শিত হবে৷

MarsRealEstate অ্যাপটি ভাঙা-ছবি আইকন প্রদর্শন করে যখন একটি ছবি আনা যায় না। কিন্তু যখন কোন নেটওয়ার্ক নেই, অ্যাপটি একটি ফাঁকা স্ক্রীন দেখায়।

এটি একটি দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা নয়। এই কাজটিতে, আপনি ব্যবহারকারীকে কী ঘটছে তার একটি ভাল ধারণা দিতে মৌলিক ত্রুটি পরিচালনা যোগ করুন। ইন্টারনেট উপলব্ধ না হলে, অ্যাপটি সংযোগ-ত্রুটি আইকন দেখাবে। অ্যাপটি যখন MarsProperty তালিকা আনছে, অ্যাপটি লোডিং অ্যানিমেশন দেখাবে।

ধাপ 1: ভিউ মডেলে স্ট্যাটাস যোগ করুন

শুরু করতে, আপনি ওয়েব অনুরোধের স্থিতি উপস্থাপন করতে ভিউ মডেলে একটি LiveData তৈরি করুন৷ বিবেচনা করার জন্য তিনটি রাজ্য রয়েছে - লোডিং, সাফল্য এবং ব্যর্থতা। লোডিং অবস্থাটি ঘটে যখন আপনি await() কলে ডেটার জন্য অপেক্ষা করছেন।

1. overview/OverviewViewModel.kt খুলুন। ফাইলের শীর্ষে (আমদানি করার পরে, ক্লাস সংজ্ঞার আগে), সমস্ত উপলব্ধ স্থিতি উপস্থাপন করতে একটি enum যোগ করুন:

enum class MarsApiStatus { LOADING, ERROR, DONE }

2. OverviewViewModel ক্লাস জুড়ে অভ্যন্তরীণ এবং বাহ্যিক _response লাইভ ডেটা সংজ্ঞার নাম পরিবর্তন করে _status করুন। যেহেতু আপনি এই কোডল্যাবে আগে _properties LiveData জন্য সমর্থন যোগ করেছেন, সম্পূর্ণ ওয়েব পরিষেবা প্রতিক্রিয়া অব্যবহৃত হয়েছে। বর্তমান অবস্থার ট্র্যাক রাখতে আপনার এখানে একটি LiveData প্রয়োজন, যাতে আপনি বিদ্যমান ভেরিয়েবলের নাম পরিবর্তন করতে পারেন।

এছাড়াও, String থেকে MarsApiStatus.

private val _status = MutableLiveData<MarsApiStatus>()

val status: LiveData<MarsApiStatus>
   get() = _status

3. getMarsRealEstateProperties() পদ্ধতিতে স্ক্রোল করুন এবং এখানেও _status এ _response আপডেট করুন। "Success" স্ট্রিংটিকে MarsApiStatus.DONE অবস্থায় এবং "Failure" স্ট্রিংটিকে MarsApiStatus.ERROR এ পরিবর্তন করুন।
4. একটি MarsApiStatus.LOADING স্ট্যাটাস যোগ করুন try {} ব্লকের উপরে, কল করার আগে await() । কোরোটিন চলাকালীন এটি প্রাথমিক অবস্থা এবং আপনি ডেটার জন্য অপেক্ষা করছেন। সম্পূর্ণ try/catch {} ব্লক এখন এইরকম দেখাচ্ছে:

try {
    _status.value = MarsApiStatus.LOADING
   var listResult = getPropertiesDeferred.await()
   _status.value = MarsApiStatus.DONE
   _properties.value = listResult
} catch (e: Exception) {
   _status.value = MarsApiStatus.ERROR
}

5. catch {} ব্লকে ত্রুটির অবস্থার পরে, _properties LiveData একটি খালি তালিকায় সেট করুন। এটি RecyclerView সাফ করে।

} catch (e: Exception) {
   _status.value = MarsApiStatus.ERROR
   _properties.value = ArrayList()
}

ধাপ 2: স্ট্যাটাস ImageView এর জন্য একটি বাঁধাই অ্যাডাপ্টার যোগ করুন

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

1. BindingAdapters.kt খুলুন। bindStatus() নামে একটি নতুন বাঁধাই অ্যাডাপ্টার যোগ করুন যা আর্গুমেন্ট হিসাবে একটি ImageView এবং একটি MarsApiStatus মান নেয়। অনুরোধ করা হলে com.example.android.marsrealestate.overview.MarsApiStatus আমদানি করুন।

@BindingAdapter("marsApiStatus")
fun bindStatus(statusImageView: ImageView, 
          status: MarsApiStatus?) {
}

2. bindStatus() পদ্ধতির ভিতরে একটি when {} যোগ করুন বিভিন্ন স্ট্যাটাসের মধ্যে পরিবর্তন করতে।

when (status) {

}

3. when {} এর ভিতরে, লোডিং অবস্থার জন্য একটি কেস যুক্ত করুন ( MarsApiStatus.LOADING )। এই অবস্থার জন্য, ImageView দৃশ্যমান হিসাবে সেট করুন এবং এটি লোডিং অ্যানিমেশন নির্ধারণ করুন। এটি একই অ্যানিমেশন অঙ্কনযোগ্য যা আপনি আগের টাস্কে গ্লাইডের জন্য ব্যবহার করেছিলেন। অনুরোধ করা হলে android.view.View আমদানি করুন।

when (status) {
   MarsApiStatus.LOADING -> {
      statusImageView.visibility = View.VISIBLE
      statusImageView.setImageResource(R.drawable.loading_animation)
   }
}

4. ত্রুটি অবস্থার জন্য একটি কেস যোগ করুন, যা MarsApiStatus.ERROR । একইভাবে আপনি LOADING অবস্থার জন্য যা করেছেন, স্ট্যাটাস ImageView দৃশ্যমান হিসাবে সেট করুন এবং সংযোগ-ত্রুটি অঙ্কনযোগ্য পুনরায় ব্যবহার করুন।

MarsApiStatus.ERROR -> {
   statusImageView.visibility = View.VISIBLE
   statusImageView.setImageResource(R.drawable.ic_connection_error)
}

5. সম্পন্ন অবস্থার জন্য একটি কেস যোগ করুন, যা MarsApiStatus.DONE । এখানে আপনার একটি সফল প্রতিক্রিয়া আছে, তাই এটি লুকানোর জন্য স্থিতি ImageView এর দৃশ্যমানতা বন্ধ করুন।

MarsApiStatus.DONE -> {
   statusImageView.visibility = View.GONE
}

ধাপ 3: লেআউটে স্ট্যাটাস ইমেজভিউ যোগ করুন

1. res/layout/fragment_overview.xml খুলুন। RecyclerView উপাদানের নীচে, ConstraintLayout ভিতরে, নীচে দেখানো ImageView যোগ করুন।
   
   এই ImageView RecyclerView এর মতোই সীমাবদ্ধতা রয়েছে। যাইহোক, প্রস্থ এবং উচ্চতা ভিউ পূরণ করার জন্য চিত্রটিকে প্রসারিত করার পরিবর্তে চিত্রটিকে কেন্দ্রে রাখতে wrap_content ব্যবহার করে। এছাড়াও app:marsApiStatus অ্যাট্রিবিউটটি লক্ষ্য করুন, যেখানে ভিউ মডেলে স্ট্যাটাস প্রপার্টি পরিবর্তন হলে আপনার BindingAdapter কল করুন।

<ImageView
   android:id="@+id/status_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:marsApiStatus="@{viewModel.status}" />

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

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

অ্যান্ড্রয়েড স্টুডিও প্রকল্প: MarsRealEstateGrid

• ছবি পরিচালনার প্রক্রিয়া সহজ করতে, আপনার অ্যাপে ছবি ডাউনলোড, বাফার, ডিকোড এবং ক্যাশে করতে গ্লাইড লাইব্রেরি ব্যবহার করুন।
• ইন্টারনেট থেকে একটি ইমেজ লোড করার জন্য গ্লাইডের দুটি জিনিসের প্রয়োজন: একটি ছবির URL, এবং একটি ImageView অবজেক্ট ইমেজ রাখার জন্য। এই বিকল্পগুলি নির্দিষ্ট করতে, গ্লাইডের সাথে load() এবং into() পদ্ধতি ব্যবহার করুন।
• বাইন্ডিং অ্যাডাপ্টারগুলি হল এক্সটেনশন পদ্ধতি যা একটি ভিউ এবং সেই ভিউ এর আবদ্ধ ডেটার মধ্যে বসে। ডাটা পরিবর্তিত হলে বাইন্ডিং অ্যাডাপ্টারগুলি কাস্টম আচরণ প্রদান করে, উদাহরণস্বরূপ, একটি URL থেকে একটি ইমেজ ImageView লোড করতে গ্লাইডকে কল করা।
• বাইন্ডিং অ্যাডাপ্টার হল এক্সটেনশন পদ্ধতি যা @BindingAdapter টীকা দিয়ে টীকা করা হয়।
• গ্লাইড অনুরোধে বিকল্প যোগ করতে, apply() পদ্ধতি ব্যবহার করুন। উদাহরণস্বরূপ, একটি লোডিং অঙ্কনযোগ্য নির্দিষ্ট করতে placeholder() এর সাথে apply() ব্যবহার করুন এবং অঙ্কনযোগ্য ত্রুটি নির্দিষ্ট করতে error() এর সাথে apply() ব্যবহার করুন।
• ছবিগুলির একটি গ্রিড তৈরি করতে, একটি GridLayoutManager সাথে একটি RecyclerView ব্যবহার করুন।
• বৈশিষ্ট্যের তালিকা পরিবর্তন করার সময় আপডেট করতে, RecyclerView এবং লেআউটের মধ্যে একটি বাঁধাই অ্যাডাপ্টার ব্যবহার করুন।

উদাসীনতা কোর্স:

• কোটলিনের সাথে অ্যান্ড্রয়েড অ্যাপস তৈরি করা

অ্যান্ড্রয়েড বিকাশকারী ডকুমেন্টেশন:

• মডেল ওভারভিউ দেখুন
• লাইভডেটা ওভারভিউ
• কোরাটিন, অফিসিয়াল ডকুমেন্টেশন
• বাঁধাই অ্যাডাপ্টার

অন্যান্য:

• গ্লাইড
• কোটলিনের সাথে গ্লাইড ব্যবহার করা
• Kotlin সঙ্গে অ্যাডাপ্টার বাঁধাই

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

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

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

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

এই প্রশ্নগুলোর উত্তর দাও

প্রশ্ন 1

ImageView নির্দেশ করতে আপনি কোন গ্লাইড পদ্ধতি ব্যবহার করেন যাতে লোড করা চিত্র থাকবে?

▢ into()

▢ with()

▢ imageview()

▢ apply()

প্রশ্ন 2

গ্লাইড যখন লোড হচ্ছে তখন দেখানোর জন্য আপনি কীভাবে একটি স্থানধারক চিত্র নির্দিষ্ট করবেন?

▢ একটি অঙ্কনযোগ্য সহ into() পদ্ধতি ব্যবহার করুন।

▢ RequestOptions() ব্যবহার করুন এবং একটি অঙ্কনযোগ্য সহ placeholder() পদ্ধতিতে কল করুন।

▢ Glide.placeholder প্রপার্টিটিকে একটি অঙ্কনযোগ্য করার জন্য বরাদ্দ করুন।

▢ RequestOptions() ব্যবহার করুন এবং loadingImage() পদ্ধতিটিকে একটি অঙ্কনযোগ্য সহ কল করুন।

প্রশ্ন 3

আপনি কিভাবে নির্দেশ করবেন যে একটি পদ্ধতি একটি বাঁধাই অ্যাডাপ্টার?

▢ LiveData এ setBindingAdapter() পদ্ধতিতে কল করুন।

▢ পদ্ধতিটিকে BindingAdapters.kt নামে একটি Kotlin ফাইলে রাখুন।

▢ XML লেআউটে android:adapter অ্যাট্রিবিউট ব্যবহার করুন।

▢ @BindingAdapter দিয়ে পদ্ধতিটি টীকা করুন।

পরবর্তী পাঠ শুরু করুন: 8.3 ইন্টারনেট ডেটা সহ ফিল্টারিং এবং বিস্তারিত ভিউ

এই কোর্সে অন্যান্য কোডল্যাবগুলির লিঙ্কগুলির জন্য, Android Kotlin Fundamentals codelabs ল্যান্ডিং পৃষ্ঠাটি দেখুন।