मटीरियल 3 एक्सप्रेसिव, मटीरियल डिज़ाइन का अगला वर्शन है. इसमें अपडेट की गई थीम, कॉम्पोनेंट, और मनमुताबिक बनाने की सुविधाएं शामिल हैं. जैसे, डाइनैमिक कलर.

इस गाइड में, ऐप्लिकेशन के लिए Wear Compose Material 2.5 (androidx.wear.compose) Jetpack लाइब्रेरी से Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack लाइब्रेरी पर माइग्रेट करने के बारे में बताया गया है.

तरीके

अपने ऐप्लिकेशन के कोड को M2.5 से M3 पर माइग्रेट करने के लिए, Compose Material माइग्रेशन फ़ोन के दिशा-निर्देश में बताए गए तरीके का पालन करें. खास तौर पर:

• एक ही ऐप्लिकेशन में लंबे समय तक M2.5 और M3, दोनों का इस्तेमाल नहीं करना चाहिए
• कई फ़ेज़ में लागू करने का तरीका अपनाना

डिपेंडेंसी

M3 का पैकेज और वर्शन, M2.5 से अलग है:

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:")

Wear Compose Material 3 की रिलीज़ के पेज पर जाकर, M3 के नए वर्शन देखें.

Wear Compose Foundation लाइब्रेरी के वर्शन 1.5.0-beta01 में, कुछ नए कॉम्पोनेंट जोड़े गए हैं. इन्हें Material 3 कॉम्पोनेंट के साथ काम करने के लिए डिज़ाइन किया गया है. इसी तरह, Wear OS 6 (एपीआई लेवल 36) या इसके बाद के वर्शन पर चलने वाले SwipeDismissableNavHost में, Wear Compose Navigation लाइब्रेरी से अपडेट किया गया ऐनिमेशन है. Wear Compose Material 3 वर्शन पर अपडेट करते समय, हम Wear Compose Foundation और Navigation लाइब्रेरी को भी अपडेट करने का सुझाव देते हैं:

implementation("androidx.wear.compose:compose-foundation:")
implementation("androidx.wear.compose:compose-navigation:")

थीम बनाई जा रही है

M2.5 और M3, दोनों में थीम कंपोज़ेबल का नाम MaterialTheme है. हालांकि, इंपोर्ट पैकेज और पैरामीटर अलग-अलग हैं. M3 में, Colors पैरामीटर का नाम बदलकर ColorScheme कर दिया गया है. साथ ही, ट्रांज़िशन लागू करने के लिए MotionScheme को पेश किया गया है.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

रंग

M3 में कलर सिस्टम, M2.5 से काफ़ी अलग है. कलर पैरामीटर की संख्या बढ़ गई है. इनके नाम अलग-अलग हैं और ये M3 कॉम्पोनेंट से अलग तरीके से मैप होते हैं. Compose में, यह M2.5 Colors क्लास, M3 ColorScheme क्लास, और इनसे जुड़े फ़ंक्शन पर लागू होता है:

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

यहां दी गई टेबल में, M2.5 और M3 के बीच के मुख्य अंतर के बारे में बताया गया है:

डाइनैमिक कलर थीमिंग

M3 में एक नई सुविधा जोड़ी गई है, जिसका नाम डाइनैमिक कलर थीमिंग है. अगर उपयोगकर्ता वॉच फ़ेस के रंग बदलते हैं, तो यूज़र इंटरफ़ेस (यूआई) में मौजूद रंग भी बदल जाते हैं.

डाइनैमिक कलर स्कीम लागू करने के लिए, dynamicColorScheme फ़ंक्शन का इस्तेमाल करें. साथ ही, अगर डाइनैमिक कलर स्कीम उपलब्ध नहीं है, तो फ़ॉलबैक के तौर पर defaultColorScheme उपलब्ध कराएं.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

मुद्रण कला

M3 में टाइपोग्राफ़ी सिस्टम, M2 से अलग है. इसमें ये सुविधाएं शामिल हैं:

• नौ नई टेक्स्ट स्टाइल
• फ़्लेक्स फ़ॉन्ट, जिनकी मदद से अलग-अलग वेट, चौड़ाई, और गोलाई के लिए टाइप स्केल को पसंद के मुताबिक बनाया जा सकता है

• AnimatedText, जो फ़्लेक्स फ़ॉन्ट का इस्तेमाल करता है

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

फ़्लेक्स फ़ॉन्ट

फ़्लेक्स फ़ॉन्ट की मदद से डिज़ाइनर, खास साइज़ के लिए टाइप की चौड़ाई और मोटाई तय कर सकते हैं.

टेक्स्ट स्टाइल

M3 में ये TextStyle उपलब्ध हैं. इनका इस्तेमाल, M3 के अलग-अलग कॉम्पोनेंट डिफ़ॉल्ट रूप से करते हैं.

आकार

M3 में शेप सिस्टम, M2 से अलग है. शेप पैरामीटर की संख्या बढ़ गई है. इनके नाम अलग-अलग हैं और ये M3 कॉम्पोनेंट से अलग तरीके से मैप होते हैं. ये शेप साइज़ उपलब्ध हैं:

• ज़्यादा छोटा
• छोटा
• मध्यम
• बड़ा
• ज़्यादा बड़ा

Compose में, यह M2 Shapes क्लास और M3 Shapes क्लास पर लागू होता है:

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

शुरुआत करने के लिए, Compose में Material 2 से Material 3 पर माइग्रेट करें लेख में दी गई, शेप पैरामीटर मैपिंग का इस्तेमाल करें.

शेप मॉर्फ़िंग

M3 में शेप मॉर्फ़िंग की सुविधा जोड़ी गई है: अब इंटरैक्शन के हिसाब से शेप मॉर्फ़ होते हैं.

शेप मॉर्फ़िंग का व्यवहार, कई राउंड बटन पर एक वेरिएशन के तौर पर उपलब्ध है. इसके बारे में यहां बताया गया है:

कॉम्पोनेंट और लेआउट

M2.5 के ज़्यादातर कॉम्पोनेंट और लेआउट, M3 में उपलब्ध हैं. हालांकि, M3 के कुछ कॉम्पोनेंट और लेआउट, M2.5 में मौजूद नहीं थे. इसके अलावा, M3 के कुछ कॉम्पोनेंट में, M2.5 के कॉम्पोनेंट की तुलना में ज़्यादा वेरिएशन होते हैं.

कुछ कॉम्पोनेंट के लिए खास बातों का ध्यान रखना ज़रूरी होता है. हालांकि, शुरुआत में इन फ़ंक्शन मैपिंग का इस्तेमाल करने का सुझाव दिया जाता है:

यहां Material 3 के सभी कॉम्पोनेंट की पूरी सूची दी गई है:

आखिर में, Wear Compose Foundation लाइब्रेरी के वर्शन 1.5.0-beta01 से जुड़े कुछ काम के कॉम्पोनेंट की सूची:

बटन

M3 में मौजूद बटन, M2.5 से अलग हैं. M2.5 चिप की जगह बटन का इस्तेमाल किया गया है. Button लागू करने पर, Text maxLines और textAlign के लिए डिफ़ॉल्ट वैल्यू मिलती हैं. डिफ़ॉल्ट वैल्यू को Text एलिमेंट में बदला जा सकता है.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3 में बटन के नए वैरिएशन भी शामिल हैं. इन्हें Compose Material 3 API के रेफ़रंस की खास जानकारी में देखें.

M3 में एक नया बटन जोड़ा गया है: EdgeButton. EdgeButton चार अलग-अलग साइज़ में उपलब्ध है: बहुत छोटा, छोटा, मीडियम, और बड़ा. EdgeButton एट्रिब्यूट की वैल्यू लागू करें. साथ ही, साइज़ के हिसाब से EdgeButton एट्रिब्यूट की डिफ़ॉल्ट वैल्यू दें. इसे पसंद के मुताबिक बनाया जा सकता है.maxLines

अगर TransformingLazyColumn और ScalingLazyColumn का इस्तेमाल किया जा रहा है, तो EdgeButton को ScreenScaffold में पास करें, ताकि यह स्क्रोल करने पर अपना आकार बदल सके. ScreenScaffold और TransformingLazyColumn के साथ EdgeButton इस्तेमाल करने का तरीका जानने के लिए, यहां दिया गया कोड देखें.

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

स्काफ़ोल्ड

M3 में मौजूद स्कैफ़ोल्ड, M2.5 से अलग है. M3 में, AppScaffold और नए ScreenScaffold कंपोज़ेबल ने Scaffold की जगह ले ली है. AppScaffold और ScreenScaffold, स्क्रीन के स्ट्रक्चर को ले आउट करते हैं. साथ ही, ScrollIndicator और TimeText कॉम्पोनेंट के ट्रांज़िशन को मैनेज करते हैं.

AppScaffold की मदद से, स्टैटिक स्क्रीन एलिमेंट जैसे कि TimeText को ऐप्लिकेशन में ट्रांज़िशन के दौरान भी देखा जा सकता है. जैसे, स्वाइप करके खारिज करना. ​​यह मुख्य ऐप्लिकेशन के कॉन्टेंट के लिए एक स्लॉट उपलब्ध कराता है. यह कॉन्टेंट आम तौर पर नेविगेशन कॉम्पोनेंट, जैसे कि SwipeDismissableNavHost से मिलता है

गतिविधि के लिए एक AppScaffold का एलान किया जाता है और हर स्क्रीन के लिए ScreenScaffold का इस्तेमाल किया जाता है.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

अगर HorizontalPagerIndicator के साथ HorizontalPager का इस्तेमाल किया जा रहा है, तो HorizontalPagerScaffold पर माइग्रेट किया जा सकता है. HorizontalPagerScaffold को AppScaffold में रखा गया है. AppScaffold और HorizontalPagerScaffold, पेज पर मौजूद कॉम्पोनेंट को व्यवस्थित करते हैं. साथ ही, HorizontalPageIndicator और TimeText कॉम्पोनेंट के ट्रांज़िशन को मैनेज करते हैं.

HorizontalPagerScaffold, स्क्रीन के बीच से आखिर तक HorizontalPageIndicator को डिफ़ॉल्ट रूप से दिखाता है. साथ ही, TimeText और HorizontalPageIndicator को दिखाने/छिपाने के लिए निर्देशांक दिखाता है. ऐसा इस आधार पर किया जाता है कि Pager को पेज पर दिखाया जा रहा है या नहीं. यह PagerState से तय होता है.

इसमें एक नया AnimatedPage कॉम्पोनेंट भी है. यह कॉम्पोनेंट, पेज की पोज़िशन के हिसाब से उसे स्केल करता है और उस पर स्क्रिम इफ़ेक्ट डालता है. साथ ही, Pager में मौजूद पेज को ऐनिमेट करता है.

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

आखिर में, M3 में VerticalPagerScaffold को शामिल किया गया है. यह HorizontalPagerScaffold के जैसा ही पैटर्न फ़ॉलो करता है:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

प्लेसहोल्डर

M2.5 और M3 के बीच, एपीआई में कुछ बदलाव किए गए हैं. Placeholder.PlaceholderDefaults अब दो मॉडिफ़ायर उपलब्ध कराता है:

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

Placeholder कॉम्पोनेंट में हुए अन्य बदलावों के बारे में जानने के लिए, यहां देखें.

SwipeDismissableNavHost

SwipeDismissableNavHost, wear.compose.navigation का हिस्सा है. इस कॉम्पोनेंट का इस्तेमाल M3 के साथ करने पर, M3 MaterialTheme, LocalSwipeToDismissBackgroundScrimColor और LocalSwipeToDismissContentScrimColor को अपडेट करता है.

TransformingLazyColumn

TransformingLazyColumn, wear.compose.lazy.foundation का हिस्सा है. यह स्क्रोलिंग के दौरान, सूची के आइटम पर ऐनिमेशन को स्केल करने और बदलने की सुविधा जोड़ता है. इससे उपयोगकर्ता अनुभव बेहतर होता है.

ScalingLazyColumn की तरह, यह rememberTransformingLazyColumnState() उपलब्ध कराता है, ताकि एक TransformingLazyColumnState बनाया जा सके. इसे सभी कंपोज़िशन में याद रखा जाता है.

स्केलिंग और मॉर्फ़िंग ऐनिमेशन जोड़ने के लिए, सूची के हर आइटम में यह जानकारी जोड़ें:

• Modifier.transformedHeight का इस्तेमाल करके, TransformationSpec का इस्तेमाल करके आइटम की बदली हुई ऊंचाई का हिसाब लगाया जा सकता है. अगर आपको और बदलाव नहीं करने हैं, तो rememberTransformationSpec() का इस्तेमाल किया जा सकता है.
• SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

काम के लिंक

Compose में M2.5 से M3 पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अतिरिक्त संसाधन देखें.

सैंपल

• GitHub पर Material3 ब्रांच में Wear OS के सैंपल
• Compose for Wear OS कोडलैब
• Jetcaster का सैंपल

एपीआई का रेफ़रंस और सोर्स कोड

• Compose Material 3 API के बारे में जानकारी
• सोर्स कोड में Material 3 के सैंपल कंपोज़ करना

डिज़ाइन

• डिज़ाइन से जुड़े दिशा-निर्देश