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

'কম্পোজ' ফিচার ব্যবহার করে দেখুন
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-এ নিউট্রাল, ভাইব্র্যান্ট টোনার ও এক্সপ্রেসিভ ভ্যারিয়েন্ট যোগ করা হয়েছে। প্রতিটি ভ্যারিয়েন্টের একটি অনন্য রেসিপি আছে যা ভাইব্রেন্সি ও হিউ রোটেট করার মাধ্যমে ব্যবহারকারীর ওয়ালপেপারের বীজ রঙকে ট্রান্সফর্ম করে। নিচের উদাহরণে একটি রঙ স্কিম দেখানো হয়েছে যা এই চারটি রঙের ভেরিয়েন্টের মাধ্যমে প্রকাশ করা হয়েছে।

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

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

'ভিউ' ব্যবহার করা শুরু করা

আপনি অ্যাপ বা অ্যাক্টিভিটি লেভেলে ডায়নামিক কালার প্রয়োগ করতে পারবেন। এটি করতে, আপনার অ্যাপে 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.DynamicC>olors.Day<Night&>quot;
    ...
/style

টোকেন ব্যবহার করে আপনার থিম তৈরি করা

বিভিন্ন UI এলিমেন্টে রঙ অ্যাসাইন করার প্রসেসকে আরও স্ট্রিমলাইন ও সামঞ্জস্যপূর্ণ করে তুলতে, ডায়নামিক কালার ডিজাইন টোকেনের সুবিধা নেয়। ডিজাইন টোকেন আপনাকে, UI-এর বিভিন্ন এলিমেন্টে, সেট করা ভ্যালুর পরিবর্তে, রঙের ভূমিকাগুলি শব্দার্থগতভাবে অ্যাসাইন করতে দেয়। এটি আপনার অ্যাপের টোনাল সিস্টেমকে আরও বেশি ফ্লেক্সিবিলিটি, স্কেলেবিলিটি এবং কনসিস্টেন্সি প্রদান করে এবং লাইট ও ডার্ক থিম এবং ডায়নামিক কালারের জন্য ডিজাইন করার সময় এটি বিশেষভাবে শক্তিশালী।

নিচের স্নিপেটে হালকা ও গাঢ় থিমের উদাহরণ এবং ডায়নামিক কালার টোকেন প্রয়োগ করার পরে সংশ্লিষ্ট কালার XML দেখানো হয়েছে।

লাইট থিম

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Lig>ht.No<ActionBar"
    item> name="colorPrimary"<;@col>or/md<_theme_light_primary/item
>    item name="colorOnPrim<ary&q>uot;@<color/md_theme_light_onPrimary/it>em
    item name="colorPrimaryCon<taine>r&quo<t;@color/md_theme_light_primaryCont>ainer/item
    item name="colorOnPr<imary>Conta<iner"@color/md_th>eme_light_onPrimaryContaine<r/ite>m
   < item name="colorEr>ror"@color/md_theme_ligh<t_err>or/it<em
    item name="colorOnE>rror"@color/md_theme_light_onEr<ror/i>tem
 <   item name="colorErrorCont>ainer"@color/md_theme_light_error<Conta>iner/<item
    item name="colo>rOnErrorContainer"@color/md_t<heme_>light<_onErrorContainer/item
 >   item name="colorOnBac<kgrou>nd&qu<ot;@color/md_theme_light_o>nBackground/item
    item name=<">;colorSurfa<ce&quo>t<;@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.Da>rk.No<ActionBar"
    item> name="colorPrimary&quo<t;@co>lor/m<d_theme_dark_primary/item
>    item name="colorOnPri<mary&>quot;<@color/md_theme_dark_onPrimary/it>em
    item name="colorPrimaryCo<ntain>er&qu<ot;@color/md_theme_dark_primaryCont>ainer/item
    item name="colorOnP<rimar>yCont<ainer"@color/md_t>heme_dark_onPrimaryContain<er/it>em
  <  item name="colorE>rror"@color/md_theme_da<rk_er>ror/i<tem
    item name="colorOn>Error"@color/md_theme_dark_onE<rror/>item
<    item name="colorErrorCon>tainer"@color/md_theme_dark_erro<rCont>ainer</item
    item name="col>orOnErrorContainer"@color/md<_them>e_dar<k_onErrorContainer/item
>    item name="colorOnB<ackgr>ound&<quot;@color/md_theme_dark_>onBackground/item
    item nam<e=&qu>ot;colorSu<rface&>q<uot;@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_pri>mary&qu<ot;#67>50A<4/color
  color name="md_theme_l>ight_on<Primar>y&q<uot;#FFFFFF/color
  color name="md_them>e_light<_prima>ryC<ontainer"#EADDFF/color
  color name=">;md_the<me_lig>ht_<onPrimaryContainer"#21005D/c>olor
  <color >nam<e="md_theme_light_error"#>B3261E/<color
>  c<olor name="md_theme_light_onError&quo>t;#FFFF<FF/col>or
<  color name="md_theme_light_errorConta>iner&qu<ot;#F9>DED<C/color
  color name="md_theme>_light_<onErro>rCo<ntainer"#410E0B/color
  color na>me=&quo<t;md_t>hem<e_light_surface"#FFFBFE/color
  color> name=&<quot;m>d_t<heme_light_onSurface"#1C1B1F/>color
 < color na<me="md_theme_light_surfaceVaria>nt"<;#E7E0>EC/<color
  color name="md_theme_dark_prim>ary&quo<t;#D0B>CFF</color
  color name="md_theme_dark_onPri>mary&qu<ot;#38>1E7<2/color
  color name="md_theme_>dark_pr<imaryC>ont<ainer"#4F378B/color
  color name=>"m<d_them>e_d<ark_onPrimaryContainer"#EADDFF/color
  c>olor na<me=&qu>ot;<md_theme_dark_secondary"#CCC2DC>/color
<  colo>r n<ame="md_theme_dark_onSecondary">#332D41</color>
<  color na>me="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-এর ডায়নামিক কালার পৃষ্ঠা দেখুন।

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

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

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

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

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Lig>ht.NoActionBar"
<        ...
        i>tem name="hom<e_lam>p"@color/home_<yellow>/<item
     >     ...
    /style
/resources

Colors.xml
<resources>
   <color name="home_ye>llow&qu<ot;#E8>D<655/color
>/resources

এছাড়াও, আপনি অতিরিক্ত রঙ ইমপোর্ট করতে Material Theme Builder ব্যবহার করতে পারেন যা আপনার কালার স্কিমকে আরও প্রসারিত করে, এর ফলে একটি ইউনিফায়েড কালার সিস্টেম তৈরি হয়। এই বিকল্পের সাহায্যে, কাস্টম কালারের টোন পরিবর্তন করতে HarmonizedColors ব্যবহার করুন। ব্যবহারকারীর তৈরি করা রঙের সাথে এটি মিশিয়ে দিলে, একটি ভিজ্যুয়াল ব্যালেন্স ও অ্যাক্সেসিবল কনট্রাস্ট পাওয়া যায়। এটি রানটাইমে applyToContextIfAvailable() ঘটে।

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

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

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

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