1. ভূমিকা
এই কোডল্যাবে, আপনি মেটেরিয়াল ডিজাইন 3 ব্যবহার করে জেটপ্যাক কম্পোজে আপনার অ্যাপের থিমিং সম্পর্কে শিখবেন। এছাড়াও আপনি মেটেরিয়াল ডিজাইন 3 কালার স্কিম, টাইপোগ্রাফি এবং আকারের মূল বিল্ডিং ব্লক সম্পর্কেও শিখবেন, যা আপনাকে আপনার অ্যাপ্লিকেশনকে ব্যক্তিগতকৃত এবং থিম করতে সাহায্য করে। অ্যাক্সেসযোগ্য উপায়।
এছাড়াও, আপনি বিভিন্ন জোর স্তর সহ গতিশীল থিমিং এর সমর্থন অন্বেষণ করবেন।
যা শিখবেন
এই কোডল্যাবে, আপনি শিখবেন:
- উপাদান 3 থিমিং এর মূল দিক
- উপাদান 3 রঙের স্কিম এবং কীভাবে আপনার অ্যাপের জন্য থিম তৈরি করবেন
- কীভাবে আপনার অ্যাপের জন্য গতিশীল এবং হালকা/গাঢ় থিমিং সমর্থন করবেন
- আপনার অ্যাপ ব্যক্তিগতকৃত করতে টাইপোগ্রাফি এবং আকার
- উপাদান 3 উপাদান এবং আপনার অ্যাপ্লিকেশন শৈলী কাস্টমাইজ করা
যা আপনি নির্মাণ করবেন
এই কোডল্যাবে, আপনি উত্তর নামক একটি ইমেল ক্লায়েন্ট অ্যাপকে থিম করবেন। আপনি বেসলাইন থিম ব্যবহার করে একটি আনস্টাইল না করা অ্যাপ্লিকেশান দিয়ে শুরু করবেন এবং আপনি যা শিখবেন তা প্রয়োগ করবেন অ্যাপ্লিকেশানের থিম এবং গাঢ় থিম সমর্থন করে৷
বেসলাইন থিম সহ আমাদের অ্যাপের ডিফল্ট স্টার্টিং পয়েন্ট।
আপনি রঙের স্কিম, টাইপোগ্রাফি এবং আকার দিয়ে আপনার থিম তৈরি করবেন এবং তারপরে এটি আপনার অ্যাপের ইমেল তালিকা এবং বিস্তারিত পৃষ্ঠায় প্রয়োগ করবেন। আপনি অ্যাপটিতে ডায়নামিক থিম সমর্থন যোগ করবেন। কোডল্যাবের শেষে, আপনার অ্যাপের জন্য রঙ এবং গতিশীল থিম উভয়ের জন্যই আপনার সমর্থন থাকবে।
হালকা রঙের থিমিং এবং হালকা গতিশীল থিমিং সহ থিমিং কোডল্যাবের শেষ বিন্দু।
গাঢ় রঙের থিমিং এবং গাঢ় গতিশীল থিমিং সহ থিমিং কোডল্যাবের শেষ বিন্দু।
আপনি কি প্রয়োজন হবে
- অ্যান্ড্রয়েড স্টুডিওর সর্বশেষ সংস্করণ
- কোটলিন ভাষার সাথে প্রাথমিক অভিজ্ঞতা
- জেটপ্যাক রচনার প্রাথমিক ধারণা
- কম্পোজ লেআউটের সাথে প্রাথমিক পরিচিতি, যেমন সারি , কলাম এবং সংশোধক
2. সেট আপ করা হচ্ছে
এই ধাপে, আপনি Reply অ্যাপের সম্পূর্ণ কোডটি ডাউনলোড করুন যা আপনি এই কোডল্যাবে স্টাইল করবেন।
কোড পান
এই কোডল্যাবের কোডটি android-compose-codelabs GitHub সংগ্রহস্থলে পাওয়া যাবে। এটি ক্লোন করতে, চালান:
$ git clone https://github.com/googlecodelabs/android-compose-codelabs
বিকল্পভাবে, আপনি দুটি জিপ ফাইল ডাউনলোড করতে পারেন:
নমুনা অ্যাপ্লিকেশন দেখুন
আপনি এইমাত্র যে কোডটি ডাউনলোড করেছেন তাতে সমস্ত উপলব্ধ কম্পোজ কোডল্যাবগুলির জন্য কোড রয়েছে৷ এই কোডল্যাবটি সম্পূর্ণ করতে, অ্যান্ড্রয়েড স্টুডিওর ভিতরে ThemingCodelab প্রকল্পটি খুলুন।
আমরা সুপারিশ করি যে আপনি মূল শাখার কোড দিয়ে শুরু করুন এবং আপনার নিজস্ব গতিতে ধাপে ধাপে কোডল্যাব অনুসরণ করুন। যে কোনো সময়ে, আপনি প্রজেক্টের গিট শাখা পরিবর্তন করে Android স্টুডিওতে যেকোনো সংস্করণ চালাতে পারেন।
শুরু কোড অন্বেষণ
প্রধান কোডটিতে একটি UI প্যাকেজ রয়েছে, যেটিতে নিম্নলিখিত প্রধান প্যাকেজ এবং ফাইলগুলি রয়েছে যার সাথে আপনি ইন্টারঅ্যাক্ট করবেন:
-
MainActivity.kt– এন্ট্রি পয়েন্ট অ্যাক্টিভিটি যেখানে আপনি রিপ্লাই অ্যাপ শুরু করেন। -
com.example.reply.ui.theme– এই প্যাকেজে থিম, টাইপোগ্রাফি এবং রঙের স্কিম রয়েছে। আপনি এই প্যাকেজে উপাদান থিমিং যোগ করা হবে. -
com.example.reply.ui.components- তালিকা আইটেম, অ্যাপ বার ইত্যাদির মতো অ্যাপের কাস্টম উপাদান রয়েছে। আপনি এই উপাদানগুলিতে থিম প্রয়োগ করবেন। -
ReplyApp.kt- এটি আমাদের প্রধান কম্পোজেবল ফাংশন যেখানে UI ট্রি শুরু হবে। আপনি এই ফাইলটিতে শীর্ষ স্তরের থিমিং প্রয়োগ করবেন।
এই কোডল্যাবটি ui প্যাকেজ ফাইলগুলিতে ফোকাস করবে।
3. উপাদান 3 থিমিং
জেটপ্যাক কম্পোজ মেটেরিয়াল ডিজাইনের বাস্তবায়নের প্রস্তাব দেয়—ডিজিটাল ইন্টারফেস তৈরির জন্য একটি ব্যাপক ডিজাইন সিস্টেম। মেটেরিয়াল ডিজাইনের উপাদানগুলি (বোতাম, কার্ড, সুইচ, ইত্যাদি) ম্যাটেরিয়াল থিমিংয়ের উপরে তৈরি করা হয়েছে, যা আপনার পণ্যের ব্র্যান্ডকে আরও ভালভাবে প্রতিফলিত করার জন্য উপাদান ডিজাইন কাস্টমাইজ করার একটি পদ্ধতিগত উপায়।
আপনার অ্যাপে থিমিং যোগ করার জন্য উপাদান 3 থিমে নিম্নলিখিত সাবসিস্টেম রয়েছে: রঙের স্কিম , টাইপোগ্রাফি এবং আকার । আপনি যখন এই মানগুলি কাস্টমাইজ করেন, তখন আপনার পরিবর্তনগুলি স্বয়ংক্রিয়ভাবে M3 উপাদানগুলিতে প্রতিফলিত হয় যা আপনি আপনার অ্যাপ তৈরি করতে ব্যবহার করেন। আসুন প্রতিটি সাবসিস্টেমের মধ্যে ডুব দিয়ে নমুনা অ্যাপে এটি বাস্তবায়ন করি।
উপাদান 3 রঙ, টাইপোগ্রাফি, এবং আকারের সাবসিস্টেম।
4. রঙের স্কিম
একটি রঙের স্কিমের ভিত্তি হল পাঁচটি মূল রঙের সেট যা প্রতিটি 13 টোনের একটি টোনাল প্যালেটের সাথে সম্পর্কিত যা উপাদান 3 উপাদান দ্বারা ব্যবহৃত হয়।
একটি M3 থিমিং তৈরি করার জন্য পাঁচটি বেসলাইন কী রঙ।
প্রতিটি উচ্চারণ রঙ (প্রাথমিক, মাধ্যমিক এবং তৃতীয়) তারপর জোড়া, সংজ্ঞায়িত জোর এবং চাক্ষুষ প্রকাশের জন্য বিভিন্ন টোনের চারটি সামঞ্জস্যপূর্ণ রঙে প্রদান করা হয়।
প্রাথমিক, মাধ্যমিক এবং তৃতীয় বেসলাইন অ্যাকসেন্ট রঙের চারটি টোনাল রঙ।
একইভাবে, নিরপেক্ষ রঙগুলিকেও চারটি সামঞ্জস্যপূর্ণ টোনে বিভক্ত করা হয়েছে যা পৃষ্ঠতল এবং পটভূমিতে ব্যবহৃত হয়। যেকোনো পৃষ্ঠে স্থাপন করার সময় টেক্সট আইকনগুলিতে জোর দেওয়াও গুরুত্বপূর্ণ।
বেসলাইন নিউট্রাল রঙের চারটি টোনাল রঙ।
রঙের স্কিম এবং রঙের ভূমিকা সম্পর্কে আরও পড়ুন।
রঙের স্কিম তৈরি করা হচ্ছে
আপনি ম্যানুয়ালি একটি কাস্টম ColorScheme তৈরি করতে পারলেও, আপনার ব্র্যান্ড থেকে সোর্স কালার ব্যবহার করে একটি তৈরি করা অনেক সহজ। ম্যাটেরিয়াল থিম বিল্ডার টুল আপনাকে এটি করতে দেয় এবং ঐচ্ছিকভাবে কম্পোজ থিমিং কোড রপ্তানি করে।
আপনি আপনার পছন্দের যেকোনো রঙ চয়ন করতে পারেন, কিন্তু আমাদের ব্যবহারের ক্ষেত্রে আপনি ডিফল্ট উত্তর প্রাথমিক রঙ #825500 ব্যবহার করবেন। বাম কোর কালার বিভাগে প্রাথমিক রঙে ক্লিক করুন এবং রঙ চয়নকারীতে কোডটি যোগ করুন।
মেটেরিয়াল থিম বিল্ডারে প্রাথমিক রঙের কোড যোগ করা হচ্ছে।
একবার আপনি মেটেরিয়াল থিম বিল্ডারে প্রাথমিক রঙ যোগ করলে, আপনি নীচের থিমটি দেখতে পাবেন এবং উপরের ডানদিকে রপ্তানির বিকল্পটি দেখতে পাবেন। এই কোডল্যাবের জন্য, আপনি জেটপ্যাক কম্পোজে থিম রপ্তানি করেন।
উপরের ডানদিকে রপ্তানির বিকল্প সহ উপাদান থিম নির্মাতা।
প্রাথমিক রঙ #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
)
}
জেটপ্যাক কম্পোজে থিমিং বাস্তবায়নের মূল উপাদান হল MaterialTheme কম্পোজযোগ্য।
আপনি AppTheme() ফাংশনে কম্পোজযোগ্য MaterialTheme() মোড়ানো, যা দুটি প্যারামিটার নেয়:
-
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
)
}
আপনি যদি এখন অ্যাপটি চালানোর চেষ্টা করেন, আপনার দেখতে হবে যে এটি একই রকম দেখাচ্ছে। যদিও আপনি নতুন থিমিং রঙের সাথে আমাদের নতুন রঙের স্কিম আমদানি করেছেন, তবুও আপনি বেসলাইন থিমিং দেখতে পাচ্ছেন কারণ আপনি রচনা অ্যাপে থিম প্রয়োগ করেননি।
কোনো থিম প্রয়োগ না হলে বেসলাইন থিমিং সহ অ্যাপ।
নতুন থিম প্রয়োগ করতে, MainActivity.kt এ, প্রধান থিমিং ফাংশন, AppTheme() দিয়ে মূল কম্পোজেবল ReplyApp মুড়ে দিন।
MainActivity.kt
setContent {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
AppTheme {
ReplyApp(/*..*/)
}
}
অ্যাপ প্রিভিউতে প্রয়োগ করা থিম দেখতে আপনি প্রিভিউ ফাংশন আপডেট করবেন। প্রিভিউতে থিমিং প্রয়োগ করতে AppTheme সাথে ReplyAppPreview() এর ভিতরে ReplyApp কম্পোজ করা যায়।
আপনার প্রিভিউ প্যারামিটারে আলো এবং অন্ধকার উভয় সিস্টেম থিম সংজ্ঞায়িত আছে, তাই আপনি উভয় প্রিভিউ দেখতে পাবেন।
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
)
)
}
}
আপনি যদি এখন অ্যাপটি চালান, তাহলে আপনি বেসলাইন থিমের পরিবর্তে আমদানি করা থিম রঙের সাথে অ্যাপের পূর্বরূপ দেখতে পাবেন।
বেসলাইন থিম সহ অ্যাপ (বাম)।
আমদানি করা রঙের থিম সহ অ্যাপ (ডানদিকে)।
আমদানি করা রঙের থিম সহ হালকা এবং অন্ধকার অ্যাপের পূর্বরূপ।
উপাদান 3 হালকা এবং গাঢ় উভয় রঙের স্কিম সমর্থন করে। আপনি শুধুমাত্র আমদানি করা থিম দিয়ে অ্যাপটিকে মোড়ানো করেছেন; উপাদান 3 উপাদান ডিফল্ট রঙ ভূমিকা ব্যবহার করছে.
আপনি এটি অ্যাপে যোগ করা শুরু করার আগে রঙের ভূমিকা এবং ব্যবহার সম্পর্কে জেনে নিন।
রঙের ভূমিকা এবং অ্যাক্সেসযোগ্যতা
প্রতিটি রঙের ভূমিকা উপাদানের অবস্থা, বিশিষ্টতা এবং জোরের উপর নির্ভর করে বিভিন্ন জায়গায় ব্যবহার করা যেতে পারে।
প্রাথমিক, মাধ্যমিক এবং তৃতীয় রঙের রঙের ভূমিকা।
প্রাথমিক হল বেস কালার, যা প্রধান উপাদান যেমন বিশিষ্ট বোতাম এবং সক্রিয় অবস্থার জন্য ব্যবহৃত হয়।
সেকেন্ডারি কী রঙটি UI-তে কম বিশিষ্ট উপাদানগুলির জন্য ব্যবহৃত হয়, যেমন ফিল্টার চিপ।
তৃতীয় কী রঙটি বিপরীত উচ্চারণ প্রদান করতে ব্যবহৃত হয় এবং অ্যাপে পটভূমি এবং পৃষ্ঠের জন্য নিরপেক্ষ রং ব্যবহার করা হয়।
উপাদানের রঙ সিস্টেম স্ট্যান্ডার্ড টোন মান এবং পরিমাপ প্রদান করে যা অ্যাক্সেসযোগ্য বৈসাদৃশ্য অনুপাত পূরণ করতে ব্যবহার করা যেতে পারে। প্রাইমারীর উপরে অন-প্রাথমিক, প্রাইমারি-কন্টেইনারের উপরে অন-প্রাথমিক-কন্টেইনার ব্যবহার করুন এবং ব্যবহারকারীকে অ্যাক্সেসযোগ্য বৈসাদৃশ্য প্রদানের জন্য অন্যান্য উচ্চারণ এবং নিরপেক্ষ রঙের জন্য একই ব্যবহার করুন।
আরও তথ্যের জন্য, রঙের ভূমিকা এবং অ্যাক্সেসযোগ্যতা দেখুন।
টোনাল এবং ছায়া উচ্চতা
উপাদান 3 প্রধানত টোনাল কালার ওভারলে ব্যবহার করে উচ্চতার প্রতিনিধিত্ব করে। একে অপরের থেকে পাত্রে এবং পৃষ্ঠতলগুলিকে আলাদা করার এটি একটি নতুন উপায় — টোনাল উচ্চতা বৃদ্ধি একটি আরও বিশিষ্ট টোন ব্যবহার করে — ছায়া ছাড়াও।
লেভেল 2 এ টোনাল এলিভেশন যা প্রাথমিক রঙের স্লট থেকে রঙ নেয়।
গাঢ় থিমের উচ্চতা ওভারলেগুলিও মেটেরিয়াল ডিজাইন 3-এ টোনাল কালার ওভারলেতে পরিবর্তিত হয়েছে। ওভারলে রঙ প্রাথমিক রঙের স্লট থেকে আসে।
M3 সারফেস - বেশিরভাগ M3 উপাদানগুলির পিছনে ব্যাকিং কম্পোজেবল - টোনাল এবং ছায়া উচ্চতার উভয়ের জন্য সমর্থন অন্তর্ভুক্ত করে:
Surface(
modifier = modifier,
tonalElevation = {..}
shadowElevation = {..}
) {
Column(content = content)
}
অ্যাপে রং যোগ করা হচ্ছে
আপনি যদি অ্যাপটি চালান, আপনি অ্যাপটিতে রপ্তানি করা রঙগুলি দেখতে পাবেন যেখানে উপাদানগুলি ডিফল্ট রঙ নিচ্ছে। এখন যেহেতু আমরা রঙের ভূমিকা এবং ব্যবহার সম্পর্কে সচেতন, আসুন সঠিক রঙের ভূমিকা সহ অ্যাপটিকে থিম করি।
রঙের থিম এবং ডিফল্ট রঙের ভূমিকা নেওয়া উপাদান সহ অ্যাপ।
পৃষ্ঠের রং
হোম স্ক্রিনে, আপনি একটি Surface() এ কম্পোজযোগ্য মূল অ্যাপটিকে মোড়ানোর মাধ্যমে শুরু করবেন যাতে অ্যাপের বিষয়বস্তু এর উপরে স্থাপন করা যায়। MainActivity.kt খুলুন এবং ReplyApp() Surface দিয়ে কম্পোজ করা যাবে।
আপনি পৃষ্ঠটিকে প্রাথমিক স্লটের একটি টোনাল রঙ দিতে 5.dp এর একটি টোনাল উচ্চতাও প্রদান করবেন, যা তালিকা আইটেম এবং এটির উপরে অনুসন্ধান বারের বিপরীতে বৈসাদৃশ্য প্রদান করতে সহায়তা করে। ডিফল্টরূপে, পৃষ্ঠের জন্য টোনাল এবং ছায়ার উচ্চতা হল 0.dp।
MainActivity.kt
AppTheme {
Surface(tonalElevation = 5.dp) {
ReplyApp(
replyHomeUIState = uiState,
// other parameters
)
}
}
আপনি যদি এখন আপনার অ্যাপ্লিকেশনটি চালান এবং তালিকা এবং বিশদ পৃষ্ঠা উভয়ই দেখেন, তাহলে আপনি পুরো অ্যাপে প্রয়োগ করা টোনাল পৃষ্ঠ দেখতে পাবেন।
পৃষ্ঠ এবং টোনাল রঙ ছাড়া অ্যাপের পটভূমি (বাম)।
পৃষ্ঠ এবং টোনাল রঙ প্রয়োগ করা অ্যাপের পটভূমি (ডানদিকে)।
অ্যাপ বার রং
উপরের দিকে থাকা আমাদের কাস্টম সার্চ বারে ডিজাইনের অনুরোধের মতো পরিষ্কার ব্যাকগ্রাউন্ড নেই। ডিফল্টরূপে, এটি ডিফল্ট বেস পৃষ্ঠে ফিরে আসে। আপনি একটি স্পষ্ট বিচ্ছেদ দিতে একটি পটভূমি প্রদান করতে পারেন.
ব্যাকগ্রাউন্ড ছাড়াই কাস্টম সার্চ বার (বাম)।
একটি পটভূমি (ডান) সহ কাস্টম অনুসন্ধান বার।
আপনি এখন ui/components/ReplyAppBars.kt সম্পাদনা করবেন, যেটিতে অ্যাপ বার রয়েছে। আপনি Row কম্পোজেবলের Modifier MaterialTheme.colorScheme.background যোগ করবেন।
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
}
}
আপনি এখন পটভূমির রঙ সহ টোনাল পৃষ্ঠ এবং অ্যাপ বারের মধ্যে একটি স্পষ্ট বিচ্ছেদ দেখতে পাবেন।
টোনাল পৃষ্ঠের উপরে পটভূমির রঙ সহ অনুসন্ধান বার।
ফ্লোটিং অ্যাকশন বোতামের রঙ
কোনো থিমিং ছাড়াই বড় FAB (বাম)।
তৃতীয় রঙের সাথে থিমযুক্ত বড় FAB (ডান)।
হোম স্ক্রিনে, আপনি ফ্লোটিং অ্যাকশন বোতাম (এফএবি) এর চেহারা উন্নত করতে পারেন যাতে এটি একটি কল টু অ্যাকশন বোতাম হিসাবে দাঁড়াতে পারে। এটি বাস্তবায়ন করতে, আপনি এটিতে একটি তৃতীয় উচ্চারণ রঙ প্রয়োগ করবেন।
ReplyListContent.kt ফাইলে, অ্যাক্সেসিবিলিটি এবং রঙের বৈসাদৃশ্য বজায় রাখতে FAB-এর জন্য containerColor কালারকে tertiaryContainer রঙে এবং বিষয়বস্তুর রঙকে onTertiaryContainer এ আপডেট করুন।
ReplyListContent.kt
ReplyInboxScreen(/*..*/) {
// Email list content
LargeFloatingActionButton(
containerColor = MaterialTheme.colorScheme.tertiaryContainer,
contentColor = MaterialTheme.colorScheme.onTertiaryContainer
){
/*..*/
}
}
আপনার FAB থিমযুক্ত দেখতে অ্যাপটি চালান। এই কোডল্যাবের জন্য, আপনি একটি 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
)
){
/*..*/
}
টোনাল পৃষ্ঠে সেকেন্ডারি ধারক রঙ ব্যবহার করে তালিকা আইটেম হাইলাইট করুন।
বিস্তারিত তালিকা আইটেম রঙ
এখন, আপনি আপনার হোম স্ক্রীন থিম করেছেন. ইমেল তালিকা আইটেমগুলির যেকোনো একটিতে ক্লিক করে বিস্তারিত পৃষ্ঠাটি দেখুন।
থিমযুক্ত তালিকা আইটেম ছাড়া ডিফল্ট বিশদ পৃষ্ঠা (বাম)।
ব্যাকগ্রাউন্ড থিমিং প্রয়োগ সহ বিস্তারিত তালিকা আইটেম (ডান)।
আপনার তালিকার আইটেমটিতে কোনও রঙ প্রয়োগ করা হয়নি, তাই ডিফল্ট টোনাল পৃষ্ঠের রঙে ফিরে যাচ্ছে। আপনি বিচ্ছেদ তৈরি করতে তালিকা আইটেমটিতে পটভূমির রঙ প্রয়োগ করবেন এবং আমাদের পটভূমির চারপাশে ব্যবধান প্রদান করতে প্যাডিং যোগ করবেন।
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 এর মূল অংশ, যেখানে একটি অ্যালগরিদম ব্যবহারকারীর ওয়ালপেপার থেকে কাস্টম রং বের করে তাদের অ্যাপ এবং সিস্টেম UI এ প্রয়োগ করার জন্য।
ডায়নামিক থিমিং আপনার অ্যাপগুলিকে আরও ব্যক্তিগতকৃত করে তোলে। এটি ব্যবহারকারীদের সিস্টেম থিমের সাথে একটি সমন্বিত এবং বিরামহীন অভিজ্ঞতা প্রদান করে।
ডাইনামিক কালার অ্যান্ড্রয়েড 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
)
}
অ্যান্ড্রয়েড 13 ওয়ালপেপার থেকে নেওয়া ডায়নামিক থিম।
আপনি যখন অ্যাপটি চালাবেন, তখন আপনি ডিফল্ট Android 13 ওয়ালপেপার ব্যবহার করে গতিশীল থিমিং প্রয়োগ করা দেখতে পাবেন।
আপনি আপনার অ্যাপের থিম করার জন্য ব্যবহৃত রঙের স্কিমের উপর নির্ভর করে স্ট্যাটাস বারকে গতিশীলভাবে স্টাইল করতে চাইতে পারেন।
স্ট্যাটাস বার রঙ ছাড়া অ্যাপ প্রয়োগ করা হয়েছে (বাম)।
স্টেটাস বারের রঙ সহ অ্যাপ প্রয়োগ করা হয়েছে (ডানদিকে)।
আপনার থিমের প্রাথমিক রঙের উপর নির্ভর করে স্ট্যাটাস বারের রঙ আপডেট করতে, 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
)
}
আপনি যখন অ্যাপটি চালাবেন, তখন আপনার প্রাথমিক রঙের থিমিং নিয়ে স্ট্যাটাস বার দেখতে হবে। আপনি সিস্টেম ডার্ক থিম পরিবর্তন করে হালকা এবং অন্ধকার উভয় গতিশীল থিমিং চেষ্টা করতে পারেন।
অ্যান্ড্রয়েড 13 ডিফল্ট ওয়ালপেপারের সাথে গতিশীল আলো (বাম) এবং অন্ধকার (ডান) থিম প্রয়োগ করা হয়েছে।
এখন পর্যন্ত, আপনি আপনার অ্যাপে রঙ প্রয়োগ করেছেন যা অ্যাপটিকে দেখতে কেমন তা উন্নত করেছে। যাইহোক, আপনি দেখতে পাচ্ছেন যে অ্যাপের সমস্ত পাঠ্য একই আকারের, তাই আপনি এখন অ্যাপটিতে টাইপোগ্রাফি যোগ করতে পারেন।
6. টাইপোগ্রাফি
মেটেরিয়াল ডিজাইন 3 একটি টাইপ স্কেল সংজ্ঞায়িত করে। নামকরণ এবং গ্রুপিং সহজ করা হয়েছে: প্রদর্শন, শিরোনাম, শিরোনাম, বডি এবং লেবেল, প্রতিটির জন্য বড়, মাঝারি এবং ছোট আকারের সাথে।
উপাদান 3 ধরনের স্কেল.
টাইপোগ্রাফি সংজ্ঞায়িত করা
কম্পোজ M3 Typography ক্লাস প্রদান করে — বিদ্যমান TextStyle এবং font-related ক্লাস সহ — উপাদান 3 টাইপ স্কেলের মডেল করার জন্য।
টাইপোগ্রাফি কনস্ট্রাক্টর প্রতিটি শৈলীর জন্য ডিফল্ট অফার করে যাতে আপনি কাস্টমাইজ করতে চান না এমন কোনো প্যারামিটার বাদ দিতে পারেন। আরও তথ্যের জন্য, টাইপোগ্রাফি শৈলী এবং তাদের ডিফল্ট মান দেখুন।
আপনি আপনার অ্যাপে পাঁচটি টাইপোগ্রাফি শৈলী ব্যবহার করবেন: 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 t-এ সমস্ত সংজ্ঞায়িত টাইপোগ্রাফি ব্যবহার করার জন্য টাইপোগ্রাফির উদাহরণ দেয়।
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
)
টাইপোগ্রাফি ছাড়া হোম স্ক্রীন প্রয়োগ করা হয়েছে (বাম)।
টাইপোগ্রাফি প্রয়োগ করা হোম স্ক্রীন (ডানদিকে)।
বিস্তারিত তালিকা টাইপোগ্রাফি
একইভাবে, আপনি i/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
)
টাইপোগ্রাফি ছাড়া বিস্তারিত স্ক্রীন প্রয়োগ করা হয়েছে (বাম)।
টাইপোগ্রাফি প্রয়োগ সহ বিস্তারিত স্ক্রীন (ডানদিকে)।
টাইপোগ্রাফি কাস্টমাইজ করা
রচনার মাধ্যমে, আপনার পাঠ্য শৈলী কাস্টমাইজ করা বা আপনার কাস্টম ফন্ট প্রদান করা খুব সহজ। আপনি ফন্ট টাইপ, ফন্ট ফ্যামিলি, লেটার স্পেসিং ইত্যাদি কাস্টমাইজ করতে 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
),
...
বিষয়ের পাঠ্যে কাস্টম টাইপোগ্রাফি প্রয়োগ করা হচ্ছে।
7. আকার
উপাদান পৃষ্ঠ বিভিন্ন আকারে প্রদর্শিত হতে পারে. আকার সরাসরি মনোযোগ, উপাদান সনাক্ত, যোগাযোগ রাষ্ট্র, এবং এক্সপ্রেস ব্র্যান্ড.
সংজ্ঞায়িত আকার
কম্পোজ নতুন M3 আকার বাস্তবায়নের জন্য প্রসারিত পরামিতি সহ Shapes ক্লাস প্রদান করে। M3 আকারের স্কেল, টাইপ স্কেলের অনুরূপ, UI জুড়ে আকারের একটি অভিব্যক্তিপূর্ণ পরিসর সক্ষম করে।
আকৃতির স্কেলে বিভিন্ন আকারের আকার রয়েছে:
- অতিরিক্ত ছোট
- ছোট
- মাঝারি
- বড়
- অতিরিক্ত বড়
ডিফল্টরূপে, প্রতিটি আকৃতির একটি ডিফল্ট মান থাকে যা ওভাররাইড করা যেতে পারে। আপনার অ্যাপের জন্য, আপনি তালিকার আইটেমটি সংশোধন করতে মাঝারি আকার ব্যবহার করবেন, তবে আপনি অন্যান্য আকারগুলিও ঘোষণা করতে পারেন। 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 */}
বিভিন্ন ধরনের আকার ব্যবহার করে উপাদান উপাদানের ম্যাপিং।
আপনি আকৃতি ডকুমেন্টেশনে সমস্ত উপাদানের জন্য আকারের ম্যাপিং দেখতে পারেন।
ব্যবহার করার জন্য আরও দুটি আকার উপলব্ধ রয়েছে - RectangleShape এবং CircleShape - যা রচনার অংশ। আয়তক্ষেত্রের আকৃতির কোন সীমানা ব্যাসার্ধ নেই এবং বৃত্তের আকৃতি সম্পূর্ণ বৃত্তাকার প্রান্ত দেখায়।
আপনি Modifier.clip , Modifier.background , এবং Modifier.border এর মত আকার ধারণ করে এমন Modifiers ব্যবহার করে আপনার উপাদানগুলিতেও আকৃতি প্রয়োগ করতে পারেন।
অ্যাপ বার আকৃতি
আমরা চাই অ্যাপ বারে একটি গোলাকার কোণার পটভূমি থাকুক:
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
}
}
বিস্তারিত তালিকা আইটেম আকৃতি
হোম স্ক্রিনে, আপনি একটি কার্ড ব্যবহার করছেন যা ডিফল্টরূপে Shape.Medium ব্যবহার করছে। যাইহোক, আমাদের বিস্তারিত পৃষ্ঠার জন্য, আপনি পরিবর্তে পটভূমির রঙ সহ একটি কলাম ব্যবহার করেছেন। একটি অভিন্ন তালিকা উপস্থিতির জন্য, এটি একটি মাঝারি আকার প্রয়োগ করুন.
বিস্তারিত তালিকা আইটেম কলাম তালিকা আইটেম (বাম) এবং তালিকার উপর মাঝারি আকার (ডান) নেই।
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. জোর দেওয়া
UI-তে জোর দেওয়া আপনাকে কিছু বিষয়বস্তুকে অন্যের উপরে হাইলাইট করতে সাহায্য করে, যেমন আপনি যখন শিরোনামকে সাবটাইটেল থেকে আলাদা করতে চান। M3 তে জোর দেওয়া রঙের ভিন্নতা এবং এর অন-কালার সমন্বয় ব্যবহার করে। আপনার জোর যোগ করার দুটি উপায় আছে:
- সম্প্রসারিত M3 রঙ সিস্টেম থেকে অন-সারফেস এবং অন-সারফেস-ভেরিয়েন্ট রঙের পাশাপাশি পৃষ্ঠ, পৃষ্ঠ-ভেরিয়েন্ট এবং ব্যাকগ্রাউন্ড ব্যবহার করা।
উদাহরণ স্বরূপ, পৃষ্ঠকে অন-সারফেস-ভেরিয়েন্টের সাথে ব্যবহার করা যেতে পারে এবং বিভিন্ন স্তরের জোর দেওয়ার জন্য অন-সারফেসের সাথে সারফেস-ভেরিয়েন্ট ব্যবহার করা যেতে পারে।
অন-অ্যাকসেন্ট রঙের তুলনায় কম জোর দেওয়ার জন্য সারফেস ভেরিয়েন্টগুলিও অ্যাকসেন্ট রঙের সাথে ব্যবহার করা যেতে পারে, তবে এখনও অ্যাক্সেসযোগ্য হতে পারে এবং বৈসাদৃশ্য অনুপাত অনুসরণ করে।
পৃষ্ঠ, পটভূমি, এবং পৃষ্ঠ বৈকল্পিক রঙ ভূমিকা.
- পাঠ্যের জন্য বিভিন্ন ফন্টের ওজন ব্যবহার করা। আপনি টাইপোগ্রাফি বিভাগে যেমন দেখেছেন, বিভিন্ন জোর দেওয়ার জন্য আপনি আপনার টাইপ স্কেলে কাস্টম ওজন প্রদান করতে পারেন।
এর পরে, সারফেস ভ্যারিয়েন্ট ব্যবহার করে একটি জোর পার্থক্য প্রদান করতে ReplyEmailListItem.kt আপডেট করুন। ডিফল্টরূপে, কার্ডের বিষয়বস্তু ব্যাকগ্রাউন্ডের উপর নির্ভর করে ডিফল্ট বিষয়বস্তুর রঙ নিচ্ছে।
আপনি টাইম টেক্সট এবং বডি টেক্সট কম্পোজেবলের রঙ onSurfaceVariant এ আপডেট করবেন। এটি onContainerColors এর তুলনায় এর জোর কমিয়ে দেয়, যা ডিফল্টরূপে বিষয় এবং শিরোনাম পাঠ্য কম্পোজেবলে প্রয়োগ করা হয়।
বিষয় এবং শিরোনামের তুলনায় একই জোর দিয়ে সময় এবং মূল পাঠ্য (বাম)।
বিষয় এবং শিরোনামের তুলনায় কম জোর সহ সময় এবং শরীর (ডান)।
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. অভিনন্দন
অভিনন্দন! আপনি সফলভাবে এই কোডল্যাব সম্পন্ন করেছেন! আপনি আপনার অ্যাপ্লিকেশনের থিম এবং একটি ব্যক্তিগতকৃত অভিজ্ঞতা প্রদান করার জন্য গতিশীল রঙের সাথে রঙ, টাইপোগ্রাফি এবং আকার ব্যবহার করে রচনার সাথে উপাদানের থিমিং প্রয়োগ করেছেন।
গতিশীল রং এবং রঙের থিম প্রয়োগ করে থিমিং ফলাফলের সমাপ্তি।
এরপর কি
রচনা পাথওয়েতে আমাদের অন্যান্য অন্যান্য কোডল্যাবগুলি দেখুন:
আরও পড়া
- রচনা থিমিং গাইড
- রচনার জন্য উপাদান থিমিং
নমুনা অ্যাপ্লিকেশন
- সম্পূর্ণ উপাদান 3 থিমিং সহ নমুনা অ্যাপ্লিকেশন উত্তর
- জেটচ্যাট গতিশীল থিমিং প্রদর্শন করছে