আপনার অ্যাপে গতিশীল রঙ যোগ করা হচ্ছে

১. শুরু করার আগে

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

পূর্বশর্ত

ডেভেলপারদের হওয়া উচিত

• অ্যান্ড্রয়েডে থিমিং-এর প্রাথমিক ধারণা সম্পর্কে পরিচিত।
• অ্যাপের থিম পরিবর্তন করতে স্বচ্ছন্দ।

আপনি যা শিখবেন

• বিদ্যমান উপাদানসমূহ এবং উপাদান ৩ থিমগুলির মধ্যে কীভাবে পার্থক্য করা যায়
• কীভাবে একটি থিমকে ম্যাটেরিয়াল ৩-এ আপডেট করবেন
• আমাদের টুল ব্যবহার করে কীভাবে থিম তৈরি ও প্রয়োগ করবেন
• থিমের বৈশিষ্ট্যগুলো একে অপরের সাথে কীভাবে সম্পর্কিত

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

• অ্যান্ড্রয়েড স্টুডিও ইনস্টল করা একটি কম্পিউটার।
• টিপ টাইম অ্যাপ্লিকেশনের কোড। https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution

২. স্টার্টার অ্যাপের সংক্ষিপ্ত বিবরণ

টিপ টাইম অ্যাপটি একটি টিপ ক্যালকুলেটর অ্যাপ, যেখানে টিপের পরিমাণ নিজের মতো করে সাজানোর (কাস্টমাইজ) অপশন রয়েছে। এটি আমাদের ‘অ্যান্ড্রয়েড বেসিকস ইন কোটলিন’ প্রশিক্ষণ কোর্সের নমুনা অ্যাপগুলোর মধ্যে একটি।

৩. গ্রেডল নির্ভরতা আপডেট করা

প্রকৃত থিম আপডেট করার এবং ডাইনামিক কালার প্রয়োগ করার আগে, আপনার অ্যাপ্লিকেশনের build.gradle ফাইলে কয়েকটি পরিবর্তন করতে হবে।

ডিপেন্ডেন্সি সেকশনে, নিশ্চিত করুন যে মেটেরিয়াল লাইব্রেরিটি 1.5.0-alpha04 বা তার পরবর্তী সংস্করণ।

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

অ্যান্ড্রয়েড বিভাগে, compileSdkVersion এবং targetSdkVersion পরিবর্তন করুন।

৩১ বা তার বেশি বয়সে:

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

এই নির্দেশাবলী এমন একটি অ্যাপের জন্য প্রযোজ্য যেখানে তুলনামূলকভাবে সাম্প্রতিক ডিপেন্ডেন্সিগুলো রয়েছে। যে অ্যাপটি আগে থেকেই ম্যাটেরিয়াল ব্যবহার করছে না বা এর চেয়ে পুরোনো সংস্করণ ব্যবহার করছে, তার জন্য অনুগ্রহ করে অ্যান্ড্রয়েডের জন্য ম্যাটেরিয়াল ডিজাইন কম্পোনেন্টস (Material Design Components for Android) এর গেটিং স্টার্টেড (Getting Started) ডকুমেন্টেশনের নির্দেশাবলী দেখুন।

আপনি যেখানেই আপনার থিম তৈরি করেছেন, সেখানে Theme.MaterialComponents.* এর রেফারেন্স পরিবর্তন করে Theme.Material3.* করুন। Material3 নেমস্পেসে কিছু স্টাইলের জন্য এখনও নতুন কোনো স্টাইল নেই, কিন্তু প্যারেন্ট থিমটি Theme.Material3.* -এ আপডেট করা হলে বেশিরভাগ কম্পোনেন্টই নতুন স্টাইলিংটি গ্রহণ করবে। আমরা নিচে দেখতে পাচ্ছি যে বাটনগুলো এখন নতুন গোলাকার থিমিং গ্রহণ করেছে।

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

themes.xml

<style name="Theme.TipTime" parent="Theme.Material3.Light">
   <!-- Primary brand color. -->
   <item name="colorPrimary">@color/green</item>
   <item name="colorPrimaryVariant">@color/green_dark</item>
   <item name="colorOnPrimary">@color/white</item>
   <!-- Secondary brand color. -->
   <item name="colorSecondary">@color/blue</item>
   <item name="colorSecondaryVariant">@color/blue_dark</item>
   <item name="colorOnSecondary">@color/black</item>
   <!-- Status bar color. -->
   <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
   <!-- For text input fields -->
   <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
   <!-- For radio buttons -->
   <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
   <!-- For switches -->
   <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>

৪. রঙের থিমিং এবং রঙের ভূমিকা বোঝা

ম্যাটেরিয়াল ৩ কালার সিস্টেম আপনার UI-তে রঙ প্রয়োগ করার জন্য একটি সুসংগঠিত পদ্ধতি ব্যবহার করে। Theme.AppCompat এর বেশ কিছু অ্যাট্রিবিউট এখনও ব্যবহৃত হয়। তবে, Theme.MaterialComponents.* এ আরও অ্যাট্রিবিউট যোগ করা হয়েছে এবং Theme.Material3.* এ তার চেয়েও বেশি। তাই, বেস থিম থেকে কোনো অব্যবহৃত প্রপার্টি যাতে চলে না আসে, তা নিশ্চিত করার জন্য আপনার অ্যাপের সমস্ত স্ক্রিন পরীক্ষা করা জরুরি।

রঙের ভূমিকা বোঝা

একটি ম্যাটেরিয়াল ৩ থিমে রঙ সম্পর্কিত বিশটিরও বেশি অ্যাট্রিবিউট রয়েছে। প্রথমে এটি বেশ কঠিন মনে হতে পারে, কিন্তু আসলে কয়েকটি মূল রঙ রয়েছে যা একই ৪-৫টি রঙের ভূমিকার সাথে মিলিত হয়ে উদ্ভূত রঙ তৈরি করে।

সেই রঙের গোষ্ঠীগুলো হলো:

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

প্রাথমিক, মাধ্যমিক, তৃতীয় এবং ত্রুটির ক্ষেত্রে ভূমিকাগুলো নিম্নরূপ:

<মূল রঙ>	ভিত্তি রঙ
<মূল রঙ> এ	বেস কালারের উপর প্রদর্শিত আইকন এবং টেক্সটের রঙ
<মূল রঙ> কন্টেইনার	ভিত্তি থেকে উদ্ভূত রঙ, যা বাটন, ডায়ালগ ইত্যাদিতে ব্যবহৃত হয়।
কন্টেইনারে<base color>	কন্টেইনারের আইকন এবং টেক্সটের রঙ

উদাহরণস্বরূপ, ম্যাটেরিয়াল ৩-এর ডিফল্ট স্টাইলিং সহ একটি ফ্লোটিং অ্যাকশন বাটন তার ভিত্তি রঙ হিসেবে Primary ব্যবহার করে, তাই এটি বাটনের ব্যাকগ্রাউন্ড রঙের জন্য primaryContainer এবং এর বিষয়বস্তুর জন্য onPrimaryContainer ব্যবহার করে।

হাতে করে কোনো থিম কাস্টমাইজ করার সময়, আপনার পরিবর্তন করা প্রতিটি বেস কালারের জন্য on<base color> অ্যাট্রিবিউটটি এখনও পাঠযোগ্য আছে কি না, তা ন্যূনতমভাবে যাচাই করে নেওয়া উচিত।

সর্বোত্তম পন্থা হলো একটি কালার গ্রুপের সমস্ত রোল একই সাথে অ্যাডজাস্ট করা, যাতে বেস থেকে আপনার অ্যাপ পর্যন্ত কোনো আর্টিফ্যাক্ট না থাকে।

ব্যাকগ্রাউন্ড এবং সারফেসের বেস কালারের সাধারণত দুটি ভূমিকা থাকে: একটি হলো বেস কালারটির নিজের জন্য এবং on<base color> এর উপর প্রদর্শিত আইকন বা টেক্সটের জন্য।

৫. ম্যাটেরিয়াল থিম বিল্ডার দিয়ে একটি ম্যাটেরিয়াল ৩ থিম তৈরি করা

ম্যাটেরিয়াল থিম বিল্ডার দিয়ে সহজেই একটি কাস্টম কালার স্কিম তৈরি করা যায়, এর বিল্ট-ইন কোড এক্সপোর্ট ব্যবহার করে M3 কালার সিস্টেমে মাইগ্রেট করুন এবং ডাইনামিক কালারের সুবিধা নিন। আরও জানুন material.io/material-theme-builder

টিপ টাইম অ্যাপ থিমে কম্পোনেন্টগুলোর জন্য বেশ কয়েকটি স্টাইল রয়েছে, তবে বেশিরভাগ স্টাইলই ম্যাটেরিয়াল ৩ থিমের ডিফল্ট স্টাইল। আমাদের শুধু প্রাইমারি এবং সেকেন্ডারি—এই দুটি মূল রঙ নিয়ে ভাবতে হবে।

এগুলো একটি সবুজ প্রাথমিক রঙ (#1B5E20) এবং একটি নীল গৌণ রঙ (#0288D1)-এর সাথে সঙ্গতিপূর্ণ।

আপনি ম্যাটেরিয়াল থিম বিল্ডারে সেই রঙগুলো ইনপুট করে একটি সম্পূর্ণ থিম এক্সপোর্ট করতে পারেন (যদি অন্য কোথাও একটি পূর্ণাঙ্গ ওভারভিউ-এর লিঙ্ক থাকে)।

অনুগ্রহ করে মনে রাখবেন যে, রঙ তৈরির অ্যালগরিদমের সাথে সামঞ্জস্য রাখতে এবং পরিপূরক ও পাঠযোগ্য রঙ নিশ্চিত করতে আপনার দেওয়া রঙের টোনে পরিবর্তন আসতে পারে।

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

৬. ম্যাটেরিয়াল থিম বিল্ডার এক্সপোর্ট ফাইল নিয়ে কাজ করা

এক্সপোর্ট আর্কাইভটিতে values ​​এবং values-night/ ডিরেক্টরি রয়েছে, যেগুলোর প্রত্যেকটিতে লাইট ও ডার্ক থিমের জন্য নিজস্ব themes.xml ফাইল থাকে। সমস্ত রং values/colors.xml ফাইলে সংজ্ঞায়িত করা আছে।

ফাইলগুলো সরাসরি কপি করা যাবে, কিন্তু আপনাকে AndroidManifest.xml-এ অথবা থিম ফাইলগুলোতে থিমের নাম পরিবর্তন করে একে অপরের সাথে মেলাতে হবে। টুলিং থেকে ডিফল্ট নামটি হলো AppTheme।

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

দ্রষ্টব্য: আপনার AndroidManifest.xml ফাইল এবং অ্যান্ড্রয়েড ১২ অ্যাপের ক্ষেত্রে অ্যাক্টিভিটির জন্য android:exported এর একটি সুস্পষ্ট মান উল্লেখ করার প্রয়োজন হতে পারে, এ সংক্রান্ত একটি ত্রুটির বার্তা আপনি পেতে পারেন।

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.tiptime">

   <application ...>
       <activity android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

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

</manifest>

৭. গতিশীল রঙ যোগ করা

একটি উপযুক্ত ম্যাটেরিয়াল ৩ থিম ব্যবহার করলে, কয়েকটি ছোট সংযোজনের মাধ্যমে আমরা ইউআই-কে ডাইনামিক করে তুলতে পারি।

ডাইনামিক কালারস এপিআই আপনাকে সমস্ত অ্যাক্টিভিটিতে ডাইনামিক কালার প্রয়োগ করার সুযোগ দেয়।

একটি অ্যাপে, স্বতন্ত্র অ্যাক্টিভিটিতে, অথবা স্বতন্ত্র ভিউ বা ফ্র্যাগমেন্টে। জন্য

এই অ্যাপটিতে, আমরা বিশ্বব্যাপী ডাইনামিক কালার প্রয়োগ করব।

একটি অ্যাপ্লিকেশন ক্লাস ফাইল তৈরি করুন

class TipTimeApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

আমাদের অ্যান্ড্রয়েড ম্যানিফেস্টে এই নতুন তৈরি করা ফাইলটির উল্লেখ করতে হবে:

AndroidManifest.xml

< application android name=".TipTimeApplication
<!--- Other existing attributes –>

</application >

অ্যান্ড্রয়েড ১২+ সিস্টেমে, ব্যবহারকারীর ডিফল্ট স্কিমের ওয়ালপেপার পরীক্ষা করে কয়েকটি টোনাল প্যালেট তৈরি করা হয়। এই প্যালেটগুলোর মান ব্যবহার করে একটি ThemeOverlay তৈরি করা হয়।

DynamicColors ক্লাসটি একটি ActivityLifecycleCallbacks রেজিস্টার করে, যা ActivityPreCreated সময় সিস্টেম দ্বারা তৈরি ডাইনামিক থিম ওভারলে অথবা আপনার দেওয়া কোনো ওভারলে প্রয়োগ করার জন্য কাজটিকে ইন্টারসেপ্ট করে।

৮. কাস্টম থিম ওভারলে প্রয়োগ করা

আমাদের টুলিং থিম ওভারলে এক্সপোর্ট করতে পারে, তবে অল্প কিছু অ্যাট্রিবিউট ওভাররাইড করার ক্ষেত্রে আপনি সেগুলো ম্যানুয়ালিও তৈরি করতে পারেন।

একটি থিম ওভারলে অন্য একটি থিমের সাথে একত্রে ব্যবহারের জন্য তৈরি করা হয়েছে এবং এটি শুধুমাত্র মূল থিমের উপরে সেই মানগুলো প্রদান করে যা পরিবর্তন করা হবে।

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

colors.xml

<resources>
    <color name="overlay_light_primary">#9C4146</color>
    <color name="overlay_light_onPrimary">#FFFFFF</color> 
    <color name= "overlay_light_primaryContainer">#FFDADB</color>
    <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

themes_overlays.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
    <item name="colorPrimary">@color/overlay_light_primary</item>
    <item name="colorOnPrimary">@color/overlay_light_onPrimary</item> 
    <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item> 
    <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

উপরের কোডটির জন্য, অ্যান্ড্রয়েড ১২ একটি ডাইনামিক লাইট থিম প্রয়োগ করবে এবং তার উপরে আপনার পরিবর্তনগুলো ওভারলে হিসেবে দেখাবে। বিকল্পভাবে, আপনি প্যারেন্ট হিসেবে যেকোনো বৈধ ThemeOverlay ব্যবহার করতে পারেন, যার মধ্যে নিম্নলিখিতগুলোর যেকোনো একটি অন্তর্ভুক্ত:

ThemeOverlay.Material3.Light

ThemeOverlay.Material3.Dark

ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark

ThemeOverlay.Material3.DynamicColors.DayNight

ম্যাটেরিয়াল ডিফল্টের পরিবর্তে এই থিম ওভারলে ব্যবহার করতে, DynamicColors.applyToActivitiesIfAvailable এর কলটি পরিবর্তন করে নিম্নলিখিতটি করুন:

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

৯. কাস্টম অ্যাট্রিবিউটে ডাইনামিক রঙ যোগ করা

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

যখন কোনো অ্যাপ ডাইনামিক কালার বেছে নেয়, তখন এটি ৫টি টোনাল প্যালেট ব্যবহারের সুযোগ পায় — তিনটি অ্যাকসেন্ট প্যালেট এবং দুটি নিউট্রাল প্যালেট, যেগুলোর ভূমিকা মোটামুটি নিম্নরূপ:

সিস্টেম_অ্যাকসেন্ট১	প্রাথমিক রঙের টোন
সিস্টেম_অ্যাকসেন্ট২	গৌণ রঙের টোন
সিস্টেম_অ্যাকসেন্ট৩	তৃতীয় স্তরের রঙের টোন
সিস্টেম_নিরপেক্ষ১	নিরপেক্ষ পটভূমি এবং পৃষ্ঠতল
সিস্টেম_নিরপেক্ষ২	নিরপেক্ষ পৃষ্ঠতল এবং রূপরেখা

প্রতিটি প্যালেটে সাদা থেকে শুরু করে বিভিন্ন টোনাল ধাপ রয়েছে।

কালো: ০, ১০, ৫০, ১০০, ২০০, ৩০০, ৪০০, ৫০০, ৬০০, ৭০০, ৮০০, ৯০০, ১০০০।

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

ধরা যাক, আপনি সেকেন্ডারি অ্যাকসেন্ট প্যালেট ব্যবহার করে আইকনগুলোকে থিমযুক্ত করতে চেয়েছিলেন এবং এর জন্য attrs.xml-এ নিম্নলিখিত এন্ট্রিটি যোগ করে আইকনগুলোকে টিন্ট করার জন্য একটি অ্যাট্রিবিউট তৈরি করেছিলেন।

attrs.xml

<resources>
    <attr name="iconColor" format="color" />
</resources>

আপনার থিম ওভারলেটি দেখতে অনেকটা এইরকম হতে পারে:

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"> 
<item name="iconColor">@android:color/system_accent2_600</item>
</style>

যখন আপনি অ্যাপটি পুনরায় ইনস্টল করবেন এবং আপনার ওয়ালপেপার পরিবর্তন করবেন, তখন অ্যাপটি সেই দ্বিতীয় প্যালেটটি গ্রহণ করবে।

এই প্যালেটগুলি অ্যান্ড্রয়েড ১২ (এপিআই ৩১)-এর জন্য নির্দিষ্ট, তাই আপনাকে প্রাসঙ্গিক ফাইলগুলি -v31 সাফিক্সযুক্ত ফোল্ডারে রাখতে হবে, যদি না আপনার অ্যাপের ন্যূনতম এসডিকে ৩১ বা তার বেশি সেট করা থাকে।

১০. সারসংক্ষেপ

এই কোডল্যাবে, আপনি যা করতে পেরেছেন:

• আপনার থিমকে ম্যাটেরিয়াল ৩-এ আপগ্রেড করতে ডিপেন্ডেন্সিগুলো যোগ করুন।
• নতুন রঙের গোষ্ঠী ও ভূমিকাগুলো বুঝুন।
• স্ট্যাটিক থিম থেকে ডাইনামিক কালারে কীভাবে মাইগ্রেট করতে হয় তা বুঝুন।
• থিম ওভারলে কীভাবে ব্যবহার করতে হয় এবং কাস্টম থিম অ্যাট্রিবিউটের জন্য ডাইনামিক কালার কীভাবে ব্যবহার করতে হয়, তা বুঝুন।