১. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop |
কোডল্যাব MDC-103-এ, আপনি আপনার অ্যাপকে স্টাইল করার জন্য ম্যাটেরিয়াল কম্পোনেন্ট (MDC)-এর রঙ, এলিভেশন এবং টাইপোগ্রাফি কাস্টমাইজ করেছেন।
ম্যাটেরিয়াল ডিজাইন সিস্টেমের একটি কম্পোনেন্ট কিছু পূর্বনির্ধারিত কাজ সম্পাদন করে এবং এর কিছু নির্দিষ্ট বৈশিষ্ট্য থাকে, যেমন একটি বাটন। তবে, একটি বাটন ব্যবহারকারীর কোনো কাজ করার মাধ্যম মাত্র নয়; এটি এর আকৃতি, আকার এবং রঙের একটি চাক্ষুষ প্রকাশও বটে, যা ব্যবহারকারীকে জানিয়ে দেয় যে এটি ইন্টারেক্টিভ এবং স্পর্শ বা ক্লিক করলে কিছু একটা ঘটবে।
ম্যাটেরিয়াল ডিজাইন নির্দেশিকা একজন ডিজাইনারের দৃষ্টিকোণ থেকে কম্পোনেন্টগুলোর বর্ণনা দেয়। এতে বিভিন্ন প্ল্যাটফর্মে উপলব্ধ নানা ধরনের মৌলিক ফাংশনের পাশাপাশি প্রতিটি কম্পোনেন্ট গঠনকারী কাঠামোগত উপাদানগুলোরও বর্ণনা দেওয়া হয়েছে। উদাহরণস্বরূপ, একটি ব্যাকড্রপে একটি ব্যাক লেয়ার ও তার কন্টেন্ট, ফ্রন্ট লেয়ার ও তার কন্টেন্ট, মোশন রুলস এবং ডিসপ্লে অপশন থাকে। এই কম্পোনেন্টগুলোর প্রত্যেকটিকে প্রতিটি অ্যাপের প্রয়োজন, ব্যবহারের ক্ষেত্র এবং কন্টেন্ট অনুযায়ী কাস্টমাইজ করা যায়। এই অংশগুলো মূলত আপনার প্ল্যাটফর্মের SDK থেকে আসা প্রচলিত ভিউ, কন্ট্রোল এবং ফাংশন।
ম্যাটেরিয়াল ডিজাইন নির্দেশিকায় অনেক কম্পোনেন্টের নাম উল্লেখ করা থাকলেও, সেগুলোর সবগুলোই পুনঃব্যবহারযোগ্য কোডের জন্য উপযুক্ত নয় এবং একারণে সেগুলো MDC-তে পাওয়া যায় না। আপনি প্রচলিত কোড ব্যবহার করেই আপনার অ্যাপের জন্য একটি নিজস্ব স্টাইল তৈরি করতে পারেন।
আপনি যা তৈরি করবেন
এই কোডল্যাবে, আপনি Shrine- এ একটি ব্যাকড্রপ যোগ করবেন। এটি অ্যাসিমেট্রিক্যাল গ্রিডে প্রদর্শিত প্রোডাক্টগুলোকে ক্যাটাগরি অনুযায়ী ফিল্টার করবে। আপনি ব্যবহার করবেন:
- আকৃতি
- গতি
- ঐতিহ্যবাহী অ্যান্ড্রয়েড এসডিকে ক্লাস
এই কোডল্যাবে MDC-অ্যান্ড্রয়েড উপাদানসমূহ
- আকৃতি
আপনার যা যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (আপনার কাছে না থাকলে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।
MDC-103 এর ধারাবাহিকতায়?
আপনি যদি MDC-103 সম্পন্ন করে থাকেন, তাহলে আপনার কোড এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। সরাসরি ধাপ ৩-এ চলে যান।
একেবারে নতুন করে শুরু করছেন?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-104-starter/java ডিরেক্টরিতে অবস্থিত। শুরু করার আগে অবশ্যই ওই ডিরেক্টরিতে cd ।
...অথবা গিটহাব থেকে এটি ক্লোন করুন
গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন।
- সেটআপ উইজার্ড শেষ হয়ে গেলে এবং ' Welcome to Android Studio' উইন্ডোটি দেখা গেলে, 'Open an existing Android Studio project'-এ ক্লিক করুন। যে ডিরেক্টরিতে আপনি স্যাম্পল কোডটি ইনস্টল করেছিলেন সেখানে যান এবং Shrine প্রজেক্টটি খোলার জন্য java -> shrine নির্বাচন করুন (অথবা আপনার কম্পিউটারে shrine লিখে সার্চ করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নিচের দিকে অ্যাক্টিভিটি ইন্ডিকেটরগুলোতে যেমনটা দেখানো হচ্ছে, প্রজেক্টটি বিল্ড ও সিঙ্ক হওয়ার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই পর্যায়ে, অ্যান্ড্রয়েড স্টুডিও কিছু বিল্ড এরর দেখাতে পারে, কারণ আপনার কাছে অ্যান্ড্রয়েড এসডিকে বা বিল্ড টুলস নেই, যেমনটি নিচে দেখানো হয়েছে। এগুলো ইনস্টল/আপডেট করতে এবং আপনার প্রজেক্ট সিঙ্ক করতে অ্যান্ড্রয়েড স্টুডিওর নির্দেশাবলী অনুসরণ করুন।
প্রকল্পের নির্ভরতা যোগ করুন
প্রজেক্টটির জন্য 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'
}
স্টার্টার অ্যাপটি চালান
|
সফল! আপনি আপনার ডিভাইসে Shrine অ্যাপটি চালু দেখতে পাবেন।
৩. ব্যাকড্রপ মেনু যোগ করুন
ব্যাকড্রপ হলো একটি অ্যাপের সবচেয়ে পেছনের পৃষ্ঠ, যা অন্য সমস্ত কন্টেন্ট এবং কম্পোনেন্টের পিছনে থাকে। এটি দুটি পৃষ্ঠ নিয়ে গঠিত: একটি ব্যাক লেয়ার (যা অ্যাকশন এবং ফিল্টার প্রদর্শন করে) এবং একটি ফ্রন্ট লেয়ার (যা কন্টেন্ট প্রদর্শন করে)। আপনি নেভিগেশন বা কন্টেন্ট ফিল্টারের মতো ইন্টারেক্টিভ তথ্য এবং অ্যাকশন প্রদর্শন করতে একটি ব্যাকড্রপ ব্যবহার করতে পারেন।
গ্রিডের বিষয়বস্তু লুকান
shr_product_grid_fragment.xml ফাইলে, পণ্যের বিষয়বস্তু সাময়িকভাবে সরিয়ে ফেলার জন্য আপনার NestedScrollView তে android:visibility="gone" অ্যাট্রিবিউটটি যোগ করুন:
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:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
আমরা এই অঞ্চলে একটি ব্যাকড্রপ ইনস্টল করব। টপ অ্যাপ বার এবং ব্যাকড্রপে প্রদর্শিত মেনু কন্টেন্টের মধ্যে বিভাজন এড়ানোর জন্য, আমরা ব্যাকড্রপটির রঙ টপ অ্যাপ বারের রঙের মতোই করব।
shr_product_grid_fragment.xml ফাইলে, আপনার রুট FrameLayout এর প্রথম এলিমেন্ট হিসেবে, AppBarLayout আগে নিম্নলিখিত কোডটি যোগ করুন:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout>
styles.xml ফাইলে নিম্নলিখিতটি যোগ করুন:
স্টাইলস.এক্সএমএল
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>
খুব ভালো! আপনি Shrine-এর UI-তে একটি সুন্দর ব্যাকড্রপ যোগ করেছেন। এরপর আমরা একটি মেনু যোগ করব।
মেনু যোগ করুন
মেনু মূলত টেক্সট বাটনগুলোর একটি তালিকা। আমরা এখানে একটি যোগ করব।
আপনার res -> layout ডিরেক্টরিতে shr_backdrop.xml নামে একটি নতুন লেআউট তৈরি করুন এবং নিম্নলিখিত বিষয়গুলো যোগ করুন:
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge>
এবং shr_product_grid_fragment.xml এ আপনি এইমাত্র যোগ করা LinearLayout টিতে একটি <include> ট্যাগ ব্যবহার করে এই তালিকাটি যুক্ত করুন:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>
বিল্ড করুন এবং চালান। আপনার হোম স্ক্রিনটি দেখতে এইরকম হবে:
আপনার ব্যাকড্রপ তৈরি হয়ে গেছে। চলুন, আগে লুকিয়ে রাখা কন্টেন্টগুলো ফিরিয়ে আনি।
৪. একটি আকৃতি যোগ করুন
এই কোডল্যাবে Shrine-এ কোনো পরিবর্তন আনার আগে, এর প্রধান প্রোডাক্ট কন্টেন্টটি সবচেয়ে পেছনের পৃষ্ঠে অবস্থিত ছিল। একটি ব্যাকড্রপ যোগ করার ফলে, এই কন্টেন্টটি এখন আরও বেশি দৃষ্টিগোচর হয়েছে, কারণ এটি সেই ব্যাকড্রপের সামনে প্রদর্শিত হচ্ছে।
একটি নতুন স্তর যোগ করুন
আমাদের প্রোডাক্ট গ্রিড লেয়ারটি আবার দেখানো উচিত। আপনার NestedScrollView থেকে android:visibility="gone" অ্যাট্রিবিউটটি সরিয়ে ফেলুন:
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:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
চলুন, সামনের লেয়ারটির উপরের বাম কোণায় একটি খাঁজ দিয়ে স্টাইল করি। ম্যাটেরিয়াল ডিজাইন এই ধরনের কাস্টমাইজেশনকে একটি আকৃতি বা শেপ হিসেবে উল্লেখ করে। ম্যাটেরিয়াল সারফেস বিভিন্ন আকৃতিতে প্রদর্শন করা যায়। শেপগুলো সারফেসে জোর ও স্টাইল যোগ করে এবং ব্র্যান্ডিং প্রকাশ করতে ব্যবহার করা যেতে পারে। ম্যাটেরিয়াল শেপের বাঁকা বা কৌণিক কোণা ও প্রান্ত এবং যেকোনো সংখ্যক বাহু থাকতে পারে। এগুলো প্রতিসম বা অসম হতে পারে।
একটি আকৃতি যোগ করুন
গ্রিডের আকৃতি পরিবর্তন করুন। আমরা একটি কাস্টম আকৃতির ব্যাকগ্রাউন্ড দিয়েছি, কিন্তু আকৃতিটি শুধুমাত্র অ্যান্ড্রয়েড মার্শমেলো এবং তার উপরের সংস্করণগুলিতে সঠিকভাবে প্রদর্শিত হয়। শুধুমাত্র অ্যান্ড্রয়েড মার্শমেলো এবং তার উপরের সংস্করণগুলির জন্য, আমরা আপনার NestedScrollView তে shr_product_grid_background_shape ব্যাকগ্রাউন্ডটি সেট করতে পারি। প্রথমে, আপনার NestedScrollView তে একটি id যোগ করুন যাতে আমরা কোডে এটিকে রেফারেন্স করতে পারি, যেমনটি নিচে দেখানো হলো:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
এরপর, ProductGridFragment.java তে প্রোগ্রাম্যাটিকভাবে ব্যাকগ্রাউন্ড সেট করুন। onCreateView() ফাংশনের শেষে, return স্টেটমেন্টের ঠিক আগে, ব্যাকগ্রাউন্ড সেট করার জন্য নিম্নলিখিত লজিকটি যোগ করুন:
ProductGridFragment.java
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}
অবশেষে, আমরা productGridBackgroundColor কালার রিসোর্সটি (যা কাস্টম শেপের ব্যাকগ্রাউন্ডেও ব্যবহৃত হয়) নিম্নোক্তভাবে আপডেট করব:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
নির্মাণ ও পরিচালনা:
আমরা Shrine-এর প্রধান পৃষ্ঠটিকে একটি নিজস্ব শৈলীর আকৃতি দিয়েছি। পৃষ্ঠের এই উচ্চতার কারণে, ব্যবহারকারীরা দেখতে পান যে সামনের সাদা স্তরটির ঠিক পিছনে কিছু একটা আছে। চলুন এতে গতি যোগ করা যাক, যাতে ব্যবহারকারীরা দেখতে পান সেখানে কী আছে: মেনুটি।
৫. গতি যোগ করুন
মোশন হলো আপনার অ্যাপকে প্রাণবন্ত করে তোলার একটি উপায়। মোশন বড় ও নাটকীয়, সূক্ষ্ম ও সংক্ষিপ্ত, অথবা এর মাঝামাঝি যেকোনো ধরনের হতে পারে। আপনি যে ধরনের মোশন ব্যবহার করবেন, তা পরিস্থিতির সাথে মানানসই হওয়া উচিত। বারবার করা হয় এমন সাধারণ কাজের ক্ষেত্রে মোশন ছোট ও সূক্ষ্ম হওয়া উচিত, যাতে নিয়মিতভাবে এতে খুব বেশি সময় না লাগে। অন্যান্য পরিস্থিতি, যেমন কোনো ব্যবহারকারী যখন প্রথমবার অ্যাপটি খোলে, তখন তা আরও বেশি দৃষ্টি আকর্ষণকারী হতে পারে এবং আপনার অ্যাপটি কীভাবে ব্যবহার করতে হয়, সে সম্পর্কে ব্যবহারকারীকে জানাতে সাহায্য করতে পারে।
মেনু বাটনে রিভিল মোশন যোগ করুন
গতিটি হলো সামনের আকৃতিটির সোজা নিচের দিকে নেমে আসা। আমরা ইতিমধ্যেই আপনার জন্য NavigationIconClickListener.java তে একটি ক্লিক লিসেনার দিয়েছি, যা শীটটির ট্রান্সলেশন অ্যানিমেশনটি সম্পন্ন করবে। আমরা এই ক্লিক লিসেনারটি ProductGridFragment.java এর setupToolbar() মেথডের ভিতরে সেট করতে পারি:
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
আপনার setUpToolbar() মেথডটি এখন নিম্নরূপ দেখতে হবে:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}
তৈরি করুন এবং চালান। মেনু বোতামটি চাপুন:
ন্যাভিগেশন মেনু আইকনটি আবার চাপলে মেনুটি অদৃশ্য হয়ে যাবে।
সামনের স্তরের গতি সামঞ্জস্য করুন
আপনার ব্র্যান্ডকে তুলে ধরার জন্য মোশন একটি দারুণ মাধ্যম। চলুন দেখি, একটি ভিন্ন টাইমিং কার্ভ ব্যবহার করে রিভিল অ্যানিমেশনটি কেমন দেখায়।
আপনার নেভিগেশন আইকনের ক্লিক লিসেনারে একটি ইন্টারপোলেটর পাস করার জন্য, ProductGridFragment.java এর setupToolbar() ফাংশনের কোডটি নিম্নরূপভাবে আপডেট করুন:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator()));
}
এর ফলে একটি ভিন্ন প্রভাব সৃষ্টি হয়, তাই না?
৬. ব্র্যান্ডেড আইকন
ব্র্যান্ডেড আইকনোগ্রাফি পরিচিত আইকনগুলোর ক্ষেত্রেও প্রযোজ্য। চলুন, রিভিল আইকনটিকে কাস্টম তৈরি করে আমাদের টাইটেলের সাথে জুড়ে দিই, যা একটি অনন্য ও ব্র্যান্ডেড লুক দেবে।
মেনু বোতামের আইকন পরিবর্তন করুন
মেনু বাটনটি পরিবর্তন করে একটি ডায়মন্ড ডিজাইনযুক্ত আইকন প্রদর্শন করুন। আমাদের দেওয়া নতুন ব্র্যান্ডেড আইকনটি ( shr_branded_menu ) ব্যবহার করার জন্য shr_product_grid_fragment.xml এ আপনার টুলবারটি আপডেট করুন, এবং টুলবারটিকে আপনার ডিজাইনারের স্পেসিফিকেশনের সাথে আরও ভালোভাবে মেলানোর জন্য app:contentInsetStart এবং android:padding অ্যাট্রিবিউটগুলো সেট করুন।
shr_product_grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
ProductGridFragment.java এর setupToolbar() ফাংশনে আমাদের ক্লিক লিসেনারটি আবার আপডেট করুন, যাতে মেনু খোলা এবং বন্ধ থাকা অবস্থায় এটি টুলবারের জন্য ড্রয়েবল গ্রহণ করে, নিম্নরূপ:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator(),
getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}
নির্মাণ ও পরিচালনা:
চমৎকার! যখন ব্যাকড্রপটি উন্মোচন করা যায়, তখন ডায়মন্ড মেনু আইকনটি প্রদর্শিত হয়। যখন মেনুটি লুকানো যায়, তখন তার পরিবর্তে একটি ক্লোজ আইকন প্রদর্শিত হয়।
৭. পুনরালোচনা
এই চারটি কোডল্যাবের মাধ্যমে আপনারা দেখেছেন, কীভাবে ম্যাটেরিয়াল কম্পোনেন্ট ব্যবহার করে অনন্য ও রুচিশীল ইউজার এক্সপেরিয়েন্স তৈরি করা যায়, যা একটি ব্র্যান্ডের ব্যক্তিত্ব ও শৈলীকে প্রকাশ করে।
পরবর্তী পদক্ষেপ
এই কোডল্যাব, MDC-104, এই কোডল্যাবগুলোর ক্রমটি সম্পূর্ণ করে। আপনি অ্যান্ড্রয়েড উইজেটস ক্যাটালগ পরিদর্শন করে MDC-Android-এ আরও অনেক কম্পোনেন্ট অন্বেষণ করতে পারেন।
এই কোডল্যাবের আরও একটি চ্যালেঞ্জ হিসেবে, আপনার Shrine অ্যাপ্লিকেশনটি এমনভাবে পরিবর্তন করুন যাতে ব্যাকড্রপ মেনু থেকে কোনো ক্যাটাগরি নির্বাচন করা হলে প্রদর্শিত পণ্যের ছবিগুলো বদলে যায়।
একটি কার্যকর ব্যাকএন্ডের জন্য এই অ্যাপটিকে ফায়ারবেসের সাথে কীভাবে সংযুক্ত করতে হয় তা জানতে, ফায়ারবেস অ্যান্ড্রয়েড কোডল্যাব দেখুন।