आपके ऐप्लिकेशन में, उपयोगकर्ताओं को रंग भरने के अनुभव को उनके हिसाब से बनाने की सुविधा दें

Compose को आज़माएं
Jetpack Compose, Android के लिए सुझाई गई यूज़र इंटरफ़ेस (यूआई) टूलकिट है. Compose में डाइनैमिक कलर इस्तेमाल करने का तरीका जानें.
डाइनैमिक कलर - मटीरियल डिज़ाइन 3 →

डाइनैमिक कलर की सुविधा को Android 12 में जोड़ा गया था. इसकी मदद से, उपयोगकर्ता अपने डिवाइसों को अपनी पसंद के मुताबिक बना सकते हैं. इससे, डिवाइस की कलर स्कीम को उनके वॉलपेपर की कलर स्कीम के हिसाब से सेट किया जा सकता है. इसके अलावा, वॉलपेपर पिकर में जाकर, अपनी पसंद के कलर के हिसाब से भी डिवाइस की कलर स्कीम सेट की जा सकती है.

इस सुविधा का फ़ायदा पाने के लिए, DynamicColors एपीआई जोड़ें. यह एपीआई, आपके ऐप्लिकेशन या गतिविधि पर इस थीम को लागू करता है, ताकि उपयोगकर्ता को आपके ऐप्लिकेशन पर ज़्यादा मनमुताबिक अनुभव मिल सके.

पहली इमेज. अलग-अलग वॉलपेपर से ली गई टोनल कलर स्कीम के उदाहरण

इस पेज पर, आपके ऐप्लिकेशन में डाइनैमिक कलर की सुविधा लागू करने के निर्देश दिए गए हैं. यह सुविधा, विजेट और अडैप्टिव आइकॉन के लिए भी अलग से उपलब्ध है. इसके बारे में इस पेज पर आगे बताया गया है. कोडलैब को भी आज़माया जा सकता है.

Android, कलर स्कीम कैसे बनाता है

Android, उपयोगकर्ता के वॉलपेपर से कलर स्कीम जनरेट करने के लिए, यह तरीका अपनाता है.

  1. सिस्टम, चुने गए वॉलपेपर की इमेज में मुख्य रंगों का पता लगाता है और एक सोर्स कलर निकालता है.

  2. सिस्टम, सोर्स कलर का इस्तेमाल करके पांच मुख्य रंगों को चुनता है. इन्हें प्राइमरी, सेकंडरी, टर्शियरी, न्यूट्रल, और न्यूट्रल वैरिएंट कहा जाता है.

    सोर्स इमेज से रंग निकालने का उदाहरण
    दूसरी इमेज. वॉलपेपर की इमेज से सोर्स कलर निकालने और पांच मुख्य रंगों को निकालने का उदाहरण

  3. सिस्टम, हर मुख्य रंग को 13 टोन वाले टोनल पैलेट में बदल देता है.

    दिए गए टोनल पैलेट को जनरेट करने का उदाहरण
    तीसरी इमेज. दिए गए टोनल पैलेट को जनरेट करने का उदाहरण

  4. सिस्टम इस वॉलपेपर का इस्तेमाल करके, पांच अलग-अलग कलर स्कीम बनाता है. इनसे हल्के और गहरे रंग वाली थीम बनाई जाती हैं.

किसी उपयोगकर्ता के डिवाइस पर, रंग के वैरिएंट कैसे दिखते हैं

Android 12 और इसके बाद के वर्शन में, उपयोगकर्ता वॉलपेपर से निकाले गए रंगों और अलग-अलग थीम से, रंग के वैरिएंट चुन सकते हैं. Android 13 में, ज़्यादा वैरिएंट जोड़े गए हैं. उदाहरण के लिए, Android 13 वाले Pixel फ़ोन का इस्तेमाल करने वाला कोई व्यक्ति, वॉलपेपर और स्टाइल सेटिंग से कोई वैरिएंट चुन सकता है. जैसा कि इमेज 4 में दिखाया गया है.

चौथी इमेज. वॉलपेपर की सेटिंग में जाकर, रंग के वैरिएंट चुनने की सुविधा (Pixel डिवाइस पर दिखाई गई है)

Android 12 में टोनल स्पॉट वैरिएंट जोड़ा गया. इसके बाद, Android 13 में न्यूट्रल, वाइब्रेंट टोनल, और एक्सप्रेसिव वैरिएंट जोड़े गए. हर वैरिएंट में एक यूनीक रेसिपी होती है. यह उपयोगकर्ता के वॉलपेपर के सीड कलर को वाइब्रेंसी और ह्यू को रोटेट करके बदलती है. यहां दिए गए उदाहरण में, एक ही कलर स्कीम को चार अलग-अलग कलर वैरिएंट में दिखाया गया है.

पांचवीं इमेज. एक ही डिवाइस पर अलग-अलग कलर वैरिएंट कैसे दिखते हैं, इसका उदाहरण

आपका ऐप्लिकेशन, इन रंगों को ऐक्सेस करने के लिए अब भी उन्हीं टोकन का इस्तेमाल करता है. टोकन के बारे में ज़्यादा जानने के लिए, इस पेज पर टोकन की मदद से अपनी थीम बनाना लेख पढ़ें.

व्यू का इस्तेमाल शुरू करना

डाइनैमिक कलर को ऐप्लिकेशन या गतिविधि के लेवल पर लागू किया जा सकता है. ऐसा करने के लिए, applyToActivitiesIfAvailable() को कॉल करके, अपने ऐप्लिकेशन में ActivityLifeCycleCallbacks को रजिस्टर करें.

Kotlin

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Java

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

इसके बाद, अपने ऐप्लिकेशन में थीम जोड़ें.

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

टोकन की मदद से अपनी थीम बनाना

डाइनैमिक कलर, डिज़ाइन टोकन का इस्तेमाल करता है. इससे, अलग-अलग यूज़र इंटरफ़ेस (यूआई) एलिमेंट को रंग असाइन करने की प्रोसेस को ज़्यादा आसान और एक जैसा बनाया जा सकता है. डिज़ाइन टोकन की मदद से, यूज़र इंटरफ़ेस (यूआई) के अलग-अलग एलिमेंट को सेट वैल्यू के बजाय, सिमैंटिक तरीके से कलर रोल असाइन किए जा सकते हैं. इससे आपके ऐप्लिकेशन के टोनल सिस्टम को ज़्यादा फ़्लेक्सिबिलिटी, बढ़ाए जा सकने की योग्यता, और कंसिस्टेंसी मिलती है. यह खास तौर पर तब ज़्यादा असरदार होता है, जब हल्की और गहरे रंग वाली थीम और डाइनैमिक कलर के लिए डिज़ाइन किया जा रहा हो.

यहां दिए गए स्निपेट में, डाइनैमिक कलर टोकन लागू करने के बाद, हल्की और गहरे रंग वाली थीम के उदाहरण और उनसे जुड़ी कलर एक्सएमएल फ़ाइल दिखाई गई है.

हल्के रंग वाली थीम

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 का डाइनैमिक कलर पेज देखें.

  • बेस कलर पैलेट और अपने ऐप्लिकेशन के रंग और थीम जनरेट करने के लिए, Material Theme Builder देखें. यह 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>

इसके अलावा, Material Theme Builder का इस्तेमाल करके, अन्य रंग इंपोर्ट किए जा सकते हैं. इससे आपकी कलर स्कीम का दायरा बढ़ता है और एक जैसा कलर सिस्टम बनता है. इस विकल्प के साथ, पसंद के मुताबिक रंगों की टोन बदलने के लिए, HarmonizedColors का इस्तेमाल करें. इससे, उपयोगकर्ता के जनरेट किए गए रंगों के साथ इस्तेमाल करने पर, विज़ुअल बैलेंस और सुलभ कंट्रास्ट मिलता है. यह रनटाइम के दौरान applyToContextIfAvailable() के साथ होता है.

छठी इमेज. पसंद के मुताबिक रंगों को एक जैसा बनाने का उदाहरण

पसंद के मुताबिक रंगों को एक जैसा बनाने के बारे में Material 3 के दिशा-निर्देश देखें.

अडैप्टिव आइकॉन और विजेट पर डाइनैमिक कलर की सुविधा लागू करना

अपने ऐप्लिकेशन में डाइनैमिक रंग वाली थीमिंग की सुविधा चालू करने के अलावा, Android 12 और इसके बाद के वर्शन में विजेट के लिए और Android 13 और इसके बाद के वर्शन में अडैप्टिव आइकॉन के लिए भी डाइनैमिक रंग वाली थीमिंग की सुविधा चालू की जा सकती है.