Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

Compose में मटीरियल डिज़ाइन 2

Jetpack Compose, मटीरियल डिज़ाइन को लागू करने की सुविधा देता है. यह डिजिटल इंटरफ़ेस बनाने के लिए, एक बेहतरीन डिज़ाइन सिस्टम है. मटीरियल डिज़ाइन के कॉम्पोनेंट (बटन, कार्ड, स्विच वगैरह) मटीरियल थीमिंग के आधार पर बनाए जाते हैं. यह मटीरियल डिज़ाइन को पसंद के मुताबिक बनाने का एक व्यवस्थित तरीका है, ताकि आपके प्रॉडक्ट के ब्रैंड को बेहतर तरीके से दिखाया जा सके. मटीरियल थीम में रंग, टाइपोग्राफ़ी, और शेप एट्रिब्यूट शामिल होते हैं. इन एट्रिब्यूट को पसंद के मुताबिक बनाने पर, आपके बदलाव उन कॉम्पोनेंट में अपने-आप दिखने लगते हैं जिनका इस्तेमाल करके ऐप्लिकेशन बनाया जाता है.

Jetpack Compose, इन सिद्धांतों को MaterialTheme कंपोज़ेबल के साथ लागू करता है:

MaterialTheme(
    colors = // ...
    typography = // ...
    shapes = // ...
) {
    // app content
}Material2Snippets.kt

अपने ऐप्लिकेशन को थीम देने के लिए, MaterialTheme को पास किए जाने वाले पैरामीटर कॉन्फ़िगर करें.

दो अलग-अलग स्क्रीनशॉट. पहले स्क्रीनशॉट में, डिफ़ॉल्ट MaterialTheme स्टाइल का इस्तेमाल किया गया है. वहीं, दूसरे स्क्रीनशॉट में, बदली गई स्टाइल का इस्तेमाल किया गया है. — **पहली इमेज.** पहले स्क्रीनशॉट में एक ऐसा ऐप्लिकेशन दिखाया गया है जिसमें `MaterialTheme` को कॉन्फ़िगर नहीं किया गया है. इसलिए, इसमें डिफ़ॉल्ट स्टाइल का इस्तेमाल किया गया है. दूसरे स्क्रीनशॉट में एक ऐसा ऐप्लिकेशन दिखाया गया है जो स्टाइल को पसंद के मुताबिक बनाने के लिए, `MaterialTheme` को पैरामीटर पास करता है.

रंग

Compose में रंगों को Color क्लास के साथ मॉडल किया जाता है. यह डेटा सेव करने वाली क्लास है.

val Red = Color(0xffff0000)
val Blue = Color(red = 0f, green = 0f, blue = 1f)Material2Snippets.kt

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

थीम के कलर पैलेट का उदाहरण — **दूसरी इमेज.** मटीरियल कलर सिस्टम.

Compose, 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,
    // ...
)Material2Snippets.kt

Colors तय करने के बाद, उन्हें MaterialTheme को पास किया जा सकता है:

MaterialTheme(
    colors = if (darkTheme) DarkColors else LightColors
) {
    // app content
}Material2Snippets.kt

थीम के रंगों का इस्तेमाल करना

MaterialTheme.colors का इस्तेमाल करके, MaterialTheme कंपोज़ेबल को दिए गए Colors को वापस पाया जा सकता है.

Text(
    text = "Hello theming",
    color = MaterialTheme.colors.primary
)Material2Snippets.kt

सरफ़ेस और कॉन्टेंट का रंग

कई कॉम्पोनेंट, रंग और कॉन्टेंट के रंग के पेयर को स्वीकार करते हैं:

Surface(
    color = MaterialTheme.colors.surface,
    contentColor = contentColorFor(color),
    // ...
) { /* ... */ }

TopAppBar(
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = contentColorFor(backgroundColor),
    // ...
) { /* ... */ }Material2Snippets.kt

इससे, कंपोज़ेबल का रंग सेट करने के साथ-साथ,कॉन्टेंट के लिए डिफ़ॉल्ट रंग भी सेट किया जा सकता है. कॉन्टेंट में कंपोज़ेबल शामिल होते हैं. कई कंपोज़ेबल, डिफ़ॉल्ट रूप से इस कॉन्टेंट कलर का इस्तेमाल करते हैं. उदाहरण के लिए, Text अपने पैरंट के कॉन्टेंट के रंग के आधार पर अपना रंग तय करता है. साथ ही, Icon उस रंग का इस्तेमाल करके अपना टिंट सेट करता है.

एक ही बैनर के दो उदाहरण, जिनमें अलग-अलग रंगों का इस्तेमाल किया गया है — **तीसरी इमेज.** बैकग्राउंड के लिए अलग-अलग रंग सेट करने पर, टेक्स्ट और आइकॉन के रंग भी अलग-अलग हो जाते हैं.

contentColorFor() तरीका, किसी भी थीम के रंग के लिए सही "ऑन" रंग को वापस लाता है. उदाहरण के लिए, अगर आपने Surface पर primary बैकग्राउंड कलर सेट किया है, तो यह फ़ंक्शन 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(
        // ...
    )
}Material2Snippets.kt

CompositionLocal के बारे में ज़्यादा जानने के लिए, CompositionLocal के साथ स्थानीय तौर पर स्कोप किया गया डेटा देखें.

किसी लेख के टाइटल का स्क्रीनशॉट, जिसमें टेक्स्ट पर अलग-अलग लेवल का ज़ोर दिखाया गया है — **चौथी इमेज.** टेक्स्ट पर अलग-अलग लेवल का ज़ोर देकर, जानकारी के क्रम को विज़ुअल तौर पर दिखाया जा सकता है. टेक्स्ट की पहली लाइन टाइटल होती है और इसमें सबसे अहम जानकारी होती है. इसलिए, इसमें `ContentAlpha.high` का इस्तेमाल किया जाता है. दूसरी लाइन में कम अहमियत वाला मेटाडेटा होता है. इसलिए, इसमें `ContentAlpha.medium` का इस्तेमाल किया जाता है.

गहरे रंग वाली थीम

Compose में, MaterialTheme कंपोज़ेबल को Colors के अलग-अलग सेट देकर, हल्की और गहरे रंग वाली थीम लागू की जाती हैं:

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        /*...*/
        content = content
    )
}Material2Snippets.kt

इस उदाहरण में, MaterialTheme को उसके खुद के composable function में रैप किया गया है. यह एक पैरामीटर को स्वीकार करता है, जो यह तय करता है कि गहरे रंग वाली थीम का इस्तेमाल करना है या नहीं. इस मामले में, फ़ंक्शन डिवाइस की थीम सेटिंग से क्वेरी करके, 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"
)Material2Snippets.kt

एलिवेशन ओवरले

मटीरियल डिज़ाइन में, गहरे रंग वाली थीम में ज़्यादा एलिवेशन वाली सतहों पर एलिवेशन ओवरले दिखते हैं. इससे उनका बैकग्राउंड हल्का हो जाता है. किसी सतह की ऊंचाई जितनी ज़्यादा होगी (उसे रोशनी के सोर्स के जितना करीब लाया जाएगा), वह सतह उतनी ही हल्की हो जाएगी.

Surface कंपोज़ेबल, गहरे रंगों का इस्तेमाल करते समय इन ओवरले को अपने-आप लागू करता है. साथ ही, कोई भी अन्य मटीरियल कंपोज़ेबल जो किसी सरफ़ेस का इस्तेमाल करता है:

Surface(
    elevation = 2.dp,
    color = MaterialTheme.colors.surface, // color will be adjusted for elevation
    /*...*/
) { /*...*/ }Material2Snippets.kt

किसी ऐप्लिकेशन का स्क्रीनशॉट, जिसमें अलग-अलग एलिवेशन लेवल पर मौजूद एलिमेंट के लिए इस्तेमाल किए गए अलग-अलग रंगों को दिखाया गया है — **पांचवीं इमेज.** कार्ड और पेज या स्क्रीन के नीचे मौजूद नेविगेशन बार, दोनों के बैकग्राउंड के लिए `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
)Material2Snippets.kt

एलिवेशन ओवरले की सुविधा बंद करने के लिए, कंपोज़ेबल हैरारकी में चुने गए पॉइंट पर null दें:

MyTheme {
    CompositionLocalProvider(LocalElevationOverlay provides null) {
        // Content without elevation overlays
    }
}Material2Snippets.kt

सीमित कलर ऐक्सेंट

Material Design के मुताबिक, गहरे रंग वाली थीम के लिए कम रंग वाले एक्सेंट इस्तेमाल करने चाहिए. इसके लिए, ज़्यादातर मामलों में primary रंग के बजाय surface रंग का इस्तेमाल करें. TopAppBar और BottomNavigation जैसे मटीरियल कंपोज़ेबल, डिफ़ॉल्ट रूप से इस व्यवहार को लागू करते हैं.

मटीरियल डार्क थीम का स्क्रीनशॉट. इसमें टॉप ऐप्लिकेशन बार को प्राइमरी कलर के बजाय, सरफेस कलर का इस्तेमाल करते हुए दिखाया गया है. इससे कलर एक्सेंट सीमित हो जाते हैं — **छठी इमेज.** मटीरियल डिज़ाइन वाली गहरे रंग की थीम, जिसमें सीमित कलर एक्सेंट हैं. टॉप ऐप्लिकेशन बार, हल्के रंग वाली थीम में प्राइमरी कलर और गहरे रंग वाली थीम में सरफ़ेस कलर का इस्तेमाल करता है.

कस्टम स्थितियों के लिए, primarySurface एक्सटेंशन प्रॉपर्टी का इस्तेमाल करें:

Surface(
    // Switches between primary in light theme and surface in dark theme
    color = MaterialTheme.colors.primarySurface,
    /*...*/
) { /*...*/ }Material2Snippets.kt

टाइपोग्राफ़ी

मटीरियल डिज़ाइन, टाइप सिस्टम को तय करता है. इससे आपको कम संख्या में, अर्थ के हिसाब से नाम वाली स्टाइल का इस्तेमाल करने के लिए बढ़ावा मिलता है.

अलग-अलग स्टाइल में कई तरह के टाइपफ़ेस का उदाहरण — **सातवीं इमेज.** मटीरियल टाइप सिस्टम.

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, /*...*/) {
    /*...*/
}Material2Snippets.kt

अगर आपको पूरे दस्तावेज़ में एक ही टाइपफ़ेस का इस्तेमाल करना है, तो defaultFontFamily पैरामीटर की वैल्यू तय करें और किसी भी TextStyle एलिमेंट के fontFamily को छोड़ दें:

val typography = Typography(defaultFontFamily = raleway)
MaterialTheme(typography = typography, /*...*/) {
    /*...*/
}Material2Snippets.kt

टेक्स्ट स्टाइल का इस्तेमाल करना

TextStyle एलिमेंट को MaterialTheme.typography का इस्तेमाल करके ऐक्सेस किया जाता है. TextStyle एलिमेंट को इस तरह से वापस पाएं:

Text(
    text = "Subtitle2 styled",
    style = MaterialTheme.typography.subtitle2
)Material2Snippets.kt

अलग-अलग मकसद के लिए, अलग-अलग टाइपफ़ेस का मिश्रण दिखाने वाला स्क्रीनशॉट — **आठवीं इमेज.** अपने ब्रैंड को दिखाने के लिए, अलग-अलग टाइपफ़ेस और स्टाइल का इस्तेमाल करें.

आकार

मटीरियल डिज़ाइन में शेप सिस्टम होता है. इसकी मदद से, बड़े, मीडियम, और छोटे कॉम्पोनेंट के लिए शेप तय किए जा सकते हैं.

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, /*...*/) {
    /*...*/
}Material2Snippets.kt

कई कॉम्पोनेंट, डिफ़ॉल्ट रूप से इन शेप का इस्तेमाल करते हैं. उदाहरण के लिए, Button, TextField, और FloatingActionButton डिफ़ॉल्ट रूप से छोटे होते हैं, AlertDialog डिफ़ॉल्ट रूप से मीडियम होता है, और ModalDrawer डिफ़ॉल्ट रूप से बड़ा होता है — पूरी मैपिंग के लिए, शेप स्कीम रेफ़रंस देखें.

आकृतियों का इस्तेमाल करना

Shape एलिमेंट को MaterialTheme.shapes का इस्तेमाल करके ऐक्सेस किया जाता है. इस तरह के कोड की मदद से, Shape एलिमेंट को वापस पाएं:

Surface(
    shape = MaterialTheme.shapes.medium, /*...*/
) {
    /*...*/
}Material2Snippets.kt

किसी ऐप्लिकेशन का स्क्रीनशॉट, जिसमें मटीरियल शेप का इस्तेमाल करके यह बताया गया है कि कोई एलिमेंट किस स्थिति में है — **इमेज 10.** ब्रैंड या स्थिति को दिखाने के लिए, आकृतियों का इस्तेमाल करें.

डिफ़ॉल्ट स्टाइल

Compose में, Android व्यू की डिफ़ॉल्ट स्टाइल जैसा कोई कॉन्सेप्ट नहीं है. मटीरियल कॉम्पोनेंट को रैप करने वाले overload कंपोज़ेबल फ़ंक्शन बनाकर, मिलती-जुलती सुविधाएं दी जा सकती हैं. उदाहरण के लिए, बटन की कोई स्टाइल बनाने के लिए, बटन को अपने कंपोज़ेबल फ़ंक्शन में रैप करें. इसके बाद, उन पैरामीटर को सीधे सेट करें जिन्हें आपको बदलना है या जिनमें बदलाव करना है. साथ ही, अन्य पैरामीटर को कंपोज़ेबल में पैरामीटर के तौर पर दिखाएं.

@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
    )
}Material2Snippets.kt

थीम ओवरले

Compose में Android व्यू से थीम ओवरले के बराबर का नतीजा पाने के लिए, MaterialTheme कंपोज़ेबल को नेस्ट करें. MaterialTheme, रंगों, टाइपोग्राफ़ी, और आकृतियों को मौजूदा थीम की वैल्यू पर डिफ़ॉल्ट रूप से सेट करता है. इसलिए, जब कोई थीम इनमें से सिर्फ़ एक पैरामीटर को सेट करती है, तो अन्य सभी पैरामीटर अपनी डिफ़ॉल्ट वैल्यू बनाए रखते हैं.

इसके अलावा, व्यू-आधारित स्क्रीन को Compose पर माइग्रेट करते समय, android:theme एट्रिब्यूट के इस्तेमाल पर ध्यान दें. ऐसा हो सकता है कि आपको Compose यूज़र इंटरफ़ेस (यूआई) ट्री के उस हिस्से में, एक नए MaterialTheme की ज़रूरत हो.

इस उदाहरण में, जानकारी वाली स्क्रीन के ज़्यादातर हिस्से के लिए PinkTheme का इस्तेमाल किया गया है. इसके बाद, मिलते-जुलते सेक्शन के लिए BlueTheme का इस्तेमाल किया गया है. यहां दिए गए स्क्रीनशॉट और कोड से इस कॉन्सेप्ट को समझा जा सकता है:

नेस्ट की गई थीम दिखाने वाले ऐप्लिकेशन का स्क्रीनशॉट. इसमें मुख्य स्क्रीन के लिए गुलाबी थीम और उससे जुड़े सेक्शन के लिए नीली थीम दिखाई गई है — **इमेज 11.** नेस्ट की गई थीम.

@Composable
fun DetailsScreen(/* ... */) {
    PinkTheme {
        // other content
        RelatedSection()
    }
}

@Composable
fun RelatedSection(/* ... */) {
    BlueTheme {
        // content
    }
}Material2Snippets.kt

कॉम्पोनेंट की स्थितियां

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

कंपोज़ेबल में अक्सर 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
    )
) { /* ... */ }Material2Snippets.kt

दो बटन का स्क्रीनशॉट, जिसमें चालू और बंद स्थितियों के लिए रंग और एलिवेशन को अडजस्ट किया गया है — **इमेज 13.** `enabled = true` (बाईं ओर) और `enabled = false` (दाईं ओर) के साथ बटन, जिसमें रंग और एलिवेशन की वैल्यू अडजस्ट की गई हैं.

लहरें

मटीरियल कॉम्पोनेंट, रिपल का इस्तेमाल करके यह दिखाते हैं कि उनके साथ इंटरैक्ट किया जा रहा है. अगर अपनी हैरारकी में MaterialTheme का इस्तेमाल किया जा रहा है, तो clickable और indication जैसे मॉडिफ़ायर में, Ripple को डिफ़ॉल्ट 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
    )
}Material2Snippets.kt

ऐनिमेट किया गया GIF, जिसमें टैप करने पर अलग-अलग रिपल इफ़ेक्ट वाले बटन दिख रहे हैं — **इमेज 14.** `RippleConfiguration` का इस्तेमाल करके, अलग-अलग रिपल वैल्यू वाले बटन उपलब्ध कराए गए हैं.

ज़्यादा जानें

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

कोडलैब

Jetpack Compose की थीमिंग

वीडियो

Jetpack Compose में Material You

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर, लिंक टेक्स्ट दिखता है
Compose में कस्टम डिज़ाइन सिस्टम
Compose में, Material 2 से Material 3 पर माइग्रेट करना
Compose में सुलभता सुविधा