1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
কোডল্যাব MDC-101-এ, আপনি একটি লগইন পৃষ্ঠা তৈরি করতে দুটি ম্যাটেরিয়াল কম্পোনেন্ট (MDC) ব্যবহার করেছেন: টেক্সট ফিল্ড এবং বোতাম। এখন আসুন নেভিগেশন, কাঠামো এবং ডেটা যোগ করে এই ভিত্তিটি আরও বিস্তৃত করি।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি Shrine নামক একটি অ্যাপের জন্য একটি হোম স্ক্রিন তৈরি করবেন, এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালীর জিনিসপত্র বিক্রি করে। এতে থাকবে:
- একটি শীর্ষ অ্যাপ বার
- পণ্যের একটি গ্রিড তালিকা
এই কোডল্যাবে MDC-Android উপাদানগুলি
- অ্যাপবারলেআউট
- ম্যাটেরিয়ালকার্ডভিউ
তোমার যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে ইতিমধ্যে না থাকে তবে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
MDC-101 থেকে চালিয়ে যাচ্ছেন?
যদি আপনি MDC-101 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। আপনি ধাপ 3 এ যেতে পারেন: একটি শীর্ষ অ্যাপ বার যোগ করুন ।
একেবারে শুরু থেকে?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-102-starter/java ডিরেক্টরিতে অবস্থিত। শুরু করার আগে সেই ডিরেক্টরিতে cd করতে ভুলবেন না।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 102-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন
- সেটআপ উইজার্ডটি শেষ হয়ে গেলে এবং Welcome to Android Studio উইন্ডোটি প্রদর্শিত হলে, Open an existing Android Studio project এ ক্লিক করুন। আপনি যে ডিরেক্টরিতে নমুনা কোডটি ইনস্টল করেছিলেন সেখানে নেভিগেট করুন এবং Shrine প্রজেক্টটি খুলতে java -> shrine নির্বাচন করুন (অথবা আপনার কম্পিউটারে shrine অনুসন্ধান করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের দিকে কার্যকলাপ নির্দেশকগুলি যেমনটি দেখায়, অ্যান্ড্রয়েড স্টুডিওটি প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই মুহুর্তে, Android Studio-তে কিছু বিল্ড ত্রুটি দেখা দিতে পারে কারণ আপনার Android SDK বা বিল্ড টুলগুলি, যেমন নীচে দেখানো হয়েছে, অনুপস্থিত। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android Studio-তে নির্দেশাবলী অনুসরণ করুন।
প্রকল্পের নির্ভরতা যোগ করুন
প্রকল্পটির জন্য MDC অ্যান্ড্রয়েড সাপোর্ট লাইব্রেরির উপর নির্ভরতা প্রয়োজন। আপনার ডাউনলোড করা নমুনা কোডটিতে ইতিমধ্যেই এই নির্ভরতা তালিকাভুক্ত থাকা উচিত, তবে নিশ্চিত করার জন্য নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করা ভাল অভ্যাস।
-
appমডিউলেরbuild.gradleফাইলে যান এবং নিশ্চিত করুন যেdependenciesব্লকে MDC Android এর উপর নির্ভরতা রয়েছে:
api 'com.google.android.material:material:1.1.0-alpha06'
- (ঐচ্ছিক) প্রয়োজনে, নিম্নলিখিত নির্ভরতা যোগ করতে
build.gradleফাইলটি সম্পাদনা করুন এবং প্রকল্পটি সিঙ্ক করুন।
dependencies {
api 'com.google.android.material:material:1.1.0-alpha06'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.android.volley:volley:1.1.1'
implementation 'com.google.code.gson:gson:2.8.5'
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:core:1.1.0'
androidTestImplementation 'androidx.test.ext:junit:1.1.0'
androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}
স্টার্টার অ্যাপটি চালান
|
সফল! আপনার MDC-101 কোডল্যাব থেকে শ্রাইন লগইন পৃষ্ঠাটি দেখা উচিত।
এখন যেহেতু লগইন স্ক্রিনটি ভালো দেখাচ্ছে, আসুন অ্যাপটিতে কিছু পণ্য যোগ করি।
৩. একটি শীর্ষ অ্যাপ বার যোগ করুন
লগইন পৃষ্ঠাটি বন্ধ হয়ে গেলে হোম স্ক্রিনটি প্রকাশিত হয়, যেখানে একটি স্ক্রিন থাকে যেখানে লেখা থাকে "তুমি এটা করেছো!"। দারুন! কিন্তু এখন আমাদের ব্যবহারকারীর কোনও পদক্ষেপ নেওয়ার নেই, অথবা অ্যাপে তারা কোথায় আছে তার কোনও ধারণা নেই। এটিতে সাহায্য করার জন্য, আসুন নেভিগেশন যোগ করি।
ম্যাটেরিয়াল ডিজাইন এমন নেভিগেশন প্যাটার্ন অফার করে যা উচ্চ মাত্রার ব্যবহারযোগ্যতা নিশ্চিত করে। সবচেয়ে উল্লেখযোগ্য নেভিগেশন উপাদানগুলির মধ্যে একটি হল একটি শীর্ষ অ্যাপ বার।
নেভিগেশন প্রদান করতে এবং ব্যবহারকারীদের অন্যান্য ক্রিয়াকলাপে দ্রুত অ্যাক্সেস দিতে, আসুন একটি শীর্ষ অ্যাপ বার যুক্ত করি।
একটি অ্যাপবার উইজেট যোগ করুন
shr_product_grid_fragment.xml তে, "You did it!" TextView <LinearLayout> ট্যাগটি মুছে ফেলুন এবং এটিকে নিম্নলিখিতটি দিয়ে প্রতিস্থাপন করুন:
shr_product_grid_fragment.xml সম্পর্কে
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
তোমার shr_product_grid_fragment.xml দেখতে এরকম হওয়া উচিত:
shr_product_grid_fragment.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>
অনেক অ্যাপ বারে শিরোনামের পাশে একটি বোতাম থাকে। আমাদের অ্যাপ বারে একটি মেনু আইকন যোগ করা যাক।
একটি নেভিগেশন আইকন যোগ করুন
shr_product_grid_fragment.xml এ থাকাকালীন, Toolbar XML কম্পোনেন্টে নিম্নলিখিতটি যোগ করুন (যা আপনি আপনার লেআউটে যোগ করেছেন):
shr_product_grid_fragment.xml সম্পর্কে
app:navigationIcon="@drawable/shr_menu"
তোমার shr_product_grid_fragment.xml দেখতে এরকম হওয়া উচিত:
shr_product_grid_fragment.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="@drawable/shr_menu"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
</FrameLayout>
অ্যাকশন বোতাম যোগ করুন এবং উপরের অ্যাপ বারটি স্টাইল করুন
আপনি অ্যাপ বারের শেষ দিকে বোতামও যোগ করতে পারেন। অ্যান্ড্রয়েডে, এগুলিকে অ্যাকশন বোতাম বলা হয়।
আমরা উপরের অ্যাপ বারটি স্টাইল করব এবং প্রোগ্রাম্যাটিকভাবে এর মেনুতে অ্যাকশন বোতাম যুক্ত করব।
প্রথমে, টুলবার সেট আপ করার জন্য একটি পদ্ধতি তৈরি করা যাক। পদ্ধতিটি তার id ব্যবহার করে টুলবারের একটি রেফারেন্স পাবে এবং getActivity() ব্যবহার করে অ্যাক্টিভিটির একটি রেফারেন্সও পাবে। যদি অ্যাক্টিভিটি null না হয়, তাহলে setSupportActionBar ব্যবহার করে ActionBar হিসেবে Toolbar সেট করুন:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
এরপর, আমরা যে setUpToolbar পদ্ধতিটি যোগ করেছি তার ঠিক নীচে, shr_toolbar_menu.xml এর বিষয়বস্তু টুলবারে স্ফীত করতে onCreateOptionsMenu ওভাররাইড করি:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
এখন setUpToolbar পদ্ধতিতে একটি কল যোগ করুন যা আমরা onCreateView() পদ্ধতির কন্টেন্টে নিম্নলিখিতগুলি সহ যোগ করেছি:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
অবশেষে, ProductGridFragment.java তে একটি onCreate() পদ্ধতি যোগ করুন। পদ্ধতির বডিতে, setHasOptionMenu এর প্যারামিটারটি true হিসেবে সেট করুন।
পদ্ধতিটি এইরকম হওয়া উচিত:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
উপরের কোডটি আমাদের XML লেআউট থেকে অ্যাপ বারটিকে এই অ্যাক্টিভিটির জন্য অ্যাকশন বার হিসেবে সেট করে। কলব্যাক onCreateOptionsMenu অ্যাক্টিভিটিকে আমাদের মেনু হিসেবে কী ব্যবহার করতে হবে তা বলে। এই ক্ষেত্রে, এটি R.menu.shr_toolbar_menu থেকে মেনু আইটেমগুলিকে অ্যাপ বারে রাখবে।
মেনু ফাইলটিতে দুটি আইটেম রয়েছে: "অনুসন্ধান" এবং "ফিল্টার"।
shr_toolbar_menu.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/search"
android:icon="@drawable/shr_search"
android:title="@string/shr_search_title"
app:showAsAction="always" />
<item
android:id="@+id/filter"
android:icon="@drawable/shr_filter"
android:title="@string/shr_filter_title"
app:showAsAction="always" />
</menu>
এই পরিবর্তনগুলির পরে, আপনার ProductGridFragment.java ফাইলটি এইরকম দেখাবে:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
package com.google.codelabs.mdc.java.shrine;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}
তৈরি করুন এবং চালান। আপনার হোম স্ক্রিনটি এইরকম দেখাবে:
এখন টুলবারটিতে একটি নেভিগেশন আইকন, একটি শিরোনাম এবং ডানদিকে দুটি অ্যাকশন আইকন রয়েছে। টুলবারটি একটি সূক্ষ্ম ছায়া ব্যবহার করে উচ্চতা প্রদর্শন করে, যা দেখায় যে এটি কন্টেন্টের চেয়ে ভিন্ন স্তরে রয়েছে।
৪. একটি কার্ড যোগ করুন
এখন যেহেতু আমাদের অ্যাপটির কিছু কাঠামো আছে, আসুন আমরা কার্ডগুলিতে রেখে বিষয়বস্তুটি সাজাই।
একটি কার্ড যোগ করুন
উপরের অ্যাপ বারের নিচে একটি কার্ড যোগ করে শুরু করা যাক। একটি কার্ডে একটি ছবির জন্য একটি অঞ্চল, একটি শিরোনাম এবং গৌণ পাঠ্যের জন্য একটি লেবেল থাকা উচিত।
shr_product_grid_fragment.xml এ, AppBarLayout নীচে নিম্নলিখিতটি যোগ করুন:
shr_product_grid_fragment.xml সম্পর্কে
<com.google.android.material.card.MaterialCardView
android:layout_width="160dp"
android:layout_height="180dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="70dp"
app:cardBackgroundColor="?attr/colorPrimaryDark"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#FFFFFF"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="@string/shr_product_title"
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="@string/shr_product_description"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
তৈরি করুন এবং চালান:
এই প্রিভিউতে, আপনি দেখতে পাচ্ছেন যে কার্ডটি স্ক্রিনের বাম প্রান্ত থেকে ইনসেট করা হয়েছে এবং এর কোণগুলি গোলাকার এবং একটি ছায়া রয়েছে (যা কার্ডের উচ্চতা প্রকাশ করে)। পুরো এলাকাটিকে "ধারক" বলা হয়। ধারকটি ছাড়াও, এর মধ্যে থাকা সমস্ত উপাদান ঐচ্ছিক।
আপনি একটি কন্টেইনারে নিম্নলিখিত উপাদানগুলি যোগ করতে পারেন: হেডার টেক্সট, একটি থাম্বনেইল বা অবতার, সাবহেড টেক্সট, ডিভাইডার, এমনকি বোতাম এবং আইকনও। উদাহরণস্বরূপ, আমরা যে কার্ডটি তৈরি করেছি, তাতে দুটি TextView (একটি শিরোনামের জন্য এবং একটি গৌণ টেক্সটের জন্য) একটি LinearLayout তে রয়েছে, যা কার্ডের নীচে সারিবদ্ধ।
কার্ডগুলি সাধারণত অন্যান্য কার্ডের সাথে একটি সংগ্রহে দেখানো হয়। এই কোডল্যাবের পরবর্তী বিভাগে, আমরা সেগুলিকে একটি গ্রিডে সংগ্রহ হিসাবে রাখব।
৫. কার্ডের একটি গ্রিড তৈরি করুন
যখন একটি স্ক্রিনে একাধিক কার্ড উপস্থিত থাকে, তখন সেগুলিকে এক বা একাধিক সংগ্রহে একত্রিত করা হয়। একটি গ্রিডে থাকা কার্ডগুলি কোপ্ল্যানার হয়, যার অর্থ তারা একে অপরের মতো একই বিশ্রামের উচ্চতা ভাগ করে নেয় (যদি না তোলা হয় বা টেনে আনা হয়, তবে আমরা এই কোডল্যাবে এটি কভার করব না)।
কার্ডের গ্রিড সেট আপ করুন
আমরা আপনার জন্য যে shr_product_card.xml ফাইলটি দিয়েছি তা একবার দেখুন:
shr_product_card.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="@android:color/white"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/product_image"
android:layout_width="match_parent"
android:layout_height="@dimen/shr_product_card_image_height"
android:background="?attr/colorPrimaryDark"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_title"
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:id="@+id/product_price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/shr_product_description"
android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
এই কার্ড লেআউটে একটি ছবি সহ একটি কার্ড রয়েছে (এখানে একটি NetworkImageView , যা আমাদের একটি URL থেকে ছবি অন্তর্ভুক্ত করার অনুমতি দেয়), এবং দুটি TextViews ।
এরপর, আমরা আপনার জন্য যে ProductCardRecyclerViewAdapter টি দিয়েছি তা দেখুন। এটি ProductGridFragment এর মতো একই প্যাকেজে রয়েছে।
প্রোডাক্টকার্ডরিসাইক্লারভিউঅ্যাডাপ্টার.জাভা
package com.google.codelabs.mdc.java.shrine;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.google.codelabs.mdc.java.shrine.network.ImageRequester;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
import java.util.List;
/**
* Adapter used to show a simple grid of products.
*/
public class ProductCardRecyclerViewAdapter extends RecyclerView.Adapter<ProductCardViewHolder> {
private List<ProductEntry> productList;
private ImageRequester imageRequester;
ProductCardRecyclerViewAdapter(List<ProductEntry> productList) {
this.productList = productList;
imageRequester = ImageRequester.getInstance();
}
@NonNull
@Override
public ProductCardViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.shr_product_card, parent, false);
return new ProductCardViewHolder(layoutView);
}
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
// TODO: Put ViewHolder binding code here in MDC-102
}
@Override
public int getItemCount() {
return productList.size();
}
}
উপরের অ্যাডাপ্টার ক্লাসটি আমাদের গ্রিডের কন্টেন্ট পরিচালনা করে। প্রতিটি ভিউ তার প্রদত্ত কন্টেন্টের সাথে কী করবে তা নির্ধারণ করার জন্য, আমরা শীঘ্রই onBindViewHolder() এর জন্য কোড লিখব।
একই প্যাকেজে, আপনি ProductCardViewHolder দেখতে পারেন। এই ক্লাসটি আমাদের কার্ড লেআউটকে প্রভাবিত করে এমন ভিউ সংরক্ষণ করে, যাতে আমরা পরে সেগুলি পরিবর্তন করতে পারি।
প্রোডাক্টকার্ডভিউহোল্ডার.জাভা
package com.google.codelabs.mdc.java.shrine;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
// TODO: Find and store views from itemView
}
}
আমাদের গ্রিড সেট আপ করার জন্য, প্রথমে আমরা shr_product_grid_fragment.xml থেকে MaterialCardView প্লেসহোল্ডারটি সরিয়ে ফেলতে চাইব। এরপর, আপনার কার্ডের গ্রিডের প্রতিনিধিত্বকারী উপাদানটি যুক্ত করা উচিত। এই ক্ষেত্রে, আপনার AppBarLayout XML উপাদানের নীচে আপনার shr_product_grid_fragment.xml এ একটি RecyclerView উপাদান যুক্ত করুন:
shr_product_grid_fragment.xml সম্পর্কে
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:paddingStart="@dimen/shr_product_grid_spacing"
android:paddingEnd="@dimen/shr_product_grid_spacing"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>
তোমার shr_product_grid_fragment.xml দেখতে এরকম হওয়া উচিত:
shr_product_grid_fragment.xml সম্পর্কে
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProductGridFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/app_bar"
style="@style/Widget.Shrine.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="@drawable/shr_menu"
app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:paddingStart="@dimen/shr_product_grid_spacing"
android:paddingEnd="@dimen/shr_product_grid_spacing"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.core.widget.NestedScrollView>
</FrameLayout>
অবশেষে, onCreateView() এ, setUpToolbar(view) কল করার পরে এবং return স্টেটমেন্টের আগে ProductGridFragment.java তে RecyclerView ইনিশিয়ালাইজেশন কোড যোগ করুন:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
...
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}
উপরের কোড স্নিপেটে একটি RecyclerView সেট আপ করার জন্য প্রয়োজনীয় প্রাথমিককরণ ধাপগুলি রয়েছে। এর মধ্যে রয়েছে RecyclerView এর লেআউট ম্যানেজার সেট করা, এবং RecyclerView এর অ্যাডাপ্টারটি শুরু করা এবং সেট করা।
আপনার ProductGridFragment.java ফাইলটি এখন এইরকম দেখাবে:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
package com.google.codelabs.mdc.java.shrine;
import android.os.Bundle;
import androidx.recyclerview.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toolbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.GridLayoutManager;
import com.google.codelabs.mdc.java.shrine.network.ProductEntry;
public class ProductGridFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
@Override
public View onCreateView(
@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment with the ProductGrid theme
View view = inflater.inflate(R.layout.shr_product_grid_fragment, container, false);
// Set up the toolbar
setUpToolbar(view);
// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false));
ProductCardRecyclerViewAdapter adapter = new ProductCardRecyclerViewAdapter(
ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.shr_toolbar_menu, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
}
তৈরি করো এবং চালাও।
কার্ডগুলো এখন আছে! তারা এখনও কিছু দেখায় না, তাই কিছু পণ্যের তথ্য যোগ করা যাক।
ছবি এবং টেক্সট যোগ করুন
প্রতিটি কার্ডের জন্য, একটি ছবি, পণ্যের নাম এবং মূল্য যোগ করুন। আমাদের ViewHolder অ্যাবস্ট্রাকশন প্রতিটি কার্ডের ভিউ ধরে রাখে। আমাদের ViewHolder এ, নিম্নলিখিতভাবে তিনটি ভিউ যোগ করুন:
প্রোডাক্টকার্ডভিউহোল্ডার.জাভা
package com.google.codelabs.mdc.java.shrine;
import androidx.recyclerview.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import androidx.annotation.NonNull;
import com.android.volley.toolbox.NetworkImageView;
public class ProductCardViewHolder extends RecyclerView.ViewHolder {
public NetworkImageView productImage;
public TextView productTitle;
public TextView productPrice;
public ProductCardViewHolder(@NonNull View itemView) {
super(itemView);
productImage = itemView.findViewById(R.id.product_image);
productTitle = itemView.findViewById(R.id.product_title);
productPrice = itemView.findViewById(R.id.product_price);
}
}
আমাদের RecyclerView এর অ্যাডাপ্টারে, ViewHolder, প্রতিটি ভিউতে তথ্য সেট করার জন্য onBindViewHolder() পদ্ধতিটি আপডেট করুন:
প্রোডাক্টকার্ডরিসাইক্লারভিউঅ্যাডাপ্টার.জাভা
@Override
public void onBindViewHolder(@NonNull ProductCardViewHolder holder, int position) {
if (productList != null && position < productList.size()) {
ProductEntry product = productList.get(position);
holder.productTitle.setText(product.title);
holder.productPrice.setText(product.price);
imageRequester.setImageFromUrl(holder.productImage, product.url);
}
}
উপরের কোডটি আমাদের RecyclerView এর অ্যাডাপ্টারকে ViewHolder ব্যবহার করে প্রতিটি কার্ডের সাথে কী করতে হবে তা বলে দেয়।
এখানে এটি ViewHolder এর প্রতিটি TextView এর টেক্সট ডেটা সেট করে এবং একটি URL থেকে একটি ছবি পেতে ImageRequester কে কল করে। ImageRequester হল একটি ক্লাস যা আমরা আপনার সুবিধার জন্য প্রদান করেছি এবং এটি Volley লাইব্রেরি ব্যবহার করে (এটি এই কোডল্যাবের আওতার বাইরের একটি বিষয়, তবে আপনি নিজেই কোডটি অন্বেষণ করতে পারেন)।
তৈরি করুন এবং চালান:
আমাদের পণ্যগুলি এখন অ্যাপে দেখা যাচ্ছে!
৬. সংক্ষিপ্তসার
আমাদের অ্যাপটিতে একটি মৌলিক প্রবাহ রয়েছে যা ব্যবহারকারীকে লগইন স্ক্রিন থেকে হোম স্ক্রিনে নিয়ে যায়, যেখানে পণ্যগুলি দেখা যায়। মাত্র কয়েকটি লাইন কোডের মাধ্যমে, আমরা আমাদের অ্যাপের বিষয়বস্তু উপস্থাপনের জন্য একটি শীর্ষ অ্যাপ বার এবং তিনটি বোতাম এবং কার্ডের একটি গ্রিড যুক্ত করেছি। আমাদের হোম স্ক্রিন এখন সহজ এবং কার্যকর, একটি মৌলিক কাঠামো এবং কার্যকরী বিষয়বস্তু সহ।
পরবর্তী পদক্ষেপ
উপরের অ্যাপ বার, কার্ড, টেক্সট ফিল্ড এবং বোতামের সাহায্যে, আমরা এখন MDC-Android লাইব্রেরি থেকে চারটি মূল মেটেরিয়াল ডিজাইন উপাদান ব্যবহার করেছি! আপনি MDC Android-এর MDC-Android ক্যাটালগ উপাদানগুলিতে আরও উপাদান অন্বেষণ করতে পারেন।
যদিও এটি সম্পূর্ণরূপে কার্যকর, আমাদের অ্যাপটি এখনও কোনও নির্দিষ্ট ব্র্যান্ড প্রকাশ করে না। MDC-103: রঙ, আকৃতি, উচ্চতা এবং প্রকারের সাথে উপাদান নকশা থিমিং -এ , আমরা একটি প্রাণবন্ত, আধুনিক ব্র্যান্ড প্রকাশ করার জন্য এই উপাদানগুলির স্টাইল কাস্টমাইজ করব।