Compose-এ Material Design 2

Jetpack Compose-এ মেটেরিয়াল ডিজাইন-এর ইমপ্লিমেন্টেশন রয়েছে, যা ডিজিটাল ইন্টারফেস তৈরি করার জন্য একটি সর্বাঙ্গীন ডিজাইন সিস্টেম। মেটিরিয়াল ডিজাইন কম্পোনেন্ট (বোতাম, কার্ড, সুইচ ইত্যাদি) মেটিরিয়াল থিমিং-এর উপর ভিত্তি করে তৈরি করা হয়েছে, যা আপনার প্রোডাক্টের ব্র্যান্ডকে আরও ভালভাবে তুলে ধরার জন্য মেটিরিয়াল ডিজাইন কাস্টমাইজ করার একটি পদ্ধতিগত উপায়। মেটিরিয়াল থিমে রঙ, টাইপোগ্রাফি এবং আকার সংক্রান্ত অ্যাট্রিবিউট থাকে। আপনি এইসব অ্যাট্রিবিউট কাস্টমাইজ করলে, আপনার অ্যাপ তৈরি করার জন্য যেসব কম্পোনেন্ট ব্যবহার করেন সেগুলিতে আপনার করা পরিবর্তন অটোমেটিক দেখা যায়।

Jetpack Compose এই ধারণাগুলি MaterialTheme কম্পোজেবলের সাথে প্রয়োগ করে:

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

আপনার অ্যাপ্লিকেশন থিম করতে MaterialTheme-এ পাস করা প্যারামিটার কনফিগার করুন।

রঙ

Compose-এ Color ক্লাস, একটি ডেটা-হোল্ডিং ক্লাসের মাধ্যমে রঙ মডেল করা হয়।

val Red = Color(0xffff0000)
val Blue = Color(red = 0f, green = 0f, blue = 1f)
Material2Snippets.kt

আপনি এগুলি যেভাবে খুশি সাজাতে পারেন (টপ-লেভেল কনস্ট্যান্ট হিসেবে, সিঙ্গলটনের মধ্যে বা ইনলাইন হিসেবে সংজ্ঞায়িত), আমরা আপনার থিমে কালার নির্দিষ্ট করার এবং সেখান থেকে কালার উদ্ধার করার জন্য জোরালো সাজেশন দিই। এই পদ্ধতি ডার্ক থিম ও নেস্টেড থিম সাপোর্ট করা সম্ভব করে তোলে।

Compose Colors ক্লাস প্রদান করে যা মেটেরিয়াল কালার সিস্টেম-এর মডেল হিসেবে কাজ করে। Colors-এ বিল্ডার ফাংশন আছে যা দিয়ে হালকা বা গাঢ় রঙের সেট তৈরি করা যায়:

private val Yellow200 = Color(0xffffeb46)
private val Blue200 = Color(0xff91a4fc)
// ...

private val DarkColors = darkColors(
    primary = Yellow200,
    secondary = Blue200,
    // ...
)
private val LightColors = lightColors(
    primary = Yellow500,
    primaryVariant = Yellow400,
    secondary = Blue700,
    // ...
)
Material2Snippets.kt

আপনার Colors নির্ধারণ করার পরে, আপনি সেগুলি MaterialTheme-এ পাস করতে পারবেন:

MaterialTheme(
    colors = if (darkTheme) DarkColors else LightColors
) {
    // app content
}
Material2Snippets.kt

থিমের রঙ ব্যবহার করুন

MaterialTheme.colors ব্যবহার করে আপনি MaterialTheme কম্পোজেবলে প্রদান করা Colors ফিরিয়ে আনতে পারবেন।

Text(
    text = "Hello theming",
    color = MaterialTheme.colors.primary
)
Material2Snippets.kt

সারফেস ও কন্টেন্টের রঙ

অনেক কম্পোনেন্ট রঙ ও কন্টেন্টের রঙের পেয়ার গ্রহণ করে:

Surface(
    color = MaterialTheme.colors.surface,
    contentColor = contentColorFor(color),
    // ...
) { /* ... */ }

TopAppBar(
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = contentColorFor(backgroundColor),
    // ...
) { /* ... */ }
Material2Snippets.kt

এটি আপনাকে শুধু কম্পোজেবলের রঙ সেট করতেই দেয় না, তার সাথে কন্টেন্টের জন্য ডিফল্ট রঙও প্রদান করে,যে কম্পোজেবলগুলি এর মধ্যে থাকে। অনেক কম্পোজেবল ডিফল্ট হিসেবে এই কন্টেন্ট কালার ব্যবহার করে। যেমন, Text-এর রঙ তার পেরেন্ট কন্টেন্টের রঙের উপর ভিত্তি করে সেট করা হয় এবং Icon সেই রঙ ব্যবহার করে তার টিন্ট সেট করে।

contentColorFor() পদ্ধতি যেকোনও থিমের রঙের জন্য উপযুক্ত "অন" রঙ পুনরুদ্ধার করে। যেমন, আপনি Surface-এ primary ব্যাকগ্রাউন্ড কালার সেট করলে, এটি কন্টেন্ট কালার হিসেবে onPrimary সেট করার জন্য এই ফাংশন ব্যবহার করে। আপনি যদি থিম-বহির্ভূত ব্যাকগ্রাউন্ডের রঙ সেট করেন, তাহলে আপনাকে একটি উপযুক্ত কন্টেন্টের রঙও নির্দিষ্ট করতে হবে। হায়ারার্কিতে নির্দিষ্ট পজিশনে বর্তমান ব্যাকগ্রাউন্ডের জন্য পছন্দের কন্টেন্ট কালার ফেরত পেতে LocalContentColor ব্যবহার করুন।

কন্টেন্ট আলফা

গুরুত্ব বোঝাতে এবং ভিজ্যুয়াল হায়ারার্কি প্রদান করতে, আপনি প্রায়ই কন্টেন্টের উপর কতটা জোর দেবেন তা পরিবর্তন করতে চান। মেটেরিয়াল ডিজাইন টেক্সট লেজিবিলিটি সাজেশন বিভিন্ন গুরুত্বের লেভেল বোঝাতে বিভিন্ন লেভেলের অস্বচ্ছতা ব্যবহার করার পরামর্শ দেয়।

Jetpack Compose LocalContentAlpha ব্যবহার করে এটি প্রয়োগ করে। আপনি এই CompositionLocal-এর জন্য একটি মান প্রদান করে একটি হায়ারার্কির জন্য কন্টেন্ট আলফা নির্দিষ্ট করতে পারেন। নেস্টেড কম্পোজেবল এই ভ্যালু ব্যবহার করে তাদের কন্টেন্টে আলফা ট্রিটমেন্ট প্রয়োগ করতে পারে। যেমন, Text এবং Icon ডিফল্ট হিসেবে LocalContentColor-এর কম্বিনেশন ব্যবহার করে যা LocalContentAlpha ব্যবহার করার জন্য অ্যাডজাস্ট করা হয়। মেটেরিয়াল কিছু স্ট্যান্ডার্ড আলফা ভ্যালু নির্দিষ্ট করে (high, medium, disabled) যা ContentAlpha অবজেক্টের মাধ্যমে মডেল করা হয়।

// By default, both Icon & Text use the combination of LocalContentColor &
// LocalContentAlpha. De-emphasize content by setting content alpha
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(
        // ...
    )
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(
        // ...
    )
    Text(
        // ...
    )
}
Material2Snippets.kt

CompositionLocal সম্পর্কে আরও জানতে, CompositionLocal-এর সাথে লোকালি স্কোপ করা ডেটা দেখুন।

ডার্ক থিম

Compose-এ, আপনি MaterialTheme কম্পোজেবলে Colors-এর বিভিন্ন সেট প্রদান করে লাইট এবং ডার্ক থিম প্রয়োগ করেন:

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        /*...*/
        content = content
    )
}
Material2Snippets.kt

এই উদাহরণে, MaterialTheme তার নিজস্ব কম্পোজেবল ফাংশনে র‍্যাপ করা আছে, যা ডার্ক থিম ব্যবহার করা হবে কিনা তা নির্দিষ্ট করে এমন একটি প্যারামিটার গ্রহণ করে। এই ক্ষেত্রে, ফাংশনটি ডিভাইস থিম সেটিং কোয়েরি করে darkTheme-এর জন্য ডিফল্ট মান পায়।

বর্তমান Colors লাইট নাকি ডার্ক তা চেক করতে আপনি এই ধরনের কোড ব্যবহার করতে পারেন:

val isLightTheme = MaterialTheme.colors.isLight
Icon(
    painterResource(
        id = if (isLightTheme) {
            R.drawable.ic_sun_24
        } else {
            R.drawable.ic_moon_24
        }
    ),
    contentDescription = "Theme"
)
Material2Snippets.kt

উচ্চতা সংক্রান্ত ওভারলে

Material-এ, ডার্ক থিমে উঁচু সারফেসের ক্ষেত্রে এলিভেশন ওভারলে ব্যবহার করা হয়, যা ব্যাকগ্রাউন্ডকে হালকা করে দেয়। কোনও সারফেসের এলিভেশন যত বেশি হবে (এটি একটি অন্তর্নিহিত আলোর উৎসের কাছাকাছি নিয়ে যাওয়া), সেই সারফেস তত হালকা হবে।

Surface কম্পোজেবল ডার্ক কালার ব্যবহার করার সময় অটোমেটিক এইসব ওভারলে প্রয়োগ করে এবং সারফেস ব্যবহার করে এমন অন্য যেকোনও মেটেরিয়াল কম্পোজেবলও তাই করে:

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

কাস্টম পরিস্থিতির জন্য যেখানে Surface নেই, সেখানে LocalElevationOverlay ব্যবহার করুন, CompositionLocal-এ ElevationOverlay আছে যা Surface কম্পোনেন্ট ব্যবহার করে:

// Elevation overlays
// Implemented in Surface (and any components that use it)
val color = MaterialTheme.colors.surface
val elevation = 4.dp
val overlaidColor = LocalElevationOverlay.current?.apply(
    color, elevation
)
Material2Snippets.kt

এলিভেশন ওভারলে বন্ধ করতে, কম্পোজেবল হায়ারার্কিতে বেছে নেওয়া পয়েন্টে null প্রদান করুন:

MyTheme {
    CompositionLocalProvider(LocalElevationOverlay provides null) {
        // Content without elevation overlays
    }
}
Material2Snippets.kt

সীমিত কালার অ্যাকসেন্ট

ডার্ক থিমের জন্য Material সীমিত কালার অ্যাকসেন্ট প্রয়োগ করার সাজেশন দেয়। বেশিরভাগ ক্ষেত্রে primary রঙের পরিবর্তে surface রঙ ব্যবহার করার সাজেশন দেওয়া হয়। TopAppBar এবং BottomNavigation-এর মতো মেটেরিয়াল কম্পোজেবল ডিফল্ট হিসেবে এই আচরণ প্রয়োগ করে।

কাস্টম সিনারিওর জন্য, primarySurface এক্সটেনশন প্রপার্টি ব্যবহার করুন:

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

টাইপোগ্রাফি

মেটেরিয়াল একটি টাইপ সিস্টেম সংজ্ঞায়িত করে, যা আপনাকে অল্প সংখ্যক অর্থগতভাবে-নামযুক্ত স্টাইল ব্যবহার করতে উৎসাহিত করে।

Compose Typography, TextStyle এবং ফন্ট-সম্পর্কিত ক্লাসের সাথে টাইপ সিস্টেম প্রয়োগ করে। Typography কনস্ট্রাক্টর প্রতিটি স্টাইলের জন্য ডিফল্ট অফার করে যাতে আপনি কাস্টমাইজ করতে চান না এমন যেকোনও কিছু বাদ দিতে পারেন:

val raleway = FontFamily(
    Font(R.font.raleway_regular),
    Font(R.font.raleway_medium, FontWeight.W500),
    Font(R.font.raleway_semibold, FontWeight.SemiBold)
)

val myTypography = Typography(
    h1 = TextStyle(
        fontFamily = raleway,
        fontWeight = FontWeight.W300,
        fontSize = 96.sp
    ),
    body1 = TextStyle(
        fontFamily = raleway,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp
    )
    /*...*/
)
MaterialTheme(typography = myTypography, /*...*/) {
    /*...*/
}
Material2Snippets.kt

আপনি যদি সব জায়গায় একই টাইপফেস ব্যবহার করতে চান, তাহলে defaultFontFamily প্যারামিটার উল্লেখ করুন এবং যেকোনও TextStyle এলিমেন্টের fontFamily বাদ দিন:

val typography = Typography(defaultFontFamily = raleway)
MaterialTheme(typography = typography, /*...*/) {
    /*...*/
}
Material2Snippets.kt

টেক্সট স্টাইল ব্যবহার করুন

TextStyleটি এলিমেন্ট MaterialTheme.typography ব্যবহার করে অ্যাক্সেস করা হয়েছে। TextStyle এলিমেন্ট নিম্নলিখিত উপায়ে ফিরিয়ে আনুন:

Text(
    text = "Subtitle2 styled",
    style = MaterialTheme.typography.subtitle2
)
Material2Snippets.kt

আকার

মেটেরিয়াল একটি শেপ সিস্টেম সংজ্ঞায়িত করে, যা আপনাকে বড়, মাঝারি ও ছোট কম্পোনেন্টের জন্য শেপ সংজ্ঞায়িত করতে দেয়।

Compose Shapes ক্লাসের মাধ্যমে শেপ সিস্টেম প্রয়োগ করে, যা আপনাকে প্রতিটি সাইজ ক্যাটেগরির জন্য একটি CornerBasedShape নির্দিষ্ট করতে দেয়:

val shapes = Shapes(
    small = RoundedCornerShape(percent = 50),
    medium = RoundedCornerShape(0f),
    large = CutCornerShape(
        topStart = 16.dp,
        topEnd = 0.dp,
        bottomEnd = 0.dp,
        bottomStart = 16.dp
    )
)

MaterialTheme(shapes = shapes, /*...*/) {
    /*...*/
}
Material2Snippets.kt

অনেক কম্পোনেন্ট ডিফল্ট হিসেবে এইসব আকার ব্যবহার করে। যেমন, Button, TextField এবং FloatingActionButton ডিফল্ট হিসেবে ছোট, AlertDialog ডিফল্ট হিসেবে মাঝারি এবং ModalDrawer ডিফল্ট হিসেবে বড় — সম্পূর্ণ ম্যাপিংয়ের জন্য শেপ স্কিম রেফারেন্স দেখুন।

আকার ব্যবহার করুন

MaterialTheme.shapes ব্যবহার করে Shapeটি এলিমেন্ট অ্যাক্সেস করা হয়েছে। এই ধরনের কোড ব্যবহার করে Shape এলিমেন্ট ফিরিয়ে আনুন:

Surface(
    shape = MaterialTheme.shapes.medium, /*...*/
) {
    /*...*/
}
Material2Snippets.kt

ডিফল্ট স্টাইল

Android Views থেকে ডিফল্ট স্টাইল-এর Compose-এ কোনও সমতুল্য ধারণা নেই। আপনি নিজের overload কম্পোজেবল ফাংশন তৈরি করে একই ধরনের কার্যকারিতা প্রদান করতে পারেন যা মেটেরিয়াল কম্পোনেন্টকে র‍্যাপ করে। যেমন, একটি স্টাইলের বোতাম তৈরি করতে, আপনার নিজের কম্পোজেবল ফাংশনে একটি বোতাম র‍্যাপ করুন, সরাসরি আপনি যে প্যারামিটারগুলি পরিবর্তন করতে চান বা প্রয়োজন সেগুলি সেট করুন এবং অন্যদের প্যারামিটার হিসাবে কম্পোজেবল ধারণ করার জন্য প্রকাশ করুন।

@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier,
        content = content
    )
}
Material2Snippets.kt

থিম ওভারলে

আপনি MaterialTheme কম্পোজেবল নেস্ট করার মাধ্যমে Compose-এ Android Views থেকে থিম ওভারলে-এর সমতুল্য ফলাফল পেতে পারেন। যেহেতু MaterialTheme বর্তমান থিম ভ্যালুতে রঙ, টাইপোগ্রাফি ও আকার ডিফল্ট হিসেবে সেট করে, তাই থিম শুধুমাত্র এইসব প্যারামিটারের মধ্যে একটি সেট করলে, অন্য সব প্যারামিটার তাদের ডিফল্ট ভ্যালু বজায় রাখে।

এছাড়াও, View-ভিত্তিক স্ক্রিন Compose-এ মাইগ্রেট করার সময়, android:theme অ্যাট্রিবিউটের ব্যবহার সম্পর্কে সতর্ক থাকুন। সম্ভবত Compose UI ট্রির ওই অংশে আপনার একটি নতুন MaterialTheme প্রয়োজন।

এই উদাহরণে, স্ক্রিনের বেশিরভাগ অংশের জন্য বিবরণ স্ক্রিন PinkTheme ব্যবহার করে, এবং তারপরে সম্পর্কিত বিভাগের জন্য BlueTheme ব্যবহার করে। নিম্নলিখিত স্ক্রিনশট ও কোড এই ধারণাটি ব্যাখ্যা করে:

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

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

কম্পোনেন্টের স্ট্যাটাস

মেটেরিয়াল কম্পোনেন্ট যেগুলির সাথে ইন্টার‍্যাক্ট করা যায় (ক্লিক করা, টগল করা ইত্যাদি) সেগুলি বিভিন্ন ভিজ্যুয়াল স্টেটে থাকতে পারে। স্টেটের মধ্যে চালু, বন্ধ, প্রেস করা ইত্যাদি অন্তর্ভুক্ত।

কম্পোজেবলে প্রায়ই enabled প্যারামিটার থাকে। এটি false-এ সেট করলে ইন্টার‍্যাকশন বন্ধ হয়ে যায় এবং কম্পোনেন্টের স্ট্যাটাস ভিজ্যুয়ালি বোঝানোর জন্য রঙ ও এলিভেশনের মতো প্রপার্টি পরিবর্তন করে।

বেশিরভাগ ক্ষেত্রে, আপনি রঙ এবং উচ্চতার মতো ভ্যালুর জন্য ডিফল্ট সেটিংসের উপর নির্ভর করতে পারেন। বিভিন্ন স্টেটে ব্যবহৃত ভ্যালু কনফিগার করতে হলে, ক্লাস ও কনভেনিয়েন্স ফাংশন উপলভ্য আছে। বোতামের নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

Button(
    onClick = { /* ... */ },
    enabled = true,
    // Custom colors for different states
    colors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.secondary,
        disabledBackgroundColor = MaterialTheme.colors.onBackground
            .copy(alpha = 0.2f)
            .compositeOver(MaterialTheme.colors.background)
        // Also contentColor and disabledContentColor
    ),
    // Custom elevation for different states
    elevation = ButtonDefaults.elevation(
        defaultElevation = 8.dp,
        disabledElevation = 2.dp,
        // Also pressedElevation
    )
) { /* ... */ }
Material2Snippets.kt

লহর

মেটেরিয়াল কম্পোনেন্ট রিপল ব্যবহার করে দেখায় যে সেগুলির সাথে ইন্টার‍্যাক্ট করা হচ্ছে। আপনি হায়ারার্কিতে MaterialTheme ব্যবহার করলে, clickable ও indication-এর মতো মডিফায়ারের মধ্যে ডিফল্ট Indication হিসেবে Ripple ব্যবহার করা হয়।

বেশিরভাগ ক্ষেত্রে আপনি ডিফল্ট Ripple-এর উপর নির্ভর করতে পারেন। আপনি যদি তাদের চেহারা কনফিগার করতে চান, তাহলে আপনি রঙ এবং আলফার মতো বৈশিষ্ট্য পরিবর্তন করতে RippleTheme ব্যবহার করতে পারেন।

আপনি RippleTheme এক্সটেন্ড করতে এবং defaultRippleColor ও defaultRippleAlpha ইউটিলিটি ফাংশন ব্যবহার করতে পারবেন। আপনি তারপর LocalRippleTheme ব্যবহার করে আপনার হায়ারার্কিতে কাস্টম রিপল থিম প্রদান করতে পারেন:

@Composable
fun MyApp() {
    MaterialTheme {
        CompositionLocalProvider(
            LocalRippleTheme provides SecondaryRippleTheme
        ) {
            // App content
        }
    }
}

@Immutable
private object SecondaryRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = MaterialTheme.colors.secondary,
        lightTheme = MaterialTheme.colors.isLight
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = MaterialTheme.colors.secondary,
        lightTheme = MaterialTheme.colors.isLight
    )
}
Material2Snippets.kt

আরও জানুন

Compose-এ মেটিরিয়াল থিমিং সম্পর্কে আরও জানতে, নিম্নলিখিত অতিরিক্ত রিসোর্স দেখুন।

কোডল্যাবস

• Jetpack Compose থিমিং

ভিডিও

• Jetpack Compose-এ Material You