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

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

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

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

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

दो कंट्रास्ट वाले स्क्रीनशॉट. पहला विकल्प, डिफ़ॉल्ट Materialथीम स्टाइलिंग का इस्तेमाल करता है, दूसरे स्क्रीनशॉट में बदलाव की स्टाइल का इस्तेमाल किया गया है.

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

रंग

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

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

साथ ही, इन्हें जैसे चाहें वैसे व्यवस्थित किया जा सकता है (टॉप-लेवल कॉन्सटेंट के तौर पर, सिंगलटन या परिभाषित इनलाइन) का इस्तेमाल किया जाता है, तो हम सशक्त रूप से आपकी थीम तैयार कर सकता है और वहां से रंगों को पा सकता है. इस तरीके से गहरे रंग वाली थीम और नेस्ट की गई थीम को आसानी से इस्तेमाल किया जा सकता है.

थीम के रंग पटल का उदाहरण

दूसरी इमेज. मटीरियल कलर सिस्टम.

लिखने से 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() यह तरीका सही "चालू है" का इस्तेमाल करता है किसी भी थीम के कलर के लिए रंग. जैसे, अगर 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(
        // ...
    )
}
Material2Snippets.kt

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

इस उदाहरण में, 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"
)
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

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

सामग्री सीमित रंग लागू करने का सुझाव देती है गहरे रंग के लिए उच्चारण इनमें 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 parameter और किसी भी 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वीं इमेज. अपने ब्रैंड या स्थिति के बारे में बताने के लिए आकारों का इस्तेमाल करें.

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

'लिखें' विंडो में इसके जैसा कोई सिद्धांत नहीं है 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
    )
}
Material2Snippets.kt

थीम ओवरले

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

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

Owl के सैंपल में, जानकारी वाली स्क्रीन के लिए, स्क्रीन के ज़्यादातर हिस्से के लिए 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 का इस्तेमाल कर रहे हैं, तो 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
    )
}
Material2Snippets.kt

alt_text

14वीं इमेज. RippleTheme के ज़रिए दिए गए अलग-अलग रिपल वैल्यू वाले बटन.

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

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

कोड लैब

वीडियो

{% endverba नया %} {% verbatim %}