Compose-এ রিসোর্স

Jetpack Compose আপনার Android প্রোজেক্টে উল্লেখ করা রিসোর্স অ্যাক্সেস করতে পারে। এই ডকুমেন্টে Compose-এর অফার করা কিছু API সম্পর্কে ব্যাখ্যা করা হয়েছে।

রিসোর্স হল অতিরিক্ত ফাইল এবং স্ট্যাটিক কন্টেন্ট যা আপনার কোড ব্যবহার করে, যেমন বিটম্যাপ, লেআউট সংজ্ঞা, ইউজার ইন্টারফেস স্ট্রিং, অ্যানিমেশন নির্দেশাবলী, এবং আরও অনেক কিছু। Android-এ রিসোর্স সম্পর্কে আপনার ধারণা না থাকলে, অ্যাপ রিসোর্স ওভারভিউ গাইড দেখুন।

স্ট্রিং

সবচেয়ে সাধারণ ধরনের রিসোর্স হল স্ট্রিং। XML রিসোর্সে স্ট্যাটিক্যালি সংজ্ঞায়িত স্ট্রিং ফিরিয়ে আনতে stringResource API ব্যবহার করুন।

// In the res/values/strings.xml file
// <string name="compose">Jetpack Compose</string>

// In your Compose code
Text(
    text = stringResource(R.string.compose)
)
ResourcesSnippets.kt

stringResource পজিশনাল ফর্ম্যাটিংয়ের সাথেও কাজ করে।

// In the res/values/strings.xml file
// <string name="congratulate">Happy %1$s %2$d</string>

// In your Compose code
Text(
    text = stringResource(R.string.congratulate, "New Year", 2021)
)
ResourcesSnippets.kt

স্ট্রিং প্লুরাল (এক্সপেরিমেন্টাল)

নির্দিষ্ট পরিমাণ সহ বহুবচন লোড করতে pluralStringResource API ব্যবহার করুন।

// In the res/strings.xml file
// <plurals name="runtime_format">
//    <item quantity="one">%1$d minute</item>
//    <item quantity="other">%1$d minutes</item>
// </plurals>

// In your Compose code
Text(
    text = pluralStringResource(
        R.plurals.runtime_format,
        quantity,
        quantity
    )
)
ResourcesSnippets.kt

pluralStringResource পদ্ধতি ব্যবহার করার সময়, আপনার স্ট্রিংয়ে সংখ্যা সহ স্ট্রিং ফর্ম্যাটিং থাকলে, আপনাকে দুবার গণনা করতে হবে। যেমন, %1$d minutes স্ট্রিংয়ের জন্য, প্রথম গণনা প্যারামিটার উপযুক্ত বহুবচন স্ট্রিং বেছে নেয় এবং দ্বিতীয় গণনা প্যারামিটার %1$d প্লেসহোল্ডারে যোগ করা হয়। আপনার বহুবচন স্ট্রিংয়ে স্ট্রিং ফর্ম্যাটিং অন্তর্ভুক্ত না থাকলে, আপনাকে pluralStringResource-এ তৃতীয় প্যারামিটার পাস করতে হবে না।

বহুবচন সম্পর্কে আরও তথ্যের জন্য, পরিমাণ স্ট্রিং ডকুমেন্টেশন চেক করুন।

ডাইমেনশন

একইভাবে, রিসোর্স XML ফাইল থেকে ডাইমেনশন পেতে dimensionResource API ব্যবহার করুন।

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>

// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)
ResourcesSnippets.kt

রঙ

আপনি যদি আপনার অ্যাপে কম্পোজ ইনক্রিমেন্টাল হিসেবে গ্রহণ করেন, তাহলে রিসোর্স XML ফাইল থেকে রঙ পেতে colorResource API ব্যবহার করুন।

// In the res/colors.xml file
// <color name="purple_200">#FFBB86FC</color>

// In your Compose code
HorizontalDivider(color = colorResource(R.color.purple_200))
ResourcesSnippets.kt

colorResource স্ট্যাটিক রঙের সাথে প্রত্যাশা অনুযায়ী কাজ করে, তবে এটি কালার স্টেট লিস্ট রিসোর্স ফ্ল্যাটেন করে।

সতর্কতা: হার্ড-কোডেড রঙের পরিবর্তে থিম থেকে রঙ বেছে নিন। যদিও colorResource ফাংশন ব্যবহার করে রঙ অ্যাক্সেস করা সম্ভব, তবুও আপনার অ্যাপের রঙ MaterialTheme-এ সংজ্ঞায়িত করার পরামর্শ দেওয়া হয় যা আপনার কম্পোজেবল থেকে অ্যাক্সেস করা যেতে পারে যেমন MaterialTheme.colors.primary। Compose-এ ডিজাইন সিস্টেম ডকুমেন্টেশন থেকে এই বিষয়ে আরও জানুন।

ভেক্টর অ্যাসেট এবং ছবি রিসোর্স

ভেক্টর ড্রয়েবেল বা PNG-এর মতো রাস্টারাইজড অ্যাসেট ফর্ম্যাট লোড করতে painterResource API ব্যবহার করুন। আপনাকে ড্রয়েবলের ধরন জানতে হবে না, শুধু Image কম্পোজেবল বা paint মডিফায়ারে painterResource ব্যবহার করুন।

// Files in res/drawable folders. For example:
// - res/drawable-nodpi/ic_logo.xml
// - res/drawable-xxhdpi/ic_logo.png

// In your Compose code
Icon(
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null // decorative element
)
ResourcesSnippets.kt

painterResource মূল থ্রেডে রিসোর্সের কন্টেন্ট ডিকোড ও পার্স করে।

মনে রাখবেন: Context.getDrawable-এর মতো নয়, painterResource শুধু BitmapDrawable এবং VectorDrawable প্ল্যাটফর্ম Drawable ধরনের বিজ্ঞাপন লোড করতে পারে।

অ্যানিমেটেড ভেক্টর ড্রয়েবেল

অ্যানিমেটেড ভেক্টর ড্রয়েবেল XML লোড করতে AnimatedImageVector.animatedVectorResource API ব্যবহার করুন। পদ্ধতিটি একটি AnimatedImageVector ইনস্ট্যান্স রিটার্ন করে। অ্যানিমেটেড ছবি দেখানোর জন্য, rememberAnimatedVectorPainter পদ্ধতি ব্যবহার করে Painter তৈরি করুন যা Image এবং Icon কম্পোজেবলে ব্যবহার করা যেতে পারে। rememberAnimatedVectorPainter পদ্ধতির বুলিয়ান atEnd প্যারামিটার নির্দেশ করে যে সব অ্যানিমেশনের শেষে ছবি আঁকা হবে কিনা। মিউটেবল স্টেট সহ ব্যবহার করা হলে, এই ভ্যালুতে করা পরিবর্তন সংশ্লিষ্ট অ্যানিমেশনকে ট্রিগার করে।

// Files in res/drawable folders. For example:
// - res/drawable/ic_hourglass_animated.xml

// In your Compose code
val image =
    AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
val atEnd by remember { mutableStateOf(false) }
Icon(
    painter = rememberAnimatedVectorPainter(image, atEnd),
    contentDescription = null // decorative element
)
ResourcesSnippets.kt

আইকন

Jetpack Compose-এ Icons অবজেক্ট থাকে যা Compose-এ মেটেরিয়াল আইকন ব্যবহার করার এন্ট্রি পয়েন্ট। পাঁচটি আলাদা আইকন থিম আছে: ফিল করা, আউটলাইন করা, রাউন্ডেড, টু-টোন এবং শার্প। প্রতিটি থিমে একই আইকন থাকে, তবে একটি স্বতন্ত্র ভিজ্যুয়াল স্টাইল সহ। সামঞ্জস্য বজায় রাখার জন্য সাধারণত একটি থিম বেছে নিয়ে আপনার অ্যাপ্লিকেশন জুড়ে সেটি ব্যবহার করা উচিত।

আইকন আঁকার জন্য, আপনি Icon কম্পোজেবল ব্যবহার করতে পারেন যা টিন্ট প্রয়োগ করে এবং আইকনের সাথে মানানসই লেআউট সাইজ প্রদান করে।

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
ResourcesSnippets.kt

সবচেয়ে বেশি ব্যবহৃত কিছু আইকন androidx.compose.material ডিপেন্ডেন্সির অংশ হিসেবে উপলভ্য। অন্য কোনও মেটেরিয়াল আইকন ব্যবহার করতে, build.gradle ফাইলে material-icons-extended ডিপেন্ডেন্সি যোগ করুন।

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2026.09.00')
  implementation composeBom

  implementation 'androidx.compose.material:material-icons-extended'
}

মনে রাখবেন: আইকনগুলি মেটেরিয়াল দ্বারা সংজ্ঞায়িত একই নাম বজায় রাখে, তবে তাদের snake_case নাম PascalCase-এ রূপান্তরিত হয়। যেমন, add_alarm হয়ে যায় AddAlarm। যেসব আইকন সংখ্যা দিয়ে শুরু হয়, যেমন ৩৬০, সেগুলির আগে _ যোগ করা হয়, ফলে সেটি _360 হয়ে যায়।

সতর্কতা: material-icons-extended হল একটি বড় লাইব্রেরি এবং এটি আপনার APK-এর সাইজকে প্রভাবিত করতে পারে। সেই কারণে, প্রোডাকশন বিল্ডে R8/Proguard ব্যবহার করার কথা বিবেচনা করুন যাতে ব্যবহার করা হয়নি এমন রিসোর্স সরিয়ে দেওয়া যায়। এছাড়াও, বড় সাইজের কারণে, ডেভেলপমেন্টের সময় আপনার প্রজেক্টের বিল্ড টাইম এবং Android Studio-এর প্রিভিউ লোডিং টাইম বেড়ে যেতে পারে। অন্যদিকে, material-icons-extended আপনাকে সব আইকনের লেটেস্ট ভার্সনে দ্রুত অ্যাক্সেসের মাধ্যমে আরও দ্রুত ইটারেট করতে দেয়। এছাড়াও, আপনার অ্যাপে আইকনের একটি নির্দিষ্ট কপি রাখতে, এই লাইব্রেরি ব্যবহার করে আইকনের সোর্স কোড কপি করতে পারেন অথবা বিকল্প হিসেবে, Android Studio-এর ইমপোর্ট ভেক্টর অ্যাসেট ফিচার ব্যবহার করে আইকন ইমপোর্ট করতে পারেন।

ফন্ট

Compose-এ ফন্ট ব্যবহার করতে, ফন্ট ফাইল সরাসরি ডাউনলোড করে আপনার APK-তে বান্ডেল করুন। এর জন্য res/font ফোল্ডারে ফাইলগুলি রাখুন।

Font API ব্যবহার করে প্রতিটি ফন্ট লোড করুন এবং সেগুলি দিয়ে একটি FontFamily তৈরি করুন যা আপনি TextStyle ইনস্ট্যান্সে ব্যবহার করে আপনার নিজস্ব Typography তৈরি করতে পারবেন। নিচে দেওয়া কোডটি Crane কম্পোজ স্যাম্পেল এবং সেটির Typography.kt ফাইল থেকে নেওয়া হয়েছে।

// Define and load the fonts of the app
private val light = Font(R.font.raleway_light, FontWeight.W300)
private val regular = Font(R.font.raleway_regular, FontWeight.W400)
private val medium = Font(R.font.raleway_medium, FontWeight.W500)
private val semibold = Font(R.font.raleway_semibold, FontWeight.W600)

// Create a font family to use in TextStyles
private val craneFontFamily = FontFamily(light, regular, medium, semibold)

// Use the font family to define a custom typography
val craneTypography = Typography(
    titleLarge = TextStyle(
        fontFamily = craneFontFamily
    ) /* ... */
)

// Pass the typography to a MaterialTheme that will create a theme using
// that typography in the part of the UI hierarchy where this theme is used
@Composable
fun CraneTheme(content: @Composable () -> Unit) {
    MaterialTheme(typography = craneTypography) {
        content()
    }
}
ResourcesSnippets.kt

Compose-এ ডাউনলোড করা যাবে এমন ফন্ট ব্যবহার করতে, ডাউনলোড করা যাবে এমন ফন্ট পৃষ্ঠা দেখুন।

Compose-এ থিমিং ডকুমেন্টেশন থেকে টাইপোগ্রাফি সম্পর্কে আরও জানুন