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 कलर फ़्लो

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

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

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

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

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

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

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

Android 12 के पैच

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

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

अगर AOSP ThemePicker ऐप्लिकेशन का इस्तेमाल किया जा रहा है, तो WallpaperPicker ऐप्लिकेशन में कलर सेक्शन तब दिखता है, जब ये दोनों शर्तें पूरी होती हैं:

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

डिफ़ॉल्ट रूप से, लॉजिक सबसे ज़्यादा फ़्रीक्वेंसी वाला वह रंग चुनता है जो इस्तेमाल के लिए सही होता है. एल्गोरिदम से मिले अन्य सोर्स कलर का फ़ायदा पाने और उन रंगों को थीम पिकर में उपयोगकर्ताओं को दिखाने के लिए, 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

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

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

    • Chroma: "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 में, व्यू स्ट्रेच के तौर पर ज़्यादा रिस्पॉन्सिव और डाइनैमिक ओवरस्क्रोल मोशन शामिल है. यह मोशन तब दिखता है, जब उपयोगकर्ता किसी सूची के किनारे से ज़्यादा स्क्रोल करने की कोशिश करता है. इसका उदाहरण यहां दिया गया है:

Material You ओवरस्क्रोल

दूसरी इमेज. 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 में, टैप करने पर उपयोगकर्ताओं को फ़ीडबैक देने के लिए, स्क्रीन पर हल्का और ज़्यादा सूक्ष्म स्पंदन दिखता है.

Material You रिपल

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

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

विजेट

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

अन्य संसाधन

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

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

Material You कलर का इस्तेमाल

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

Material Library के कलर एट्रिब्यूट से जुड़े अपडेट

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

कलर की भूमिका Android थीम एट्रिब्यूट हल्के रंग वाली थीम
डाइनैमिक कलर
गहरे रंग वाली थीम
डाइनैमिक कलर
मुख्य colorPrimary system_accent1_600 system_accent1_200
प्राइमरी पर colorOnPrimary system_accent1_0 system_accent1_800
Secondary colorSecondary system_accent2_600 system_accent2_200
सेकंडरी पर colorOnSecondary system_accent2_0 system_accent2_800
कोई गड़बड़ी हुई colorError लागू नहीं (red_600) लागू नहीं (red_200)
गड़बड़ी होने पर colorOnError लागू नहीं (सफ़ेद) लागू नहीं (red_900)
बैकग्राउंड android:colorBackground system_neutral1_10 system_neutral1_900
बैकग्राउंड में चलने वाली प्रोसेस colorOnBackground system_neutral1_900 system_neutral1_100
Surface colorSurface 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
राज्य के बारे में अन्य जानकारी colorSecondaryStateContent system_accent2_700 system_accent2_200
सेकंडरी स्टेटस लेयर colorSecondaryStateLayer system_accent2_600 system_accent2_300
मुख्य स्टेटस कॉन्टेंट पर colorOnPrimaryStateContent system_accent1_0 system_accent1_800
प्राइमरी स्टेटस लेयर पर colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
दूसरे स्टेटस वाले कॉन्टेंट के बारे में जानकारी colorOnSecondaryStateContent system_accent2_0 system_accent2_800
सेकंडरी स्टेटस लेयर पर colorOnSecondaryStateLayer system_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
सेकंडरी कंटेनर स्टेटस लेयर पर colorOnSecondaryContainerStateLayer 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 system_neutral2_200
गड़बड़ी वाले पेज का कॉन्टेंट colorErrorStateContent red800 red200

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Wallpaper ऐप्लिकेशन में दिखाए गए तरीके के मुताबिक, रंग बदलने के बाद झलक को कैसे लागू करें?

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