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

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 एक्सएमएल

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 से अडैप्टिव आइकॉन के लिए भी डाइनैमिक कलर थीम की सुविधा चालू की जा सकती है.