Material 3 के साथ Compose में थीम बनाना

1. परिचय

इस कोडलैब में, आपको Material Design 3 का इस्तेमाल करके, Jetpack Compose में अपने ऐप्लिकेशन को थीम करने के बारे में जानकारी मिलेगी. आपको Material Design 3 के मुख्य बिल्डिंग ब्लॉक के बारे में भी जानकारी मिलेगी. जैसे, कलर स्कीम, टाइपोग्राफ़ी, और शेप. इनकी मदद से, अपने ऐप्लिकेशन को अपनी पसंद के मुताबिक और आसानी से ऐक्सेस किया जा सकने वाला बनाया जा सकता है.

इसके अलावा, आपको डाइनैमिक थीमिंग और अलग-अलग लेवल पर फ़ोकस करने की सुविधा के बारे में भी जानकारी मिलेगी.

आपको क्या-क्या सीखने को मिलेगा

इस कोडलैब में, आपको इनके बारे में जानकारी मिलेगी:

  • Material 3 की थीम बनाने से जुड़े मुख्य पहलू
  • Material 3 की कलर स्कीम और अपने ऐप्लिकेशन के लिए थीम जनरेट करने का तरीका
  • अपने ऐप्लिकेशन के लिए, डाइनैमिक और लाइट/डार्क थीम की सुविधा कैसे चालू करें
  • ऐप्लिकेशन को अपनी पसंद के मुताबिक बनाने के लिए टाइपोग्राफ़ी और शेप
  • Material 3 कॉम्पोनेंट और अपने ऐप्लिकेशन को स्टाइल करने के लिए उन्हें पसंद के मुताबिक बनाना

आपको क्या बनाना है

इस कोडलैब में, आपको Reply नाम के ईमेल क्लाइंट ऐप्लिकेशन की थीम बनानी है. आपको बिना स्टाइल वाले ऐप्लिकेशन से शुरुआत करनी होगी. इसके लिए, आपको बेसलाइन थीम का इस्तेमाल करना होगा. इसके बाद, आपको ऐप्लिकेशन को थीम देने और गहरे रंग वाली थीम को सपोर्ट करने के लिए, सीखी गई बातों को लागू करना होगा.

d15db3dc75a9d00f.png

बेसलिन थीम के साथ, हमारे ऐप्लिकेशन का डिफ़ॉल्ट शुरुआती पॉइंट.

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

1357cdbfaaa67721.png

यह थीमिंग कोडलैब का आखिरी पॉइंट है. इसमें हल्के रंग की थीमिंग और हल्के रंग की डाइनैमिक थीमिंग का इस्तेमाल किया गया है.

1357cdbfaaa67721.png

गहरे रंग वाली थीम और डार्क डाइनैमिक थीमिंग के साथ, थीमिंग कोडलैब का आखिरी पॉइंट.

आपको इन चीज़ों की ज़रूरत होगी

2. सेट अप करना

इस चरण में, आपको Reply ऐप्लिकेशन का पूरा कोड डाउनलोड करना होगा. इस कोडलैब में, आपको इस कोड को स्टाइल करना है.

कोड प्राप्त करें

इस कोडलैब का कोड, android-compose-codelabs GitHub रिपॉज़िटरी में देखा जा सकता है. इसे क्लोन करने के लिए, यह कमांड चलाएं:

$ git clone https://github.com/googlecodelabs/android-compose-codelabs

इसके अलावा, दो ZIP फ़ाइलें भी डाउनलोड की जा सकती हैं:

सैंपल ऐप्लिकेशन देखें

आपने अभी जो कोड डाउनलोड किया है उसमें उपलब्ध सभी Compose कोडलैब का कोड शामिल है. इस कोडलैब को पूरा करने के लिए, Android Studio में ThemingCodelab प्रोजेक्ट खोलें.

हमारा सुझाव है कि आप मुख्य ब्रांच में मौजूद कोड से शुरुआत करें और कोडलैब में दिए गए निर्देशों का पालन अपनी सुविधा के हिसाब से करें. प्रोजेक्ट की गिट ब्रांच बदलकर, Android Studio में किसी भी समय दोनों वर्शन चलाए जा सकते हैं.

स्टार्ट कोड के बारे में जानकारी

मुख्य कोड में एक यूज़र इंटरफ़ेस (यूआई) पैकेज होता है. इसमें ये मुख्य पैकेज और फ़ाइलें होती हैं, जिनके साथ आपको इंटरैक्ट करना होगा:

  • MainActivity.kt – एंट्री पॉइंट गतिविधि, जहां से Reply ऐप्लिकेशन शुरू किया जाता है.
  • com.example.reply.ui.theme – इस पैकेज में थीम, टाइपोग्राफ़ी, और कलर स्कीम शामिल हैं. आपको इस पैकेज में मटीरियल थीमिंग जोड़नी होगी.
  • com.example.reply.ui.components – इसमें ऐप्लिकेशन के कस्टम कॉम्पोनेंट शामिल होते हैं. जैसे, सूची के आइटम, ऐप्लिकेशन बार वगैरह. आपको इन कॉम्पोनेंट पर थीम लागू करनी होंगी.
  • ReplyApp.kt – यह हमारा मुख्य कंपोज़ेबल फ़ंक्शन है. यूज़र इंटरफ़ेस (यूआई) ट्री यहीं से शुरू होगा. इस फ़ाइल में टॉप लेवल की थीम लागू की जाएगी.

इस कोडलैब में, ui पैकेज फ़ाइलों पर फ़ोकस किया जाएगा.

3. Material 3 थीमिंग

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

Material 3 थीम में, आपके ऐप्लिकेशन में थीमिंग जोड़ने के लिए ये सबसिस्टम शामिल होते हैं: कलर स्कीम, टाइपोग्राफ़ी, और शेप. इन वैल्यू को पसंद के मुताबिक बनाने पर, आपके बदलाव उन M3 कॉम्पोनेंट में अपने-आप दिखते हैं जिनका इस्तेमाल आपने सैंपल के तौर पर मिले ऐप्लिकेशन बनाने के लिए किया है. आइए, हर सबसिस्टम के बारे में जानें और उसे सैंपल के तौर पर मिले ऐप्लिकेशन में लागू करें.

मटीरियल डिज़ाइन के सब सिस्टम: रंग, टाइपोग्राफ़ी, और शेप.

Material 3, रंगों, टाइपोग्राफ़ी, और शेप का सबसिस्टम है.

4. कलर स्कीम

कलर स्कीम की बुनियाद, पाँच मुख्य रंगों का सेट होता है. ये सभी रंग, 13 टोन वाले टोनल पैलेट से जुड़े होते हैं. इनका इस्तेमाल Material 3 कॉम्पोनेंट करते हैं.

M3 थीम बनाने के लिए, पांच बेसलाइन मुख्य रंग.

M3 थीम बनाने के लिए, पांच बेसलाइन मुख्य रंग.

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

प्राइमरी, सेकंडरी, और टर्शियरी बेसलाइन ऐक्सेंट कलर के चार टोनल कलर.

प्राइमरी, सेकंडरी, और टर्शरी बेसलाइन ऐक्सेंट कलर के चार टोनल कलर.

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

बेसलाइन न्यूट्रल कलर के चार टोनल कलर.

बेसलाइन न्यूट्रल कलर के चार टोनल कलर.

कलर स्कीम और कलर रोल के बारे में ज़्यादा पढ़ें.

कलर स्कीम जनरेट करना

कस्टम ColorScheme को मैन्युअल तरीके से बनाया जा सकता है. हालांकि, अक्सर इसे अपने ब्रैंड के सोर्स कलर का इस्तेमाल करके जनरेट करना ज़्यादा आसान होता है. Material Theme Builder टूल की मदद से ऐसा किया जा सकता है. साथ ही, Compose की थीमिंग के कोड को एक्सपोर्ट भी किया जा सकता है.

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

294f73fc9d2a570e.png

मटीरियल थीम बिल्डर में मुख्य रंग का कोड जोड़ना.

Material Theme Builder में प्राइमरी कलर जोड़ने के बाद, आपको यह थीम दिखेगी. साथ ही, सबसे ऊपर दाएं कोने में एक्सपोर्ट करने का विकल्प दिखेगा. इस कोडलैब के लिए, Jetpack Compose में थीम एक्सपोर्ट करें.

सबसे ऊपर दाएं कोने में एक्सपोर्ट करने के विकल्प के साथ, Material Theme Builder.

सबसे ऊपर दाएं कोने में एक्सपोर्ट करने के विकल्प के साथ, Material Theme Builder.

मुख्य रंग #825500 से यह थीम जनरेट होती है. इसे आपको ऐप्लिकेशन में जोड़ना होगा. Material 3, रंग की कई भूमिकाएं उपलब्ध कराता है. इससे किसी कॉम्पोनेंट की स्थिति, अहमियत, और फ़ोकस को आसानी से दिखाया जा सकता है.

प्राइमरी कलर से एक्सपोर्ट की गई लाइट और डार्क कलर स्कीम.

मुख्य रंग से एक्सपोर्ट की गई हल्के और गहरे रंग वाली कलर स्कीम.

The Color.kt जनरेट की गई फ़ाइल में, आपकी थीम के रंग शामिल होते हैं. साथ ही, इसमें हल्के और गहरे, दोनों तरह के रंग वाली थीम के लिए तय की गई सभी भूमिकाएं शामिल होती हैं.

Color.kt

package com.example.reply.ui.theme
import androidx.compose.ui.graphics.Color

val md_theme_light_primary = Color(0xFF825500)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFFFDDB3)
val md_theme_light_onPrimaryContainer = Color(0xFF291800)
val md_theme_light_secondary = Color(0xFF6F5B40)
val md_theme_light_onSecondary = Color(0xFFFFFFFF)
val md_theme_light_secondaryContainer = Color(0xFFFBDEBC)
val md_theme_light_onSecondaryContainer = Color(0xFF271904)
val md_theme_light_tertiary = Color(0xFF51643F)
val md_theme_light_onTertiary = Color(0xFFFFFFFF)
val md_theme_light_tertiaryContainer = Color(0xFFD4EABB)
val md_theme_light_onTertiaryContainer = Color(0xFF102004)
val md_theme_light_error = Color(0xFFBA1A1A)
val md_theme_light_errorContainer = Color(0xFFFFDAD6)
val md_theme_light_onError = Color(0xFFFFFFFF)
val md_theme_light_onErrorContainer = Color(0xFF410002)
val md_theme_light_background = Color(0xFFFFFBFF)
val md_theme_light_onBackground = Color(0xFF1F1B16)
val md_theme_light_surface = Color(0xFFFFFBFF)
val md_theme_light_onSurface = Color(0xFF1F1B16)
val md_theme_light_surfaceVariant = Color(0xFFF0E0CF)
val md_theme_light_onSurfaceVariant = Color(0xFF4F4539)
val md_theme_light_outline = Color(0xFF817567)
val md_theme_light_inverseOnSurface = Color(0xFFF9EFE7)
val md_theme_light_inverseSurface = Color(0xFF34302A)
val md_theme_light_inversePrimary = Color(0xFFFFB951)
val md_theme_light_shadow = Color(0xFF000000)
val md_theme_light_surfaceTint = Color(0xFF825500)
val md_theme_light_outlineVariant = Color(0xFFD3C4B4)
val md_theme_light_scrim = Color(0xFF000000)

val md_theme_dark_primary = Color(0xFFFFB951)
val md_theme_dark_onPrimary = Color(0xFF452B00)
val md_theme_dark_primaryContainer = Color(0xFF633F00)
val md_theme_dark_onPrimaryContainer = Color(0xFFFFDDB3)
val md_theme_dark_secondary = Color(0xFFDDC2A1)
val md_theme_dark_onSecondary = Color(0xFF3E2D16)
val md_theme_dark_secondaryContainer = Color(0xFF56442A)
val md_theme_dark_onSecondaryContainer = Color(0xFFFBDEBC)
val md_theme_dark_tertiary = Color(0xFFB8CEA1)
val md_theme_dark_onTertiary = Color(0xFF243515)
val md_theme_dark_tertiaryContainer = Color(0xFF3A4C2A)
val md_theme_dark_onTertiaryContainer = Color(0xFFD4EABB)
val md_theme_dark_error = Color(0xFFFFB4AB)
val md_theme_dark_errorContainer = Color(0xFF93000A)
val md_theme_dark_onError = Color(0xFF690005)
val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
val md_theme_dark_background = Color(0xFF1F1B16)
val md_theme_dark_onBackground = Color(0xFFEAE1D9)
val md_theme_dark_surface = Color(0xFF1F1B16)
val md_theme_dark_onSurface = Color(0xFFEAE1D9)
val md_theme_dark_surfaceVariant = Color(0xFF4F4539)
val md_theme_dark_onSurfaceVariant = Color(0xFFD3C4B4)
val md_theme_dark_outline = Color(0xFF9C8F80)
val md_theme_dark_inverseOnSurface = Color(0xFF1F1B16)
val md_theme_dark_inverseSurface = Color(0xFFEAE1D9)
val md_theme_dark_inversePrimary = Color(0xFF825500)
val md_theme_dark_shadow = Color(0xFF000000)
val md_theme_dark_surfaceTint = Color(0xFFFFB951)
val md_theme_dark_outlineVariant = Color(0xFF4F4539)
val md_theme_dark_scrim = Color(0xFF000000)


val seed = Color(0xFF825500)

The Theme.kt जनरेट की गई फ़ाइल में, हल्के और गहरे रंग की कलर स्कीम और ऐप्लिकेशन की थीम का सेटअप होता है. इसमें मुख्य थीम वाला कंपोज़ेबल फ़ंक्शन, AppTheme() भी शामिल है.

Theme.kt

package com.example.reply.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable


private val LightColors = lightColorScheme(
   primary = md_theme_light_primary,
   onPrimary = md_theme_light_onPrimary,
   primaryContainer = md_theme_light_primaryContainer,
   onPrimaryContainer = md_theme_light_onPrimaryContainer,
   secondary = md_theme_light_secondary,
   onSecondary = md_theme_light_onSecondary,
   secondaryContainer = md_theme_light_secondaryContainer,
   onSecondaryContainer = md_theme_light_onSecondaryContainer,
   tertiary = md_theme_light_tertiary,
   onTertiary = md_theme_light_onTertiary,
   tertiaryContainer = md_theme_light_tertiaryContainer,
   onTertiaryContainer = md_theme_light_onTertiaryContainer,
   error = md_theme_light_error,
   errorContainer = md_theme_light_errorContainer,
   onError = md_theme_light_onError,
   onErrorContainer = md_theme_light_onErrorContainer,
   background = md_theme_light_background,
   onBackground = md_theme_light_onBackground,
   surface = md_theme_light_surface,
   onSurface = md_theme_light_onSurface,
   surfaceVariant = md_theme_light_surfaceVariant,
   onSurfaceVariant = md_theme_light_onSurfaceVariant,
   outline = md_theme_light_outline,
   inverseOnSurface = md_theme_light_inverseOnSurface,
   inverseSurface = md_theme_light_inverseSurface,
   inversePrimary = md_theme_light_inversePrimary,
   surfaceTint = md_theme_light_surfaceTint,
   outlineVariant = md_theme_light_outlineVariant,
   scrim = md_theme_light_scrim,
)


private val DarkColors = darkColorScheme(
   primary = md_theme_dark_primary,
   onPrimary = md_theme_dark_onPrimary,
   primaryContainer = md_theme_dark_primaryContainer,
   onPrimaryContainer = md_theme_dark_onPrimaryContainer,
   secondary = md_theme_dark_secondary,
   onSecondary = md_theme_dark_onSecondary,
   secondaryContainer = md_theme_dark_secondaryContainer,
   onSecondaryContainer = md_theme_dark_onSecondaryContainer,
   tertiary = md_theme_dark_tertiary,
   onTertiary = md_theme_dark_onTertiary,
   tertiaryContainer = md_theme_dark_tertiaryContainer,
   onTertiaryContainer = md_theme_dark_onTertiaryContainer,
   error = md_theme_dark_error,
   errorContainer = md_theme_dark_errorContainer,
   onError = md_theme_dark_onError,
   onErrorContainer = md_theme_dark_onErrorContainer,
   background = md_theme_dark_background,
   onBackground = md_theme_dark_onBackground,
   surface = md_theme_dark_surface,
   onSurface = md_theme_dark_onSurface,
   surfaceVariant = md_theme_dark_surfaceVariant,
   onSurfaceVariant = md_theme_dark_onSurfaceVariant,
   outline = md_theme_dark_outline,
   inverseOnSurface = md_theme_dark_inverseOnSurface,
   inverseSurface = md_theme_dark_inverseSurface,
   inversePrimary = md_theme_dark_inversePrimary,
   surfaceTint = md_theme_dark_surfaceTint,
   outlineVariant = md_theme_dark_outlineVariant,
   scrim = md_theme_dark_scrim,
)

@Composable
fun AppTheme(
   useDarkTheme: Boolean = isSystemInDarkTheme(),
   content: @Composable() () -> Unit
) {
   val colors = if (!useDarkTheme) {
       LightColors
   } else {
       DarkColors
   }

   MaterialTheme(
       colorScheme = colors,
       content = content
   )
}

Jetpack Compose में थीमिंग लागू करने के लिए, मुख्य एलिमेंट MaterialTheme कंपोज़ेबल है.

आप MaterialTheme() कंपोज़ेबल को AppTheme() फ़ंक्शन में रैप करते हैं, जो दो पैरामीटर लेता है:

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

Theme.kt

@Composable
fun AppTheme(
   useDarkTheme: Boolean = isSystemInDarkTheme(),
   content: @Composable() () -> Unit
) {
   val colors = if (!useDarkTheme) {
       LightColors
   } else {
       DarkColors
   }

   MaterialTheme(
       colorScheme = colors,
       content = content
   )
}

अब ऐप्लिकेशन चलाने पर, आपको दिखेगा कि वह पहले जैसा ही है. आपने नई थीम के रंगों के साथ हमारी नई कलर स्कीम इंपोर्ट की है. हालांकि, आपको अब भी बेसलाइन थीम दिख रही है, क्योंकि आपने Compose ऐप्लिकेशन पर थीम लागू नहीं की है.

जब कोई थीम लागू नहीं की जाती है, तब ऐप्लिकेशन में बेसलाइन थीम लागू होती है.

जब कोई थीम लागू नहीं की जाती है, तब बेसलाइन थीम वाला ऐप्लिकेशन.

नई थीम लागू करने के लिए, MainActivity.kt में, मुख्य कंपोज़ेबल ReplyApp को मुख्य थीमिंग फ़ंक्शन AppTheme() के साथ रैप करें.

MainActivity.kt

setContent {
   val uiState by viewModel.uiState.collectAsStateWithLifecycle()

   AppTheme {
       ReplyApp(/*..*/)
   }
}

ऐप्लिकेशन की झलक पर थीम लागू करने के लिए, झलक दिखाने वाले फ़ंक्शन भी अपडेट किए जाएंगे. झलकों पर थीम लागू करने के लिए, ReplyApp कंपोज़ेबल को ReplyAppPreview() के अंदर AppTheme के साथ रैप करें.

आपने झलक के पैरामीटर में, सिस्टम की हल्के और गहरे रंग वाली, दोनों थीम तय की हैं. इसलिए, आपको दोनों झलकें दिखेंगी.

MainActivity.kt

@Preview(
   uiMode = Configuration.UI_MODE_NIGHT_YES,
   name = "DefaultPreviewDark"
)
@Preview(
   uiMode = Configuration.UI_MODE_NIGHT_NO,
   name = "DefaultPreviewLight"
)
@Composable
fun ReplyAppPreview() {
   AppTheme {
       ReplyApp(
           replyHomeUIState = ReplyHomeUIState(
               emails = LocalEmailsDataProvider.allEmails
           )
       )
   }
}

अब ऐप्लिकेशन चलाने पर, आपको बेसलाइन थीम के बजाय इंपोर्ट किए गए थीम के रंगों के साथ ऐप्लिकेशन की झलक दिखनी चाहिए.

fddf7b9cc99b1fe3.png be7a661b4553167b.png

बेसलिन थीम वाला ऐप्लिकेशन (बाएं).

इंपोर्ट की गई रंग वाली थीम वाला ऐप्लिकेशन (दाईं ओर).

674cec6cc12db6a0.png

इंपोर्ट की गई कलर थीम के साथ, ऐप्लिकेशन की लाइट और डार्क थीम की झलक.

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

ऐप्लिकेशन में रंग जोड़ने से पहले, आइए रंग की भूमिकाओं और उनके इस्तेमाल के बारे में जानें.

कलर की भूमिकाएं और सुलभता

हर कलर रोल का इस्तेमाल अलग-अलग जगहों पर किया जा सकता है. यह कॉम्पोनेंट की स्थिति, अहमियत, और ज़ोर देने के तरीके पर निर्भर करता है.

1f184a05ea57aa84.png

प्राइमरी, सेकंडरी, और टर्शरी रंगों की भूमिकाएं.

प्राइमरी, बेस कलर होता है. इसका इस्तेमाल मुख्य कॉम्पोनेंट के लिए किया जाता है. जैसे, मुख्य बटन और ऐक्टिव स्टेट.

सेकंडरी की-कलर का इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) में कम अहम कॉम्पोनेंट के लिए किया जाता है. जैसे, फ़िल्टर चिप.

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

Material का कलर सिस्टम, स्टैंडर्ड टोन वैल्यू और मेज़रमेंट उपलब्ध कराता है. इनका इस्तेमाल करके, कंट्रास्ट रेशियो को ऐक्सेस किया जा सकता है. उपयोगकर्ता को ऐक्सेस किया जा सकने वाला कंट्रास्ट देने के लिए, प्राइमरी कलर के ऊपर on-primary, प्राइमरी-कंटेनर के ऊपर on-primary-container, और एक्सेंट और न्यूट्रल कलर के लिए भी इसी तरह के कलर का इस्तेमाल करें.

ज़्यादा जानकारी के लिए, रंग की भूमिकाएं और ऐक्सेसिबिलिटी देखें.

टोनल और शैडो एलिवेशन

Material 3 में एलिवेशन को मुख्य तौर पर टोनल कलर ओवरले का इस्तेमाल करके दिखाया जाता है. यह कंटेनर और प्लैटफ़ॉर्म के बीच अंतर करने का नया तरीका है. इसमें शैडो के साथ-साथ, टोनल एलिवेशन का इस्तेमाल किया जाता है. टोनल एलिवेशन बढ़ाने पर, ज़्यादा प्रमुख टोन का इस्तेमाल किया जाता है.

शैडो एलिवेशन के साथ टोनल एलिवेशन लेवल 2 पर टोनल एलिवेशन, जो प्राइमरी कलर स्लॉट से रंग लेता है.

गहरे रंग वाली थीम में एलिवेशन ओवरले को भी Material Design 3 में टोनल कलर ओवरले में बदल दिया गया है. ओवरले का रंग, मुख्य रंग वाले स्लॉट से मिलता है.

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

Surface(
   modifier = modifier,
   tonalElevation = {..}
   shadowElevation = {..}
) {
   Column(content = content)
}

ऐप्लिकेशन में रंग जोड़ना

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

be7a661b4553167b.png

रंग वाली थीम वाले ऐप्लिकेशन का उदाहरण जिसमें कॉम्पोनेंट, डिफ़ॉल्ट कलर रोल का इस्तेमाल कर रहे हैं.

सरफ़ेस के रंग

होम स्क्रीन में, आपको मुख्य ऐप्लिकेशन कंपोज़ेबल को Surface() में रैप करना होगा, ताकि ऐप्लिकेशन के कॉन्टेंट को इसके ऊपर रखा जा सके. MainActivity.kt खोलें और ReplyApp() कंपोज़ेबल को Surface से रैप करें.

आपको 5.dp का टोनल एलिवेशन भी देना होगा, ताकि सतह को प्राइमरी स्लॉट का टोनल रंग मिल सके. इससे, सूची में मौजूद आइटम और उसके ऊपर मौजूद खोज बार के बीच कंट्रास्ट मिलता है. डिफ़ॉल्ट रूप से, सर्फ़ेस के लिए टोनल और शैडो एलिवेशन 0.dp होता है.

MainActivity.kt

AppTheme {
   Surface(tonalElevation = 5.dp) {
       ReplyApp(
           replyHomeUIState = uiState,
          // other parameters
         )
   }
}

अगर अब ऐप्लिकेशन चलाया जाता है और आपको सूची और जानकारी, दोनों पेज दिखते हैं, तो आपको पूरे ऐप्लिकेशन पर टोनल सर्फ़ेस लागू किया हुआ दिखेगा.

be7a661b4553167b.png e70d762495173610.png

सरफ़ेस और टोनल कलर के बिना ऐप्लिकेशन का बैकग्राउंड (बाएं).

ऐप्लिकेशन के बैकग्राउंड में, सर्फ़ेस और टोनल रंग का इस्तेमाल किया गया है (दाईं ओर).

ऐप्लिकेशन बार के रंग

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

5779fc399d8a8187.png

बिना बैकग्राउंड वाला कस्टम खोज बार (बाईं ओर).

बैकग्राउंड के साथ कस्टम खोज बार (दाईं ओर).

अब आपको ui/components/ReplyAppBars.kt में बदलाव करना होगा. इसमें ऐप्लिकेशन बार मौजूद होता है. आपको MaterialTheme.colorScheme.background को Row कंपोज़ेबल के Modifier में जोड़ना होगा.

ReplyAppBars.kt

@Composable
fun ReplySearchBar(modifier: Modifier = Modifier) {
   Row(
       modifier = modifier
           .fillMaxWidth()
           .padding(16.dp)
           .background(MaterialTheme.colorScheme.background),
       verticalAlignment = Alignment.CenterVertically
   ) {
       // Search bar content
   }
}

अब आपको टोनल सर्फ़ेस और बैकग्राउंड कलर वाले ऐप्लिकेशन बार के बीच का अंतर साफ़ तौर पर दिखेगा.

b1b374b801dadc06.png

टोनल सर्फ़ेस के ऊपर बैकग्राउंड के रंग वाला खोज बार.

फ़्लोट करने वाले कार्रवाई बटन के रंग

70ceac87233fe466.png

बड़ा एफ़एबी, जिसमें कोई थीम लागू नहीं की गई है (बाईं ओर).

टर्शरी रंग वाला, थीम के हिसाब से बनाया गया बड़ा एफ़एबी (दाईं ओर).

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

ReplyListContent.kt फ़ाइल में, FAB के लिए containerColor को tertiaryContainer रंग पर और कॉन्टेंट के रंग को onTertiaryContainer पर अपडेट करें, ताकि सुलभता और कलर कंट्रास्ट बना रहे.

ReplyListContent.kt

ReplyInboxScreen(/*..*/) {
// Email list content
  LargeFloatingActionButton(
    containerColor = MaterialTheme.colorScheme.tertiaryContainer,
    contentColor = MaterialTheme.colorScheme.onTertiaryContainer
  ){
   /*..*/   
  }
}

ऐप्लिकेशन चलाकर देखें कि आपका FAB थीम के हिसाब से है या नहीं. इस कोडलैब के लिए, LargeFloatingActionButton का इस्तेमाल किया जा रहा है.

कार्ड के रंग

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

सेकंडरी कलर टोन देकर, कुछ ज़रूरी आइटम को हाइलाइट किया जा सकता है. अहम ईमेल के लिए, CardDefaults.cardColors() का इस्तेमाल करके कार्ड कंटेनर का रंग अपडेट करके, ui/components/ReplyEmailListItem.kt में बदलाव किया जाएगा:

ReplyEmailListItem.kt

Card(
   modifier =  modifier
       .padding(horizontal = 16.dp, vertical = 4.dp)
       .semantics { selected = isSelected }
       .clickable { navigateToDetail(email.id) },
   colors = CardDefaults.cardColors(
       containerColor = if (email.isImportant)
           MaterialTheme.colorScheme.secondaryContainer
       else MaterialTheme.colorScheme.surfaceVariant
   )
){
  /*..*/   
}

5818200be0b01583.png 9367d40023db371d.png

टोनल सर्फ़ेस पर, सेकंडरी कंटेनर के रंग का इस्तेमाल करके सूची के आइटम को हाइलाइट करें.

ज़्यादा जानकारी वाली सूची के आइटम का रंग

अब आपकी होम स्क्रीन पर थीम लागू हो गई है. ईमेल पते की सूची में मौजूद किसी भी आइटम पर क्लिक करके, ज़्यादा जानकारी वाला पेज देखें.

7a9ea7cf3e91e9c7.png 79b3874aeca4cd1.png

थीम वाले सूची आइटम के बिना जानकारी वाला डिफ़ॉल्ट पेज (बाईं ओर).

बैकग्राउंड थीमिंग लागू किया गया, जानकारी वाली सूची का आइटम (दाईं ओर).

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

ReplyEmailThreadItem.kt

@Composable
fun ReplyEmailThreadItem(
   email: Email,
   modifier: Modifier = Modifier
) {
   Column(
       modifier = modifier
           .fillMaxWidth()
           .padding(16.dp)
           .background(MaterialTheme.colorScheme.background)
           .padding(20.dp)
    ) {
      // List item content
    }
}

यहां देखा जा सकता है कि बैकग्राउंड देने से, टोनल सर्फ़ेस और सूची आइटम के बीच का अंतर साफ़ तौर पर दिखता है.

अब आपके पास होम पेज और जानकारी पेज, दोनों पर सही कलर रोल और इस्तेमाल की जानकारी है . आइए, देखते हैं कि आपका ऐप्लिकेशन, डाइनैमिक कलर का इस्तेमाल करके लोगों को उनकी दिलचस्पी के हिसाब से और ज़्यादा बेहतरीन अनुभव कैसे दे सकता है.

5. ऐप्लिकेशन में डाइनैमिक कलर जोड़ना

डाइनैमिक कलर, Material 3 का मुख्य हिस्सा है. इसमें एक एल्गोरिदम, उपयोगकर्ता के वॉलपेपर से पसंद के हिसाब से रंग बनाता है. इन कलर को उपयोगकर्ता के ऐप्लिकेशन और सिस्टम यूज़र इंटरफ़ेस (यूआई) पर लागू किया जाता है.

डाइनैमिक थीम की सुविधा से, आपके ऐप्लिकेशन को आपकी पसंद के मुताबिक बनाया जा सकता है. यह उपयोगकर्ताओं को सिस्टम थीम के साथ एक जैसा और बेहतरीन अनुभव भी देता है.

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

Theme.kt फ़ाइल में मौजूद AppTheme फ़ंक्शन के कोड की जगह यह कोड डालें:

Theme.kt

@Composable
fun AppTheme(
   useDarkTheme: Boolean =  isSystemInDarkTheme(),
   content: @Composable () -> Unit
) {
   val context = LocalContext.current
   val colors = when {
       (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) -> {
           if (useDarkTheme) dynamicDarkColorScheme(context)
           else dynamicLightColorScheme(context)
       }
       useDarkTheme -> DarkColors
       else -> LightColors
   }
   
      MaterialTheme(
       colorScheme = colors,
       content = content
     )
}

fecc63b4c6034236.png

Android 13 के वॉलपेपर से ली गई डाइनैमिक थीम.

अब ऐप्लिकेशन चलाने पर, आपको Android 13 के डिफ़ॉल्ट वॉलपेपर का इस्तेमाल करके, डाइनैमिक थीमिंग लागू की हुई दिखेगी.

ऐसा भी हो सकता है कि आपको स्टेटस बार को डाइनैमिक तरीके से स्टाइल करना हो. यह इस बात पर निर्भर करता है कि आपके ऐप्लिकेशन को थीम देने के लिए किस कलर स्कीम का इस्तेमाल किया गया है.

1095e2b2c1ffdc14.png

ऐप्लिकेशन में स्टेटस बार का रंग लागू नहीं किया गया है (बाएं).

ऐप्लिकेशन में स्टेटस बार का रंग बदला गया है (दाईं ओर).

अपनी थीम के मुख्य रंग के हिसाब से स्टेटस बार का रंग अपडेट करने के लिए, AppTheme कंपोज़ेबल में कलर स्कीम चुनने के बाद स्टेटस बार का रंग जोड़ें:

Theme.kt

@Composable
fun AppTheme(
   useDarkTheme: Boolean =  isSystemInDarkTheme(),
   content: @Composable () -> Unit
) {
 
 // color scheme selection code

 // Add primary status bar color from chosen color scheme.
 val view = LocalView.current
 if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = colors.primary.toArgb()
        WindowCompat
            .getInsetsController(window, view)
            .isAppearanceLightStatusBars = useDarkTheme
    }
 }
   
  MaterialTheme(
    colorScheme = colors,
     content = content
   )
}

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

69093b5bce31fd43.png

Android 13 के डिफ़ॉल्ट वॉलपेपर पर, डाइनैमिक लाइट (बाएं) और डार्क (दाएं) थीम लागू की गई है.

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

6. मुद्रण कला

मटीरियल डिज़ाइन 3 में टाइप स्केल तय किया गया है. नाम रखने और ग्रुप बनाने की प्रोसेस को आसान बना दिया गया है. अब डिसप्ले, हेडलाइन, टाइटल, बॉडी, और लेबल के लिए बड़े, मीडियम, और छोटे साइज़ उपलब्ध हैं.

999a161dcd9b0ec4.png

Material 3 टाइप स्केल.

टाइपोग्राफ़ी तय करना

Compose, Material 3 टाइप स्केल को मॉडल करने के लिए, मौजूदा TextStyle और font-related क्लास के साथ-साथ M3 Typography क्लास उपलब्ध कराता है.

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

आपको अपने ऐप्लिकेशन में पांच टाइपोग्राफ़ी स्टाइल इस्तेमाल करनी होंगी: headlineSmall, titleLarge, bodyLarge, bodyMedium, और labelMedium. ये स्टाइल, होम स्क्रीन और ज़्यादा जानकारी वाली स्क्रीन, दोनों पर लागू होंगी.

टाइटल, लेबल, और बॉडी स्टाइल में टाइपोग्राफ़ी के इस्तेमाल को दिखाने वाली स्क्रीन.

टाइटल, लेबल, और बॉडी स्टाइल में टाइपोग्राफ़ी के इस्तेमाल को दिखाने वाली स्क्रीन.

इसके बाद, ui/theme पैकेज पर जाएं और Type.kt खोलें. डिफ़ॉल्ट वैल्यू के बजाय, कुछ टेक्स्ट स्टाइल के लिए अपना खुद का कोड लागू करने के लिए, यह कोड जोड़ें:

Type.kt

val typography = Typography(
   headlineSmall = TextStyle(
       fontWeight = FontWeight.SemiBold,
       fontSize = 24.sp,
       lineHeight = 32.sp,
       letterSpacing = 0.sp
   ),
   titleLarge = TextStyle(
       fontWeight = FontWeight.Normal,
       fontSize = 18.sp,
       lineHeight = 28.sp,
       letterSpacing = 0.sp
   ),
   bodyLarge = TextStyle(
       fontWeight = FontWeight.Normal,
       fontSize = 16.sp,
       lineHeight = 24.sp,
       letterSpacing = 0.15.sp
   ),
   bodyMedium = TextStyle(
       fontWeight = FontWeight.Medium,
       fontSize = 14.sp,
       lineHeight = 20.sp,
       letterSpacing = 0.25.sp
   ),
   labelMedium = TextStyle(
       fontWeight = FontWeight.SemiBold,
       fontSize = 12.sp,
       lineHeight = 16.sp,
       letterSpacing = 0.5.sp
   )
)

अब आपकी टाइपोग्राफ़ी तय हो गई है. इसे अपनी थीम में जोड़ने के लिए, इसे AppTheme के अंदर मौजूद MaterialTheme() कंपोज़ेबल में पास करें:

Theme.kt

@Composable
fun AppTheme(
   useDarkTheme: Boolean = isSystemInDarkTheme(),
   content: @Composable() () -> Unit
) {
  // dynamic theming content

   MaterialTheme(
       colorScheme = colors,
       typography = typography,
       content = content
   )
}

टाइपोग्राफ़ी के साथ काम करना

रंगों की तरह ही, MaterialTheme.typography का इस्तेमाल करके मौजूदा थीम के लिए टाइपोग्राफ़ी स्टाइल को ऐक्सेस किया जा सकता है. इससे आपको टाइपोग्राफ़ी इंस्टेंस मिलता है, ताकि Type.kt में तय की गई सभी टाइपोग्राफ़ी का इस्तेमाल किया जा सके.

Text(
   text = "Hello M3 theming",
   style = MaterialTheme.typography.titleLarge
)

Text(
   text = "you are learning typography",
   style = MaterialTheme.typography.bodyMedium
)

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

आपने Text() कंपोज़ेबल पर टाइपोग्राफ़ी लागू नहीं की है. इसलिए, सभी टेक्स्ट डिफ़ॉल्ट रूप से Typography.bodyLarge पर वापस आ जाते हैं.

होम लिस्ट की टाइपोग्राफ़ी

इसके बाद, टाइटल और लेबल के बीच अंतर करने के लिए, ui/components/ReplyEmailListItem.kt में मौजूद ReplyEmailListItem फ़ंक्शन पर टाइपोग्राफ़ी लागू करें:

ReplyEmailListItem.kt

Text(
   text = email.sender.firstName,
   style = MaterialTheme.typography.labelMedium
)

Text(
   text = email.createdAt,
   style = MaterialTheme.typography.labelMedium
)

Text(
   text = email.subject,
   style = MaterialTheme.typography.titleLarge,
   modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
)

Text(
   text = email.body,
   maxLines = 2,
   style = MaterialTheme.typography.bodyLarge,
   overflow = TextOverflow.Ellipsis
)

90645c0765167bb7.png 6c4af2f412c18bfb.png

होम स्क्रीन पर टाइपोग्राफ़ी लागू नहीं की गई है (बाईं ओर).

टाइपोग्राफ़ी वाली होम स्क्रीन (दाईं ओर).

ज़्यादा जानकारी वाली सूची की टाइपोग्राफ़ी

इसी तरह, ui/components/ReplyEmailThreadItem.kt में ReplyEmailThreadItem के सभी टेक्स्ट कंपोज़ेबल अपडेट करके, जानकारी वाली स्क्रीन में टाइपोग्राफ़ी जोड़ी जाएगी:

ReplyEmailThreadItem.kt

Text(
   text = email.sender.firstName,
   style = MaterialTheme.typography.labelMedium
)

Text(
   text = stringResource(id = R.string.twenty_mins_ago),
   style = MaterialTheme.typography.labelMedium
)

Text(
   text = email.subject,
   style = MaterialTheme.typography.bodyMedium,
   modifier = Modifier.padding(top = 12.dp, bottom = 8.dp),
)

Text(
   text = email.body,
   style = MaterialTheme.typography.bodyLarge,
   color = MaterialTheme.colorScheme.onSurfaceVariant
)

543ac09e43d8761.png 3412771e95a45f36.png

टाइपोग्राफ़ी लागू किए बिना जानकारी वाली स्क्रीन (बाईं ओर).

टाइपोग्राफ़ी लागू की गई जानकारी वाली स्क्रीन (दाईं ओर).

टाइपोग्राफ़ी को पसंद के मुताबिक बनाना

Compose की मदद से, टेक्स्ट स्टाइल को पसंद के मुताबिक बनाना या कस्टम फ़ॉन्ट देना बहुत आसान है. फ़ॉन्ट टाइप, फ़ॉन्ट फ़ैमिली, अक्षरों के बीच की दूरी वगैरह को पसंद के मुताबिक बनाने के लिए, TextStyle में बदलाव किया जा सकता है.

आपको theme/Type.kt फ़ाइल में टेक्स्ट की स्टाइल बदलनी होगी. यह बदलाव, इस फ़ाइल का इस्तेमाल करने वाले सभी कॉम्पोनेंट पर दिखेगा.

titleLarge के लिए, fontWeight को SemiBold और lineHeight को 32.sp में अपडेट करें. इसका इस्तेमाल सूची आइटम में विषय के लिए किया जाता है. इससे विषय पर ज़्यादा ज़ोर दिया जाएगा और जानकारी को अलग-अलग हिस्सों में बांटा जाएगा.

Type.kt

...
titleLarge = TextStyle(
   fontWeight = FontWeight.SemiBold,
   fontSize = 18.sp,
   lineHeight = 32.sp,
   letterSpacing = 0.0.sp
),
...

f8d2212819eb0b61.png

विषय के टेक्स्ट पर कस्टम टाइपोग्राफ़ी लागू करना.

7. आकार

मटेरियल के सर्फ़ेस को अलग-अलग शेप में दिखाया जा सकता है. आकृतियों से ध्यान खींचने, कॉम्पोनेंट की पहचान करने, स्थिति के बारे में बताने, और ब्रैंड को दिखाने में मदद मिलती है.

आकृतियां तय करना

Compose, नई M3 शेप लागू करने के लिए, बढ़े हुए पैरामीटर के साथ Shapes क्लास उपलब्ध कराता है. M3 शेप स्केल, टाइप स्केल की तरह ही होता है. इससे यूज़र इंटरफ़ेस (यूआई) में अलग-अलग तरह के शेप इस्तेमाल किए जा सकते हैं.

शेप स्केल में अलग-अलग साइज़ के शेप होते हैं:

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

डिफ़ॉल्ट रूप से, हर शेप की एक डिफ़ॉल्ट वैल्यू होती है. इसे बदला जा सकता है. अपने ऐप्लिकेशन के लिए, लिस्ट आइटम में बदलाव करने के लिए मीडियम शेप का इस्तेमाल करें. हालांकि, आपके पास अन्य शेप भी तय करने का विकल्प होता है. ui/theme पैकेज में Shape.kt नाम की नई फ़ाइल बनाएं और उसमें शेप के लिए कोड जोड़ें:

Shape.kt

package com.example.reply.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Shapes
import androidx.compose.ui.unit.dp

val shapes = Shapes(
   extraSmall = RoundedCornerShape(4.dp),
   small = RoundedCornerShape(8.dp),
   medium = RoundedCornerShape(16.dp),
   large = RoundedCornerShape(24.dp),
   extraLarge = RoundedCornerShape(32.dp)
)

अब जब आपने shapes तय कर लिया है, तो इसे M3 MaterialTheme पर पास करें. ठीक वैसे ही जैसे आपने रंगों और टाइपोग्राफ़ी के लिए किया था:

Theme.kt

@Composable
fun AppTheme(
   useDarkTheme: Boolean = isSystemInDarkTheme(),
   content: @Composable() () -> Unit
) {
  // dynamic theming content

   MaterialTheme(
       colorScheme = colors,
       typography = typography,
       shapes = shapes
       content = content
   )
}

शेप के साथ काम करना

रंग और टाइपोग्राफ़ी की तरह ही, MaterialTheme.shape का इस्तेमाल करके, मटीरियल कॉम्पोनेंट में शेप लागू किए जा सकते हैं. इससे आपको Shape इंस्टेंस मिलता है, ताकि मटीरियल शेप को ऐक्सेस किया जा सके.

कई Material कॉम्पोनेंट में पहले से ही डिफ़ॉल्ट शेप लागू होते हैं. हालांकि, उपलब्ध स्लॉट के ज़रिए कॉम्पोनेंट में अपने शेप लागू किए जा सकते हैं.

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(shape = MaterialTheme.shapes.large) { /* fab content */}

सभी Material 3 कॉम्पोनेंट के लिए, डिफ़ॉल्ट शेप वैल्यू. *अलग-अलग तरह की शेप का इस्तेमाल करके, मटीरियल कॉम्पोनेंट की मैपिंग.*

शेप दस्तावेज़ में, सभी कॉम्पोनेंट के लिए शेप की मैपिंग देखी जा सकती है.

इस्तेमाल करने के लिए दो और शेप उपलब्ध हैं — RectangleShape और CircleShape — जो कंपोज़ करने की सुविधा का हिस्सा हैं. आयत की कोई बॉर्डर रेडियस नहीं होती है. वहीं, सर्कल के किनारे पूरी तरह से गोल होते हैं.

Modifiers का इस्तेमाल करके, अपने कॉम्पोनेंट में आकार भी जोड़ा जा सकता है. जैसे, Modifier.clip, Modifier.background, और Modifier.border.

ऐप्लिकेशन बार का शेप

हमें ऐप्लिकेशन बार के बैकग्राउंड के किनारों को गोल करना है:

f873392abe535494.png

TopAppBar में, बैकग्राउंड के रंग के साथ Row का इस्तेमाल किया जा रहा है. गोल कोने वाला बैकग्राउंड बनाने के लिए, बैकग्राउंड मॉडिफ़ायर में CircleShape पास करके, बैकग्राउंड का आकार तय करें:

ReplyAppBars.kt

@Composable
fun ReplySearchBar(modifier: Modifier = Modifier) {
   Row(
       modifier = modifier
           .fillMaxWidth()
           .padding(16.dp)
           .background(
               MaterialTheme.colorScheme.background,
               CircleShape
           ),
       verticalAlignment = Alignment.CenterVertically
   ) {
       // Search bar content
   }
}

f873392abe535494.png

ज़्यादा जानकारी वाली सूची के आइटम का आकार

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

3412771e95a45f36.png 80ee881c41a98c2a.png

डिटेल लिस्ट आइटम कॉलम. इसमें लिस्ट आइटम (बाईं ओर) पर कोई आकार नहीं है और लिस्ट (दाईं ओर) पर मीडियम आकार है.

ReplyEmailThreadItem.kt

@Composable
fun ReplyEmailThreadItem(
   email: Email,
   modifier: Modifier = Modifier
) {
   Column(
       modifier = modifier
           .fillMaxWidth()
           .padding(8.dp)
           .background(
               MaterialTheme.colorScheme.background,
               MaterialTheme.shapes.medium
           )
           .padding(16.dp)

   ) {
      // List item content
      
   }
}

अब ऐप्लिकेशन चलाने पर, आपको medium के आकार में स्क्रीन की आइटम लिस्ट दिखेगी.

8. हाइलाइट करना

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

  1. M3 के बड़े कलर सिस्टम से, सर्फ़ेस, सर्फ़ेस-वैरिएंट, और बैकग्राउंड के साथ-साथ ऑन-सर्फ़ेस और ऑन-सर्फ़ेस-वैरिएंट रंगों का इस्तेमाल करना.

उदाहरण के लिए, अलग-अलग लेवल पर ज़ोर देने के लिए, surface का इस्तेमाल on-surface-variant के साथ किया जा सकता है. साथ ही, surface-variant का इस्तेमाल on-surface के साथ किया जा सकता है.

एक्सेंट के रंगों के साथ-साथ, सर्फ़ेस के वैरिएंट का इस्तेमाल भी किया जा सकता है. इससे, एक्सेंट के रंगों के मुकाबले कम ज़ोर दिया जा सकता है. हालांकि, यह ध्यान रखना ज़रूरी है कि सर्फ़ेस के वैरिएंट सुलभ हों और कंट्रास्ट अनुपात का पालन करते हों.

सर्फ़ेस, बैकग्राउंड, और सर्फ़ेस वैरिएंट के रंग की भूमिकाएं.

सर्फ़ेस, बैकग्राउंड, और सर्फ़ेस वैरिएंट के रंग की भूमिकाएं.

  1. टेक्स्ट के लिए अलग-अलग फ़ॉन्ट वेट का इस्तेमाल करना. टाइपोग्राफ़ी सेक्शन में आपने देखा कि अलग-अलग तरह से ज़ोर देने के लिए, टाइप स्केल को कस्टम वेट दिया जा सकता है.

इसके बाद, सर्फ़ेस वैरिएंट का इस्तेमाल करके, ReplyEmailListItem.kt को अपडेट करें, ताकि अंतर को हाइलाइट किया जा सके. डिफ़ॉल्ट रूप से, कार्ड का कॉन्टेंट, बैकग्राउंड के हिसाब से कॉन्टेंट का डिफ़ॉल्ट रंग ले रहा है.

आपको समय के टेक्स्ट और बॉडी टेक्स्ट कंपोज़ेबल के रंग को onSurfaceVariant में अपडेट करना होगा. इससे onContainerColors की तुलना में, इस पर कम ज़ोर दिया जाता है. को डिफ़ॉल्ट रूप से, विषय और टाइटल टेक्स्ट कंपोज़ेबल पर लागू किया जाता है.

2c9b7f2bd016edb8.png 6850ff391f21e4ba.png

विषय और टाइटल (बाईं ओर) की तुलना में, समय और मुख्य टेक्स्ट पर एक जैसा ज़ोर दिया गया है.

विषय और टाइटल की तुलना में, समय और बॉडी पर कम ज़ोर दिया गया है (दाईं ओर).

ReplyEmailListItem.kt

Text(
   text = email.createdAt,
   style = MaterialTheme.typography.labelMedium,
   color = MaterialTheme.colorScheme.onSurfaceVariant
)

Text(
   text = email.body,
   maxLines = 2,
   style = MaterialTheme.typography.bodyLarge,
   color = MaterialTheme.colorScheme.onSurfaceVariant
   overflow = TextOverflow.Ellipsis
)

बैकग्राउंड secondaryContainer वाले ज़रूरी ईमेल कार्ड के लिए, सभी टेक्स्ट का रंग डिफ़ॉल्ट रूप से onSecondaryContainer होता है. अन्य ईमेल के लिए, बैकग्राउंड का रंग surfaceVariant, है. इसलिए, सभी टेक्स्ट का डिफ़ॉल्ट रंग onSurfaceVariant है.

9. बधाई हो

बधाई हो! आपने इस कोडलैब को पूरा कर लिया है! आपने Compose के साथ Material theming को लागू किया है. इसमें रंग, टाइपोग्राफ़ी, और आकार के साथ-साथ डाइनैमिक रंगों का इस्तेमाल किया गया है, ताकि आपके ऐप्लिकेशन को थीम किया जा सके और लोगों को उनकी दिलचस्पी के हिसाब से अनुभव दिया जा सके.

2d8fcabf15ac5202.png 5a4d31db0185dca6.png ce009e4ce560834d.png

डाइनैमिक कलर और रंग वाली थीम लागू करने के बाद, थीम वाले नतीजों का आखिर.

आगे क्या करना है

Compose के पाथवे पर हमारे अन्य कोडलैब देखें:

इस बारे में और पढ़ें

ऐप्लिकेशन के सैंपल

  • Material 3 की पूरी थीमिंग के साथ जवाब का सैंपल ऐप्लिकेशन
  • डाइनैमिक थीमिंग की सुविधा दिखाने वाला JetChat

रेफ़रंस के लिए दस्तावेज़