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

1. परिचय

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

इसके अलावा, इसमें डाइनैमिक थीमिंग के साथ-साथ, फ़ोकस के अलग-अलग लेवल के बारे में बताया जाएगा.

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

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

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

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

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

d15db3dc75a9d00f.png

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

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

1357cdbfaaa67721.png

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

1357cdbfaaa67721.png

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

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

2. सेट अप किया जा रहा है

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

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

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

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

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

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

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

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

स्टार्ट कोड को एक्सप्लोर करना

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

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

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

3. मटीरियल 3 थीमिंग

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

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

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

रंगों, टाइपोग्राफ़ी, और आकारों का मटीरियल 3 सबसिस्टम.

4. कलर स्कीम

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

M3 थीम बनाने के लिए पांच बेसलाइन बटन कलर.

M3 थीम वाली थीम बनाने के लिए, पांच बेसलाइन बटन इस्तेमाल करें.

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

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

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

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

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

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

कलर स्कीम और कलर भूमिकाओं के बारे में ज़्यादा पढ़ें.

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

मैन्युअल तरीके से पसंद के मुताबिक ColorScheme बनाए जा सकते हैं. हालांकि, आपके ब्रैंड के सोर्स कलर का इस्तेमाल करके, इसे आसानी से जनरेट किया जा सकता है. मटीरियल थीम बिल्डर टूल की मदद से ऐसा किया जा सकता है. साथ ही, इसकी मदद से 'लिखें' थीम वाला कोड एक्सपोर्ट किया जा सकता है.

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

294f73fc9d2a570e.png

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

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

मटीरियल थीम बिल्डर, जिसमें सबसे ऊपर दाएं कोने में कॉन्टेंट को एक्सपोर्ट करने का विकल्प है.

मटीरियल थीम बिल्डर, जिसमें सबसे ऊपर दाएं कोने में कॉन्टेंट को एक्सपोर्ट करने की सुविधा है.

मुख्य रंग #825500 से यह थीम जनरेट होती है, जिसे ऐप्लिकेशन में जोड़ा जाएगा. मटीरियल 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 कंपोज़ेबल को AppTheme के साथ ReplyAppPreview() में रैप करें.

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

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

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

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

आइए, ऐप्लिकेशन में कलर रोल जोड़ने और इसे इस्तेमाल करने के बारे में जानें.

कलर रोल और सुलभता

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

1f184a05ea57aa84.png

प्राइमरी, सेकंडरी, और तीसरे रंगों के लिए कलर रोल.

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

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

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

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

ज़्यादा जानकारी के लिए, रंगों से जुड़ी भूमिकाएं और सुलभता देखें.

टोनल और शैडो की ऊंचाई

मटीरियल 3 मुख्य रूप से टोनल कलर ओवरले का इस्तेमाल करके ऊंचाई को दिखाता है. कंटेनर और सतहों को एक-दूसरे से अलग करने का यह एक नया तरीका है — टोनल ऊंचाई को बढ़ाने में शैडो के अलावा ज़्यादा साफ़ टोन का इस्तेमाल किया जाता है.

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

मटीरियल डिज़ाइन 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 Composable के 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 फ़ाइल में, सुलभता और कलर कंट्रास्ट को बनाए रखने के लिए, एफ़एबी के containerColor को tertiaryContainer रंग और कॉन्टेंट के रंग को onTertiaryContainer पर सेट करें.

ReplyListContent.kt

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

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

कार्ड के रंग

होम स्क्रीन पर मौजूद ईमेल सूची में कार्ड कॉम्पोनेंट का इस्तेमाल किया जाता है. डिफ़ॉल्ट रूप से, यह भरा हुआ कार्ड होता है. इसमें कंटेनर के रंग के लिए, सरफ़ेस वैरिएंट कलर का इस्तेमाल किया जाता है, ताकि सर्फ़ेस और कार्ड के रंग को साफ़ तौर पर अलग किया जा सके. कंपोज़िशन में 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. ऐप्लिकेशन में डाइनैमिक कलर जोड़े जा रहे हैं

डाइनैमिक रंग, मटीरियल 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

मटीरियल 3 टाइप का स्केल.

टाइपोग्राफ़ी को परिभाषित करना

Compose में मटीरियल 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.k में सभी तय की गई टाइपोग्राफ़ी का इस्तेमाल करने के लिए, टाइपोग्राफ़ी इंस्टेंस मिल जाता है.

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, Shapes क्लास को बड़े किए गए पैरामीटर के साथ उपलब्ध कराता है. इससे, M3 के नए आकारों को लागू किया जा सकता है. टाइप स्केल की तरह ही 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 इंस्टेंस मिलता है.

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

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

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

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

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

Modifier.clip, Modifier.background, और Modifier.border जैसे आकार लेने वाले Modifiers का इस्तेमाल करके, अपने कॉम्पोनेंट के लिए भी आकार लागू किया जा सकता है.

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

हम चाहते हैं कि ऐप बार की बैकग्राउंड गोल आकार की हो:

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 कलर सिस्टम से सरफ़ेस, सरफ़ेस-वैरिएंट, और बैकग्राउंड के साथ-साथ ऑन-सर्फ़ेस और ऑन-सर्फ़ेस-वैरिएंट कलर सिस्टम का इस्तेमाल किया गया.

उदाहरण के लिए, अलग-अलग फ़ोकस देने के लिए, सरफ़ेस का इस्तेमाल ऑन-सफ़ेस-वैरिएंट के साथ किया जा सकता है.

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

सरफ़ेस, बैकग्राउंड, और प्लैटफ़ॉर्म के वैरिएंट के लिए कलर रोल.

कलर रोल, सरफ़ेस, बैकग्राउंड, और प्लैटफ़ॉर्म के वैरिएंट के हिसाब से तय होता है.

  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 में मटीरियल थीमिंग को लागू किया है. इसमें रंग, टाइपोग्राफ़ी, आकार, और डाइनैमिक रंगों के साथ-साथ डाइनैमिक कलर भी शामिल हैं.

2d8fcabf15ac5202.png 5a4d31db0185dca6.png ce009e4ce560834d.png

थीम के नतीजे के आखिर में डाइनैमिक कलर और कलर थीम लागू की गई है.

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

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

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

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

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