ব্যবহারকারীদের আপনার অ্যাপে তাদের রঙের অভিজ্ঞতা ব্যক্তিগতকৃত করতে সক্ষম করুন

রচনা পদ্ধতি চেষ্টা করুন
জেটপ্যাক কম্পোজ হল Android এর জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে ডাইনামিক কালার দিয়ে কিভাবে কাজ করবেন তা শিখুন।
গতিশীল রং - উপাদান ডিজাইন 3 →

ডাইনামিক কালার, যা অ্যান্ড্রয়েড 12-এ যোগ করা হয়েছে, ব্যবহারকারীদের তাদের ব্যক্তিগত ওয়ালপেপারের রঙের স্কিমের সাথে বা ওয়ালপেপার পিকারে নির্বাচিত রঙের মাধ্যমে তাদের ডিভাইসগুলিকে ব্যক্তিগতকৃত করতে সক্ষম করে।

আপনি DynamicColors API যোগ করে এই বৈশিষ্ট্যটি ব্যবহার করতে পারেন, যা আপনার অ্যাপটিকে ব্যবহারকারীর কাছে আরও ব্যক্তিগতকৃত করতে আপনার অ্যাপ বা কার্যকলাপে এই থিমিং প্রয়োগ করে।

চিত্র 1. বিভিন্ন ওয়ালপেপার থেকে প্রাপ্ত টোনাল রঙের স্কিমগুলির উদাহরণ

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

অ্যান্ড্রয়েড কীভাবে রঙের স্কিম তৈরি করে

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

  1. সিস্টেমটি নির্বাচিত ওয়ালপেপার চিত্রের প্রধান রঙগুলি সনাক্ত করে এবং একটি উত্স রঙ বের করে৷

  2. প্রাথমিক , মাধ্যমিক , তৃতীয় , নিরপেক্ষ এবং নিরপেক্ষ বৈকল্পিক হিসাবে পরিচিত পাঁচটি মূল রঙকে আরও এক্সট্রাপোলেট করতে সিস্টেমটি সেই উত্স রঙটি ব্যবহার করে।

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

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

    একটি প্রদত্ত টোনাল প্যালেট তৈরির উদাহরণ
    চিত্র 3. একটি প্রদত্ত টোনাল প্যালেট তৈরির উদাহরণ

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

ব্যবহারকারীর ডিভাইসে রঙের বৈচিত্রগুলি কীভাবে প্রদর্শিত হয়

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

চিত্র 4. ওয়ালপেপার সেটিংসে রঙের বৈকল্পিক নির্বাচন করা (একটি পিক্সেল ডিভাইসে দেখানো হয়েছে)

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

চিত্র 5. একটি একক ডিভাইসে বিভিন্ন রঙের বৈচিত্র্যের উদাহরণ

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

ভিউ দিয়ে শুরু করুন

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

নিম্নলিখিত স্নিপেটগুলি গতিশীল রঙের টোকেন প্রয়োগ করার পরে হালকা এবং অন্ধকার থিমের উদাহরণ এবং একটি সংশ্লিষ্ট রঙের 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>

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

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

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

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

  • রঙের স্কিমগুলি কীভাবে আপনার অ্যাপে আরও ভাল অ্যাক্সেসযোগ্যতা সক্ষম করতে পারে সে সম্পর্কে আরও জানতে, রঙ সিস্টেম অ্যাক্সেসযোগ্যতা সম্পর্কে উপাদান 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() এর সাথে রানটাইমে ঘটে।

চিত্র 6. কাস্টম রঙের সমন্বয়ের উদাহরণ

কাস্টম রঙের সমন্বয়ে উপাদান 3 এর নির্দেশিকা দেখুন।

আপনার অভিযোজিত আইকন এবং উইজেটগুলিতে গতিশীল রঙ প্রয়োগ করুন

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