Jetpack Compose मटीरियल डिज़ाइन को लागू करने की सुविधा देता है, जो बनाने में मदद करता है. मटीरियल डिज़ाइन कॉम्पोनेंट (बटन, कार्ड, स्विच वगैरह) इसे मटीरियल थीमिंग से बनाया गया है, जो मटीरियल डिज़ाइन को कस्टमाइज़ करना, ताकि आपके प्रॉडक्ट के ब्रैंड को बेहतर तरीके से दिखाया जा सके. एक सामग्री थीम में रंग, टाइपोग्राफ़ी, और आकार एट्रिब्यूट शामिल होते हैं. अपनी पसंद के मुताबिक बनाने पर विशेषताएं नहीं होती हैं, तो आपके बदलाव आपके द्वारा उपयोग किए जाने वाले घटकों में अपने आप दिखाई देते हैं अपना ऐप्लिकेशन बनाने के लिए.
Jetpack Compose इन सिद्धांतों को MaterialTheme
के साथ लागू करता है
कंपोज़ेबल:
MaterialTheme( colors = // ... typography = // ... shapes = // ... ) { // app content }
अपने ऐप्लिकेशन की थीम बनाने के लिए, MaterialTheme
में पास किए जाने वाले पैरामीटर कॉन्फ़िगर करें.
पहला डायग्राम. पहला स्क्रीनशॉट ऐसा ऐप्लिकेशन दिखाता है जो कॉन्फ़िगर नहीं हो रहा है
MaterialTheme
सेट किया गया है. इसलिए, यह डिफ़ॉल्ट स्टाइल का इस्तेमाल करता है. दूसरे स्क्रीनशॉट में
ऐसा ऐप्लिकेशन जो स्टाइल को पसंद के मुताबिक बनाने के लिए, MaterialTheme
को पैरामीटर पास करता है.
रंग
Compose में Color
क्लास की मदद से कलर को मॉडल किया जाता है, यह एक आसान तरीका है
डेटा होल्डिंग क्लास.
val Red = Color(0xffff0000) val Blue = Color(red = 0f, green = 0f, blue = 1f)
साथ ही, इन्हें जैसे चाहें वैसे व्यवस्थित किया जा सकता है (टॉप-लेवल कॉन्सटेंट के तौर पर, सिंगलटन या परिभाषित इनलाइन) का इस्तेमाल किया जाता है, तो हम सशक्त रूप से आपकी थीम तैयार कर सकता है और वहां से रंगों को पा सकता है. इस तरीके से गहरे रंग वाली थीम और नेस्ट की गई थीम को आसानी से इस्तेमाल किया जा सकता है.
दूसरा डायग्राम. मटीरियल कलर सिस्टम.
लिखने से Colors
मिलती है
क्लास को मॉडल करने के लिए
मटीरियल कलर सिस्टम. Colors
से मिलते हैं
लाइट के सेट बनाने के लिए फ़ंक्शन बिल्डर
या गहरे रंग वाली
रंग:
private val Yellow200 = Color(0xffffeb46) private val Blue200 = Color(0xff91a4fc) // ... private val DarkColors = darkColors( primary = Yellow200, secondary = Blue200, // ... ) private val LightColors = lightColors( primary = Yellow500, primaryVariant = Yellow400, secondary = Blue700, // ... )
Colors
तय करने के बाद, उन्हें MaterialTheme
को पास किया जा सकता है:
MaterialTheme( colors = if (darkTheme) DarkColors else LightColors ) { // app content }
थीम के रंगों का इस्तेमाल करना
MaterialTheme
कंपोज़ेबल को दिए गए Colors
को वापस लाया जा सकता है
MaterialTheme.colors
का इस्तेमाल करके.
Text( text = "Hello theming", color = MaterialTheme.colors.primary )
प्लैटफ़ॉर्म और कॉन्टेंट का रंग
कई कॉम्पोनेंट रंग और कॉन्टेंट के रंग, दोनों को स्वीकार करते हैं:
Surface( color = MaterialTheme.colors.surface, contentColor = contentColorFor(color), // ... ) { /* ... */ } TopAppBar( backgroundColor = MaterialTheme.colors.primarySurface, contentColor = contentColorFor(backgroundColor), // ... ) { /* ... */ }
इससे कंपोज़ेबल का कलर सेट करने के साथ-साथ, यह भी तय किया जा सकता है कि
कॉन्टेंट का डिफ़ॉल्ट रंग,उसमें मौजूद कंपोज़ेबल. कई
कंपोज़ेबल में कॉन्टेंट के इस रंग का इस्तेमाल डिफ़ॉल्ट रूप से किया जाता है. उदाहरण के लिए, Text
इसके आधार पर
अपने पैरंट की कॉन्टेंट के रंग पर लागू होती है. Icon
उस रंग का इस्तेमाल अपने पैरंट एलिमेंट के रंग को सेट करने के लिए करता है
रंगत करें.
तीसरी इमेज. अलग-अलग बैकग्राउंड कलर सेट करने पर, टेक्स्ट और आइकॉन के अलग-अलग रंग दिखते हैं.
contentColorFor()
यह तरीका सही "on" का इस्तेमाल करता है
किसी भी थीम के कलर के लिए रंग. जैसे, अगर primary
बैकग्राउंड कलर सेट किया जाता है
Surface
पर, यह इस फ़ंक्शन का इस्तेमाल करके, onPrimary
को कॉन्टेंट के तौर पर सेट करता है
रंग. अगर बिना थीम वाला बैकग्राउंड कलर सेट किया जाता है, तो आपको
का रंग सही होना चाहिए. LocalContentColor
का इस्तेमाल करें
को वापस पाने के लिए,
दिया गया क्रम.
सामग्री ऐल्फ़ा
आम तौर पर, किसी कॉन्टेंट की अहमियत के बारे में बताने के लिए, अक्सर आप अलग-अलग तरह का तरीका चुनते हैं साथ ही, विज़ुअल हैरारकी भी उपलब्ध कराई जा सकती है. मटीरियल डिज़ाइन टेक्स्ट को आसानी से पढ़ने लायक बनाना सुझाव सलाह इसके लिए, ओपैसिटी के अलग-अलग लेवल का इस्तेमाल किया जा रहा है, ताकि अहमियत के अलग-अलग लेवल के बारे में बताया जा सके.
Jetpack Compose इसे LocalContentAlpha
की मदद से लागू करता है.
आप एक मान देकर पदानुक्रम के लिए सामग्री ऐल्फ़ा तय कर सकते हैं
इसके लिए CompositionLocal
.
नेस्ट किया गया
कंपोज़ेबल में इस वैल्यू का इस्तेमाल, अपने कॉन्टेंट में ऐल्फ़ा ट्रीटमेंट को लागू करने के लिए किया जा सकता है.
उदाहरण के लिए, Text
और Icon
डिफ़ॉल्ट रूप से LocalContentColor
का कॉम्बिनेशन इस्तेमाल करें, जो LocalContentAlpha
के लिए अडजस्ट किए गए है. सामग्री में कुछ स्टैंडर्ड ऐल्फ़ा वैल्यू दी गई हैं (high
, medium
,
disabled
) को ContentAlpha
ऑब्जेक्ट से बनाया गया है.
// By default, both Icon & Text use the combination of LocalContentColor & // LocalContentAlpha. De-emphasize content by setting content alpha CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) { Text( // ... ) } CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) { Icon( // ... ) Text( // ... ) }
CompositionLocal
के बारे में ज़्यादा जानने के लिए, इस सुविधा के साथ स्थानीय तौर पर स्कोप वाला डेटा देखें
कंपोज़िशन लोकल गाइड.
चौथी इमेज. विज़ुअल के रूप में बातचीत करने के लिए, टेक्स्ट पर अलग-अलग फ़ोकस के लेवल लागू करें
सूचना की हैरारकी है. टेक्स्ट की पहली लाइन का टाइटल होता है. इसमें टाइटल होता है
सबसे अहम जानकारी शामिल करती है और ContentAlpha.high
का इस्तेमाल करती है. दूसरा
इस लाइन में कम ज़रूरी मेटाडेटा होता है और इसलिए, ContentAlpha.medium
का इस्तेमाल किया जाता है.
गहरे रंग वाली थीम
Compose में, हल्के और गहरे रंग वाली थीम के अलग-अलग सेट जोड़े जा सकते हैं
Colors
से MaterialTheme
कंपोज़ेबल:
@Composable fun MyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (darkTheme) DarkColors else LightColors, /*...*/ content = content ) }
इस उदाहरण में, MaterialTheme
को उसके कंपोज़ेबल फ़ंक्शन में रैप किया गया है,
इस पेज पर यह बताया जाता है कि गहरे रंग वाली थीम का इस्तेमाल करना है या नहीं. तय सीमा में
इस मामले में, फ़ंक्शन कोdarkTheme
डिवाइस की थीम की सेटिंग.
इस तरह के कोड का इस्तेमाल करके, यह देखा जा सकता है कि मौजूदा Colors
हल्के हैं या गहरे रंग के हैं:
val isLightTheme = MaterialTheme.colors.isLight Icon( painterResource( id = if (isLightTheme) { R.drawable.ic_sun_24 } else { R.drawable.ic_moon_24 } ), contentDescription = "Theme" )
एलिवेशन ओवरले
मटीरियल में, ज़्यादा ऊंचाई वाली गहरे रंग वाली थीम में सरफ़ेस मिलते हैं चढ़ाई ओवरले करते हैं, जो बैकग्राउंड को हल्का कर देता है. किसी सतह की ऊंचाई जितनी ज़्यादा होगी (उसे नज़दीक करना करने से पहले, रोशनी का स्तर हल्का हो जाता है.
ये ओवरले इस्तेमाल करते समय, Surface
कंपोज़ेबल की मदद से अपने-आप लागू हो जाते हैं
गहरे रंग. साथ ही, सरफ़ेस का इस्तेमाल करने वाले किसी भी अन्य मटीरियल के लिए:
Surface( elevation = 2.dp, color = MaterialTheme.colors.surface, // color will be adjusted for elevation /*...*/ ) { /*...*/ }
पांचवी इमेज. कार्ड और सबसे नीचे मौजूद नेविगेशन, दोनों में ही surface
रंग का इस्तेमाल किया गया है
बैकग्राउंड के तौर पर रखा जा सकता है. कार्ड और सबसे नीचे वाला नेविगेशन, दोनों अलग-अलग होते हैं
पृष्ठभूमि के ऊपर ऊंचाई स्तर, वे थोड़े अलग हैं
रंग–कार्ड बैकग्राउंड से हल्के होते हैं और नीचे मौजूद नेविगेशन
कार्ड से हल्का होता है.
पसंद के मुताबिक बनाए गए ऐसे मामलों के लिए जिनमें Surface
शामिल न हो, इसका इस्तेमाल करें
LocalElevationOverlay
,
एक CompositionLocal
जिसमें
ElevationOverlay
इस्तेमाल करने वाले
Surface
घटक:
// Elevation overlays // Implemented in Surface (and any components that use it) val color = MaterialTheme.colors.surface val elevation = 4.dp val overlaidColor = LocalElevationOverlay.current?.apply( color, elevation )
एलिवेशन ओवरले को अक्षम करने के लिए, null
कंपोज़ेबल हैरारकी:
MyTheme { CompositionLocalProvider(LocalElevationOverlay provides null) { // Content without elevation overlays } }
सीमित कलर एक्सेंट
सामग्री सीमित रंग लागू करने का सुझाव देती है
गहरे रंग के लिए उच्चारण
इनमें primary
रंग के बजाय surface
रंग के इस्तेमाल को प्राथमिकता देकर थीम
ज़्यादातर मामलों में. TopAppBar
और BottomNavigation
जैसे मटीरियल कंपोज़ेबल
डिफ़ॉल्ट रूप से यह व्यवहार लागू करता है.
छठी इमेज. सीमित रंगों वाली मटीरियल डार्क थीम. सबसे ऊपर मौजूद ऐप्लिकेशन बार इसमें हल्के रंग वाली थीम के मुख्य रंग और गहरे रंग वाली थीम में सरफ़ेस के रंग का इस्तेमाल किया गया है.
पसंद के मुताबिक स्थितियों के लिए, primarySurface
का इस्तेमाल करें
एक्सटेंशन प्रॉपर्टी:
Surface( // Switches between primary in light theme and surface in dark theme color = MaterialTheme.colors.primarySurface, /*...*/ ) { /*...*/ }
मुद्रण कला
सामग्री किसी टाइप के बारे में बताती है सिस्टम, आपको शब्दों के नाम वाली कुछ स्टाइल इस्तेमाल करने के लिए बढ़ावा देना चाहिए.
सातवीं इमेज. मटीरियल टाइप सिस्टम.
Compose, टाइप सिस्टम को Typography
, TextStyle
, और फ़ॉन्ट से जुड़ी क्लास के साथ लागू करता है. Typography
कंस्ट्रक्टर, हर स्टाइल के लिए डिफ़ॉल्ट विकल्प देता है, ताकि आप ऐसी किसी भी स्टाइल को छोड़ सकें जिसे आपको पसंद के मुताबिक नहीं बनाना है:
val raleway = FontFamily( Font(R.font.raleway_regular), Font(R.font.raleway_medium, FontWeight.W500), Font(R.font.raleway_semibold, FontWeight.SemiBold) ) val myTypography = Typography( h1 = TextStyle( fontFamily = raleway, fontWeight = FontWeight.W300, fontSize = 96.sp ), body1 = TextStyle( fontFamily = raleway, fontWeight = FontWeight.W600, fontSize = 16.sp ) /*...*/ ) MaterialTheme(typography = myTypography, /*...*/) { /*...*/ }
अगर आपको पूरे टेक्स्ट में एक ही टाइपफ़ेस का इस्तेमाल करना है, तो
defaultFontFamily parameter
और किसी भी TextStyle
एलिमेंट के fontFamily
को हटा दें:
val typography = Typography(defaultFontFamily = raleway) MaterialTheme(typography = typography, /*...*/) { /*...*/ }
टेक्स्ट स्टाइल का इस्तेमाल करना
TextStyle
को MaterialTheme.typography
से ऐक्सेस किया जाता है. वापस पाएं
TextStyle
को यह पसंद है:
Text( text = "Subtitle2 styled", style = MaterialTheme.typography.subtitle2 )
आठवीं इमेज. अपने ब्रैंड को ज़ाहिर करने के लिए, अलग-अलग टाइपफ़ेस और स्टाइल का इस्तेमाल करें.
आकार
सामग्री शेप सिस्टम, जिससे आपको का इस्तेमाल करें.
नौवीं इमेज. मटीरियल का शेप सिस्टम.
Compose, शेप सिस्टम को यहां लागू करता है:
Shapes
क्लास की मदद से,
आप यह तय करते हैं कि
CornerBasedShape
साइज़ की हर कैटगरी के लिए:
val shapes = Shapes( small = RoundedCornerShape(percent = 50), medium = RoundedCornerShape(0f), large = CutCornerShape( topStart = 16.dp, topEnd = 0.dp, bottomEnd = 0.dp, bottomStart = 16.dp ) ) MaterialTheme(shapes = shapes, /*...*/) { /*...*/ }
कई कॉम्पोनेंट, डिफ़ॉल्ट रूप से इन आकृतियों का इस्तेमाल करते हैं. उदाहरण के लिए,
Button
TextField
, और
FloatingActionButton
डिफ़ॉल्ट रूप से छोटा हो,
AlertDialog
डिफ़ॉल्ट रूप से मीडियम होता है और
ModalDrawer
डिफ़ॉल्ट रूप से बड़ा होता है —
आकार स्कीम का संदर्भ
पूरी मैपिंग के लिए किया जा सकता है.
आकृतियों का उपयोग करना
Shape
को MaterialTheme.shapes
से ऐक्सेस किया जाता है. इससे Shape
वापस पाएं
इस तरह कोड दें:
Surface( shape = MaterialTheme.shapes.medium, /*...*/ ) { /*...*/ }
10वीं इमेज. अपने ब्रैंड या स्थिति के बारे में बताने के लिए आकारों का इस्तेमाल करें.
डिफ़ॉल्ट स्टाइल
'लिखें' विंडो में इसके जैसा कोई सिद्धांत नहीं है Android व्यू से डिफ़ॉल्ट स्टाइल सेट करें. मटीरियल कॉम्पोनेंट को रैप करने वाले कंपोज़ेबल फ़ंक्शन बनाकर, इसी तरह की सुविधाएं दी जा सकती हैं. इसके लिए, आपको ‘ओवरलोड’ करना होगा. उदाहरण के लिए, बटन की स्टाइल बनाने के लिए, किसी बटन को अपने कंपोज़ेबल फ़ंक्शन में रैप करें. इसके बाद, सीधे तौर पर वे पैरामीटर सेट करें जिनमें आपको बदलाव करना है. साथ ही, कंपोज़ेबल में दूसरों को पैरामीटर के तौर पर दिखाएं.
@Composable fun MyButton( onClick: () -> Unit, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Button( colors = ButtonDefaults.buttonColors( backgroundColor = MaterialTheme.colors.secondary ), onClick = onClick, modifier = modifier, content = content ) }
थीम ओवरले
ऐसा करके, आपकी मदद से
कंपोज़ में Android व्यू से मिले थीम ओवरले को नेस्ट करके
MaterialTheme
कंपोज़ेबल. क्योंकि
MaterialTheme
थीम की मौजूदा वैल्यू के हिसाब से रंग, टाइपोग्राफ़ी, और आकारों को डिफ़ॉल्ट रूप से सेट कर देता है. अगर कोई थीम इनमें से किसी एक पैरामीटर को ही सेट करती है, तो दूसरे पैरामीटर की डिफ़ॉल्ट वैल्यू बनी रहती है.
इसके अलावा, व्यू पर आधारित स्क्रीन को 'लिखें' पर माइग्रेट करते समय, ध्यान रखें कि android:theme
एट्रिब्यूट का इस्तेमाल कैसे किया जा रहा है. आपको शायद एक नए
MaterialTheme
हो, जो 'लिखें' यूज़र इंटरफ़ेस (यूआई) ट्री के उस हिस्से में मौजूद हो.
इस उदाहरण में, जानकारी वाली स्क्रीन के ज़्यादातर हिस्से के लिए PinkTheme
का इस्तेमाल किया जाता है. इसके बाद, मिलते-जुलते सेक्शन के लिए BlueTheme
का इस्तेमाल किया जाता है. नीचे स्क्रीनशॉट और कोड देखें.
11वीं इमेज. नेस्ट की गई थीम.
@Composable fun DetailsScreen(/* ... */) { PinkTheme { // other content RelatedSection() } } @Composable fun RelatedSection(/* ... */) { BlueTheme { // content } }
कॉम्पोनेंट की स्थितियां
मटीरियल कॉम्पोनेंट जिनसे इंटरैक्ट किया जा सकता है, जैसे कि क्लिक किए गए, टॉगल किए गए कॉम्पोनेंट वगैरह में हो सकता है. स्थितियों में चालू, बंद, दबाया गया वगैरह शामिल हैं.
कंपोज़ेबल में अक्सर enabled
पैरामीटर होता है. इसे false
पर सेट करने से,
साथ ही, विज़ुअल के तौर पर दिखाने के लिए रंग और ऊंचाई जैसी प्रॉपर्टी बदल देता है
कॉम्पोनेंट की स्थिति.
12वीं इमेज. enabled = true
(बाएं) और enabled = false
वाला बटन
(दाएं).
ज़्यादातर मामलों में, रंग और ऊंचाई जैसी वैल्यू के लिए डिफ़ॉल्ट वैल्यू का इस्तेमाल किया जा सकता है. अगर आपको अलग-अलग राज्यों में इस्तेमाल की जाने वाली वैल्यू को कॉन्फ़िगर करना है, तो यहां क्लास और आसानी से इस्तेमाल किए जा सकने वाले फ़ंक्शन उपलब्ध हैं. बटन का उदाहरण नीचे देखें:
Button( onClick = { /* ... */ }, enabled = true, // Custom colors for different states colors = ButtonDefaults.buttonColors( backgroundColor = MaterialTheme.colors.secondary, disabledBackgroundColor = MaterialTheme.colors.onBackground .copy(alpha = 0.2f) .compositeOver(MaterialTheme.colors.background) // Also contentColor and disabledContentColor ), // Custom elevation for different states elevation = ButtonDefaults.elevation( defaultElevation = 8.dp, disabledElevation = 2.dp, // Also pressedElevation ) ) { /* ... */ }
13वीं इमेज. enabled = true
(बाएं) और enabled = false
वाला बटन
(दाएं), अडजस्ट किए गए रंग और ऊंचाई की वैल्यू के साथ.
लहरें
सामग्री के कॉम्पोनेंट यह बताने के लिए रिपल का इस्तेमाल करते हैं कि उनके साथ इंटरैक्ट किया जा रहा है. अगर आपने
आप अपने क्रम में MaterialTheme
का इस्तेमाल कर रहे हैं, तो Ripple
का इस्तेमाल
डिफ़ॉल्टIndication
इस तरह के कार्रवाई के लिए,
clickable
और
indication
.
ज़्यादातर मामलों में, डिफ़ॉल्ट Ripple
का इस्तेमाल किया जा सकता है. अगर आपको कॉन्फ़िगर करना है,
उनके लुक को कम किया जा सकता है, तो
RippleTheme
रंग और ऐल्फ़ा जैसी प्रॉपर्टी बदलने के लिए.
आप RippleTheme
की अवधि बढ़ा सकते हैं और
defaultRippleColor
और
defaultRippleAlpha
उपयोगिता फ़ंक्शन. इसके बाद, कस्टम रिपल थीम को क्रम से लगाने के लिए इनका इस्तेमाल किया जा सकता है
LocalRippleTheme
:
@Composable fun MyApp() { MaterialTheme { CompositionLocalProvider( LocalRippleTheme provides SecondaryRippleTheme ) { // App content } } } @Immutable private object SecondaryRippleTheme : RippleTheme { @Composable override fun defaultColor() = RippleTheme.defaultRippleColor( contentColor = MaterialTheme.colors.secondary, lightTheme = MaterialTheme.colors.isLight ) @Composable override fun rippleAlpha() = RippleTheme.defaultRippleAlpha( contentColor = MaterialTheme.colors.secondary, lightTheme = MaterialTheme.colors.isLight ) }
14वीं इमेज. RippleTheme
के ज़रिए अलग-अलग रिपल वैल्यू वाले बटन.
ज़्यादा जानें
Compose में मटीरियल थीमिंग के बारे में ज़्यादा जानने के लिए, ये देखें अतिरिक्त संसाधन शामिल करें.
कोड लैब
वीडियो
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose में कस्टम डिज़ाइन सिस्टम जोड़ना
- Compose में मटीरियल 2 से मटीरियल 3 पर माइग्रेट करना
- Compose में सुलभता