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

Compose का इस्तेमाल करके मैसेज लिखना

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

डाइनैमिक कलर - Material Design 3 →

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

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

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

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

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

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

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

   

3. हमारा सिस्टम हर रंग को 13 टोन के टोनल पैलेट में समझता है.

   

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

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

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

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

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

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

डाइनैमिक कलर को ऐप्लिकेशन या गतिविधि के लेवल पर लागू किया जा सकता है. ऐसा करने के लिए, अपने ऐप्लिकेशन में 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>

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

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

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

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

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>

ज़्यादा जानकारी के लिए:

• डाइनैमिक कलर, कस्टम कलर, और टोकन जनरेट करने के बारे में ज़्यादा जानने के लिए, Material 3 के डाइनैमिक कलर पेज पर जाएं.

• मूल रंग पटल और अपने ऐप्लिकेशन के रंग और थीम जनरेट करने के लिए, Material थीम बिल्डर टूल देखें. यह 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 से अडैप्टिव आइकॉन के लिए भी डाइनैमिक कलर थीम की सुविधा चालू की जा सकती है.