Android Academy · पाठ

थीम और शैलियाँ

विजेट के लिए पुनः उपयोग योग्य Styles और अपने ऐप के लिए Themes परिभाषित करें। Material 3 के रंग भूमिकाएँ, टाइपोग्राफी स्केल, कस्टम फ़ॉन्ट और डार्क मोड सेट अप करें।

पाठ 2, कुल 5 में से13 चरण

थीम और शैलियाँ, 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 के ज़रिए डार्क मोड
  • textAppearance attributes के ज़रिए टाइपोग्राफ़ी स्केल
  • रंग योजनाएँ जल्दी बनाने के लिए 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 पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. Material Design की मूल बातें
  2. थीम और शैलियाँ
  3. कस्टम Views
  4. एनिमेशन और ट्रांज़िशन
  5. Bottom Navigation और टैब
← Android Academy पर वापस जाएँ