আপনার অ্যাপে ব্যবহারকারীদের কালার অভিজ্ঞতা পছন্দমতো করার সুবিধা দেওয়া

Compose-এর মাধ্যমে চেষ্টা করুন
Jetpack Compose হল Android-এর জন্য সাজেস্ট করা UI টুলকিট। Compose-এ কীভাবে ডায়নামিক কালার নিয়ে কাজ করতে হয় তা জানুন।
ডায়নামিক কালার - Material Design 3 →

Android 12-এ যোগ করা ডায়নামিক কালার ব্যবহারকারীদের তাদের ডিভাইসের রঙ ব্যক্তিগত ওয়ালপেপারের রঙের স্কিমের সাথে বা ওয়ালপেপার পিকারে বেছে নেওয়া রঙের সাথে মিলিয়ে নিতে সাহায্য করে।

আপনি DynamicColors API যোগ করে এই ফিচার ব্যবহার করতে পারেন, যা আপনার অ্যাপ বা অ্যাক্টিভিটিতে এই থিমিং প্রয়োগ করে যাতে ব্যবহারকারীর জন্য আপনার অ্যাপ আরও পছন্দমতো করে তোলা যায়।

ছবি ১. বিভিন্ন ওয়ালপেপার থেকে পাওয়া টোনাল কালার স্কিমের উদাহরণ

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

Android কীভাবে রঙের স্কিম তৈরি করে

ব্যবহারকারীর ওয়ালপেপার থেকে রঙের স্কিম তৈরি করতে Android নিম্নলিখিত ধাপগুলি সম্পন্ন করে।

  1. সিস্টেম বেছে নেওয়া ওয়ালপেপার ছবিতে প্রধান রঙ শনাক্ত করে এবং একটি সোর্স রঙ এক্সট্র্যাক্ট করে।

  2. সিস্টেমটি সেই সোর্স কালার ব্যবহার করে আরও পাঁচটি মূল রঙ এক্সট্রাপোলেট করে যা প্রাথমিক, গৌণ, টারশিয়ারি, নিউট্রাল এবং নিউট্রাল ভেরিয়েন্ট নামে পরিচিত।

    সোর্স কালার এক্সট্র্যাকশনের উদাহরণ
    ছবি ২. ওয়ালপেপার ছবি থেকে সোর্স কালার এক্সট্র্যাকশন এবং পাঁচটি মূল রঙে এক্সট্র্যাকশনের উদাহরণ

  3. সিস্টেম প্রতিটি মূল রঙকে ১৩টি টোনের একটি টোনাল প্যালেটে ব্যাখ্যা করে।

    প্রদত্ত টোনাল প্যালেট তৈরি করার উদাহরণ
    ছবি ৩. প্রদত্ত টোনাল প্যালেট জেনারেট করার উদাহরণ

  4. সিস্টেম এই একটি ওয়ালপেপার ব্যবহার করে পাঁচটি ভিন্ন রঙের স্কিম তৈরি করে, যা যেকোনও লাইট এবং ডার্ক থিমের ভিত্তি প্রদান করে।

ব্যবহারকারীর ডিভাইসে কালার ভেরিয়েন্ট কীভাবে দেখানো হয়

Android 12 থেকে শুরু করে ব্যবহারকারীরা ওয়ালপেপার থেকে এক্সট্র্যাক্ট করা রঙ এবং বিভিন্ন থিম থেকে রঙের ভেরিয়েন্ট বেছে নিতে পারেন, Android 13-এ আরও ভেরিয়েন্ট যোগ করা হয়েছে। যেমন, Android 13 ভার্সনে চলা Pixel ফোন ব্যবহারকারী ওয়ালপেপার ও স্টাইল সেটিংস থেকে একটি ভ্যারিয়েন্ট বেছে নেবেন, যেমনটি ছবি ৪-এ দেখানো হয়েছে।

ছবি ৪. ওয়ালপেপার সেটিংসে কালার ভ্যারিয়েন্ট বেছে নেওয়া (Pixel ডিভাইসে দেখানো হয়েছে)

Android 12-এ টোনাল স্পট ভ্যারিয়েন্ট যোগ করা হয়েছে, এর পরে Android 13-এ নিউট্রাল, ভাইব্র্যান্ট টোনাল এবং এক্সপ্রেসিভ ভ্যারিয়েন্ট যোগ করা হয়েছে। প্রতিটি ভ্যারিয়েন্টের একটি অনন্য রেসিপি রয়েছে যা ব্যবহারকারীর ওয়ালপেপারের সিড কালারকে ভাইব্রেন্সি এবং হিউ রোটেট করার মাধ্যমে পরিবর্তন করে। নিম্নলিখিত উদাহরণে একটি রঙের স্কিম দেখানো হয়েছে যা এই চারটি রঙের ভেরিয়েন্টের মাধ্যমে প্রকাশ করা হয়েছে।

ছবি ৫. একটি ডিভাইসে বিভিন্ন রঙের ভ্যারিয়েন্ট কেমন দেখায় তার উদাহরণ

আপনার অ্যাপ এখনও এইসব রঙ অ্যাক্সেস করার জন্য একই টোকেন ব্যবহার করে। টোকেন সম্পর্কে বিস্তারিত জানতে, এই পৃষ্ঠায় টোকেন দিয়ে আপনার থিম তৈরি করুন বিকল্প দেখুন।

Views ব্যবহার করা শুরু করুন

আপনি অ্যাপ বা অ্যাক্টিভিটি লেভেলে ডায়নামিক কালার প্রয়োগ করতে পারবেন। এটি করতে, আপনার অ্যাপে ActivityLifeCycleCallbacks রেজিস্টার করতে applyToActivitiesIfAvailable() নম্বরে কল করুন।

Kotlin

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-এর বিভিন্ন এলিমেন্টে অর্থগতভাবে রঙের ভূমিকা অ্যাসাইন করতে দেয়। এটি আপনার অ্যাপের টোনাল সিস্টেমকে আরও বেশি ফ্লেক্সিবিলিটি, স্কেলেবিলিটি ও ধারাবাহিকতা প্রদান করে এবং লাইট ও ডার্ক থিম এবং ডায়নামিক কালার ডিজাইন করার সময় এটি বিশেষভাবে কার্যকরী হয়।

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

লাইট থিম

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>

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

আরও তথ্যের জন্য:

  • ডায়নামিক কালার, কাস্টম কালার ও টোকেন জেনারেট করা সম্পর্কে আরও জানতে, Material 3 ডায়নামিক কালার পৃষ্ঠা দেখুন।

  • বেস কালার প্যালেট এবং আপনার অ্যাপের রঙ ও থিম তৈরি করতে, মেটিরিয়াল থিম বিল্ডার দেখুন, যা Figma প্লাগ-ইন বা ব্রাউজারে উপলভ্য)।

  • রঙের স্কিম ব্যবহার করে কীভাবে আপনার অ্যাপে আরও ভালো অ্যাক্সেসিবিলিটি চালু করা যায় সেই সম্পর্কে আরও জানতে, কালার সিস্টেম অ্যাক্সেসিবিলিটি সম্পর্কে Material 3 পৃষ্ঠা দেখুন।

কাস্টম বা ব্র্যান্ডের রঙ বজায় রাখুন

আপনার অ্যাপে যদি কাস্টম বা ব্র্যান্ডের রঙ থাকে যা আপনি ব্যবহারকারীর পছন্দ অনুযায়ী পরিবর্তন করতে চান না, তাহলে আপনি নিজের রঙের স্কিম তৈরি করার সময় সেগুলি আলাদাভাবে যোগ করতে পারেন। যেমন:

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()-এর সাথে ঘটে।

ছবি ৬. কাস্টম রঙের সামঞ্জস্যের উদাহরণ

কাস্টম রঙ হারমোনাইজ করা সম্পর্কে Material 3-এর নির্দেশিকা দেখুন।

আপনার অ্যাডাপ্টিভ আইকন ও উইজেটে ডায়নামিক কালার প্রয়োগ করুন

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