কম্পোজে মেটেরিয়াল ডিজাইন 2

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

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

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

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

দুটি বিপরীত স্ক্রিনশট। প্রথমটি ডিফল্ট MaterialTheme স্টাইলিং ব্যবহার করে, দ্বিতীয় স্ক্রিনশটটি পরিবর্তিত স্টাইলিং ব্যবহার করে৷

চিত্র 1. প্রথম স্ক্রিনশটটি এমন একটি অ্যাপ দেখায় যা MaterialTheme কনফিগার করে না, এবং তাই এটি ডিফল্ট স্টাইলিং ব্যবহার করে। দ্বিতীয় স্ক্রিনশটটি এমন একটি অ্যাপ দেখায় যা স্টাইল কাস্টমাইজ করতে MaterialTheme পরামিতি পাস করে।

রঙ

রঙগুলিকে Color ক্লাসের সাথে কম্পোজে মডেল করা হয়েছে, একটি সাধারণ ডেটা-ধারণকারী ক্লাস।

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

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

থিমের রঙ প্যালেটের উদাহরণ

চিত্র 2. উপাদান রঙ সিস্টেম.

কম্পোজ উপাদানের রঙ সিস্টেমের মডেল করার জন্য 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 তার রঙ সেট করতে সেই রঙটি ব্যবহার করে।

একই ব্যানারের দুটি উদাহরণ, বিভিন্ন রঙের সাথে

চিত্র 3. বিভিন্ন পটভূমির রঙ সেট করা বিভিন্ন পাঠ্য এবং আইকন রঙ তৈরি করে।

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

বিষয়বস্তু আলফা

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

Jetpack Compose এটিকে LocalContentAlpha এর মাধ্যমে প্রয়োগ করে। আপনি এই CompositionLocal এর জন্য একটি মান প্রদান করে একটি অনুক্রমের জন্য একটি বিষয়বস্তু আলফা নির্দিষ্ট করতে পারেন। নেস্টেড কম্পোজেবলগুলি তাদের সামগ্রীতে আলফা চিকিত্সা প্রয়োগ করতে এই মানটি ব্যবহার করতে পারে। উদাহরণস্বরূপ, Text এবং Icon ডিফল্টভাবে LocalContentAlpha ব্যবহার করার জন্য সামঞ্জস্য করা LocalContentColor এর সমন্বয় ব্যবহার করে। উপাদান কিছু স্ট্যান্ডার্ড আলফা মান ( 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 গাইডের সাথে স্থানীয়ভাবে স্কোপড ডেটা দেখুন।

একটি নিবন্ধের শিরোনামের স্ক্রিনশট, বিভিন্ন স্তরের পাঠ্যের জোর দেখানো

চিত্র 4. তথ্য শ্রেণীবিন্যাস দৃশ্যমানভাবে যোগাযোগ করতে পাঠ্যের উপর বিভিন্ন স্তরের জোর প্রয়োগ করুন। পাঠ্যের প্রথম লাইনটি শিরোনাম এবং এতে সবচেয়ে গুরুত্বপূর্ণ তথ্য রয়েছে এবং এইভাবে ContentAlpha.high ব্যবহার করে। দ্বিতীয় লাইনে কম-গুরুত্বপূর্ণ মেটাডেটা রয়েছে এবং এইভাবে ContentAlpha.medium ব্যবহার করে।

গাঢ় থিম

কম্পোজে, আপনি 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

উচ্চতা ওভারলে

উপাদানে, উচ্চতর উচ্চতার সাথে গাঢ় থিমের পৃষ্ঠগুলি উচ্চতা ওভারলে প্রাপ্ত করে, যা তাদের পটভূমিকে হালকা করে। একটি পৃষ্ঠের উচ্চতা যত বেশি হবে (একটি উহ্য আলোর উত্সের কাছাকাছি বাড়াবে), পৃষ্ঠটি তত হালকা হবে।

এই ওভারলেগুলি গাঢ় রং ব্যবহার করার সময় Surface কম্পোজেবল দ্বারা স্বয়ংক্রিয়ভাবে প্রয়োগ করা হয়, এবং অন্য যেকোন উপাদানের জন্য যা একটি পৃষ্ঠ ব্যবহার করে:

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

একটি অ্যাপের স্ক্রিনশট, বিভিন্ন উচ্চতা স্তরে উপাদানগুলির জন্য ব্যবহৃত সূক্ষ্মভাবে বিভিন্ন রঙ দেখায়

চিত্র 5. কার্ড এবং নীচের নেভিগেশন উভয়ই তাদের পটভূমি হিসাবে surface রঙ ব্যবহার করছে। যেহেতু কার্ড এবং নীচের নেভিগেশনগুলি ব্যাকগ্রাউন্ডের উপরে বিভিন্ন উচ্চতার স্তরে রয়েছে, সেগুলির রঙ কিছুটা আলাদা - কার্ডগুলি ব্যাকগ্রাউন্ডের চেয়ে হালকা এবং নীচের নেভিগেশনটি কার্ডের চেয়ে হালকা।

Surface জড়িত নয় এমন কাস্টম পরিস্থিতিগুলির জন্য, LocalElevationOverlay ব্যবহার করুন, একটি CompositionLocal যার মধ্যে Surface উপাদানগুলির দ্বারা ব্যবহৃত ElevationOverlay রয়েছে:

// 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

সীমিত রঙের উচ্চারণ

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

চিত্র 6. সীমিত রঙের উচ্চারণ সহ উপাদান গাঢ় থিম। শীর্ষ অ্যাপ বার হালকা থিমে প্রাথমিক রঙ এবং অন্ধকার থিমে পৃষ্ঠের রঙ ব্যবহার করে।

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

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

টাইপোগ্রাফি

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

বিভিন্ন শৈলীতে বিভিন্ন টাইপফেসের উদাহরণ

চিত্র 7. উপাদান টাইপ সিস্টেম.

কম্পোজ 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 parameter নির্দিষ্ট করুন এবং যেকোন 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

বিভিন্ন উদ্দেশ্যে বিভিন্ন টাইপফেসের মিশ্রণ দেখানো স্ক্রিনশট

চিত্র 8. আপনার ব্র্যান্ড প্রকাশ করতে টাইপফেস এবং শৈলীর একটি নির্বাচন ব্যবহার করুন।

আকৃতি

উপাদান একটি আকৃতির সিস্টেমকে সংজ্ঞায়িত করে, যা আপনাকে বড়, মাঝারি এবং ছোট উপাদানগুলির জন্য আকার নির্ধারণ করতে দেয়।

মেটেরিয়াল ডিজাইনের বিভিন্ন আকৃতি দেখায়

চিত্র 9. উপাদান আকৃতি সিস্টেম.

কম্পোজ 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 s পুনরুদ্ধার করুন:

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

একটি অ্যাপ্লিকেশানের স্ক্রিনশট যা উপাদানের আকারগুলি ব্যবহার করে একটি উপাদান কী অবস্থায় রয়েছে তা বোঝাতে

চিত্র 10. ব্র্যান্ড বা রাষ্ট্র প্রকাশ করতে আকার ব্যবহার করুন।

ডিফল্ট শৈলী

অ্যান্ড্রয়েড ভিউ থেকে ডিফল্ট শৈলীর রচনায় কোন সমতুল্য ধারণা নেই। আপনি আপনার নিজস্ব 'ওভারলোড' কম্পোজেবল ফাংশন তৈরি করে অনুরূপ কার্যকারিতা প্রদান করতে পারেন যা উপাদান উপাদানগুলিকে মোড়ানো থাকে। উদাহরণস্বরূপ, বোতামের একটি শৈলী তৈরি করতে, আপনার নিজস্ব কম্পোজেবল ফাংশনে একটি বোতাম মোড়ানো, আপনি যে প্যারামিটারগুলি পরিবর্তন করতে চান তা সরাসরি সেট করুন এবং কম্পোজেবল ধারণ করার পরামিতি হিসাবে অন্যদের প্রকাশ করুন।

@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 composables নেস্টিং করে কম্পোজে Android ভিউ থেকে থিম ওভারলেগুলির সমতুল্য অর্জন করতে পারেন৷ যেহেতু MaterialTheme বর্তমান থিমের মান অনুযায়ী রঙ, টাইপোগ্রাফি এবং আকারগুলিকে ডিফল্ট করে, যদি একটি থিম শুধুমাত্র এই প্যারামিটারগুলির একটি সেট করে, অন্যান্য পরামিতিগুলি তাদের ডিফল্ট মান রাখে।

অধিকন্তু, যখন ভিউ-ভিত্তিক স্ক্রীনগুলি রচনায় স্থানান্তরিত করা হয়, তখন android:theme বৈশিষ্ট্যের ব্যবহারগুলির দিকে লক্ষ্য রাখুন৷ কম্পোজ UI ট্রির সেই অংশে আপনার সম্ভবত একটি নতুন MaterialTheme দরকার।

আউল নমুনায় , বিশদ স্ক্রীনটি বেশিরভাগ স্ক্রিনের জন্য একটি PinkTheme ব্যবহার করে এবং তারপরে সম্পর্কিত বিভাগের জন্য একটি BlueTheme ব্যবহার করে৷ নীচের স্ক্রিনশট এবং কোড দেখুন।

চিত্র 11. আউল নমুনায় নেস্টেড থিম।

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

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

উপাদান রাষ্ট্র

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

কম্পোজেবলের প্রায়ই একটি enabled প্যারামিটার থাকে। এটিকে false সেট করা মিথস্ক্রিয়াকে বাধা দেয় এবং উপাদানের অবস্থাকে দৃশ্যমানভাবে বোঝাতে রঙ এবং উচ্চতার মতো বৈশিষ্ট্যগুলি পরিবর্তন করে।

চিত্র 12. enabled = true (বাম) এবং 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

চিত্র 13. enabled = true (বাম) এবং enabled = false (ডান), সমন্বয় করা রঙ এবং উচ্চতার মান সহ বোতাম।

লহর

উপাদান উপাদানগুলি তাদের সাথে ইন্টারঅ্যাক্ট করা হচ্ছে তা বোঝাতে তরঙ্গ ব্যবহার করে। আপনি যদি আপনার শ্রেণিবিন্যাসে MaterialTheme ব্যবহার করেন, তাহলে একটি Ripple পরিবর্তনকারীর ভিতরে ডিফল্ট Indication হিসাবে ব্যবহার করা হবে যেমন clickable এবং indication ।

বেশিরভাগ ক্ষেত্রে আপনি ডিফল্ট 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

alt_text

চিত্র 14. RippleTheme এর মাধ্যমে প্রদান করা বিভিন্ন রিপল মান সহ বোতাম।

আরও জানুন

রচনায় উপাদান থিমিং সম্পর্কে আরও জানতে, নিম্নলিখিত অতিরিক্ত সংস্থানগুলি দেখুন৷

কোডল্যাব

ভিডিও

{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}