थीम और शैलियाँ
विजेट के लिए पुनः उपयोग योग्य Styles और अपने ऐप के लिए Themes परिभाषित करें। Material 3 के रंग भूमिकाएँ, टाइपोग्राफी स्केल, कस्टम फ़ॉन्ट और डार्क मोड सेट अप करें।
थीम और शैलियाँ, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 5 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 5 पाठ शामिल हैं।
शैलियाँ बनाम थीम
दो ऐसी अवधारणाएँ जिन्हें अक्सर एक ही समझ लिया जाता है:
- Style — किसी एक विजेट पर लागू किए जाने वाले view attributes का संग्रह (जैसे टेक्स्ट का आकार, रंग और पैडिंग)। इसे
style="@style/MyButton"से सेट करें। - Theme — किसी Activity या ऐप पर लागू किए जाने वाले अर्थपूर्ण attributes का संग्रह। Views,
?attr/colorPrimaryसे theme attributes खोजते हैं।
Style परिभाषित करना
res/values/styles.xml में styles बनाएँ। Styles किसी parent से विरासत में लिए जा सकते हैं:
<!-- res/values/styles.xml -->
<resources>
<style name="TitleText" parent="TextAppearance.Material3.HeadlineMedium">
<item name="android:textColor">@color/on_surface</item>
<item name="android:fontFamily">@font/roboto_bold</item>
</style>
<style name="PrimaryButton" parent="Widget.Material3.Button">
<item name="android:paddingHorizontal">24dp</item>
<item name="cornerRadius">8dp</item>
</style>
</resources>
<!-- Using a style in XML: -->
<TextView
style="@style/TitleText"
android:text="Hello!" />Theme परिभाषित करना
Themes, Material 3 parent से विरासत लेते हैं और रंग व आकार के attributes को बदलते हैं:
<!-- res/values/themes.xml -->
<resources>
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
<!-- Color -->
<item name="colorPrimary">@color/primary</item>
<item name="colorOnPrimary">@color/on_primary</item>
<item name="colorSecondary">@color/secondary</item>
<item name="colorSurface">@color/surface</item>
<item name="colorBackground">@color/background</item>
<!-- Typography -->
<item name="textAppearanceBodyMedium">@style/BodyMedium</item>
<!-- Shape -->
<item name="shapeAppearanceMediumComponent">@style/Shape.Medium</item>
</style>
</resources>Material 3 की रंग प्रणाली
Material 3 सीधे hex मानों के बजाय अर्थपूर्ण रंग भूमिकाओं का उपयोग करता है। मुख्य भूमिकाएँ:
colorPrimary— मुख्य ब्रांड रंगcolorOnPrimary— primary बैकग्राउंड पर टेक्स्ट/आइकनcolorSecondary— उभरा हुआ रंगcolorSurface— कार्ड/शीट के बैकग्राउंडcolorError— त्रुटि की स्थितियाँcolorBackground— विंडो का बैकग्राउंड
रंग संसाधन
res/values/colors.xml में रंग परिभाषित करें:
<!-- res/values/colors.xml -->
<resources>
<color name="primary">#6750A4</color>
<color name="on_primary">#FFFFFF</color>
<color name="secondary">#625B71</color>
<color name="on_secondary">#FFFFFF</color>
<color name="surface">#FFFBFE</color>
<color name="background">#FFFBFE</color>
<color name="error">#B3261E</color>
</resources>डार्क थीम
Material 3 DayNight themes डार्क मोड को अपने-आप संभालती हैं। रंगों के लिए night variant जोड़ें:
<!-- res/values-night/colors.xml (night override) -->
<resources>
<color name="primary">#D0BCFF</color>
<color name="on_primary">#381E72</color>
<color name="surface">#1C1B1F</color>
<color name="background">#1C1B1F</color>
</resources>
// Switch dark mode programmatically:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) // force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) // autoटाइपोग्राफ़ी
Material 3 एक टाइपोग्राफ़िक स्केल परिभाषित करता है। एकसमान टेक्स्ट के लिए textAppearance attributes का उपयोग करें:
<TextView
android:textAppearance="?attr/textAppearanceDisplayLarge"
android:text="Big Title" />
<TextView
android:textAppearance="?attr/textAppearanceHeadlineMedium"
android:text="Section Header" />
<TextView
android:textAppearance="?attr/textAppearanceBodyMedium"
android:text="Body text content here" />
<TextView
android:textAppearance="?attr/textAppearanceLabelSmall"
android:text="Caption" />कस्टम फ़ॉन्ट
res/font/ में फ़ॉन्ट जोड़ें और उसे अपनी theme या style से संदर्भित करें:
<!-- res/font/my_font.xml — font family -->
<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
<font app:fontStyle="normal" app:fontWeight="400"
app:font="@font/roboto_regular" />
<font app:fontStyle="normal" app:fontWeight="700"
app:font="@font/roboto_bold" />
</font-family>
<!-- Apply to a style: -->
<style name="Theme.MyApp" parent="...">
<item name="android:fontFamily">@font/my_font</item>
</style>Activity पर Theme लागू करना
AndroidManifest.xml में theme सेट करें। आप प्रत्येक Activity के लिए अलग theme का उपयोग कर सकते हैं:
<!-- AndroidManifest.xml -->
<application
android:theme="@style/Theme.MyApp">
<!-- Different theme for splash screen -->
<activity
android:name=".SplashActivity"
android:theme="@style/Theme.MyApp.Splash" />
<activity
android:name=".MainActivity" />
</application>कोड में Theme Attributes पढ़ना
रनटाइम पर Kotlin कोड में किसी भी theme attribute को एक्सेस करें:
fun getColorFromTheme(context: Context, attrResId: Int): Int {
val typedValue = TypedValue()
context.theme.resolveAttribute(attrResId, typedValue, true)
return typedValue.data
}
// Usage:
val primaryColor = getColorFromTheme(this, com.google.android.material.R.attr.colorPrimary)
binding.myView.setBackgroundColor(primaryColor)Material Theme Builder
अपने ब्रांड रंग से पूरी Material 3 रंग योजना बनाने के लिए Material Theme Builder (m3.material.io/theme-builder) का उपयोग करें। यह colors.xml और themes.xml के लिए उपयोग के लिए तैयार XML files निर्यात करता है। एकसमान डिज़ाइन प्रणाली पाने का यह सबसे तेज़ तरीका है।
त्वरित जाँच
Android में Style और Theme के बीच मुख्य अंतर क्या है?
पुनरावलोकन: Themes और Styles
एकसमान डिज़ाइन की शुरुआत यहाँ से होती है:
- Styles — विजेट-स्तरीय attributes, अनेक views में दोबारा उपयोग योग्य
- Themes — ऐप/Activity-स्तरीय attributes, अर्थपूर्ण रंग भूमिकाएँ
- Material 3 की रंग भूमिकाएँ:
colorPrimary,colorSurface,colorErrorआदि values-night/colors.xml+MODE_NIGHT_FOLLOW_SYSTEMके ज़रिए डार्क मोडtextAppearanceattributes के ज़रिए टाइपोग्राफ़ी स्केल- रंग योजनाएँ जल्दी बनाने के लिए Material Theme Builder का उपयोग करें
अगला विषय: शुरू से कस्टम views बनाना।
एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 36
- पाठ
- 152
अक्सर पूछे जाने वाले प्रश्न
क्या “थीम और शैलियाँ” पाठ निःशुल्क है?
हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “थीम और शैलियाँ” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 5 पाठ शामिल हैं।
“थीम और शैलियाँ” में मैं क्या सीखूँगा?
विजेट के लिए पुनः उपयोग योग्य Styles और अपने ऐप के लिए Themes परिभाषित करें। Material 3 के रंग भूमिकाएँ, टाइपोग्राफी स्केल, कस्टम फ़ॉन्ट और डार्क मोड सेट अप करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Android Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Android Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Android Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 5 में से 2वाँ पाठ है।
“थीम और शैलियाँ” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Android Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Android Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।