এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

MDC-103 অ্যান্ড্রয়েড: রঙ, গতি এবং প্রকার (জাভা) সহ উপাদান থিমিং

১. ভূমিকা

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

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

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

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

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

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

এটি ৪টি কোডল্যাবের মধ্যে তৃতীয়টি, যা আপনাকে Shrine নামক একটি অ্যাপ তৈরি করতে নির্দেশনা দেবে। এটি একটি ই-কমার্স অ্যাপ যা পোশাক এবং গৃহস্থালির সামগ্রী বিক্রি করে। সম্পর্কিত কোডল্যাবগুলো এখানে পাওয়া যাবে।

MDC 104 শেষে আপনি এইরকম একটি অ্যাপ তৈরি করবেন:

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

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

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

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

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

শিক্ষানবিশ

মধ্যবর্তী

দক্ষ

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

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

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

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

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

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

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

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

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

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

F5H6srsw_5xOPGFpKrm1RwgewatxA_HUbDI1PWoQUAoJcT6DpfBOkAYwq3S-2vUHvweUa FgAmG7BtUKkGouUbhTwXQh53qec8tO5eVecdlo7QIoLc8rNxFEBb8l7RlS-KzBbZOzVhA

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

প্রজেক্টটির জন্য 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'
}

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

নিশ্চিত করুন যে রান / প্লে বাটনের বাম দিকের বিল্ড কনফিগারেশনটি app হিসেবে সেট করা আছে।
অ্যাপটি বিল্ড ও রান করতে সবুজ রান / প্লে বাটনটি চাপুন।
'Select Deployment Target' উইন্ডোতে, আপনার উপলব্ধ ডিভাইসগুলোর তালিকায় যদি আগে থেকেই কোনো অ্যান্ড্রয়েড ডিভাইস তালিকাভুক্ত থাকে, তাহলে সরাসরি ধাপ ৮- এ চলে যান। অন্যথায়, 'Create New Virtual Device'-এ ক্লিক করুন।
হার্ডওয়্যার নির্বাচন স্ক্রিনে, পিক্সেল ২-এর মতো একটি ফোন ডিভাইস নির্বাচন করুন এবং তারপরে পরবর্তী (Next) ক্লিক করুন।
সিস্টেম ইমেজ স্ক্রিনে, একটি সাম্প্রতিক অ্যান্ড্রয়েড সংস্করণ নির্বাচন করুন, বিশেষত সর্বোচ্চ এপিআই লেভেলেরটি। যদি এটি ইনস্টল করা না থাকে, তবে প্রদর্শিত ডাউনলোড লিঙ্কে ক্লিক করুন এবং ডাউনলোডটি সম্পূর্ণ করুন।
পরবর্তী ধাপে যান।
অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস (AVD) স্ক্রিনে, সেটিংস অপরিবর্তিত রেখে ফিনিশ-এ ক্লিক করুন।
ডেপ্লয়মেন্ট টার্গেট ডায়ালগ থেকে একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করুন।
Ok ক্লিক করুন।
অ্যান্ড্রয়েড স্টুডিও অ্যাপটি বিল্ড করে, ডেপ্লয় করে এবং টার্গেট ডিভাইসে স্বয়ংক্রিয়ভাবে খুলে দেয়।

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

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

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

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

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

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi -nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ 1HLdzGp-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>

আপনার 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 ফাইলটি আপডেট করে android:textColorPrimary অ্যাট্রিবিউটটিকে textColorPrimary কালারে সেট করুন।

Theme.Shrine এ android: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>

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

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

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

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

আপনার 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" />

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

রঙ এবং থিম সম্পর্কিত নোট:

আপনার ব্র্যান্ডকে আরও ভালোভাবে ফুটিয়ে তুলতে আপনি আপনার UI-এর রঙ কাস্টমাইজ করতে পারেন।
আপনার প্রাথমিক ও মাধ্যমিক রঙ দিয়ে একটি কালার প্যালেট তৈরি করুন, যেখানে সেই রঙগুলোর হালকা ও গাঢ় বিভিন্ন শেড থাকবে। অথবা, প্যালেট তৈরি করার জন্য ম্যাটেরিয়াল ডিজাইন প্যালেট টুল ব্যবহার করুন।
আপনার টাইপোগ্রাফির রঙটি ভুলবেন না!
নিশ্চিত করুন যে লেখা ও পটভূমির রঙের বৈসাদৃশ্য একটি সুলভ অনুপাতে থাকে (বড় অক্ষরের জন্য ৩:১, ছোট অক্ষরের জন্য ৪.৫:১)।

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

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

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

আপনার ডিজাইনারের দেওয়া স্পেসিফিকেশন অনুযায়ী আপনার টপ অ্যাপ বারের টেক্সটের চেহারা স্টাইল করুন। 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>

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

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

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

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

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

এখন যেহেতু আপনি 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.appcompat.app.AlertController.RecycleListView
       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.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">

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

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

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

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

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

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

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

উচ্চতা সম্পর্কে টীকা:

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

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

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

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

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

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

ProductGridFragment.java

// Set up the RecyclerView
RecyclerView recyclerView = view.findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.HORIZONTAL, false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
   @Override
   public int getSpanSize(int position) {
       return position % 3 == 2 ? 2 : 1;
   }
});
recyclerView.setLayoutManager(gridLayoutManager);
StaggeredProductCardRecyclerViewAdapter adapter = new StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(getResources()));
recyclerView.setAdapter(adapter);
int largePadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large);
int smallPadding = getResources().getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small);
recyclerView.addItemDecoration(new ProductGridItemDecoration(largePadding, smallPadding));

আমাদের NestedScrollView থেকে প্যাডিংগুলো সরানোর জন্য 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.java পরিবর্তন করে RecyclerView মধ্যে আমাদের কার্ড প্যাডিংও ঠিক করব। ProductGridItemDecoration.java এর getItemOffsets() মেথডটি নিম্নরূপভাবে পরিবর্তন করুন:

ProductGridItemDecoration.java

@Override
public void getItemOffsets(Rect outRect, View view,
                          RecyclerView parent, RecyclerView.State state) {
   outRect.left = smallPadding;
   outRect.right = largePadding;
}

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

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

আপনার ব্র্যান্ডকে তুলে ধরার জন্য রঙ একটি শক্তিশালী মাধ্যম, এবং রঙের সামান্য পরিবর্তনও আপনার ব্যবহারকারীর অভিজ্ঞতার উপর বড় প্রভাব ফেলতে পারে। এটি পরীক্ষা করার জন্য, চলুন দেখি ব্র্যান্ডটির রঙের বিন্যাস সম্পূর্ণ ভিন্ন হলে 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.java.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>

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

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

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

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

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

আপনি থিম, টাইপোগ্রাফি এবং এলিভেশন-এর মতো MDC কম্পোনেন্টগুলো ব্যবহার করেছেন। আপনি MDC Android-এর MDC-Android ক্যাটালগ কম্পোনেন্টগুলোতে আরও অনেক কম্পোনেন্ট অন্বেষণ করতে পারেন।

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

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

দৃঢ়ভাবে একমত

একমত

নিরপেক্ষ

দ্বিমত

তীব্রভাবে দ্বিমত পোষণ করি।

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

দৃঢ়ভাবে একমত

একমত

নিরপেক্ষ

দ্বিমত

তীব্রভাবে দ্বিমত পোষণ করি।

১. ভূমিকা

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

কার্ডের উচ্চতা (এবং রঙ) পরিবর্তন করুন

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

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

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

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

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

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

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

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

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