थीम

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

सीखने वाली अहम बातें

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

थीम के टाइप

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

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

सिस्टम की थीम

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

हल्के और गहरे रंग वाली थीम

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

गहरे रंग वाली थीम के कई फ़ायदे हैं: खिली धूप या कम रोशनी में भी स्क्रीन को आसानी से पढ़ा जा सकता है रोशनी, और रोशनी कम होने की वजह से आंखों पर ज़ोर कम पड़ता है. बैटरी. साथ ही, ज़्यादातर लोगों ने इस ऐप्लिकेशन की सबसे ज़्यादा मांग की है.

पहली इमेज: हल्के और गहरे रंग वाली थीम वाली वही होम स्क्रीन और आइकॉन दिखाई गईं.

हल्के और गहरे रंग वाली थीम इस्तेमाल करते समय, इन बातों का ध्यान रखें:

  • अपने कॉन्टेंट को बेहतर तरीके से दिखाने के लिए, कलर स्कीम को पसंद के मुताबिक बनाया जा सकता है. अगर इसका इस्तेमाल किया जा रहा है, तो मटीरियल थीम बिल्डर से, कोई स्कीम बनाने के लिए, अपने-आप डार्क थीम तैयार हो जाती है स्कीम. सामग्री और रंग सिस्टम को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानें. ब्रैंडेड थीम.
  • उपयोगकर्ता, सिस्टम-लेवल की डिसप्ले सेटिंग में जाकर हल्के रंग वाली थीम या गहरे रंग वाली थीम सेट कर सकते हैं हमेशा चालू, हमेशा बंद या दिन के समय के आधार पर अपने-आप सेट करें. हमारा सुझाव है कि आप: पसंद के मुताबिक सेटिंग तय करें, लेकिन साथ ही, इन-ऐप्लिकेशन कंट्रोल बना सकता है, ताकि उपयोगकर्ताओं को ज़्यादा बारीकी से बदलाव कर सकें.
  • वेबव्यू में वेब कॉन्टेंट के लिए हल्के, गहरे रंग वाली या डिफ़ॉल्ट स्टाइल का इस्तेमाल किया जा सकता है. पढ़ें वेबव्यू में गहरे रंग वाली थीम कैसे काम करती है.
  • अगर उपयोगकर्ताओं ने इसे चालू किया है, तो Android गहरे रंग वाली थीम को लागू कर सकता है. इस टूल का इस्तेमाल करके, ज़्यादा कंट्रोल के लिए, गहरे रंग वाली कस्टम थीम.
  • अगर उपयोगकर्ता ने अन्य थीम या सेटिंग चालू नहीं की हैं, तो आपके पास "लॉक किया जा रहा है" हल्के रंग वाली थीम का इस्तेमाल करें. हालांकि, हम ऐसा करने का सुझाव नहीं देते. क्योंकि यह उपयोगकर्ता की सुलभता और मनमुताबिक बनाने की ज़रूरतों को पूरा नहीं करता.
दूसरी इमेज: हल्के और गहरे रंग वाली थीम वाला कोई ऐप्लिकेशन, जो एक जैसा कॉन्टेंट दिखाता है
यूज़र जनरेटेड थीम

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

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

तीसरी इमेज: वॉलपेपर से ली गई यूज़र इंटरफ़ेस (यूआई) की कलर स्कीम


चौथी इमेज: ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में कलर स्कीम वाला वॉलपेपर
मैन्युफ़ैक्चरर की थीम

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

ऐप्लिकेशन की थीम

बेसलाइन

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

पसंद के मुताबिक (ब्रैंड)

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

आपके ऐप्लिकेशन में कई कस्टम स्कीम भी हो सकती हैं. भले ही, उपयोगकर्ता पूरी स्कीम इस्तेमाल कर सकता हो कॉन्टेंट से प्रेरित या सब-ब्रैंड वाले एलिमेंट में से चुनें.

पांचवीं इमेज: वही ऐप्लिकेशन और उसका कॉन्टेंट, जिसके लिए बेसलाइन थीम लागू की गई है (बाएं) और पसंद के मुताबिक थीम लागू की गई (दाएं)


छठी इमेज: बेसलाइन से जनरेट की गई थीम (बाईं ओर) और थीम वाले बटन कस्टम वैल्यू से मिलकर बना (दाएं)
कॉन्टेंट

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

सातवीं इमेज: ऐप्लिकेशन की मुख्य आर्ट से कॉन्टेंट हटाना. मीडिया सूचनाओं में, मीडिया आर्टवर्क से भी रंग निकाला जा सकता है

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

इमेज 8: किसी ऐप्लिकेशन में डाइनैमिक सेटिंग का इस्तेमाल करके, थीम के कॉम्बिनेशन का इस्तेमाल किया जा सकता है कुछ एलिमेंट के लिए रंग या ब्रैंड के रंग
मटीरियल

मटीरियल डिज़ाइन एक बेसलाइन थीम और थीमिंग सिस्टम (रंग, टाइप, आकार). मटीरियल थीमिंग को ज़्यादा काम के लिए भी इस्तेमाल किया जा सकता है एट्रिब्यूट शामिल करें.

ब्रैंड

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

Compose में कस्टम सिस्टम लागू करने का तरीका देखें.

थीम एट्रिब्यूट

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

रंग

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

किसी थीम में, कलर स्कीम टोन का ऐसा ग्रुप होती है जिसे किसी खास रोल के लिए असाइन किया जाता है जिन्हें कॉम्पोनेंट के साथ मैप किया जाता है. Android में रंग के बारे में ज़्यादा जानें यूज़र इंटरफ़ेस (यूआई) और Material 3 कलर सिस्टम.

नौवीं इमेज: रंग भरना

टाइप

Android का सिस्टम फ़ॉन्ट Roboto है (जो सभी ऐप्लिकेशन के लिए आसानी से उपलब्ध है) लेकिन आप प्रकार कस्टमाइज़ कर सकते हैं. इस बात पर ध्यान दें कि चुने गए फ़ॉन्ट को आसानी से पढ़ा जा सकता है या नहीं, ताकि भूमिका निभाने के लिए करते हैं. लागू करने के टाइप के बारे में जानें.

10वीं इमेज: हेडिंग के साइज़ के आधार पर प्रॉडक्ट टाइप के उदाहरण

आकार

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

इमेज 11: कंटेनर के कोने के आकार

आइकॉन

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

12वीं इमेज: मटीरियल आइकॉन के स्टाइल

अन्य थीम एट्रिब्यूट

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

अपने ऐप्लिकेशन में कोई थीम लागू करना

थीम बनाम स्टाइल और क्लास

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

Compose में कोई थीम लागू करना

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

Jetpack का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, Compose में मटीरियल डिज़ाइन 3 देखें मटीरियल डिज़ाइन 3 थीम लागू करने के लिए लिखें.

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
व्यू में कोई थीम लागू करना

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

Views का इस्तेमाल करना शुरू करें.

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

वेबव्यू

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

मटीरियल थीम को पसंद के मुताबिक बनाना

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

इमेज 13: मटीरियल थीम बिल्डर की मदद से, डाइनैमिक और पसंद के मुताबिक बनाए जा सकते हैं थीम