Material You का डिज़ाइन

Android 12 से, Material You डिज़ाइन में Android OS को बेहतर बनाने पर फ़ोकस किया गया है. इसका मकसद, उपयोगकर्ताओं को उनकी ज़रूरतों के हिसाब से एक ही तरह का अनुभव देना है. Android पार्टनर के तौर पर, हमारा सुझाव है कि आप अपने Android डिवाइसों में इन जगहों पर Material You डिज़ाइन का इस्तेमाल करें:

• डाइनैमिक कलर
• मोशन
• विजेट

डाइनैमिक कलर

डाइनैमिक कलर, Material You डिज़ाइन का मुख्य हिस्सा है. साथ ही, यह Android की कई सालों की रणनीति का अहम हिस्सा है. इसकी मदद से, उपयोगकर्ताओं को डिवाइस को अपनी पसंद के मुताबिक बनाने का ऐसा विकल्प मिलता है जो किसी और डिवाइस पर नहीं मिलता. Material You में ये सुविधाएं मिलती हैं:

• उपयोगकर्ताओं और डेवलपर को, किसी भी Android डिवाइस पर दिलचस्पी के मुताबिक कॉन्टेंट दिखाने की सुविधा मिलती है.

• Android OEMs को सिस्टम यूज़र इंटरफ़ेस (यूआई) और पहले पक्ष के ऐप्लिकेशन में लगातार बदलाव करने का मौका मिलता है. ये बदलाव, उनके हार्डवेयर और ब्रैंड के रंग, मैन्युफ़ैक्चरर, और फ़ॉर्म के हिसाब से होते हैं.

डाइनैमिक कलर का फ़ायदा पाने के लिए, Android 12 के Material You कलर एक्सट्रैक्शन स्टोरी का इस्तेमाल करें. इसे उपयोगकर्ताओं को दिए जाने वाले अपने सॉफ़्टवेयर के मुख्य हिस्से के तौर पर इस्तेमाल करें. डिवाइस पर, AOSP में मौजूद कलर निकालने के लॉजिक का इस्तेमाल करें. खास तौर पर, उस लॉजिक का इस्तेमाल करें जो किसी एक वॉलपेपर या थीम के सोर्स कलर को लेता है और उसे 65 कलर एपीआई के ज़रिए आउटपुट करता है. डाइनैमिक कलर से जुड़ी शर्तों के बारे में जानने के लिए, डाइनैमिक रंग का इस्तेमाल करना लेख पढ़ें.

डाइनैमिक कलर फ़्लो के पूरे प्रोसेस में चार चरण शामिल होते हैं. इनके बारे में यहां बताया गया है:

पहली इमेज. Material You का डाइनैमिक कलर फ़्लो

1. उपयोगकर्ता, OEM पिकर की मदद से वॉलपेपर या थीम बदलता है.

2. उपयोगकर्ता इनमें से कोई एक विकल्प चुनता है:

   • डिवाइस की थीम. चुनने के बाद, Android ज़रूरी शर्तें पूरी करने वाला एक सोर्स कलर अपने-आप चुन लेता है.

   • नया वॉलपेपर + थीम. चुने जाने पर, एओएसपी लॉजिक, चुने गए वॉलपेपर से अपने-आप एक सोर्स रंग चुन लेता है.

3. AOSP, सोर्स के एक रंग को पांच टोन वाले पैलेट में बदल देता है. हर पैलेट में 13 टोन वाले रंग के वैरिएंट होते हैं. इसके बाद, AOSP के लॉजिक के मुताबिक, 65 रंग एट्रिब्यूट अपने-आप पॉप्युलेट हो जाते हैं.

4. ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में, रंग के 65 एट्रिब्यूट का इस्तेमाल इस तरह किया जाता है कि वे Android ऐप्लिकेशन के पूरे नेटवर्क में एक जैसे हों. हम आपको डिवाइस के सिस्टम यूज़र इंटरफ़ेस (यूआई) और OEM के हिसाब से बनाए गए ऐप्लिकेशन के लिए, एक ही कलर पैलेट का इस्तेमाल करने का सुझाव देते हैं.

Android 12 के पैच

वॉलपेपर का रंग निकालने के लिए, एंड-टू-एंड लॉजिक पाने और डिवाइस पर 65-रंग वाले एपीआई को पूरे नेटवर्क के हिसाब से भरने के लिए, अपने Android 12 वर्शन में इन पैच को शामिल करें:

• ज़रूरी है

  • AOSP में monet जोड़ना
  • सीड कलर के लिए, क्रोमा/एलस्टार फ़िल्टर में बदलाव करें
  • टोन 90 पर, ज़्यादा से ज़्यादा 40 का क्रोमा इस्तेमाल करें

• खास सुझाव

  • बूट कलर sysprops सेट करते समय, रेस कंडीशन को ठीक करें.
  • ओवरले को थीम में होने वाले बदलावों के बारे में सूचना देने की अनुमति देना
  • बूट कलर की sysprop सेटिंग करते समय 'रेस कंडीशन' ठीक करना (दूसरा राउंड)
  • FeatureFlags को flags पैकेज में ले जाएं.
  • एक डिवाइस पर कई लोगों के काम करने की सुविधा के साथ थीम लागू करने की सुविधा को सही तरीके से लागू करना
  • रिबूट करने के बाद, वॉलपेपर के लिए चुने गए रंग का विकल्प न दिखने की समस्या को ठीक करना
  • तीसरे ह्यू का हिसाब लगाने से जुड़ी गड़बड़ी ठीक करना
  • बैकग्राउंड में चल रहे ऐप्लिकेशन को थीम बदलने की अनुमति न दें

ThemePicker पर पसंद के मुताबिक रंग तय करना

अगर एओएसपी थीम पिकर ऐप्लिकेशन का इस्तेमाल किया जा रहा है, तो यहां दी गई दोनों शर्तें पूरी होने पर, वॉलपेपर पिकर ऐप्लिकेशन कलर सेक्शन दिखाता है:

• frameworks/base/packages/SystemUI/res/values/flags.xml पर flag_monet का रैंक true है.
• पैकेज के नाम वाला सिस्टम स्टब APK, packages/apps/ThemePicker/res/values/override.xml फ़ाइल में themes_stub_package में बताया गया है.

स्टब APK फ़ॉर्मैट

इस APK का सैंपल वर्शन packages/apps/ThemePicker/themes में देखा जा सकता है.

इस APK में सिर्फ़ रिसॉर्स होने चाहिए. इनमें उपलब्ध बुनियादी रंगों और उनके नामों की जानकारी होनी चाहिए.

स्टब में res/xml के नीचे इस फ़ॉर्मैट वाली एक एक्सएमएल फ़ाइल होनी चाहिए:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

इस फ़ाइल में, color_bundles में मौजूद हर item का एक अलग नाम होता है. हालांकि, ऐसा तब ही होता है, जब नीचे दी गई स्ट्रिंग का नाम bundle_name_item हो.

हर रंग के लिए एक bundle_name_item स्ट्रिंग होनी चाहिए. साथ ही, हर रंग के लिए जानकारी देने वाला नाम होना चाहिए. इनका अनुवाद करने के लिए, res/values-language code डायरेक्ट्री में अनुवाद की गई उन स्ट्रिंग को जोड़ें जो इनसे मेल खाती हैं.

रंग की असल वैल्यू एक ही एक्सएमएल या यहां दिए गए फ़ॉर्मैट वाली किसी अलग रिसॉर्स एक्सएमएल फ़ाइल पर हो सकती हैं:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

कलर बंडल कलेक्शन में मौजूद हर आइटम के लिए, एक color_primary_item और एक color_secondary_item एंट्री होनी चाहिए. साथ ही, दोनों रंग एक ही होने चाहिए. इन color एंट्री की वैल्यू, हर रंग के लिए असल कलर कोड होती हैं. इन्हें बुनियादी रंग सेक्शन में दिखाया जाता है.

पहला चरण: उपयोगकर्ता के लिए थीम बनाने का अनुभव बेहतर बनाएं

थीम पिकर में, उपयोगकर्ता Material You की नई सुविधाओं का इस्तेमाल करके, डिवाइस को अपनी पसंद के मुताबिक बना सकते हैं. साथ ही, वे कलर के विकल्पों या पहले से तय रंगों में से किसी एक को चुन सकते हैं. यह आपके प्रॉडक्ट और उपयोगकर्ता के डेमोग्राफ़िक्स के हिसाब से है. इसलिए, थीम पिकर या वॉलपेपर पिकर का इस्तेमाल करके, उपयोगकर्ताओं को अपनी पसंद के मुताबिक और रंगीन अनुभव दिया जा सकता है.

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

दूसरा चरण: वॉलपेपर के रंग को सोर्स के रंग से निकालें

वॉलपेपर का रंग निकालने की सुविधा चालू करने के लिए, ऊपर सूची में दिए गए Android 12 पैच को चुनें. यह सुविधा, आने वाले एओएसपी रिलीज़ में डिफ़ॉल्ट रूप से चालू हो जाएगी. वॉलपेपर निकालने की सुविधा को ट्रिगर करने वाला AOSP लॉजिक, frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java से शुरू होता है. यह ThemeOverlayController#mOnColorsChangedListener पर, WallpaperManager#onWallpaperColorsChanged के ज़रिए शुरू होता है. हमारा सुझाव है कि डेवलपमेंट का एक जैसा अनुभव देने के लिए, बिना बदलाव किए गए एओएसपी लॉजिक का इस्तेमाल किया जाए.

डिफ़ॉल्ट रूप से, लॉजिक सबसे ज़्यादा फ़्रीक्वेंसी के कलर को चुनता है, जो इस्तेमाल के लिए सही होता है. एल्गोरिदम से मिले अन्य सोर्स कलर का फ़ायदा पाने और उन रंगों को थीम पिकर में उपयोगकर्ताओं को दिखाने के लिए, ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) का इस्तेमाल करें.

इस्तेमाल के लिए सही होने के लिए, सोर्स कलर (चाहे वह वॉलपेपर से निकाला गया हो या उपयोगकर्ता के चुने गए प्रीसेट से) की CAM16 च्रोमा वैल्यू कम से कम 5 होनी चाहिए. इससे यह पक्का होता है कि सोर्स कलर को एक रंग से 65 टोन वाले रंगों में बदलने पर, उस पर गहरे रंगों का असर न पड़े. साथ ही, वह उपयोगकर्ता की पसंद के मुताबिक बना रहे. CAM16 में रंगों को पढ़ने और उनमें बदलाव करने के लिए, Cam#fromInt या Cam#getInt का इस्तेमाल करें.

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

• डिफ़ॉल्ट Material पैलेट का इस्तेमाल करने के लिए, frameworks/base/packages/SystemUI/res/values/flags.xml पर flag_monet को बंद करें.
• पक्का करें कि उपयोगकर्ता अब भी प्रीसेट थीम पिकर का इस्तेमाल करके, अपने ओएस को पसंद के मुताबिक बना सकें.

तीसरा चरण: सोर्स के रंग को कलर एपीआई में बड़ा करें

पिछले चरण में मिले सोर्स कलर का इस्तेमाल करके, Android पांच यूनीक टोन पैलेट (ऐक्सेंट 1 से 3, न्यूट्रल 1 से 2) जनरेट करता है. हर पैलेट में 13 रंग होते हैं. साथ ही, हर रंग में अलग-अलग ल्यूमिनेंस वैल्यू (0 से 1, 000) होती हैं. इस तरह, कुल 65 रंग जनरेट होते हैं. Android 12 के पैच में दिया गया लॉजिक, रंग के इस दायरे को सही तरीके से लागू करता है. यहां दी गई जानकारी से, इसे लागू करने के बारे में पता चलता है.

डेवलपर के लिए, पांच टोन वाले पैलेट (accent1, accent2, accent3, neutral1, neutral2) और उनसे जुड़े 13 रंग, एक ही सोर्स कलर पर आधारित होने चाहिए. साथ ही, CAM16 के क्रोमा और ह्यू वैल्यू में नीचे दिए गए बदलाव होने चाहिए:

• system_accent1

  • क्रोमा: ऐसे कलर वैरिएंट के लिए "40" इस्तेमाल करें जिनके आखिरी चार अंक 0, 10, 50, और 100 हों, नहीं तो "48" का इस्तेमाल करें
  • ह्यू: सोर्स जैसा ही

• system_accent2

  • क्रोमा: "16" इस्तेमाल करें
  • ह्यू: सोर्स जैसा ही

• system_accent3

  • क्रोमा: "32" इस्तेमाल करें
  • ह्यू: 60 डिग्री तक घुमाएं

• system_neutral1

  • Chroma: "4" का इस्तेमाल करें
  • ह्यू: सोर्स जैसा ही

• system_neutral2

  • Chroma: "8" का इस्तेमाल करें
  • ह्यू: सोर्स जैसा ही

सीटीएस में, ल्यूमिनेंस और ह्यू एपीआई कॉल की पुष्टि करने के लिए टेस्ट शामिल हैं. चलाने के लिए, atest SystemPalette का इस्तेमाल करें.

चौथा चरण: ऐप्लिकेशन और सिस्टम यूज़र इंटरफ़ेस (यूआई) में डाइनैमिक कलर का इस्तेमाल करना

किसी डिवाइस पर डाइनैमिक कलर सेट होने के बाद, ऐप्लिकेशन उन रंगों का इस्तेमाल करने के लिए, Material के दिशा-निर्देशों का पालन करते हैं. तीसरे पक्ष के ऐप्लिकेशन के लिए, material.io पर 26 अक्टूबर, 2021 तक मटीरियल गाइडलाइन रिलीज़ हो जाएंगी. हमारा सुझाव है कि सिस्टम यूज़र इंटरफ़ेस और पहले पक्ष के ऐप्लिकेशन के लिए, उपयोगकर्ता अनुभव में डाइनैमिक रंगों को इस तरह से इंटिग्रेट करें कि वे आपके हार्डवेयर और ब्रैंड के हिसाब से हों. इससे आपको अपने डिवाइसों में अंतर करने में मदद मिलेगी.

डाइनैमिक कलर के बारे में सामान्य दिशा-निर्देश पाने के लिए, यहां दी गई जानकारी देखें:

• ऐप्लिकेशन और सिस्टम यूज़र इंटरफ़ेस (यूआई) में फ़ोरग्राउंड एलिमेंट के लिए, एक्सेंट कलर का इस्तेमाल करें:

  @android:color/system_accent1_0 … 1000 // most-used foreground color group
  @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
  @android:color/system_accent3_0 … 1000 // playful, analogous color
  

• ऐप्लिकेशन के बैकग्राउंड एलिमेंट और सिस्टम यूज़र इंटरफ़ेस (यूआई) के लिए, न्यूट्रल कलर का इस्तेमाल करें:

  @android:color/system_neutral1_0 … 1000 // most-used background color group
  @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
  

Material You में कलर मैप करने के तरीके और SysUI में एपीआई के इस्तेमाल के तरीके के बारे में ज़्यादा जानने के लिए, अन्य संसाधन देखें.

पांचवां चरण: AOSP WallpaperPicker को लागू करते समय, डाइनैमिक कलर के विकल्प जोड़ना

Android 13 और उसके बाद के वर्शन के लिए बनाए गए ऐप्लिकेशन

Android 13 से, android.theme.customization.accent_color का इस्तेमाल नहीं किया जा सकता. अलग-अलग रंग के वैरिएंट के साथ काम करने के लिए, एक नया एट्रिब्यूट android.theme.customization.theme_style जोड़ा गया है. फ़िलहाल, हमारे कोडबेस में ये चार वैरिएंट हैं:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

इन्हें Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES को भेजा जाता है, जैसा कि यहां JSON में दिखाया गया है:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Android 12 और उससे पहले के वर्शन के लिए बनाए गए ऐप्लिकेशन

कस्टम थीम पिकर का इस्तेमाल करते समय, डिवाइस को Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES को एक मान्य सोर्स रंग भेजना होगा. इसके लिए, उन्हें नीचे दिए गए फ़ॉर्मैट में JSON फ़ाइल देनी होगी (जहां 746BC1, सोर्स का मान्य रंग है):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

ऐसा करने से, वॉलपेपर का रंग नहीं निकाला जा सकता (दूसरा चरण) और दिए गए सोर्स का रंग सीधे 65 रंग वाले एट्रिब्यूट में बदल जाता है (तीसरा चरण).

छठा चरण: टिकट दर्ज करना

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

मोशन

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

अपने ओएस में ओवरस्क्रोल की सुविधा का इस्तेमाल करना

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

दूसरी इमेज. Android 12 में ओवरस्क्रोल इफ़ेक्ट, जैसा कि सेटिंग में दिखाया गया है

डेवलपर के डेटा को एक जैसा रखने के लिए, पक्का करें कि आपके डिवाइसों पर ओवरस्क्रोल का कुल असर इनके जैसा हो:

• जिन डिवाइसों पर ActivityManager.isHighEndGfx() के लिए सही वैल्यू दिखती है उन पर ओवरस्क्रोल इफ़ेक्ट, स्क्रीन का नॉन-लीनियर स्ट्रेच होता है (जैसा कि ऊपर दिखाया गया है).

• कम परफ़ॉर्मेंस वाले डिवाइसों पर, स्ट्रेच इफ़ेक्ट को आसानी से लीनियर स्ट्रेच में बदला जाता है, ताकि सिस्टम पर लोड कम हो.

पहले पक्ष के ऐप्लिकेशन में ओवरस्क्रोल की सुविधा का इस्तेमाल करना

कस्टम व्यू का इस्तेमाल करते समय, आपको कुछ ऐसे ऐप्लिकेशन और सिस्टम यूज़र इंटरफ़ेस (यूआई) में बदलाव करना पड़ सकता है जो स्ट्रेच इफ़ेक्ट का इस्तेमाल करते हैं.

• स्ट्रेच ओवरस्क्रोल की सुविधा का इस्तेमाल करने के लिए, नई लाइब्रेरी पर अपग्रेड करें:

  • RecyclerView के लिए androidx.recyclerview:recyclerview:1.3.0-alpha01
  • NestedScrollView और EdgeEffectCompat के लिए androidx.core:core:1.7.0-alpha01
  • ViewPager के लिए androidx.viewpager:viewpager:1.1-alpha01

• EdgeEffect का इस्तेमाल करने वाले कस्टम लेआउट के लिए, यूज़र एक्सपीरियंस (यूएक्स) में ये बदलाव किए गए हैं:

  • स्ट्रेच ओवरस्क्रोल की मदद से, उपयोगकर्ताओं को लेआउट के दौरान लेआउट के कॉन्टेंट से इंटरैक्ट नहीं करना चाहिए. उपयोगकर्ताओं को सिर्फ़ स्ट्रेच में बदलाव करना चाहिए, न कि कॉन्टेंट में मौजूद बटन को दबाना चाहिए.

  • EdgeEffect ऐनिमेशन के चालू होने के दौरान जब उपयोगकर्ता, कॉन्टेंट को छूते हैं, तो उन्हें ऐनिमेशन पकड़ना चाहिए और स्ट्रेच में बदलाव करने की अनुमति होनी चाहिए. मौजूदा पूल वैल्यू EdgeEffectCompat.getDistance() से उपलब्ध है.

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

  • नेस्ट किए गए कॉन्टेंट को स्क्रोल करते समय, अगर कॉन्टेंट को बड़ा किया जाता है, तो नेस्ट किए गए कॉन्टेंट से पहले, बड़ा किए गए कॉन्टेंट पर टच मोशन का इस्तेमाल किया जाना चाहिए. ऐसा न करने पर, जब उंगली की दिशा बदलती है, तो नेस्ट किए गए कॉन्टेंट को स्क्रोल किया जा सकता है.

ओवरस्क्रोल के बारे में ज़्यादा जानने के लिए, स्क्रोल करने के जेस्चर को ऐनिमेट करना लेख पढ़ें.

अपने ओएस में रिपल (टच फ़ीडबैक) का इस्तेमाल करना

Android 12 में, टैप करने पर उपयोगकर्ताओं को फ़ीडबैक देने के लिए, स्क्रीन पर हल्का और ज़्यादा सूक्ष्म स्पंदन दिखता है.

तीसरी इमेज. Android 12 में रिपल इफ़ेक्ट, जिसमें फ़िल करने के लिए ज़्यादा सॉफ़्ट ऐनिमेशन का इस्तेमाल किया गया है

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

विजेट

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

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

• अपने ऐप्लिकेशन में, एपीआई की नई सुविधाओं का फ़ायदा लें. इससे, जहां भी हो सके, पहले पक्ष के नए विजेट अपडेट किए जा सकते हैं या बनाए जा सकते हैं. अपने दायरे में आने वाले पहले पक्ष के सभी ऐप्लिकेशन विजेट के लिए, नीचे दी गई डेवलपर चेकलिस्ट देखें.

  • प्राथमिकता, प्लैटफ़ॉर्म के सुझावों के आधार पर तय की जाती है.
  • किसी सुझाव के बारे में ज़्यादा जानने के लिए, 'बदलाव' कॉलम में दिए गए लिंक पर जाएं.

  जगह	बदलें	लागू करने की प्राथमिकता
  होम के अनुभव को बेहतर बनाएं	बड़े किए जा सकने वाले प्रीव्यू जोड़ना	P1
  	विजेट का ब्यौरा जोड़ना	P1
  	विजेट को अपनी पसंद के हिसाब से बनाने की प्रोसेस को आसान बनाना	P2 (ज़रूरी नहीं)
  	बेहतर ट्रांज़िशन की सुविधा चालू करना	P0
  	ब्रॉडकास्ट ट्रैंपोलिन से बचना	P0
  विजेट से जुड़े दिशा-निर्देशों का पालन करना	विजेट के साइज़ और लेआउट को बेहतर बनाना	P2
  	डाइनैमिक रंग लागू करना	P0
  	राउंड किए गए कोने लागू करना	P0
  	नए कंपाउंड बटन जोड़ना	P2
  मौजूदा विजेट कोड को आसान बनाएं	रिमोट व्यू कलेक्शन को आसान बनाना	P2
  	RemoteView के रनटाइम को आसान बनाना	P2

अन्य संसाधन

SysUI के रंग का इस्तेमाल

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

चौथी इमेज. सिस्टम यूज़र इंटरफ़ेस (यूआई) में डाइनैमिक रंग का इस्तेमाल

मटीरियल लाइब्रेरी के कलर एट्रिब्यूट से जुड़े अपडेट

आने वाले वर्शन में, Material अपने थीम एट्रिब्यूट को अपडेट करेगा. इसके लिए, वह कलर रोल बनाएगा. इनका इस्तेमाल, खास व्यू को रंग देने के लिए किया जाएगा.

कलर की भूमिका	Android थीम एट्रिब्यूट	हल्के रंग वाली थीम डाइनैमिक कलर	गहरे रंग वाली थीम डाइनैमिक कलर
मुख्य	colorPrimary	सिस्टम_accent1_600	सिस्टम_accent1_200
प्राइमरी पर	colorOnPrimary	सिस्टम_accent1_0	system_accent1_800
Secondary	रंगसेकंडरी	system_accent2_600	system_accent2_200
सेकंडरी क्लास में	colorOnSecondary	system_accent2_0	system_accent2_800
कोई गड़बड़ी हुई	colorError	लागू नहीं (लाल 600)	लागू नहीं (red_200)
गड़बड़ी होने पर	colorOnError	लागू नहीं (सफ़ेद)	लागू नहीं (red_900)
बैकग्राउंड	android:रंग बैकग्राउंड	सिस्टम_न्यूट्रल1_10	सिस्टम_न्यूट्रल1_900
बैकग्राउंड पर	बैकग्राउंड पर रंग	सिस्टम_न्यूट्रल1_900	सिस्टम_न्यूट्रल1_100
Surface	कलरसफ़ेस	system_neutral1_10	system_neutral1_900
Surface पर	colorOnSurface	system_neutral1_900	system_neutral1_100

मटीरियल, अपने स्टेटस एट्रिब्यूट को इन पॉइंटर के साथ अपडेट करेगा:

कलर की भूमिका	Android थीम एट्रिब्यूट	हल्के रंग वाली थीम डाइनैमिक कलर	गहरे रंग वाली थीम डाइनैमिक कलर
मुख्य राज्य का कॉन्टेंट	colorPrimaryStateContent	system_accent1_700	system_accent1_200
प्राइमरी स्टेट लेयर	colorPrimaryStateLayer	system_accent1_600	system_accent1_300
दूसरे स्टेटस का कॉन्टेंट	रंगसेकंडरीस्टेटकॉन्टेंट	system_accent2_700	system_accent2_200
सेकंडरी स्टेटस लेयर	colorSecondaryStateLayer	system_accent2_600	सिस्टम_accent2_300
मुख्य स्टेटस कॉन्टेंट पर	colorOnPrimaryStateContent	system_accent1_0	system_accent1_800
प्राइमरी स्टेटस लेयर पर	colorOnPrimaryStateLayer	system_accent1_900	system_accent1_800
दूसरे दर्जे के कॉन्टेंट के बारे में जानकारी	colorOnSecondaryStateContent	सिस्टम_accent2_0	system_accent2_800
सेकंडरी स्टेटस लेयर पर	colorOnSecondaryStateLayer	सिस्टम_accent2_900	system_accent2_800
प्राइमरी कंटेनर की स्थिति वाले कॉन्टेंट पर	colorOnPrimaryContainerStateContent	system_accent1_900	system_accent1_900
प्राइमरी कंटेनर स्टेटस लेयर पर	colorOnPrimaryContainerStateLayer	system_accent1_900	system_accent1_900
सेकंडरी कंटेनर की स्थिति के कॉन्टेंट पर	colorOnSecondaryContainerStateContent	system_accent2_900	system_accent2_900
सेकंडरी कंटेनर स्टेटस लेयर पर	color-सेकंडरीकंटेनरस्टेट लेयर	system_accent2_900	system_accent2_900
तीसरे-पक्ष के कंटेनर की स्थिति के बारे में कॉन्टेंट	colorOnTertiaryContainerStateContent	system_accent3_900	system_accent3_900
कंटेनर की स्थिति की टर्शीयरी लेयर पर	colorOnTertiaryContainerStateLayer	system_accent3_900	system_accent3_900
स्टेटस कॉन्टेंट दिखाने की सुविधा के बारे में जानकारी	colorOnSurfaceStateContent	system_neutral1_900	system_neutral1_100
ऑन-सर्फ़ेस स्टेट लेयर	colorOnSurfaceStateLayer	system_neutral1_900	system_neutral1_100
प्रॉडक्ट के वैरिएंट की स्थिति दिखाने वाला कॉन्टेंट	colorOnSurfaceVariantStateContent	system_neutral2_700	system_neutral2_200
ऑन-सर्फ़ेस वैरिएंट स्टेट लेयर	colorOnSurfaceVariantStateLayer	system_neutral2_700	सिस्टम_न्यूट्रल2_200
गड़बड़ी वाले पेज का कॉन्टेंट	colorErrorStateContent	red800	red200

अक्सर पूछे जाने वाले सवाल

रंग में सुधार करने की सुविधा

जब कोई उपयोगकर्ता वॉलपेपर बदलता है, तो क्या रंग अपने-आप निकाला जाता है या इसे किसी जगह से ट्रिगर करने की ज़रूरत होती है?

Android 12 के पैच के साथ, वॉलपेपर का रंग निकालने की सुविधा डिफ़ॉल्ट रूप से चालू होती है.

ThemeOverlayController.java, ThemeOverlayController#mOnColorsChangedListener और WallpaperManager#onWallpaperColorsChanged के साथ लॉजिक को ट्रिगर करता है.

क्या हमें यह पता चल सकता है कि लाइव वॉलपेपर या वीडियो वॉलपेपर के लिए, रंग निकालने की सुविधा स्क्रीन से रंग कब लेती है? कुछ उपयोगकर्ताओं को आखिरी फ़्रेम के रंग चाहिए, क्योंकि यह ज़्यादातर समय दिखता है.

रंग हटाने की सुविधा तब ट्रिगर होती है, जब उपयोगकर्ता वॉलपेपर सेट करता है या स्क्रीन बंद होने के बाद (WallpaperEngine#notifyColorsChanged की स्क्रीन पर) दिखता है. आखिरी WallpaperColors इवेंट (लाइव वॉलपेपर से) तब लागू होता है, जब उपयोगकर्ता स्क्रीन बंद करके उसे फिर से चालू करता है.

थीम/वॉलपेपर पिकर

मैं थीम पिकर को कैसे चालू करूं, ताकि उपयोगकर्ता सबसे ज़्यादा इस्तेमाल किए गए रंग के बजाय, कई सोर्स रंग देख सकें? क्या डेटा निकालने के लॉजिक से उन रंगों को पाने का कोई तरीका है?

हां. थीम पिकर में, ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) का इस्तेमाल किया जा सकता है.

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

नहीं. थीम वाले आइकॉन, बीटा वर्शन में हैं और Android 12 में उपलब्ध नहीं हैं.

क्या Google Wallpaper ऐप्लिकेशन का इस्तेमाल, रंग निकालने और चुनने की सुविधाओं के साथ किया जा सकता है?

हां. इस पेज पर पहले बताए गए तरीके का पालन करके, Google Wallpaper ऐप्लिकेशन के नए वर्शन में ये सुविधाएं लागू की जा सकती हैं.

ज़्यादा जानकारी के लिए, अपने TAM से संपर्क करें.

क्या Google, ऐप्लिकेशन या सोर्स कोड शेयर कर सकता है, ताकि OEM अपने सेटिंग मेन्यू में डाइनैमिक कलर की झलक का अपना वर्शन लागू कर सकें. यह झलक, Google के वॉलपेपर पिकर ऐप्लिकेशन पर दिखने वाली झलक वाले सेक्शन से मिलती-जुलती होनी चाहिए?

झलक को रेंडर करने वाली मुख्य क्लास WallpaperPicker2 और Launcher3 हैं.

वॉलपेपर की झलक वाली स्क्रीन WallpaperSectionController है.

जैसा कि Google के वॉलपेपर ऐप्लिकेशन में दिखाया गया है, रंग बदलने के बाद झलक कैसे लागू करें?

वॉलपेपर पिकर ऐप्लिकेशन को उम्मीद है कि लॉन्चर में ContentProvider उपलब्ध होगा. Launcher3 पर आधारित लॉन्चर में यह उपलब्ध होता है. लॉन्चर में, GridCustomizationsProvider की मदद से झलक दिखाई जाती है. वॉलपेपर और स्टाइल ऐप्लिकेशन को इसे पढ़ने के लिए, लॉन्चर की मुख्य गतिविधि के मेटाडेटा में इसका रेफ़रंस दिया जाना चाहिए. ये सभी सुविधाएं, AOSP के Launcher3 में लागू की गई हैं. साथ ही, ये OEM के लिए उपलब्ध हैं.