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

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

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

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