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

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

1. ভূমিকা

লোগো_কম্পোনেন্ট_রঙ_২x_ওয়েব_৯৬ডিপি.পিএনজি

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

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

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

তুমি কী তৈরি করবে

এই কোডল্যাবে, আপনি Shrine কে এর ব্র্যান্ড প্রতিফলিত করার জন্য কাস্টমাইজ করতে পারবেন:

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

21c025467527a18e.png সম্পর্কে dcde66003cd51a5.png সম্পর্কে

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

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

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

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

তোমার যা লাগবে

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

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

নবীন

মধ্যবর্তী

দক্ষ

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

MDC-102 থেকে চালিয়ে যাচ্ছেন?

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

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

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

...অথবা GitHub থেকে ক্লোন করুন

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

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 অনুসন্ধান করুন)।
অ্যান্ড্রয়েড স্টুডিও উইন্ডোর নীচের দিকে কার্যকলাপ নির্দেশকগুলি যেমনটি দেখায়, অ্যান্ড্রয়েড স্টুডিওটি প্রকল্পটি তৈরি এবং সিঙ্ক করার জন্য কিছুক্ষণ অপেক্ষা করুন।
এই মুহুর্তে, Android Studio-তে কিছু বিল্ড ত্রুটি দেখা দিতে পারে কারণ আপনার Android SDK বা বিল্ড টুলগুলি, যেমন নীচে দেখানো হয়েছে, অনুপস্থিত। এগুলি ইনস্টল/আপডেট করতে এবং আপনার প্রকল্প সিঙ্ক করতে Android Studio-তে নির্দেশাবলী অনুসরণ করুন।

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 উইন্ডোতে, যদি আপনার উপলব্ধ ডিভাইসগুলিতে ইতিমধ্যেই একটি Android ডিভাইস তালিকাভুক্ত থাকে, তাহলে ধাপ 8 এ যান। অন্যথায়, Create New Virtual Device এ ক্লিক করুন।
হার্ডওয়্যার নির্বাচন করুন স্ক্রিনে, একটি ফোন ডিভাইস নির্বাচন করুন, যেমন Pixel 2 , এবং তারপর Next এ ক্লিক করুন।
সিস্টেম ইমেজ স্ক্রিনে, একটি সাম্প্রতিক অ্যান্ড্রয়েড সংস্করণ নির্বাচন করুন, বিশেষ করে সর্বোচ্চ API স্তরের। যদি এটি ইনস্টল না করা থাকে, তাহলে প্রদর্শিত ডাউনলোড লিঙ্কে ক্লিক করুন এবং ডাউনলোড সম্পূর্ণ করুন।
পরবর্তী ক্লিক করুন।
অ্যান্ড্রয়েড ভার্চুয়াল ডিভাইস (AVD) স্ক্রিনে, সেটিংস যেমন আছে তেমনই রেখে Finish এ ক্লিক করুন।
ডিপ্লয়মেন্ট টার্গেট ডায়লগ থেকে একটি অ্যান্ড্রয়েড ডিভাইস নির্বাচন করুন।
ঠিক আছে ক্লিক করুন।
অ্যান্ড্রয়েড স্টুডিও অ্যাপটি তৈরি করে, স্থাপন করে এবং স্বয়ংক্রিয়ভাবে টার্গেট ডিভাইসে এটি খোলে।

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

2128554f70f7b1d0.png সম্পর্কে

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

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

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

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

wlq5aH94SfU47pcalUqOSK57OCX4HnJJTpMVzVrBZreUOE-CrkX2akKrnTbgwf6BQNMBi -nn16jpgQHDeQZixTCeh1A0qTXcxDMTcc2-e6uJg0LPjkXWEVlV7cwS0U1naqpnHToEIQ 1HLdzGp-TIhg2UlijquMw_KQdk18b080CVQN_oECAhiCnFI11Nm3nbcsCIXvZBXULMajAW9NEmGZ7iR_j-eEF6NiODuaike96xVpLwUIzfV4dzTg9uQHsmNG-BDTOd04e6_eRLs--Q

উপরের অ্যাপ বারের রঙ পরিবর্তন করে সেই রঙের স্কিমটি প্রতিফলিত করা যাক।

রঙ সেট করুন প্রাইমারিডার্ক এবং রঙঅ্যাক্সেন্ট

colors.xml এ, নিম্নলিখিত লাইনগুলি পরিবর্তন করুন। colorAccent অ্যাট্রিবিউট অন্যান্য জিনিসের মধ্যে উপরের অ্যাপ বারের রঙ নিয়ন্ত্রণ করে এবং colorPrimaryDark অ্যাট্রিবিউট স্ট্যাটাস বারের রঙ নিয়ন্ত্রণ করে।

colors.xml সম্পর্কে

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

স্ট্যাটাস বারে গাঢ় আইকন ব্যবহার করতে, Theme.Shrine , 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 রঙের রিসোর্স যোগ করুন, এবং textColorPrimary রঙের রেফারেন্সের জন্য toolbarIconColor অ্যাট্রিবিউট আপডেট করুন।

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

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

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 কম্পোনেন্টের উভয়ের স্টাইল অ্যাট্রিবিউটকে আপনার নতুন স্টাইলে সেট করুন:

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 স্টাইল থেকে প্রসারিত হয় এবং কেবল 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>

লগইন পৃষ্ঠায় Shrine লোগোর রঙ আপডেট করুন। এর জন্য ভেক্টর ড্রয়েবল, 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 সম্পর্কে

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

আপনার ব্র্যান্ডকে আরও ভালোভাবে প্রকাশ করার জন্য আপনি আপনার UI-তে রঙ কাস্টমাইজ করতে পারেন।
দুটি রঙ (আপনার প্রাথমিক এবং মাধ্যমিক রঙ) দিয়ে শুরু করে একটি রঙ প্যালেট তৈরি করুন, সেই রঙগুলির হালকা এবং গাঢ় বৈচিত্র্য সহ। অথবা প্যালেট তৈরি করতে ম্যাটেরিয়াল ডিজাইন প্যালেট টুল ব্যবহার করুন।
তোমার টাইপোগ্রাফির রঙটা ভুলো না!
নিশ্চিত করুন যে টেক্সট-টু-ব্যাকগ্রাউন্ড রঙের বৈপরীত্য একটি অ্যাক্সেসযোগ্য অনুপাতের মধ্যে রয়েছে (বড় টাইপের জন্য 3:1, ছোট টাইপের জন্য 4.5:1)।

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

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

উপরের অ্যাপ বারটি স্টাইল করুন

আপনার ডিজাইনারের দেওয়া স্পেসিফিকেশনের সাথে মেলে আপনার উপরের অ্যাপ বারের টেক্সট অ্যাপিয়েন্স স্টাইল করুন। 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> s লেবেলটি পরিবর্তন করে 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 সম্পর্কে

৫. উচ্চতা সামঞ্জস্য করুন

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

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

উপরের অ্যাপ বার এবং কন্টেন্টের উচ্চতা পরিবর্তন করা যাক যাতে মনে হয় কন্টেন্টটি উপরের অ্যাপ বারের উপরে ভাসমান একটি শীটে আছে। আপনার AppBarLayout এ app:elevation অ্যাট্রিবিউট এবং shr_product_grid_fragment.xml এ আপনার 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">

একবার দেখে নাও! তুমি পণ্য গ্রিড পৃষ্ঠার প্রতিটি কার্ডের উচ্চতা সামঞ্জস্য করেছ।

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 সেট করলে আমাদের দেওয়া অ্যানিমেটরটি ব্যবহার করার জন্য Next বোতামটি সেট হয়।

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

1b7a3df5739d0135.png সম্পর্কে

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

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

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

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

একটি স্ট্যাগার্ড রিসাইক্লারভিউ অ্যাডাপ্টার ব্যবহার করুন

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

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

প্রোডাক্টগ্রিডফ্রেগমেন্ট.জাভা

// 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() পদ্ধতিটি নিম্নরূপ পরিবর্তন করুন:

প্রোডাক্টগ্রিডআইটেমডেকোরেশন.জাভা

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

তৈরি করুন এবং চালান। পণ্য গ্রিড আইটেমগুলি এখন স্তব্ধ করা উচিত:

b1b95bc028c1d52e.png সম্পর্কে

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

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

স্টাইল এবং রঙ পরিবর্তন করুন

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 তে, আপনার অ্যাপ্লিকেশনে এই নতুন থিমটি ব্যবহার করুন:

অ্যান্ড্রয়েডম্যানিফেস্ট.এক্সএমএল

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

তৈরি করুন এবং চালান। নতুন থিমটি এখন আপনার প্রিভিউয়ের জন্য উপস্থিত হওয়া উচিত।

3ff84b14592ecc17.png সম্পর্কে

3fa1e3b4723d9765.png সম্পর্কে

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

৮. সংক্ষিপ্তসার

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

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

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

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

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

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

একমত

নিরপেক্ষ

অসম্মতি

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

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

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

একমত

নিরপেক্ষ

অসম্মতি

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

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

1. ভূমিকা

তুমি কী তৈরি করবে

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

তোমার যা লাগবে

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

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

MDC-102 থেকে চালিয়ে যাচ্ছেন?

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

...অথবা GitHub থেকে ক্লোন করুন

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

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

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

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

রঙ সেট করুন প্রাইমারিডার্ক এবং রঙঅ্যাক্সেন্ট

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

বোতামের রঙগুলি স্টাইল করুন

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

উপরের অ্যাপ বারটি স্টাইল করুন

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

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

৫. উচ্চতা সামঞ্জস্য করুন

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

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

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

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

একটি স্ট্যাগার্ড রিসাইক্লারভিউ অ্যাডাপ্টার ব্যবহার করুন

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

স্টাইল এবং রঙ পরিবর্তন করুন

৮. সংক্ষিপ্তসার

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

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

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