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

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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

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>

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

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

• मूल रंग पटल और अपने ऐप्लिकेशन के रंग और थीम जनरेट करने के लिए, सही का निशान लगाएं मटीरियल थीम बिल्डर से बाहर निकलकर, 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>

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

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

ज़रूरत के हिसाब से इस्तेमाल होने वाले आइकॉन और विजेट पर डाइनैमिक कलर लागू करें

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