Android Academy · पाठ

Colors और MaterialTheme

एकसमान थीम लागू करें।

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

Colors और MaterialTheme, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Compose में रंग

Compose रंगों को Color class के माध्यम से दर्शाता है। Color.Red और Color.Blue जैसे पहले से बने मान उपलब्ध हैं।

आप Color को Text के color या background जैसे पैरामीटर में देते हैं।

Text(
    text = "Hi",
    color = Color.Blue
)

कस्टम रंग मान

Color(0xFFRRGGBB) की मदद से hex code से कोई भी रंग बनाएँ। पहले दो अंक, FF, पूरी तरह अपारदर्शी होने का अर्थ रखते हैं।

उदाहरण के लिए, 0xFF6200EE एक बैंगनी रंग है।

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

पृष्ठभूमि का रंग

किसी composable के पीछे रंग भरने के लिए background modifier का उपयोग करें। Padding जोड़ें, ताकि सामग्री किनारों से न लगे।

क्रम महत्त्वपूर्ण है: background के बाद padding रखने पर padding वाला क्षेत्र भी भर जाता है।

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

MaterialTheme क्या है?

MaterialTheme एक ऐसी प्रणाली है, जो आपके ऐप के रंग, फ़ॉन्ट और आकारों को एक ही जगह रखती है।

Composables इससे जानकारी लेते हैं, इसलिए पूरा ऐप सुसंगत रहता है और उसकी शैली बदलना आसान होता है।

MaterialTheme {
    Text("Themed app")
}

थीम की रंग योजना

थीम का colorScheme primary, secondary और background जैसी नाम वाली भूमिकाएँ उपलब्ध कराता है।

स्थिर रंगों के बजाय इन्हें पढ़ने से आप एक ही जगह पर पूरा रूप बदल सकते हैं।

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary और onPrimary

हर मुख्य रंग के साथ उसके ऊपर लिखे जाने वाले पाठ के लिए एक on साथी रंग होता है, जैसे onPrimary।

पृष्ठभूमि के रूप में primary और पाठ के रूप में onPrimary का उपयोग करने से पढ़ने योग्य कंट्रास्ट सुनिश्चित होता है।

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

थीम की टाइपोग्राफी

MaterialTheme पाठ की शैलियों को भी typography में रखता है, जैसे titleLarge और bodyMedium।

सुसंगत और उचित आकार वाले पाठ के लिए इनमें से किसी एक को Text की style में दें।

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

हल्की और गहरी योजनाएँ

आप lightColorScheme() या darkColorScheme() से योजना बना सकते हैं और उसे MaterialTheme में दे सकते हैं।

योजनाएँ बदलने से आपका ऐप हल्के और गहरे, दोनों मोड का समर्थन कर सकता है।

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

योजना को कस्टम बनाना

योजना बनाते समय भूमिकाओं के नाम देकर उन्हें बदलें। यहाँ primary एक कस्टम हरा-नीला रंग बन जाता है।

colorScheme.primary को पढ़ने वाली हर चीज़ अपने-आप अपडेट हो जाती है।

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

थीम का उपयोग क्यों करें?

हर जगह रंगों को सीधे लिखने से नए डिज़ाइन लागू करना कठिन हो जाता है। MaterialTheme से पढ़ने पर एक बदलाव पूरे ऐप को अपडेट कर देता है।

यह सुगम्यता में भी मदद करता है, क्योंकि on-रंग अच्छा कंट्रास्ट बनाए रखते हैं।

Surface और Background

Surface composable अपनी सामग्री के पीछे थीम का background रंग और elevation लागू करता है।

किसी कार्ड या स्क्रीन को सही आधार रंग देने का यह एक साफ़ तरीका है।

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

त्वरित जाँच

रंगों और थीमिंग के बारे में अपना ज्ञान जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

आपने Color class, कस्टम hex रंगों और background modifier का उपयोग करना सीखा। MaterialTheme में colorScheme, typography और shapes एक साथ रखे जाते हैं।

primary और onPrimary जैसी भूमिकाओं को पढ़ने से कंट्रास्ट और सुसंगतता बनी रहती है तथा हल्की या गहरी योजनाओं का समर्थन मिलता है।

स्टाइलिंग पाठ्यक्रम पूरा करने के लिए शानदार काम किया!

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 36
पाठ: 152

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Colors और MaterialTheme” पाठ निःशुल्क है?

हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Colors और MaterialTheme” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Colors और MaterialTheme” में मैं क्या सीखूँगा?

एकसमान थीम लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Android Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Android Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Android Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Colors और MaterialTheme” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Android Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Android Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

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

← Android Academy पर वापस जाएँ