आपके ऐप्लिकेशन में डाइनैमिक कलर जोड़ा जा रहा है

1. शुरू करने से पहले

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

ज़रूरी शर्तें

डेवलपर को

• Android में थीम बनाने के बुनियादी कॉन्सेप्ट के बारे में जानकारी हो
• ऐप्लिकेशन की थीम में बदलाव करने में सहज हों

आपको क्या सीखने को मिलेगा

• मौजूदा मटीरियल कॉम्पोनेंट और Material 3 थीम के बीच अंतर कैसे करें
• किसी थीम को Material 3 में अपडेट करने का तरीका
• हमारे टूल का इस्तेमाल करके थीम बनाने और उन्हें लागू करने का तरीका
• थीम एट्रिब्यूट एक-दूसरे से कैसे जुड़े होते हैं

आपको किन चीज़ों की ज़रूरत होगी

• ऐसा कंप्यूटर जिस पर Android Studio इंस्टॉल हो.
• Tip Time ऐप्लिकेशन का कोड. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution

2. स्टार्टर ऐप्लिकेशन के बारे में खास जानकारी

Tip Time, टिप कैलकुलेट करने वाला एक ऐप्लिकेशन है. इसमें टिप को अपनी पसंद के मुताबिक बनाने के विकल्प मिलते हैं. यह हमारे Android Basics in Kotlin ट्रेनिंग कोर्स का एक सैंपल ऐप्लिकेशन है.

3. Gradle डिपेंडेंसी अपडेट करना

असली थीम को अपडेट करने और डाइनैमिक कलर लागू करने से पहले, आपके ऐप्लिकेशन की build.gradle फ़ाइल में कुछ बदलाव करने होंगे.

डिपेंडेंसी सेक्शन में जाकर पक्का करें कि मेटेरियल लाइब्रेरी 1.5.0-alpha04 या इसके बाद का वर्शन हो:

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

android सेक्शन में, compileSdkVersion और targetSdkVersion बदलें

से 31 या उसके बाद के वर्शन:

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

इन निर्देशों में, ऐसे ऐप्लिकेशन के बारे में बताया गया है जिनकी डिपेंडेंसी हाल ही में अपडेट की गई हैं. अगर कोई ऐप्लिकेशन, Material या इसके पुराने वर्शन का इस्तेमाल नहीं कर रहा है, तो कृपया Android के लिए Material Design Components के शुरू करने से जुड़े दस्तावेज़ में दिए गए निर्देश देखें.

आपने जहां भी थीम बनाई हैं वहां Theme.MaterialComponents.* के रेफ़रंस को Theme.Material3.* में बदलें. कुछ स्टाइल के लिए, Material3 नेमस्पेस में अब तक नई स्टाइल उपलब्ध नहीं है. हालांकि, पैरंट थीम को Theme.Material3.* पर अपडेट करने के बाद, ज़्यादातर कॉम्पोनेंट में नई स्टाइल लागू हो जाएगी. यहां हम देख सकते हैं कि बटन अब नए राउंडेड थीम वाले हो गए हैं.

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

themes.xml

<style name="Theme.TipTime" parent="Theme.Material3.Light">
   <!-- Primary brand color. -->
   <item name="colorPrimary">@color/green</item>
   <item name="colorPrimaryVariant">@color/green_dark</item>
   <item name="colorOnPrimary">@color/white</item>
   <!-- Secondary brand color. -->
   <item name="colorSecondary">@color/blue</item>
   <item name="colorSecondaryVariant">@color/blue_dark</item>
   <item name="colorOnSecondary">@color/black</item>
   <!-- Status bar color. -->
   <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
   <!-- For text input fields -->
   <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
   <!-- For radio buttons -->
   <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
   <!-- For switches -->
   <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>

4. कलर थीम और कलर रोल के बारे में जानकारी

Material 3 का कलर सिस्टम, आपके यूज़र इंटरफ़ेस (यूआई) में रंगों को व्यवस्थित तरीके से लागू करता है. Theme.AppCompat के कई एट्रिब्यूट अब भी इस्तेमाल किए जा रहे हैं. हालांकि, Theme.MaterialComponents.* में ज़्यादा एट्रिब्यूट जोड़े गए थे और Theme.Material3.* में और भी ज़्यादा एट्रिब्यूट जोड़े गए थे. इसलिए, अपने ऐप्लिकेशन की सभी स्क्रीन की जांच करना ज़रूरी है. इससे यह पक्का किया जा सकेगा कि बेस थीम से कोई भी ऐसी प्रॉपर्टी लागू न हो रही हो जिसे लागू नहीं किया गया है.

कलर रोल के बारे में जानकारी

Material 3 थीम में, रंग से जुड़े 20 से ज़्यादा एट्रिब्यूट होते हैं. शुरुआत में यह मुश्किल लग सकता है, लेकिन कुछ मुख्य रंग होते हैं जो एक ही तरह के चार से पांच रंगों के साथ मिलकर, नए रंग बनाते हैं.

ये कलर ग्रुप हैं:

• प्राइमरी, आपके ऐप्लिकेशन का मुख्य रंग
• सेकंडरी, आपके ऐप्लिकेशन का सेकंडरी कलर
• टर्शियरी, यह तीसरा रंग होता है, जो प्राइमरी और सेकंडरी रंग का पूरक होता है
• Error, इसका इस्तेमाल गड़बड़ी के टेक्स्ट और डायलॉग के लिए किया जाता है
• बैकग्राउंड
• Surface, SurfaceVariant, Surface Inverse

प्राइमरी, सेकंडरी, टर्शरी, और एरर के लिए भूमिकाएं इस तरह हैं:

<base color>	बेस कलर
on<base color>	बेस कलर पर दिखने वाले आइकॉन और टेक्स्ट का रंग
<base color>कंटेनर	यह बेस कलर से मिलता-जुलता होता है. इसका इस्तेमाल बटन, डायलॉग बॉक्स वगैरह के लिए किया जाता है
on<base color>Container	कंटेनर पर मौजूद आइकॉन और टेक्स्ट का रंग

उदाहरण के लिए, Material 3 में डिफ़ॉल्ट स्टाइल वाले फ़्लोटिंग ऐक्शन बटन में Primary का इस्तेमाल उसके बेस कलर के तौर पर किया जाता है. इसलिए, बटन के बैकग्राउंड कलर के लिए primaryContainer और उसके कॉन्टेंट के लिए onPrimaryContainer का इस्तेमाल किया जाता है.

थीम को मैन्युअल तरीके से पसंद के मुताबिक बनाते समय, आपको कम से कम यह पुष्टि करनी चाहिए कि आपने जिस भी मूल रंग को बदला है उसके लिए on<base color> एट्रिब्यूट की वैल्यू अब भी पढ़ी जा सकती हो.

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

बैकग्राउंड और सर्फ़ेस के बेस कलर आम तौर पर दो भूमिकाएं निभाते हैं. पहली, बेस कलर के लिए और दूसरी, on<base color> के लिए. on<base color> का इस्तेमाल, आइकॉन या टेक्स्ट के लिए किया जाता है.

5. Material Theme Builder की मदद से, Material 3 थीम बनाना

Material Theme Builder की मदद से, पसंद के मुताबिक कलर स्कीम बनाना आसान हो जाता है. साथ ही, इसके बिल्ट-इन कोड एक्सपोर्ट का इस्तेमाल करके, M3 कलर सिस्टम पर माइग्रेट किया जा सकता है और डाइनैमिक कलर का फ़ायदा लिया जा सकता है. ज़्यादा जानें material.io/material-theme-builder

Tip Time ऐप्लिकेशन की थीम में कॉम्पोनेंट के लिए कई स्टाइल शामिल हैं. हालांकि, ज़्यादातर स्टाइल Material 3 थीम में डिफ़ॉल्ट रूप से मौजूद होती हैं. हमें सिर्फ़ दो मुख्य रंगों पर ध्यान देना है: प्राइमरी और सेकंडरी.

ये हरे रंग के प्राइमरी कलर (#1B5E20) और नीले रंग के सेकंडरी कलर (#0288D1) से मिलते-जुलते हैं.

उन रंगों को Material Theme Builder में डाला जा सकता है. साथ ही, पूरी थीम एक्सपोर्ट की जा सकती है. (मान लें कि पूरी खास जानकारी के लिए, किसी दूसरी जगह पर लिंक आउट किया गया है).

ध्यान दें कि आपके चुने गए रंगों के टोन में बदलाव हो सकता है, ताकि रंग जनरेट करने वाले एल्गोरिदम के हिसाब से रंग तैयार किए जा सकें. साथ ही, यह भी पक्का किया जा सके कि रंग एक-दूसरे के साथ मेल खाते हों और उन्हें आसानी से पढ़ा जा सके.

कस्टम रंग डालने पर जनरेट हुई वैल्यू का सबसेट यहां दिया गया है.

6. Material Theme Builder की एक्सपोर्ट की गई फ़ाइलों के साथ काम करना

एक्सपोर्ट किए गए संग्रह में, वैल्यू और वैल्यू-नाइट/ डायरेक्ट्री होती हैं. इनमें अपनी themes.xml फ़ाइल होती है, जो हल्के और गहरे रंग वाली थीम से जुड़ी होती है. सभी रंग, values/colors.xml में तय किए जाते हैं.

फ़ाइलों को कॉपी किया जा सकता है. हालांकि, आपको AndroidManifest.xml या थीम फ़ाइलों में थीम का नाम बदलना होगा, ताकि दोनों एक-दूसरे से मेल खाएं. टूलिंग से मिला डिफ़ॉल्ट नाम AppTheme है.

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

ध्यान दें: आपको AndroidManifest.xml फ़ाइल के बारे में गड़बड़ी का मैसेज मिल सकता है. साथ ही, Android 12 पर चलने वाले ऐप्लिकेशन के लिए, गतिविधि के लिए android:exported की वैल्यू साफ़ तौर पर तय करनी होगी.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.tiptime">

   <application ...>
       <activity android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>

7. डाइनैमिक कलर की सुविधा जोड़ना

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

डाइनैमिक कलर एपीआई की मदद से, सभी गतिविधियों में डाइनैमिक कलर लागू किया जा सकता है

किसी ऐप्लिकेशन, अलग-अलग गतिविधियों या अलग-अलग व्यू या फ़्रैगमेंट में. इसके लिए:

इस ऐप्लिकेशन के लिए, हम डाइनैमिक कलर की सुविधा को पूरी दुनिया में लागू करेंगे.

ऐप्लिकेशन क्लास फ़ाइल बनाना

class TipTimeApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

हमें इस नई फ़ाइल का रेफ़रंस, Android मेनिफ़ेस्ट में देना होगा:

AndroidManifest.xml

< application android name=".TipTimeApplication
<!--- Other existing attributes –>

</application >

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

DynamicColors क्लास, एक ActivityLifecycleCallbacks रजिस्टर करती है. यह ActivityPreCreated पर इंटरसेप्ट करता है, ताकि सिस्टम की बनाई गई डाइनैमिक थीम ओवरले या आपकी दी गई थीम ओवरले को लागू किया जा सके.

8. पसंद के मुताबिक बनाए गए थीम ओवरले को लागू करना

हमारे टूल की मदद से, थीम ओवरले एक्सपोर्ट किए जा सकते हैं. हालांकि, अगर आपको कुछ एट्रिब्यूट बदलने हैं, तो उन्हें मैन्युअल तरीके से भी बनाया जा सकता है.

थीम ओवरले का इस्तेमाल किसी दूसरी थीम के साथ किया जाता है. यह सिर्फ़ उन वैल्यू को दिखाता है जिन्हें बेस थीम के ऊपर बदला जाएगा.

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

colors.xml

<resources>
    <color name="overlay_light_primary">#9C4146</color>
    <color name="overlay_light_onPrimary">#FFFFFF</color> 
    <color name= "overlay_light_primaryContainer">#FFDADB</color>
    <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

themes_overlays.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
    <item name="colorPrimary">@color/overlay_light_primary</item>
    <item name="colorOnPrimary">@color/overlay_light_onPrimary</item> 
    <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item> 
    <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

ऊपर दिए गए कोड के लिए, Android 12 डाइनैमिक लाइट थीम लागू करेगा. साथ ही, आपके बदलावों को उसके ऊपर ओवरले करेगा. इसके अलावा, किसी भी मान्य ThemeOverlay को पैरंट के तौर पर इस्तेमाल किया जा सकता है. इनमें से किसी एक का इस्तेमाल किया जा सकता है:

ThemeOverlay.Material3.Light

ThemeOverlay.Material3.Dark

ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark

ThemeOverlay.Material3.DynamicColors.DayNight

Material डिफ़ॉल्ट के बजाय इस थीम ओवरले का इस्तेमाल करने के लिए, कॉल को DynamicColors.applyToActivitiesIfAvailable पर बदलें:

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

9. कस्टम एट्रिब्यूट में डाइनैमिक रंग जोड़ना

अब तक हमने उन प्रॉपर्टी को बदला है जो Material 3 थीम में पहले से मौजूद हैं. डाइनैमिक कलर के मामले में, हमारे पास एक और विकल्प है. इसमें एक या उससे ज़्यादा कस्टम एट्रिब्यूट हो सकते हैं जिन्हें असाइन करने की ज़रूरत होती है.

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

system_accent1	प्राइमरी कलर टोन
system_accent2	सेकंडरी कलर टोन
system_accent3	टर्शरी कलर टोन
system_neutral1	न्यूट्रल बैकग्राउंड और सर्फ़ेस
system_neutral2	न्यूट्रल सर्फ़ेस और आउटलाइन

हर पैलेट में, टोनल स्टेप की संख्या होती है. ये टोनल स्टेप, सफ़ेद रंग से लेकर

ब्लैक के लिए: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

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

मान लें कि आपको आइकॉन को सेकंडरी ऐक्सेंट पैलेट का इस्तेमाल करके थीम करना है. इसके लिए, आपने attrs.xml में आइकॉन को रंग देने के लिए एक एट्रिब्यूट जोड़ा है.

attrs.xml

<resources>
    <attr name="iconColor" format="color" />
</resources>

आपकी थीम का ओवरले कुछ ऐसा दिख सकता है:

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"> 
<item name="iconColor">@android:color/system_accent2_600</item>
</style>

ऐप्लिकेशन को फिर से इंस्टॉल करने और वॉलपेपर बदलने पर, ऐप्लिकेशन उस सेकंडरी पैलेट को चुन लेगा.

ये पैलेट, Android 12 (एपीआई 31) के लिए खास तौर पर बनाए गए हैं. इसलिए, आपको -v31 सफ़िक्स वाले फ़ोल्डर में काम की फ़ाइलें रखनी होंगी. ऐसा तब तक करना होगा, जब तक आपके ऐप्लिकेशन में एसडीके का कम से कम वर्शन 31 या इसके बाद का सेट न हो.

10. खास जानकारी

इस कोडलैब में, आपने ये काम किए:

• अपनी थीम को Material 3 पर अपग्रेड करने के लिए, डिपेंडेंसी जोड़ें.
• नए रंग ग्रुप और भूमिकाओं के बारे में जानें.
• स्टैटिक थीम से डाइनैमिक कलर पर माइग्रेट करने का तरीका जानें.
• थीम ओवरले इस्तेमाल करने का तरीका जानें. साथ ही, कस्टम थीम एट्रिब्यूट के लिए डाइनैमिक कलर इस्तेमाल करने का तरीका जानें.