Compose में एक्सएमएल थीम को Material 3 में माइग्रेट करना

किसी मौजूदा ऐप्लिकेशन में Compose का इस्तेमाल करने के लिए, आपको अपने Material XML थीम को माइग्रेट करना होगा, ताकि Compose कंपोनेंट के लिए MaterialTheme का इस्तेमाल किया जा सके. इसका मतलब है कि आपके ऐप्लिकेशन की थीमिंग के लिए, दो सोर्स ऑफ़ ट्रुथ होंगे: व्यू-आधारित थीम और Compose थीम. स्टाइल में किए गए बदलावों को कई जगहों पर अपडेट करना होगा. जब आपका ऐप्लिकेशन पूरी तरह से Compose पर माइग्रेट हो जाए, तब XML थीमिंग को हटा दें.

रंगों को माइग्रेट करने के लिए, मटीरियल थीम बिल्डर टूल का इस्तेमाल किया जा सकता है.

XML से Compose पर माइग्रेट करते समय, थीम को Material 3 Compose थीम पर माइग्रेट करें.

शब्दावली

शब्द	परिभाषा
MaterialTheme	यह कंपोज़ेबल फ़ंक्शन, Compose यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट को थीम (कलर, टाइपोग्राफ़ी, शेप) उपलब्ध कराता है.
Shape	यह एक Compose ऑब्जेक्ट है. इसका इस्तेमाल MaterialTheme के लिए, कस्टम कॉम्पोनेंट के आकार तय करने के लिए किया जाता है.
Typography	यह एक Compose ऑब्जेक्ट है. इसका इस्तेमाल, MaterialTheme के लिए कस्टम टेक्स्ट स्टाइल (फ़ॉन्ट फ़ैमिली, साइज़, मोटाई) तय करने के लिए किया जाता है.
Color	यह एक Compose ऑब्जेक्ट है. इसका इस्तेमाल MaterialTheme के लिए, कस्टम कलर स्कीम तय करने के लिए किया जाता है.
एक्सएमएल थीम	एक्सएमएल फ़ाइलों में तय किया गया Android का थीमिंग सिस्टम, जिसका इस्तेमाल व्यू सिस्टम करता है.

सीमाएं

माइग्रेट करने से पहले, इन बातों का ध्यान रखें:

• इस गाइड में, सिर्फ़ Material 3 पर माइग्रेट करने के बारे में बताया गया है. किसी अन्य डिज़ाइन सिस्टम से माइग्रेट करने के लिए, Material 2 या Compose में कस्टम डिज़ाइन सिस्टम देखें.
• हमारा मुख्य लक्ष्य, पूरी तरह से Compose पर माइग्रेट करना है. इससे एक्सएमएल थीमिंग को हटाया जा सकता है. इस गाइड में माइग्रेट करने का तरीका बताया गया है. हालांकि, इसमें एक्सएमएल थीमिंग को हमेशा के लिए हटाने का तरीका नहीं बताया गया है.

पहला चरण: डिज़ाइन सिस्टम का आकलन करना

पहचान करें कि XML व्यू प्रोजेक्ट में किस डिज़ाइन सिस्टम का इस्तेमाल किया गया है. Compose में मौजूदा डिज़ाइन सिस्टम को Material 3 पर माइग्रेट करने के तरीके और ज़रूरी चरणों का विश्लेषण करें.

दूसरा चरण: थीम की सोर्स फ़ाइलों की पहचान करना

थीमिंग के लिए ज़रूरी सभी एक्सएमएल संसाधनों और फ़ाइलों की पहचान करें और उन्हें ढूंढें: लाइट और डार्क कलर स्कीम, थीम, शेप, डाइमेंशन, टाइपोग्राफ़ी, स्टाइल और अन्य काम की फ़ाइलें.

स्ट्रिंग जैसे रिसॉर्स का फिर से इस्तेमाल किया जा सकता है. इन्हें माइग्रेट करने की ज़रूरत नहीं होती.

तीसरा चरण: रंगों को माइग्रेट करना

गहरे और हल्के रंग वाली कलर स्कीम को एक्सएमएल से Material 3 Compose में उनके बराबर के कॉम्पोनेंट में माइग्रेट करें.

ध्यान दें: Material 3 में रंगों के नाम, Material 2 में रंगों के नाम से अलग होते हैं.

चौथा चरण: कस्टम शेप और टाइपोग्राफ़ी माइग्रेट करना

• अगर आपका ऐप्लिकेशन कस्टम शेप का इस्तेमाल करता है, तो:

  1. अपने Compose कोड में, Shape ऑब्जेक्ट को परिभाषित करें, ताकि एक्सएमएल शेप की परिभाषाओं को दोहराया जा सके.

  2. अपने MaterialTheme को यह Shape ऑब्जेक्ट दें.

     ज़्यादा जानकारी के लिए, shapes देखें.

• अगर आपका ऐप्लिकेशन कस्टम टाइपोग्राफ़ी का इस्तेमाल करता है, तो:

  1. अपने Compose कोड में, Typography ऑब्जेक्ट को इस तरह से तय करें कि वह आपके एक्सएमएल टेक्स्ट स्टाइल और फ़ॉन्ट डेफ़िनिशन को दोहरा सके.

  2. अपने MaterialTheme को यह Typography ऑब्जेक्ट दें.

     ज़्यादा जानकारी के लिए, टाइपोग्राफ़ी देखें.

पांचवां चरण: थीम माइग्रेशन की पुष्टि करना

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

पुष्टि करें कि कंपोज़ थीम की सभी नई वैल्यू, मौजूदा एक्सएमएल वैल्यू से मेल खाती हों. माइग्रेट की गई किसी भी वैल्यू को हार्डकोड न करें.