स्टाइल और थीम

Compose का इस्तेमाल करके मैसेज लिखना
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. Compose में थीम इस्तेमाल करने का तरीका जानें.
Compose में डिज़ाइन सिस्टम →

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

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

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

स्टाइल और थीम, res/values/ में स्टाइल रिसोर्स फ़ाइल में बताई जाती हैं. आम तौर पर, इसका नाम styles.xml होता है.

पहली इमेज. एक ही गतिविधि पर दो थीम लागू की गई हैं: Theme.AppCompat (बाईं ओर) और Theme.AppCompat.Light (दाईं ओर).

थीम बनाम स्टाइल

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

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

थीम, नाम वाले संसाधनों के कलेक्शन को तय करती है. इनका रेफ़रंस, स्टाइल, लेआउट, विजेट वगैरह से दिया जा सकता है. थीम, Android संसाधनों को colorPrimary जैसे सेमैंटिक नाम असाइन करती हैं.

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

थीम और स्टाइल के साथ काम करने के तरीके के बारे में ज़्यादा जानने के लिए, Android स्टाइल: थीम बनाम स्टाइल ब्लॉग पोस्ट देखें.

स्टाइल बनाना और लागू करना

नया स्टाइल बनाने के लिए, अपने प्रोजेक्ट की res/values/styles.xml फ़ाइल खोलें. आपको जो भी स्टाइल बनानी है उसके लिए, यह तरीका अपनाएं:

  1. एक

    किसी व्यू में स्टाइल को इस तरह लागू किया जा सकता है:

        style="@style/GreenText"
    ... />

    अगर व्यू में एट्रिब्यूट लागू होता है, तो स्टाइल में बताए गए हर एट्रिब्यूट को उस व्यू पर लागू किया जाता है. व्यू, ऐसे किसी भी एट्रिब्यूट को अनदेखा कर देता है जिसे वह स्वीकार नहीं करता.

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

    किसी स्टाइल को बड़ा करना और उसे पसंद के मुताबिक बनाना

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

    उदाहरण के लिए, Android प्लैटफ़ॉर्म पर टेक्स्ट दिखने के डिफ़ॉल्ट स्टाइल को इनहेरिट किया जा सकता है और उसमें ये बदलाव किए जा सकते हैं:

     name="GreenText" parent="@android:style/TextAppearance">
     name="android:textColor">#00FF00

    हालांकि, अपने ऐप्लिकेशन के मुख्य स्टाइल हमेशा Android Support Library से इनहेरिट करें. सहायता लाइब्रेरी में मौजूद स्टाइल, हर वर्शन में उपलब्ध यूज़र इंटरफ़ेस (यूआई) एट्रिब्यूट के लिए हर स्टाइल को ऑप्टिमाइज़ करके, साथ काम करने की सुविधा देते हैं. सहायता लाइब्रेरी के स्टाइल का नाम, अक्सर प्लैटफ़ॉर्म के स्टाइल से मिलता-जुलता होता है. हालांकि, इसमें AppCompat शामिल होता है.

    किसी लाइब्रेरी या अपने प्रोजेक्ट से स्टाइल इनहेरिट करने के लिए, पैरंट स्टाइल का नाम बताएं. इसके लिए, पिछले उदाहरण में दिखाए गए @android:style/ हिस्से को बिना इस्तेमाल करें. उदाहरण के लिए, यहां दिए गए उदाहरण में, सहायता लाइब्रेरी से टेक्स्ट के दिखने के स्टाइल इनहेरिट किए गए हैं:

     name="GreenText" parent="TextAppearance.AppCompat">
     name="android:textColor">#00FF00

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

     name="GreenText.Large">
     name="android:textSize">22dp

    ज़्यादा नामों को चेन करके, इस तरह की स्टाइल को जितनी बार चाहें उतनी बार इनहेरिट किया जा सकता है.

    यह जानने के लिए कि किन एट्रिब्यूट को टैग के साथ एलान किया जा सकता है, अलग-अलग क्लास रेफ़रंस में "एक्सएमएल एट्रिब्यूट" टेबल देखें. सभी व्यू, बेस View क्लास के एक्सएमएल एट्रिब्यूट के साथ काम करते हैं. साथ ही, कई व्यू अपने खास एट्रिब्यूट जोड़ते हैं. उदाहरण के लिए, TextView एक्सएमएल एट्रिब्यूट में android:inputType एट्रिब्यूट शामिल होता है. इसे ऐसे टेक्स्ट व्यू पर लागू किया जा सकता है जिसमें इनपुट मिलता है, जैसे कि EditText विजेट.

    किसी स्टाइल को थीम के तौर पर लागू करना

    स्टाइल बनाने के तरीके से ही थीम बनाई जा सकती है. इन दोनों में अंतर यह है कि इन्हें लागू करने का तरीका अलग-अलग है: किसी व्यू पर style एट्रिब्यूट की मदद से स्टाइल लागू करने के बजाय, AndroidManifest.xml फ़ाइल में टैग या टैग पर, android:theme एट्रिब्यूट की मदद से थीम लागू की जाती है.

    उदाहरण के लिए, पूरे ऐप्लिकेशन पर Android Support Library की Material Design "गहरे रंग वाली" थीम लागू करने का तरीका यहां बताया गया है:

     ... >
     android:theme="@style/Theme.AppCompat" ... >

    सिर्फ़ एक गतिविधि पर "हलकी" थीम लागू करने का तरीका यहां बताया गया है:

     ... >
     ... >
         android:theme="@style/Theme.AppCompat.Light" ... >

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

    Android 5.0 (एपीआई लेवल 21) और Android Support Library v22.1 के बाद, अपनी लेआउट फ़ाइल में किसी व्यू के लिए android:theme एट्रिब्यूट भी तय किया जा सकता है. इससे उस व्यू और उसके सभी चाइल्ड व्यू की थीम बदल जाती है. यह आपके इंटरफ़ेस के किसी खास हिस्से में थीम के कलर पैलेट में बदलाव करने के लिए मददगार होता है.

    पिछले उदाहरणों में, Theme.AppCompat जैसी ऐसी थीम को लागू करने का तरीका बताया गया है जो Android Support Library से मिलती है. हालांकि, आम तौर पर, अपने ऐप्लिकेशन के ब्रैंड के हिसाब से थीम को पसंद के मुताबिक बनाया जाता है. ऐसा करने का सबसे अच्छा तरीका यह है कि सहायता लाइब्रेरी से इन स्टाइल को एक्सटेंड करें और कुछ एट्रिब्यूट को बदलें. इसके बारे में अगले सेक्शन में बताया गया है.

    स्टाइल की हैरारकी

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

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

    1. TextView से बनी क्लास पर टेक्स्ट स्पैन का इस्तेमाल करके, वर्ण या पैराग्राफ़-लेवल की स्टाइल लागू करना.
    2. प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस की मदद से एट्रिब्यूट लागू करना.
    3. अलग-अलग एट्रिब्यूट को सीधे किसी व्यू पर लागू करना.
    4. किसी व्यू पर स्टाइल लागू करना.
    5. डिफ़ॉल्ट स्टाइल.
    6. व्यू, गतिविधि या अपने पूरे ऐप्लिकेशन के कलेक्शन पर थीम लागू करना.
    7. व्यू के हिसाब से स्टाइल लागू करना. जैसे, TextView पर TextAppearance सेट करना.

    दूसरी इमेज. span से की गई स्टाइल, textAppearance से की गई स्टाइल को बदल देती है.

    TextAppearance

    स्टाइल की एक सीमा यह है कि किसी View पर सिर्फ़ एक स्टाइल लागू की जा सकती है. हालांकि, TextView में एक ऐसा TextAppearance एट्रिब्यूट भी दिया जा सकता है जो स्टाइल की तरह काम करता है. इसका उदाहरण यहां दिया गया है:

        ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

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

    TextAppearance, स्टाइल करने वाले उन एट्रिब्यूट के सबसेट के साथ काम करता है जो TextView के साथ उपलब्ध होते हैं. एट्रिब्यूट की पूरी सूची के लिए, TextAppearance देखें.

    TextView के कुछ सामान्य एट्रिब्यूट शामिल नहीं किए गए हैं. जैसे, lineHeight[Multiplier|Extra], lines, breakStrategy, और hyphenationFrequency. TextAppearance पैराग्राफ़ लेवल पर नहीं, बल्कि वर्ण लेवल पर काम करता है. इसलिए, ऐसे एट्रिब्यूट काम नहीं करते जिनका असर पूरे लेआउट पर पड़ता है.

    डिफ़ॉल्ट थीम को पसंद के मुताबिक बनाना

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

    उदाहरण के लिए, आपकी styles.xml फ़ाइल कुछ इस तरह दिखती है:

     name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    
     name="colorPrimary">@color/colorPrimary
     name="colorPrimaryDark">@color/colorPrimaryDark
     name="colorAccent">@color/colorAccent

    स्टाइल वैल्यू, प्रोजेक्ट की res/values/colors.xml फ़ाइल में बताए गए अन्य रंग संसाधनों के रेफ़रंस होती हैं. रंग बदलने के लिए, आपको इसी फ़ाइल में बदलाव करना होगा. डाइनैमिक कलर और अन्य पसंद के मुताबिक कलर की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, Material Design के कलर की खास जानकारी देखें.

    रंगों के बारे में जानने के बाद, res/values/colors.xml में वैल्यू अपडेट करें:

     version="1.0" encoding="utf-8"?>

    
     name="colorPrimary">#3F51B5

    
     name="colorPrimaryDark">#303F9F

    
     name="colorAccent">#FF4081

    इसके बाद, अपनी पसंद के मुताबिक किसी भी स्टाइल को बदला जा सकता है. उदाहरण के लिए, गतिविधि के बैकग्राउंड का रंग इस तरह बदला जा सकता है:

     name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
     name="android:windowBackground">@color/activityBackground

    अपनी थीम में इस्तेमाल किए जा सकने वाले एट्रिब्यूट की सूची देखने के लिए, R.styleable.Theme पर जाकर एट्रिब्यूट की टेबल देखें. अपने लेआउट में व्यू के लिए स्टाइल जोड़ते समय, व्यू क्लास के रेफ़रंस में "एक्सएमएल एट्रिब्यूट" टेबल देखकर भी एट्रिब्यूट देखे जा सकते हैं. उदाहरण के लिए, सभी व्यू में बेस View क्लास के एक्सएमएल एट्रिब्यूट काम करते हैं.

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

    Android सपोर्ट लाइब्रेरी में अन्य एट्रिब्यूट भी होते हैं. इनका इस्तेमाल करके, Theme.AppCompat से एक्सटेंड की गई थीम को पसंद के मुताबिक बनाया जा सकता है. जैसे, पिछले उदाहरण में दिखाया गया colorPrimary एट्रिब्यूट. इन्हें लाइब्रेरी की attrs.xml फ़ाइल में सबसे बेहतर तरीके से देखा जा सकता है.

    सहायता लाइब्रेरी में अलग-अलग थीम भी उपलब्ध हैं. हो सकता है कि आप पिछले उदाहरण में दिखाई गई थीम के बजाय, इनका इस्तेमाल करना चाहें. उपलब्ध थीम देखने के लिए, सबसे सही जगह लाइब्रेरी की themes.xml फ़ाइल है.

    वर्शन के हिसाब से स्टाइल जोड़ना

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

    res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

    values/styles.xml फ़ाइल में मौजूद स्टाइल सभी वर्शन के लिए उपलब्ध होते हैं. इसलिए, values-v21/styles.xml में मौजूद आपकी थीम, इन स्टाइल को इनहेरिट कर सकती हैं. इसका मतलब है कि "बेस" थीम से शुरू करके, वर्शन के हिसाब से स्टाइल में बदलाव करके, स्टाइल को डुप्लीकेट होने से बचाया जा सकता है.

    उदाहरण के लिए, Android 5.0 (एपीआई लेवल 21) और उसके बाद के वर्शन के लिए विंडो ट्रांज़िशन का एलान करने के लिए, आपको नए एट्रिब्यूट का इस्तेमाल करना होगा. इसलिए, res/values/styles.xml में आपकी बेस थीम इस तरह दिख सकती है:

    
    
     name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         name="colorPrimary">@color/primaryColor
         name="colorPrimaryDark">@color/primaryTextColor
         name="colorAccent">@color/secondaryColor
    

    
     name="AppTheme" parent="BaseAppTheme" />

    इसके बाद, res/values-v21/styles.xml में वर्शन के हिसाब से स्टाइल जोड़ें. इसके लिए, यह तरीका अपनाएं:

    
    
     name="AppTheme" parent="BaseAppTheme">
         name="android:windowActivityTransitions">true
         name="android:windowEnterTransition">@android:transition/slide_right
         name="android:windowExitTransition">@android:transition/slide_left

    अब अपनी मेनिफ़ेस्ट फ़ाइल में AppTheme लागू किया जा सकता है. इसके बाद, सिस्टम हर सिस्टम वर्शन के लिए उपलब्ध स्टाइल चुन लेता है.

    अलग-अलग डिवाइसों के लिए वैकल्पिक रिसॉर्स इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, वैकल्पिक रिसॉर्स उपलब्ध कराना लेख पढ़ें.

    विजेट की स्टाइल को पसंद के मुताबिक बनाना

    फ़्रेमवर्क और सहायता लाइब्रेरी में मौजूद हर विजेट का एक डिफ़ॉल्ट स्टाइल होता है. उदाहरण के लिए, जब Support Library की किसी थीम का इस्तेमाल करके अपने ऐप्लिकेशन को स्टाइल किया जाता है, तो Button के किसी इंस्टेंस को Widget.AppCompat.Button स्टाइल का इस्तेमाल करके स्टाइल किया जाता है. अगर आपको किसी बटन पर कोई दूसरा विजेट स्टाइल लागू करना है, तो अपनी लेआउट फ़ाइल में style एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, यहां दिए गए कोड से लाइब्रेरी के बटन का बॉर्डरलेस स्टाइल लागू होता है:

    अगर आपको यह स्टाइल सभी बटन पर लागू करना है, तो अपनी थीम के buttonStyle में इस तरह से एलान किया जा सकता है:

     name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     name="buttonStyle">@style/Widget.AppCompat.Button.Borderless
    ...

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

    अन्य संसाधन

    थीम और स्टाइल के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य संसाधन देखें:

    ब्लॉग पोस्ट