Compose में संसाधन

Jetpack Compose, आपके Android प्रोजेक्ट में तय किए गए संसाधनों को ऐक्सेस कर सकता है. इस दस्तावेज़ में, कंपोज़ की सुविधा देने वाले कुछ ऐसे एपीआई के बारे में बताया गया है जिनकी मदद से ऐसा किया जा सकता है.

रिसॉर्स, अतिरिक्त फ़ाइलें और स्टैटिक कॉन्टेंट होते हैं. इनका इस्तेमाल आपका कोड करता है. जैसे, बिटमैप, लेआउट की परिभाषाएं, उपयोगकर्ता इंटरफ़ेस स्ट्रिंग, ऐनिमेशन के निर्देश वगैरह. अगर आपको Android में मौजूद संसाधनों के बारे में नहीं पता है, तो ऐप्लिकेशन के संसाधनों के बारे में खास जानकारी देने वाली गाइड पढ़ें.

स्ट्रिंग

सबसे सामान्य तरह के संसाधन, आपकी स्ट्रिंग होती हैं. अपने एक्सएमएल संसाधनों में स्टैटिक तौर पर तय की गई स्ट्रिंग को वापस पाने के लिए, 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 एपीआई का इस्तेमाल करें.

// 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 फ़ंक्शन में तीसरा पैरामीटर पास करने की ज़रूरत नहीं है.

बहुवचन के बारे में ज़्यादा जानने के लिए, संख्या वाली स्ट्रिंग का दस्तावेज़ देखें.

डाइमेंशन

इसी तरह, किसी संसाधन की एक्सएमएल फ़ाइल से डाइमेंशन पाने के लिए, dimensionResource एपीआई का इस्तेमाल करें.

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

रंग

अगर आपको अपने ऐप्लिकेशन में Compose का इस्तेमाल धीरे-धीरे शुरू करना है, तो 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, स्टैटिक कलर के साथ उम्मीद के मुताबिक काम करता है. हालांकि, यह कलर स्टेट लिस्ट रिसॉर्स को फ़्लैट कर देता है.

वेक्टर ऐसेट और इमेज संसाधन

वेक्टर ड्रॉएबल या PNG जैसे रास्टर किए गए ऐसेट फ़ॉर्मैट लोड करने के लिए, painterResource एपीआई का इस्तेमाल करें. आपको ड्रॉएबल के टाइप के बारे में जानने की ज़रूरत नहीं है. बस 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 मुख्य थ्रेड पर, संसाधन के कॉन्टेंट को डिकोड और पार्स करता है.

ऐनिमेटेड वेक्टर ड्रॉएबल

ऐनिमेटेड वेक्टर ड्रॉएबल एक्सएमएल लोड करने के लिए, AnimatedImageVector.animatedVectorResource एपीआई का इस्तेमाल करें. यह तरीका, 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 में Material Icons का इस्तेमाल करने का एंट्री पॉइंट है. आइकॉन की पांच अलग-अलग थीम हैं: भरे हुए, आउटलाइन वाले, गोल किनारे वाले, दो टोन वाले, और शार्प. हर थीम में एक जैसे आइकॉन होते हैं, लेकिन उनकी विज़ुअल स्टाइल अलग होती है. आपको आम तौर पर एक थीम चुननी चाहिए और उसे अपने पूरे ऐप्लिकेशन में इस्तेमाल करना चाहिए, ताकि एक जैसा अनुभव मिले.

आइकॉन बनाने के लिए, Icon कंपोज़ेबल का इस्तेमाल किया जा सकता है. यह आइकॉन पर टिंट लागू करता है और आइकॉन के हिसाब से लेआउट का साइज़ तय करता है.

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

सबसे ज़्यादा इस्तेमाल किए जाने वाले कुछ आइकॉन, androidx.compose.material डिपेंडेंसी के तौर पर उपलब्ध हैं. किसी अन्य Material आइकॉन का इस्तेमाल करने के लिए, material-icons-extended फ़ाइल में build.gradle डिपेंडेंसी जोड़ें.

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

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

फ़ॉन्ट

Compose में फ़ॉन्ट इस्तेमाल करने के लिए, फ़ॉन्ट फ़ाइलों को सीधे अपने APK में डाउनलोड और बंडल करें. इसके लिए, उन्हें res/font फ़ोल्डर में रखें.

Font एपीआई का इस्तेमाल करके हर फ़ॉन्ट लोड करें. इसके बाद, उनसे एक 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 में थीमिंग के बारे में जानकारी देने वाले दस्तावेज़ में, टाइपोग्राफ़ी के बारे में ज़्यादा जानें