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

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

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

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

अपने ऐप्लिकेशन को थीम देने के लिए, 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 का इस्तेमाल करके, मौजूदा बैकग्राउंड के लिए अपनी पसंद के कॉन्टेंट का रंग पाएं. ऐसा, क्रम में दी गई किसी जगह पर किया जा सकता है.

कॉन्टेंट ऐल्फ़ा

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

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 के बारे में ज़्यादा जानने के लिए, Locally scoped data with CompositionLocal देखें.

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

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

@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 कंपोज़ेबल इन ओवरले को अपने-आप लागू करता है. साथ ही, ऐसा करने वाला कोई भी अन्य Material कंपोज़ेबल, किसी सतह का इस्तेमाल करता है:

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

कस्टम स्थितियों के लिए, 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, डार्क थीम के लिए कम कलर ऐक्सेंट इस्तेमाल करने का सुझाव देता है. साथ ही, ज़्यादातर मामलों में primary कलर के बजाय surface कलर का इस्तेमाल करने का सुझाव देता है. TopAppBar और BottomNavigation जैसे मटीरियल कंपोज़ेबल, डिफ़ॉल्ट रूप से इस व्यवहार को लागू करते हैं.

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

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

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

Material में टाइप सिस्टम तय किया गया है. इससे आपको सिमैंटिक नाम वाले स्टाइल का कम इस्तेमाल करने के लिए बढ़ावा मिलता है.

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

आकार

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

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

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

Android व्यू में मौजूद डिफ़ॉल्ट स्टाइल के जैसा कोई कॉन्सेप्ट Compose में नहीं है. Material कॉम्पोनेंट को रैप करने वाले 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 Views से थीम ओवरले के बराबर फ़ंक्शन हासिल किया जा सकता है. इसके लिए, MaterialTheme कंपोज़ेबल को नेस्ट करें. ऐसा इसलिए होता है, क्योंकि MaterialTheme डिफ़ॉल्ट रूप से, रंगों, टाइपोग्राफ़ी, और शेप को मौजूदा थीम की वैल्यू पर सेट करता है. इसलिए, जब कोई थीम सिर्फ़ एक पैरामीटर सेट करती है, तो बाकी सभी पैरामीटर अपनी डिफ़ॉल्ट वैल्यू बनाए रखते हैं.

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

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

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

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

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

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

कंपोज़ेबल में अक्सर एक 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

लहरें

मटीरियल कॉम्पोनेंट, रिपल का इस्तेमाल करके यह दिखाते हैं कि उनके साथ इंटरैक्ट किया जा रहा है. अगर आपने अपनी हाइरार्की में MaterialTheme का इस्तेमाल किया है, तो clickable और indication जैसे मॉडिफ़ायर में, डिफ़ॉल्ट Indication के तौर पर Ripple का इस्तेमाल किया जाता है.

ज़्यादातर मामलों में, डिफ़ॉल्ट 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

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

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

कोडलैब

• Jetpack Compose की थीमिंग

वीडियो

• Jetpack Compose में Material You