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

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

স্ট্রিংয়ের বহুবচন (পরীক্ষামূলক)

নির্দিষ্ট পরিমাণ সহ বহুবচন লোড করতে 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
    )
)

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

রঙ

আপনার অ্যাপে ধীরে ধীরে Compose ব্যবহার করা শুরু করলে, রিসোর্স 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))

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

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

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
)

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

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

অ্যানিমেটেড ভেক্টর ড্রয়েবল 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
)

আইকন

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

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

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

সবচেয়ে বেশি ব্যবহৃত কিছু আইকন androidx.compose.material ডিপেন্ডেন্সির অংশ হিসেবে উপলভ্য। অন্য যেকোনও 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'
}

ফন্ট

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()
    }
}

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

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