1. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সাহায্য করে। গুগলের ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি অ্যান্ড্রয়েড, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ। |
কোডল্যাব MDC-103-এ, আপনি আপনার অ্যাপ স্টাইল করার জন্য Material Components (MDC)-এর রঙ, উচ্চতা এবং টাইপোগ্রাফি কাস্টমাইজ করেছেন।
মেটেরিয়াল ডিজাইন সিস্টেমের একটি উপাদান পূর্বনির্ধারিত কাজগুলির একটি সেট সম্পাদন করে এবং এর কিছু বৈশিষ্ট্য রয়েছে, যেমন একটি বোতাম। যাইহোক, একটি বোতাম কেবল ব্যবহারকারীর জন্য একটি ক্রিয়া সম্পাদনের একটি উপায় নয়, এটি আকৃতি, আকার এবং রঙের একটি দৃশ্যমান অভিব্যক্তি যা ব্যবহারকারীকে জানতে দেয় যে এটি ইন্টারেক্টিভ এবং স্পর্শ বা ক্লিক করলে কিছু ঘটবে।
মেটেরিয়াল ডিজাইন নির্দেশিকাগুলি ডিজাইনারের দৃষ্টিকোণ থেকে উপাদানগুলিকে বর্ণনা করে। এগুলি প্ল্যাটফর্মগুলিতে উপলব্ধ বিভিন্ন ধরণের মৌলিক ফাংশনের পাশাপাশি প্রতিটি উপাদান তৈরি করে এমন শারীরবৃত্তীয় উপাদানগুলির বর্ণনা দেয়। উদাহরণস্বরূপ, একটি ব্যাকড্রপে একটি পিছনের স্তর এবং এর বিষয়বস্তু, সামনের স্তর এবং এর বিষয়বস্তু, গতির নিয়ম এবং প্রদর্শনের বিকল্প থাকে। এই প্রতিটি উপাদান প্রতিটি অ্যাপের চাহিদা, ব্যবহারের ক্ষেত্রে এবং বিষয়বস্তুর জন্য কাস্টমাইজ করা যেতে পারে। এই অংশগুলি, বেশিরভাগ অংশের জন্য, আপনার প্ল্যাটফর্মের SDK থেকে ঐতিহ্যবাহী দৃশ্য, নিয়ন্ত্রণ এবং ফাংশন।
যদিও মেটেরিয়াল ডিজাইনের নির্দেশিকাগুলিতে অনেক উপাদানের নাম উল্লেখ করা হয়েছে, তবুও সবগুলি পুনঃব্যবহারযোগ্য কোডের জন্য ভালো প্রার্থী নয় এবং তাই MDC তে পাওয়া যায় না। আপনি আপনার অ্যাপের জন্য একটি কাস্টমাইজড স্টাইল অর্জনের জন্য এই অভিজ্ঞতাগুলি নিজেই তৈরি করতে পারেন, সবগুলিই ঐতিহ্যবাহী কোড ব্যবহার করে।
তুমি কী তৈরি করবে
এই কোডল্যাবে, আপনি Shrine তে একটি ব্যাকড্রপ যুক্ত করবেন। এটি অ্যাসিমেট্রিকাল গ্রিডে দেখানো পণ্যগুলিকে বিভাগ অনুসারে ফিল্টার করবে। আপনি ব্যবহার করবেন:
- আকৃতি
- গতি
- ঐতিহ্যবাহী অ্যান্ড্রয়েড এসডিকে ক্লাস
এই কোডল্যাবে MDC-Android উপাদানগুলি
- আকৃতি
তোমার যা লাগবে
- অ্যান্ড্রয়েড ডেভেলপমেন্টের প্রাথমিক জ্ঞান
- অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে ইতিমধ্যে না থাকে তবে এখান থেকে ডাউনলোড করুন)
- একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
- নমুনা কোড (পরবর্তী ধাপ দেখুন)
অ্যান্ড্রয়েড অ্যাপ তৈরিতে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন
MDC-103 থেকে চালিয়ে যাচ্ছেন?
যদি আপনি MDC-103 সম্পন্ন করে থাকেন, তাহলে আপনার কোডটি এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। ধাপ 3 এ যান।
একেবারে শুরু থেকে?
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-android-codelabs-104-starter/java ডিরেক্টরিতে অবস্থিত। শুরু করার আগে সেই ডিরেক্টরিতে cd করতে ভুলবেন না।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
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 অনুসন্ধান করুন)।
- অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের দিকে কার্যকলাপ নির্দেশকগুলি যেমনটি দেখায়, অ্যান্ড্রয়েড স্টুডিওটি প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন।
- এই মুহুর্তে, 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'
}
স্টার্টার অ্যাপটি চালান
|
সফল! আপনার ডিভাইসে 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>
দারুন! তুমি শ্রাইনের 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 এ <include> ট্যাগ ব্যবহার করে আপনি যে LinearLayout যোগ করেছেন তাতে এই তালিকাটি যোগ করুন:
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>
তৈরি করুন এবং চালান। আপনার হোম স্ক্রিনটি এইরকম দেখাবে:
তোমার ব্যাকড্রপ তৈরি হয়েছে। চলো আমরা আগে যে বিষয়বস্তু লুকিয়ে রেখেছিলাম তা ফিরিয়ে আনি।
৪. একটি আকৃতি যোগ করুন
এই কোডল্যাবে আমরা শ্রাইনে কোনও পরিবর্তন আনার আগে, এর প্রাথমিক পণ্য সামগ্রীটি সবচেয়ে দূরবর্তী পিছনের পৃষ্ঠে অবস্থিত ছিল। একটি পটভূমি যুক্ত করার মাধ্যমে, এই সামগ্রীটি এখন আরও জোর দেওয়া হয়েছে কারণ এটি সেই পটভূমির সামনে প্রদর্শিত হয়।
একটি নতুন স্তর যোগ করুন
আমাদের আবার প্রোডাক্ট গ্রিড লেয়ারটি দেখানো উচিত। আপনার 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">
উপরের বাম কোণে একটি খাঁজ দিয়ে সামনের স্তরটি স্টাইল করা যাক। ম্যাটেরিয়াল ডিজাইন বলতে এই ধরণের কাস্টমাইজেশনকে একটি আকৃতি হিসেবে বোঝায়। ম্যাটেরিয়াল পৃষ্ঠতল বিভিন্ন আকারে প্রদর্শিত হতে পারে। আকারগুলি পৃষ্ঠতলগুলিতে জোর এবং স্টাইল যোগ করে এবং ব্র্যান্ডিং প্রকাশ করতে ব্যবহার করা যেতে পারে। ম্যাটেরিয়াল আকারগুলিতে বাঁকা বা কোণযুক্ত কোণ এবং প্রান্ত এবং যেকোনো সংখ্যক বাহু থাকতে পারে। এগুলি প্রতিসম বা অনিয়মিত হতে পারে।
একটি আকৃতি যোগ করুন
গ্রিডের আকৃতি পরিবর্তন করুন। আমরা একটি কাস্টম আকৃতির ব্যাকগ্রাউন্ড প্রদান করেছি, কিন্তু আকৃতিটি শুধুমাত্র Android Marshmallow এবং তার উপরের সংস্করণগুলিতে সঠিকভাবে প্রদর্শিত হয়। আমরা আপনার NestedScrollView এ shr_product_grid_background_shape ব্যাকগ্রাউন্ডটি শুধুমাত্র Android Marshmallow এবং তার উপরের সংস্করণগুলির জন্য সেট করতে পারি। প্রথমে, আপনার 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 তে ব্যাকগ্রাউন্ডটি প্রোগ্রাম্যাটিকভাবে সেট করুন। return স্টেটমেন্টের ঠিক আগে, onCreateView() এর শেষে ব্যাকগ্রাউন্ড সেট করতে নিম্নলিখিত লজিকটি যোগ করুন:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
// 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>
তৈরি করুন এবং চালান:
আমরা শ্রাইনের প্রাথমিক পৃষ্ঠকে একটি কাস্টম স্টাইলের আকৃতি দিয়েছি। পৃষ্ঠের উচ্চতার কারণে, ব্যবহারকারীরা দেখতে পাচ্ছেন যে সামনের সাদা স্তরের ঠিক পিছনে কিছু আছে। চলুন গতি যোগ করি যাতে ব্যবহারকারীরা দেখতে পান সেখানে কী আছে: মেনু।
৫. গতি যোগ করুন
গতি আপনার অ্যাপকে প্রাণবন্ত করার একটি উপায়। গতি বড় এবং নাটকীয়, সূক্ষ্ম এবং ন্যূনতম, অথবা এর মাঝামাঝি যেকোনো হতে পারে। আপনি যে ধরণের গতি ব্যবহার করেন তা পরিস্থিতির সাথে উপযুক্ত হওয়া উচিত। বারবার নিয়মিত ক্রিয়ায় প্রয়োগ করা গতি ছোট এবং সূক্ষ্ম হওয়া উচিত, যাতে নিয়মিতভাবে খুব বেশি সময় না লাগে। অন্যান্য পরিস্থিতি, যেমন প্রথমবার কোনও ব্যবহারকারী কোনও অ্যাপ খোলার সময়, আরও আকর্ষণীয় হতে পারে এবং ব্যবহারকারীকে আপনার অ্যাপ কীভাবে ব্যবহার করবেন সে সম্পর্কে শিক্ষিত করতে সাহায্য করতে পারে।
মেনু বোতামে রিভিল মোশন যোগ করুন
গতি হলো সামনের আকৃতি যা সোজা নীচে সরানো হচ্ছে। আমরা ইতিমধ্যেই আপনার জন্য একটি ক্লিক লিসেনার সরবরাহ করেছি যা NavigationIconClickListener.java তে শীটের অনুবাদ অ্যানিমেশন সম্পন্ন করবে। আমরা ProductGridFragment.java এর setupToolbar() পদ্ধতিতে এই ক্লিক লিসেনারটি সেট করতে পারি:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
আপনার setUpToolbar() পদ্ধতিটি এখন এইরকম দেখাবে:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
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() এ আপনার কোড আপডেট করুন যাতে আপনার নেভিগেশন আইকনের ক্লিক লিসেনারে একটি ইন্টারপোলেটর পাস করা যায়, নিম্নরূপ:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
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_product_grid_fragment.xml এ আপনার টুলবারটি আপডেট করুন যাতে আমরা একটি নতুন ব্র্যান্ডেড আইকন ( shr_branded_menu ) ব্যবহার করতে পারি, এবং 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() এ আমাদের ক্লিক লিসেনারটি আবার আপডেট করুন, নিম্নরূপ:
প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা
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, কোডল্যাবের এই ক্রমটি সম্পূর্ণ করে। আপনি Android Widgets Catalog এ গিয়ে MDC-Android-এর আরও উপাদান অন্বেষণ করতে পারেন।
এই কোডল্যাবের সাথে আরও চ্যালেঞ্জের জন্য, ব্যাকড্রপ মেনু থেকে কোনও বিভাগ নির্বাচন করা হলে প্রদর্শিত পণ্যের চিত্রগুলি পরিবর্তন করতে আপনার শ্রাইন অ্যাপ্লিকেশনটি পরিবর্তন করুন।
কার্যকরী ব্যাকএন্ডের জন্য এই অ্যাপটিকে Firebase-এর সাথে কীভাবে সংযুক্ত করবেন তা জানতে, Firebase Android Codelab দেখুন।