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

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

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

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

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

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

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

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

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

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

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

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

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

  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)
    }
}

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

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

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

छठी इमेज. कस्टम रंगों को एक जैसा बनाने का उदाहरण

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

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

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