MDC-103 অ্যান্ড্রয়েড: রঙ, উচ্চতা এবং প্রকারের সাথে উপাদানের থিমিং (কোটলিন)

১. ভূমিকা

logo_components_color_2x_web_96dp.png

ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop

কোডল্যাবস MDC-101 এবং MDC-102-এ, আপনারা ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ব্যবহার করে ‘Shrine’ নামক একটি অ্যাপের মূল কাঠামো তৈরি করেছেন। এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালির সামগ্রী বিক্রি করে। এই অ্যাপটিতে একটি ইউজার ফ্লো রয়েছে যা একটি লগইন স্ক্রিন দিয়ে শুরু হয় এবং ব্যবহারকারীকে হোম স্ক্রিনে নিয়ে যায়, যেখানে পণ্যগুলো প্রদর্শিত হয়।

ম্যাটেরিয়াল ডিজাইনের সাম্প্রতিক সম্প্রসারণ ডিজাইনার এবং ডেভেলপারদের তাদের পণ্যের ব্র্যান্ড প্রকাশ করার ক্ষেত্রে আরও বেশি নমনীয়তা দিয়েছে। আপনি এখন MDC ব্যবহার করে Shrine-কে কাস্টমাইজ করতে এবং এর অনন্য শৈলীকে ফুটিয়ে তুলতে পারেন।

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি নিম্নলিখিত বিষয়গুলো ব্যবহার করে Shrine-কে তার ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে কাস্টমাইজ করবেন:

  • রঙ
  • টাইপোগ্রাফি
  • উচ্চতা
  • লেআউট

21c025467527a18e.pngdcde66003cd51a5.png

এই কোডল্যাবে ব্যবহৃত MDC অ্যান্ড্রয়েড কম্পোনেন্ট এবং সাবসিস্টেমগুলো হলো:

  • থিম
  • টাইপোগ্রাফি
  • উচ্চতা

আপনার যা যা লাগবে

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

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

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

২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।

MDC-102 এর ধারাবাহিকতায়?

আপনি যদি MDC-102 সম্পন্ন করে থাকেন, তাহলে আপনার কোড এই কোডল্যাবের জন্য প্রস্তুত থাকা উচিত। সরাসরি ধাপ ৩-এ যান: রঙ পরিবর্তন করুন ।

স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন

স্টার্টার অ্যাপটি material-components-android-codelabs-103-starter/kotlin ডিরেক্টরিতে অবস্থিত। কাজ শুরু করার আগে অবশ্যই ওই ডিরেক্টরিতে cd ।

...অথবা গিটহাব থেকে এটি ক্লোন করুন

গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

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

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

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

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

প্রজেক্টটির জন্য 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. 'Select Deployment Target' উইন্ডোতে, আপনার উপলব্ধ ডিভাইসগুলোর তালিকায় যদি আগে থেকেই কোনো অ্যান্ড্রয়েড ডিভাইস তালিকাভুক্ত থাকে, তাহলে সরাসরি ধাপ ৮- এ চলে যান। অন্যথায়, 'Create New Virtual Device'-এ ক্লিক করুন।
  4. হার্ডওয়্যার নির্বাচন স্ক্রিনে, পিক্সেল ২-এর মতো একটি ফোন ডিভাইস নির্বাচন করুন এবং তারপরে পরবর্তী (Next) ক্লিক করুন।
  5. সিস্টেম ইমেজ স্ক্রিনে, একটি সাম্প্রতিক অ্যান্ড্রয়েড সংস্করণ নির্বাচন করুন, বিশেষত সর্বোচ্চ এপিআই লেভেলেরটি। যদি এটি ইনস্টল করা না থাকে, তবে প্রদর্শিত ডাউনলোড লিঙ্কে ক্লিক করুন এবং ডাউনলোডটি সম্পূর্ণ করুন।
  6. পরবর্তী ধাপে যান।
  7. অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস (AVD) স্ক্রিনে, সেটিংস অপরিবর্তিত রেখে ফিনিশ-এ ক্লিক করুন।
  8. ডেপ্লয়মেন্ট টার্গেট ডায়ালগ থেকে একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করুন।
  9. Ok ক্লিক করুন।
  10. অ্যান্ড্রয়েড স্টুডিও অ্যাপটি বিল্ড করে, ডেপ্লয় করে এবং টার্গেট ডিভাইসে স্বয়ংক্রিয়ভাবে খুলে দেয়।

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

249db074eff043f4.png

চলুন, টপ অ্যাপ বারের রঙ, উচ্চতা এবং টাইপোগ্রাফি পরিবর্তন করে এটিকে শ্রাইন ব্র্যান্ডের সাথে সামঞ্জস্যপূর্ণ করে তুলি।

৩. রং পরিবর্তন করুন

এই কালার থিমটি একজন ডিজাইনার নিজস্ব রঙ ব্যবহার করে তৈরি করেছেন (যা নিচের ছবিতে দেখানো হয়েছে)। এতে শ্রাইনের ব্র্যান্ড থেকে বাছাই করা রঙগুলো ম্যাটেরিয়াল থিম এডিটরে প্রয়োগ করা হয়েছে, যা সেগুলোকে প্রসারিত করে একটি পূর্ণাঙ্গ প্যালেট তৈরি করেছে। (এই রঙগুলো ২০১৪ সালের ম্যাটেরিয়াল কালার প্যালেট থেকে নেওয়া নয়।)

ম্যাটেরিয়াল থিম এডিটর সেগুলোকে সংখ্যাসূচক লেবেলযুক্ত শেডে সাজিয়েছে, যার মধ্যে প্রতিটি রঙের ৫০, ১০০, ২০০, .... থেকে ৯০০ পর্যন্ত লেবেল অন্তর্ভুক্ত রয়েছে। Shrine থিমটি গোলাপী সোয়াচ থেকে শুধুমাত্র ৫০, ১০০ ও ৩০০ এবং বাদামী সোয়াচ থেকে ৯০০ শেড ব্যবহার করে।

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi -nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ1HLdzGp-TIhg2ULijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4dzTg9uQHsmNG-BDTOd04e6_eRLs--Q

চলুন, ওই কালার স্কিমের সাথে সামঞ্জস্য রেখে টপ অ্যাপ বারের রঙ পরিবর্তন করি।

colorPrimaryDark এবং colorAccent সেট করুন

colors.xml ফাইলে নিচের লাইনগুলো পরিবর্তন করুন। colorAccent অ্যাট্রিবিউটটি অন্যান্য বিষয়ের পাশাপাশি টপ অ্যাপ বারের রঙ নিয়ন্ত্রণ করে এবং colorPrimaryDark অ্যাট্রিবিউটটি স্ট্যাটাস বারের রঙ নিয়ন্ত্রণ করে।

colors.xml 

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

স্ট্যাটাস বারে ডার্ক আইকন ব্যবহার করতে, Shrine-এর অ্যাপ থিম Theme.Shrine এ নিম্নলিখিতটি যোগ করুন:

স্টাইলস.এক্সএমএল 

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

<resources xmlns:tools="http://schemas.android.com/tools">

আপনার colors.xml এবং styles.xml দেখতে নিম্নলিখিতের মতো হওয়া উচিত:

colors.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

স্টাইলস.এক্সএমএল 

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

colors.xml ফাইলে, #442C2E রঙে সেট করা একটি নতুন textColorPrimary কালার রিসোর্স যোগ করুন এবং toolbarIconColor অ্যাট্রিবিউটটি আপডেট করে textColorPrimary কালারটিকে রেফারেন্স করুন।

আপনার styles.xml ফাইলটি আপডেট করে সেট করুন

আমরা এইমাত্র যে textColorPrimary রঙটি সংজ্ঞায়িত করেছি, তার অ্যাট্রিবিউট।

আরও একটি বিষয়: Widget.Shrine.Toolbar স্টাইলে android:theme অ্যাট্রিবিউটটি Theme.Shrine এ সেট করুন।

আপনার colors.xml এবং styles.xml দেখতে নিম্নলিখিতের মতো হওয়া উচিত:

colors.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

স্টাইলস.এক্সএমএল 

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

তৈরি করুন এবং চালান। আপনার প্রোডাক্ট গ্রিডটি এখন দেখতে এইরকম হবে:

c68792decc87341c.png

চলুন, আমাদের কালার স্কিমের সাথে মিলিয়ে লগইন স্ক্রিনের স্টাইলটি পরিবর্তন করি।

টেক্সট ফিল্ডগুলো স্টাইল করুন

চলুন, লগইন পেজের টেক্সট ইনপুটগুলোকে আউটলাইনযুক্ত করি এবং আমাদের লেআউটের জন্য আরও ভালো রং ব্যবহার করি।

আপনার colors.xml ফাইলে নিম্নলিখিত কালার রিসোর্সটি যোগ করুন:

colors.xml 

<color name="textInputOutlineColor">#FBB8AC</color>

আপনার styles.xml ফাইলে দুটি নতুন স্টাইল যোগ করুন:

স্টাইলস.এক্সএমএল 

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

অবশেষে, shr_login_fragment.xml ফাইলে আপনার উভয় TextInputLayout XML কম্পোনেন্টের style অ্যাট্রিবিউটে আপনার নতুন স্টাইলটি সেট করুন:

shr_login_fragment.xml 

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

বোতামের রঙগুলো সাজান

অবশেষে, লগইন পেজের বাটনগুলোর রঙ স্টাইল করুন। আপনার styles.xml ফাইলে নিম্নলিখিত স্টাইলগুলো যোগ করুন:

স্টাইলস.এক্সএমএল 

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Widget.Shrine.Button স্টাইলটি ডিফল্ট MaterialButton স্টাইল থেকে এক্সটেন্ড করে এবং বাটনের টেক্সটের রঙ ও ব্যাকগ্রাউন্ড টিন্ট পরিবর্তন করে। Widget.Shrine.Button.TextButton ডিফল্ট টেক্সট MaterialButton স্টাইল থেকে এক্সটেন্ড করে এবং শুধু টেক্সটের রঙ পরিবর্তন করে।

আপনার Next বাটনে Widget.Shrine.Button স্টাইল এবং Cancel বাটনে Widget.Shrine.Button.TextButton স্টাইলটি নিম্নরূপে সেট করুন:

shr_login_fragment.xml 

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

লগইন পেজে থাকা শ্রাইন লোগোর রঙ আপডেট করুন। এর জন্য shr_logo.xml ভেক্টর ড্রয়েবলটিতে একটি ছোট পরিবর্তন করতে হবে। ড্রয়েবল ফাইলটি খুলুন এবং android:fillAlpha প্রপার্টিটির মান 1-এ পরিবর্তন করুন। ড্রয়েবলটি দেখতে নিচের মতো হবে:

shr_logo.xml 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

এরপর, shr_login_fragment.xml ফাইলের লোগো <ImageView> -তে android:tint অ্যাট্রিবিউটটি ?android:attr/textColorPrimary সেট করুন, যেমনটা নিচে দেখানো হয়েছে:

shr_login_fragment.xml 

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

বিল্ড করে রান করুন। আপনার লগইন স্ক্রিনটি এখন দেখতে এইরকম হবে:

b245ce47418aa2d9.png

৪. টাইপোগ্রাফি এবং লেবেল শৈলী পরিবর্তন করুন

রঙ পরিবর্তনের পাশাপাশি, আপনার ডিজাইনার সাইটে ব্যবহারের জন্য নির্দিষ্ট টাইপোগ্রাফিও দিয়েছেন। চলুন, টপ অ্যাপ বারেও সেটি যোগ করে দিই।

শীর্ষ অ্যাপ বারটি স্টাইল করুন

আপনার ডিজাইনারের দেওয়া স্পেসিফিকেশন অনুযায়ী আপনার টপ অ্যাপ বারের টেক্সটের চেহারা স্টাইল করুন। styles.xml এ নিম্নলিখিত টেক্সট অ্যাপিয়ারেন্স স্টাইলটি যোগ করুন, এবং আপনার Widget.Shrine.Toolbar স্টাইলে এই স্টাইলটিকে রেফারেন্স করার জন্য titleTextAppearance প্রপার্টি সেট করুন।

স্টাইলস.এক্সএমএল 

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

আপনার colors.xml এবং styles.xml দেখতে নিম্নলিখিতের মতো হওয়া উচিত:

colors.xml 

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

স্টাইলস.এক্সএমএল 

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

লেবেলগুলো স্টাইল করুন

আমরা প্রোডাক্ট কার্ডের লেবেলগুলোকে এমনভাবে স্টাইল করব যাতে লেখার সঠিক বিন্যাস থাকে এবং সেগুলো কার্ডের মধ্যে আনুভূমিকভাবে কেন্দ্রিক হয়।

আপনার টাইটেল লেবেলের টাইপোগ্রাফি textAppearanceHeadline6 থেকে textAppearanceSubtitle2 এ নিম্নরূপভাবে আপডেট করুন:

shr_product_card.xml 

<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/textAppearanceSubtitle2" />

ইমেজ লেবেলগুলিকে কেন্দ্রে আনতে, shr_product_card.xml ফাইলের <TextView> লেবেলগুলিতে android:textAlignment="center" অ্যাট্রিবিউটটি সেট করে পরিবর্তন করুন:

shr_product_card.xml 

<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:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

বিল্ড করুন এবং রান করুন। আপনার প্রোডাক্ট গ্রিড স্ক্রিনটি এখন দেখতে এইরকম হবে:

40f888948c67fcfa.png

চলুন লগইন স্ক্রিনের টাইপোগ্রাফিটাও মিলিয়ে পরিবর্তন করে দিই।

লগইন স্ক্রিনের ফন্ট পরিবর্তন করুন

styles.xml ফাইলে নিম্নলিখিত স্টাইলটি যোগ করুন:

স্টাইলস.এক্সএমএল 

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

shr_login_fragment.xml ফাইলে, আপনার "SHRINE" টাইটেল <TextView> তে নতুন স্টাইলটি সেট করুন (এবং সেখানে থাকা textAllCaps ও textSize অ্যাট্রিবিউটগুলো মুছে দিন):

shr_login_fragment.xml 

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

বিল্ড করে রান করুন। আপনার লগইন স্ক্রিনটি এখন দেখতে এইরকম হবে:

79c0617998f7320c.png

৫. উচ্চতা সমন্বয় করুন

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

পণ্যের গ্রিড উচ্চতা পরিবর্তন করুন

কন্টেন্টকে টপ অ্যাপ বারের উপরে ভাসমান একটি শীটের মতো দেখাতে, টপ অ্যাপ বারের এলিভেশন পরিবর্তন করুন। shr_product_grid_fragment.xml ফাইলে আপনার AppBarLayout এ app:elevation অ্যাট্রিবিউট এবং NestedScrollView XML কম্পোনেন্টগুলিতে android:elevation অ্যাট্রিবিউট নিম্নোক্তভাবে যোগ করুন:

shr_product_grid_fragment.xml 

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <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:elevation="8dp"
   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_card.xml ফাইলে app:cardElevation 2dp থেকে 0dp তে পরিবর্তন করে প্রতিটি কার্ডের এলিভেশন অ্যাডজাস্ট করুন। সেই সাথে, app:cardBackgroundColor কেও @android:color/transparent এ পরিবর্তন করুন।

shr_product_card.xml 

<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/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

দেখুন! আপনি প্রোডাক্ট গ্রিড পেজের প্রতিটি কার্ডের উচ্চতা সমন্বয় করেছেন।

8f84efe4b1f8ccfc.png

পরবর্তী বাটনের উচ্চতা পরিবর্তন করুন

styles.xml ফাইলে, আপনার Widget.Shrine.Button স্টাইলে নিম্নলিখিত প্রপার্টিটি যোগ করুন:

স্টাইলস.এক্সএমএল 

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

Button স্টাইলে android:stateListAnimator সেট করলে নেক্সট বাটনটি আমাদের দেওয়া অ্যানিমেটরটি ব্যবহার করবে।

বিল্ড করে রান করুন। আপনার লগইন স্ক্রিনটি এখন দেখতে এইরকম হবে:

1b7a3df5739d0135.png

৬. লেআউট পরিবর্তন করুন

চলুন লেআউটটি পরিবর্তন করে কার্ডগুলোকে বিভিন্ন আকৃতি ও অনুপাতে দেখাই, যাতে প্রতিটি কার্ড অন্যগুলো থেকে স্বতন্ত্র দেখায়।

একটি স্ট্যাগারড RecyclerView অ্যাডাপ্টার ব্যবহার করুন

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

এই নতুন অ্যাডাপ্টারটি ব্যবহার করার জন্য, আপনার ProductGridFragment.kt ফাইলের onCreateView() মেথডটি পরিবর্তন করুন। "set up the RecyclerView " কমেন্টের পরের কোড ব্লকটি নিচের কোড দিয়ে প্রতিস্থাপন করুন:

ProductGridFragment.kt 

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

আমাদের NestedScrollView থেকে প্যাডিংগুলো সরানোর জন্য shr_product_grid_fragment.xml ফাইলটিতেও একটি ছোট পরিবর্তন করতে হবে, যা নিম্নরূপ:

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"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

অবশেষে, আমরা ProductGridItemDecoration.kt পরিবর্তন করে RecyclerView মধ্যে আমাদের কার্ড প্যাডিংও ঠিক করব। ProductGridItemDecoration.kt ফাইলের getItemOffsets() মেথডটি নিম্নরূপভাবে পরিবর্তন করুন:

ProductGridItemDecoration.kt 

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

বিল্ড করুন এবং চালান। প্রোডাক্ট গ্রিড আইটেমগুলো এখন এলোমেলোভাবে সাজানো থাকবে:

b1b95bc028c1d52e.png

৭. অন্য একটি থিম চেষ্টা করুন

আপনার ব্র্যান্ডকে তুলে ধরার জন্য রঙ একটি শক্তিশালী মাধ্যম, এবং রঙের সামান্য পরিবর্তনও আপনার ব্যবহারকারীর অভিজ্ঞতার উপর বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করার জন্য, চলুন দেখি ব্র্যান্ডটির রঙের বিন্যাস সম্পূর্ণ ভিন্ন হলে Shrine-কে কেমন দেখাতো।

শৈলী এবং রং পরিবর্তন করুন

styles.xml ফাইলে নিম্নলিখিত নতুন থিমটি যোগ করুন:

স্টাইলস.এক্সএমএল 

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

এবং আপনার অ্যাপ্লিকেশনের AndroidManifest.xml ফাইলে এই নতুন থিমটি ব্যবহার করুন:

AndroidManifest.xml 

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

নিচে দেখানো অনুযায়ী colors.xml ফাইলে টুলবার আইকনের রঙ পরিবর্তন করুন:

colors.xml 

<color name="toolbarIconColor">#FFFFFF</color>

এরপরে, হার্ড কোড না করে, আমাদের টুলবার স্টাইলের android:theme অ্যাট্রিবিউটে বর্তমান থিমটি উল্লেখ করার জন্য "?theme" অ্যাট্রিবিউটটি ব্যবহার করুন:

স্টাইলস.এক্সএমএল 

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

এরপরে, লগইন স্ক্রিনের টেক্সট ফিল্ডগুলোর হিন্ট টেক্সটের রঙ হালকা করুন। টেক্সট ফিল্ডগুলোর স্টাইলে android:textColorHint অ্যাট্রিবিউটটি যোগ করুন:

স্টাইলস.এক্সএমএল 

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

বিল্ড করে রান করুন। নতুন থিমটি এখন আপনার প্রিভিউ করার জন্য প্রদর্শিত হবে।

3ff84b14592ecc17.png

3fa1e3b4723d9765.png

MDC-104-এ যাওয়ার আগে এই বিভাগে পরিবর্তিত কোডটি পূর্বাবস্থায় ফিরিয়ে আনুন।

৮. পুনরালোচনা

এতক্ষণে আপনি এমন একটি অ্যাপ তৈরি করে ফেলেছেন যা আপনার ডিজাইনারের দেওয়া ডিজাইন স্পেসিফিকেশনের অনুরূপ।

পরবর্তী পদক্ষেপ

আপনি থিম, টাইপোগ্রাফি এবং এলিভেশন—এই MDC উপাদানগুলো ব্যবহার করেছেন। আপনি [MDC ওয়েব লাইব্রেরিতে] আরও উপাদান এবং সাবসিস্টেম অন্বেষণ করতে পারেন।

আপনার পরিকল্পিত অ্যাপ ডিজাইনে যদি এমন কোনো উপাদান থাকে যার কম্পোনেন্ট MDC লাইব্রেরিতে নেই, তাহলে কী হবে? MDC-104: Material Design Advanced Components কোর্সে আমরা আলোচনা করব, কীভাবে একটি নির্দিষ্ট চেহারা ফুটিয়ে তোলার জন্য MDC লাইব্রেরি ব্যবহার করে কাস্টম কম্পোনেন্ট তৈরি করতে হয়।

আমি যুক্তিসঙ্গত সময় ও শ্রম দিয়ে এই কোডল্যাবটি সম্পন্ন করতে পেরেছি।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ দ্বিমত তীব্রভাবে দ্বিমত পোষণ করি।

আমি ভবিষ্যতে ম্যাটেরিয়াল কম্পোনেন্টস ব্যবহার করা চালিয়ে যেতে চাই।

দৃঢ়ভাবে একমত একমত নিরপেক্ষ দ্বিমত তীব্রভাবে দ্বিমত পোষণ করি।