MDC-104 Android: ম্যাটেরিয়াল অ্যাডভান্সড কম্পোনেন্টস (জাভা)

logo_components_color_2x_web_96dp.png

ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সহায়তা করে। Google-এ ইঞ্জিনিয়ার এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান রয়েছে এবং এটি Android, iOS, ওয়েব এবং Flutter-এর জন্য উপলব্ধ।

material.io/develop

কোডল্যাব MDC-103-এ, আপনি আপনার অ্যাপের স্টাইল করার জন্য মেটেরিয়াল কম্পোনেন্টস (MDC) এর রঙ, উচ্চতা এবং টাইপোগ্রাফি কাস্টমাইজ করেছেন।

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

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

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

আপনি কি নির্মাণ করবেন

এই কোডল্যাবে, আপনি শ্রীনে একটি পটভূমি যোগ করবেন। এটি বিভাগ অনুসারে অসমমিত গ্রিডে প্রদর্শিত পণ্যগুলিকে ফিল্টার করবে। আপনি ব্যবহার করবেন:

  • আকৃতি
  • গতি
  • ঐতিহ্যগত Android SDK ক্লাস

এই কোডল্যাবে এমডিসি-অ্যান্ড্রয়েড উপাদান

  • আকৃতি

আপনি কি প্রয়োজন হবে

  • অ্যান্ড্রয়েড বিকাশের প্রাথমিক জ্ঞান
  • অ্যান্ড্রয়েড স্টুডিও (যদি আপনার কাছে এটি ইতিমধ্যে না থাকে তবে এটি এখানে ডাউনলোড করুন)
  • একটি অ্যান্ড্রয়েড এমুলেটর বা ডিভাইস (অ্যান্ড্রয়েড স্টুডিওর মাধ্যমে উপলব্ধ)
  • নমুনা কোড (পরবর্তী ধাপ দেখুন)

অ্যান্ড্রয়েড অ্যাপ তৈরি করার অভিজ্ঞতার স্তরকে আপনি কীভাবে রেট করবেন?

নবজাতক মধ্যবর্তী দক্ষ

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

অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার কোড লোড করুন

  1. একবার সেটআপ উইজার্ড শেষ হয়ে গেলে এবং Android স্টুডিওতে স্বাগতম উইন্ডোটি দেখানো হলে, একটি বিদ্যমান অ্যান্ড্রয়েড স্টুডিও প্রকল্প খুলুন ক্লিক করুন। আপনি যে ডিরেক্টরিতে নমুনা কোড ইনস্টল করেছেন সেখানে নেভিগেট করুন এবং শ্রাইন প্রকল্প খুলতে java -> shrine (বা আপনার কম্পিউটারে shrine অনুসন্ধান করুন) নির্বাচন করুন।
  2. অ্যান্ড্রয়েড স্টুডিওর জন্য একটি মুহূর্ত অপেক্ষা করুন যাতে অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের অংশে অ্যাক্টিভিটি সূচকগুলি দেখানো হয়।
  3. এই মুহুর্তে, Android Studio কিছু বিল্ড ত্রুটি বাড়াতে পারে কারণ আপনি Android SDK বা বিল্ড টুল মিস করছেন, যেমন নীচে দেখানো একটি। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android স্টুডিওতে নির্দেশাবলী অনুসরণ করুন।

প্রকল্প নির্ভরতা যোগ করুন

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

  1. app মডিউলের build.gradle ফাইলে নেভিগেট করুন এবং নিশ্চিত করুন যে dependencies ব্লকে MDC Android এর উপর নির্ভরতা অন্তর্ভুক্ত রয়েছে:
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (ঐচ্ছিক) প্রয়োজন হলে, নিম্নলিখিত নির্ভরতা যোগ করতে 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'
}

স্টার্টার অ্যাপটি চালান

  1. রান/প্লে বোতামের বাম দিকের বিল্ড কনফিগারেশনটি app কিনা তা নিশ্চিত করুন।
  2. অ্যাপটি তৈরি এবং চালাতে সবুজ রান/প্লে বোতাম টিপুন ।
  3. ডিপ্লয়মেন্ট টার্গেট নির্বাচন করুন উইন্ডোতে, যদি আপনার উপলব্ধ ডিভাইসগুলিতে ইতিমধ্যেই তালিকাভুক্ত একটি অ্যান্ড্রয়েড ডিভাইস থাকে, তাহলে ধাপ 8 এ যান। অন্যথায়, নতুন ভার্চুয়াল ডিভাইস তৈরি করুন ক্লিক করুন।
  4. হার্ডওয়্যার নির্বাচন করুন স্ক্রিনে, একটি ফোন ডিভাইস নির্বাচন করুন, যেমন পিক্সেল 2 , এবং তারপরে পরবর্তী ক্লিক করুন।
  5. সিস্টেম ইমেজ স্ক্রিনে, একটি সাম্প্রতিক Android সংস্করণ নির্বাচন করুন, বিশেষত সর্বোচ্চ API স্তর। এটি ইনস্টল করা না থাকলে, দেখানো ডাউনলোড লিঙ্কটিতে ক্লিক করুন এবং ডাউনলোডটি সম্পূর্ণ করুন।
  6. পরবর্তী ক্লিক করুন.
  7. অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস (AVD) স্ক্রিনে, সেটিংস যেমন আছে তেমনই রেখে দিন এবং ফিনিশ -এ ক্লিক করুন।
  8. স্থাপনার লক্ষ্য ডায়ালগ থেকে একটি Android ডিভাইস নির্বাচন করুন।
  9. ওকে ক্লিক করুন।
  10. অ্যান্ড্রয়েড স্টুডিও অ্যাপটি তৈরি করে, এটি স্থাপন করে এবং স্বয়ংক্রিয়ভাবে লক্ষ্য ডিভাইসে খোলে।

সফলতার ! আপনার ডিভাইসে শ্রাইন অ্যাপটি চলমান দেখতে হবে।

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

গ্রিড বিষয়বস্তু গোপন

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 এ, AppBarLayout FrameLayout উপাদান হিসেবে নিম্নলিখিতটি যোগ করুন:

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 এ, নিম্নলিখিত যোগ করুন:

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>

এবং এই তালিকাটি একটি <include> ট্যাগ ব্যবহার করে LinearLayout এ যোগ করা shr_product_grid_fragment.xml এ যোগ করুন:

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 এ প্রোগ্রাম্যাটিকভাবে ব্যাকগ্রাউন্ড সেট করুন। রিটার্ন স্টেটমেন্টের ঠিক আগে, onCreateView() এর শেষে পটভূমি সেট করতে নিম্নলিখিত যুক্তি যোগ করুন:

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>

নির্মাণ এবং চালান:

আমরা শ্রাইনকে এর প্রাথমিক পৃষ্ঠে একটি কাস্টম স্টাইলযুক্ত আকৃতি দিয়েছি। পৃষ্ঠের উচ্চতার কারণে, ব্যবহারকারীরা দেখতে পারেন যে সামনের সাদা স্তরটির ঠিক পিছনে কিছু আছে। চলুন গতি যোগ করি যাতে ব্যবহারকারীরা দেখতে পারেন সেখানে কী আছে: মেনু।

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

মেনু বোতামে রিভিল মোশন যোগ করুন

গতি হল সামনের আকৃতি যা সোজা নিচে চলে যাচ্ছে। আমরা ইতিমধ্যেই আপনার জন্য একটি ক্লিক শ্রোতা প্রদান করেছি যা শীটের অনুবাদ অ্যানিমেশন সম্পন্ন করবে, NavigationIconClickListener.java এ। আমরা ProductGridFragment.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_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" />

যখন মেনু খোলা থাকে এবং যখন এটি বন্ধ থাকে setupToolbar() ProductGridFragment.java :

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-এ আরও বেশি উপাদান অন্বেষণ করতে পারেন।

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

একটি কার্যকরী ব্যাকএন্ডের জন্য এই অ্যাপটিকে কীভাবে Firebase-এর সাথে সংযুক্ত করবেন তা শিখতে, Firebase Android Codelab দেখুন।

আমি যুক্তিসঙ্গত সময় এবং প্রচেষ্টার সাথে এই কোডল্যাবটি সম্পূর্ণ করতে সক্ষম হয়েছি

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে অসম্মতি

আমি ভবিষ্যতে উপাদান উপাদান ব্যবহার চালিয়ে যেতে চাই

দৃঢ়ভাবে একমত একমত নিরপেক্ষ অসম্মতি দৃঢ়ভাবে অসম্মতি