অ্যান্ড্রয়েড ১২-এ যুক্ত হওয়া ডাইনামিক কালার ব্যবহারকারীদেরকে তাদের ব্যক্তিগত ওয়ালপেপারের কালার স্কিমের সাথে অথবা ওয়ালপেপার পিকার থেকে কোনো রঙ বেছে নিয়ে নিজেদের ডিভাইসকে ব্যক্তিগত পছন্দ অনুযায়ী সাজানোর সুযোগ দেয়।
আপনি DynamicColors API যোগ করে এই বৈশিষ্ট্যটির সুবিধা নিতে পারেন, যা আপনার অ্যাপ বা অ্যাক্টিভিটিতে এই থিমিং প্রয়োগ করে অ্যাপটিকে ব্যবহারকারীর জন্য আরও ব্যক্তিগতকৃত করে তোলে।
এই পৃষ্ঠায় আপনার অ্যাপে ডাইনামিক কালার প্রয়োগ করার নির্দেশাবলী রয়েছে। এই বৈশিষ্ট্যটি উইজেট এবং অ্যাডাপ্টিভ আইকনগুলির জন্যও আলাদাভাবে উপলব্ধ, যেমনটি এই পৃষ্ঠার পরবর্তী অংশে বর্ণনা করা হয়েছে। আপনি কোডল্যাবটিও চেষ্টা করে দেখতে পারেন।
অ্যান্ড্রয়েড কীভাবে রঙের স্কিম তৈরি করে
অ্যান্ড্রয়েড একজন ব্যবহারকারীর ওয়ালপেপার থেকে কালার স্কিম তৈরি করতে নিম্নলিখিত ধাপগুলো অনুসরণ করে।
সিস্টেমটি নির্বাচিত ওয়ালপেপার ছবির প্রধান রঙগুলো শনাক্ত করে এবং একটি উৎস রঙ বের করে নেয়।
সিস্টেমটি সেই উৎস রঙ ব্যবহার করে প্রাইমারি , সেকেন্ডারি , টারশিয়ারি , নিউট্রাল এবং নিউট্রাল ভ্যারিয়েন্ট নামে পরিচিত পাঁচটি মূল রঙকে আরও বিশদভাবে নির্ণয় করে।
চিত্র ২. ওয়ালপেপার ছবি থেকে উৎস রঙ শনাক্তকরণ এবং পাঁচটি মূল রঙে নিষ্কাশনের উদাহরণ। সিস্টেমটি প্রতিটি মূল রঙকে ১৩টি টোনের একটি টোনাল প্যালেটে রূপান্তর করে।
চিত্র ৩. প্রদত্ত টোনাল প্যালেট তৈরির উদাহরণ সিস্টেমটি এই একটিমাত্র ওয়ালপেপার ব্যবহার করে পাঁচটি ভিন্ন রঙের বিন্যাস তৈরি করে, যা যেকোনো হালকা ও গাঢ় থিমের ভিত্তি প্রদান করে।
ব্যবহারকারীর ডিভাইসে রঙের বিভিন্ন রূপ কীভাবে প্রদর্শিত হয়
অ্যান্ড্রয়েড ১২ থেকে ব্যবহারকারীরা ওয়ালপেপার থেকে নেওয়া রঙ এবং বিভিন্ন থিম থেকে রঙের বিকল্প বেছে নিতে পারবেন, এবং অ্যান্ড্রয়েড ১৩-এ আরও বিকল্প যুক্ত করা হয়েছে। উদাহরণস্বরূপ, অ্যান্ড্রয়েড ১৩ চালিত একটি পিক্সেল ফোনের ব্যবহারকারী ওয়ালপেপার ও স্টাইল সেটিংস থেকে একটি বিকল্প বেছে নেবেন, যেমনটি চিত্র ৪-এ দেখানো হয়েছে।
অ্যান্ড্রয়েড ১২-এ টোনাল স্পট ভ্যারিয়েন্টটি যুক্ত করা হয়েছিল, এবং এর পরে অ্যান্ড্রয়েড ১৩-এ নিউট্রাল , ভাইব্রেন্ট টোনাল ও এক্সপ্রেসিভ ভ্যারিয়েন্টগুলো আসে। প্রতিটি ভ্যারিয়েন্টের একটি স্বতন্ত্র ফর্মুলা রয়েছে, যা ভাইব্রেন্সি এবং হিউ-এর আবর্তনের মাধ্যমে ব্যবহারকারীর ওয়ালপেপারের মূল রঙগুলোকে রূপান্তরিত করে। নিচের উদাহরণটিতে এই চারটি কালার ভ্যারিয়েন্টের মাধ্যমে প্রকাশিত একটি একক কালার স্কিম দেখানো হয়েছে।
আপনার অ্যাপ এখনও এই রঙগুলো অ্যাক্সেস করার জন্য একই টোকেন ব্যবহার করে। টোকেন সম্পর্কে বিস্তারিত জানতে, এই পৃষ্ঠার ‘টোকেন সহ আপনার থিম তৈরি করুন’ অংশটি দেখুন।
ভিউস দিয়ে শুরু করুন
আপনি অ্যাপ বা অ্যাক্টিভিটি লেভেলে ডাইনামিক কালার প্রয়োগ করতে পারেন। এটি করার জন্য, আপনার অ্যাপে একটি ActivityLifeCycleCallbacks রেজিস্টার করতে applyToActivitiesIfAvailable() কল করুন।
কোটলিন
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
জাভা
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
এরপর, আপনার অ্যাপে থিমটি যোগ করুন।
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
টোকেন দিয়ে আপনার থিম তৈরি করুন
ডাইনামিক কালার ডিজাইন টোকেন ব্যবহার করে বিভিন্ন UI এলিমেন্টে রঙ নির্ধারণ করার প্রক্রিয়াকে আরও সহজ ও সামঞ্জস্যপূর্ণ করে তোলে। একটি ডিজাইন টোকেন আপনাকে UI-এর বিভিন্ন এলিমেন্টে একটি নির্দিষ্ট মানের পরিবর্তে অর্থগতভাবে রঙের ভূমিকা নির্ধারণ করার সুযোগ দেয়। এটি আপনার অ্যাপের টোনাল সিস্টেমকে আরও বেশি নমনীয়তা, পরিবর্ধনযোগ্যতা এবং সামঞ্জস্য প্রদান করে, এবং বিশেষ করে লাইট ও ডার্ক থিম এবং ডাইনামিক কালারের ডিজাইনের ক্ষেত্রে এটি অত্যন্ত কার্যকর।
নিম্নলিখিত কোড স্নিপেটগুলিতে ডাইনামিক কালার টোকেন প্রয়োগ করার পর লাইট ও ডার্ক থিম এবং সংশ্লিষ্ট কালার এক্সএমএল-এর উদাহরণ দেখানো হয়েছে।
হালকা থিম
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
ডার্ক থিম
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
রং xml
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
আরও তথ্যের জন্য:
ডাইনামিক কালার, কাস্টম কালার এবং টোকেন তৈরি করা সম্পর্কে আরও জানতে, ম্যাটেরিয়াল ৩ ডাইনামিক কালার পেজটি দেখুন।
বেস কালার প্যালেট এবং আপনার অ্যাপের রঙ ও থিম তৈরি করতে, ম্যাটেরিয়াল থিম বিল্ডারটি দেখুন, যা ফিগমা প্লাগইনের মাধ্যমে অথবা ব্রাউজারে পাওয়া যায়।
আপনার অ্যাপে কালার স্কিম ব্যবহার করে কীভাবে আরও ভালো অ্যাক্সেসিবিলিটি আনা যায়, সে সম্পর্কে আরও জানতে ম্যাটেরিয়াল ৩-এর কালার সিস্টেম অ্যাক্সেসিবিলিটি বিষয়ক পৃষ্ঠাটি দেখুন।
কাস্টম বা ব্র্যান্ডের রঙ বজায় রাখুন
আপনার অ্যাপে যদি নিজস্ব বা ব্র্যান্ডের রঙ থাকে যা আপনি ব্যবহারকারীর পছন্দের সাথে পরিবর্তন করতে চান না, তাহলে কালার স্কিম তৈরি করার সময় আপনি সেগুলি আলাদাভাবে যোগ করতে পারেন। উদাহরণস্বরূপ:
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
বিকল্পভাবে, আপনি ম্যাটেরিয়াল থিম বিল্ডার ব্যবহার করে অতিরিক্ত রঙ ইম্পোর্ট করতে পারেন যা আপনার কালার স্কিমকে প্রসারিত করে একটি সমন্বিত কালার সিস্টেম তৈরি করে। এই বিকল্পের ক্ষেত্রে, কাস্টম রঙের টোন পরিবর্তন করতে HarmonizedColors ব্যবহার করুন। ব্যবহারকারী-সৃষ্ট রঙের সাথে মিলিত হলে এটি একটি ভিজ্যুয়াল ভারসাম্য এবং সহজলভ্য কনট্রাস্ট তৈরি করে। এটি রানটাইমে applyToContextIfAvailable() এর মাধ্যমে ঘটে থাকে।
কাস্টম রঙগুলোর সামঞ্জস্য বিধানের জন্য ম্যাটেরিয়াল ৩-এর নির্দেশিকা দেখুন।
আপনার অ্যাডাপ্টিভ আইকন এবং উইজেটগুলিতে ডাইনামিক কালার প্রয়োগ করুন
আপনার অ্যাপে ডাইনামিক কালার থিমিং চালু করার পাশাপাশি, আপনি অ্যান্ড্রয়েড ১২ থেকে উইজেটগুলির জন্য এবং অ্যান্ড্রয়েড ১৩ থেকে অ্যাডাপ্টিভ আইকনগুলির জন্যও ডাইনামিক কালার থিমিং সমর্থন করতে পারবেন।