Oluşturulan kaynaklar

Jetpack Compose, Android projenizde tanımlanan kaynaklara erişebilir. Bu belgede, Compose'un bu amaçla sunduğu API'lerden bazıları açıklanmaktadır.

Kaynaklar, kodunuzun kullandığı ek dosyalar ve statik içeriklerdir (ör. bit eşlemler, düzen tanımları, kullanıcı arayüzü dizeleri, animasyon talimatları ve daha fazlası). Android'deki kaynaklar hakkında bilginiz yoksa Uygulama kaynaklarına genel bakış kılavuzuna göz atın.

Yaylı çalgılar

En yaygın kaynak türü dizelerdir. XML kaynaklarında statik olarak tanımlanmış bir dizeyi almak için stringResource API'sini kullanın.

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

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

stringResource, konumsal biçimlendirmeyle de çalışır.

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

Dize çoğulları (deneysel)

Belirli bir miktarda çoğul yüklemek için pluralStringResource API'sini kullanın.

// 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 yöntemini kullanırken dizenizde sayı içeren dize biçimlendirmesi varsa sayıyı iki kez iletmeniz gerekir. Örneğin, %1$d minutes dizesi için ilk sayı parametresi uygun çoğul dizeyi seçer ve ikinci sayı parametresi %1$d yer tutucusuna eklenir. Çoğul dizeleriniz dize biçimlendirmesi içermiyorsa üçüncü parametreyi pluralStringResource öğesine iletmeniz gerekmez.

Çoğul ifadeler hakkında daha fazla bilgi için miktar dizesi belgelerini inceleyin.

Boyutlar

Benzer şekilde, bir kaynak XML dosyasından boyutları almak için dimensionResource API'sini kullanın.

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

Renkler

Uygulamanızda Compose'u kademeli olarak kullanmaya başlıyorsanız kaynak XML dosyasından renkleri almak için colorResource API'sini kullanın.

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

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

colorResource, statik renklerle beklendiği gibi çalışır ancak renk durumu listesi kaynaklarını düzleştirir.

Vektör öğeleri ve resim kaynakları

Vektör çizimleri veya PNG gibi rasterleştirilmiş öğe biçimlerini yüklemek için painterResource API'yi kullanın. Çizilebilir öğenin türünü bilmeniz gerekmez. Image composable'larında veya paint değiştiricilerinde painterResource kullanmanız yeterlidir.

// 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, ana iş parçacığında kaynağın içeriğinin kodunu çözer ve ayrıştırır.

Animasyonlu Drawable Vektörler

Animasyonlu bir drawable vektör XML'i yüklemek için AnimatedImageVector.animatedVectorResource API'sini kullanın. Yöntem, bir AnimatedImageVector örneği döndürür. Animasyonlu resmi görüntülemek için rememberAnimatedVectorPainter yöntemini kullanarak Image ve Icon composable'larında kullanılabilecek bir Painter oluşturun. rememberAnimatedVectorPainter yönteminin Boole atEnd parametresi, resmin tüm animasyonların sonunda çizilip çizilmeyeceğini belirtir. Değişken bir durumla kullanıldığında bu değerde yapılan değişiklikler ilgili animasyonu tetikler.

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

Simgeler

Jetpack Compose, Compose'da Materyal simgeleri kullanmak için giriş noktası olan Icons nesnesiyle birlikte gelir. Beş farklı simge teması vardır: Dolu, Anahatlı, Yuvarlak, İki Tonlu ve Keskin. Her temada aynı simgeler bulunur ancak simgelerin görsel stilleri farklıdır. Genellikle bir tema seçmeniz ve tutarlılık için bu temayı uygulamanızın tamamında kullanmanız gerekir.

Simge çizmek için renk tonu uygulayan ve simgeyle eşleşen düzen boyutu sağlayan Icon composable'ını kullanabilirsiniz.

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

En sık kullanılan simgelerden bazıları androidx.compose.material bağımlılığının bir parçası olarak kullanılabilir. Diğer materyal simgelerinden herhangi birini kullanmak için build.gradle dosyasına material-icons-extended bağımlılığını ekleyin.

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

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

Yazı Tipleri

Yazı tiplerini Compose'da kullanmak için yazı tipi dosyalarını indirip res/font klasörüne yerleştirerek doğrudan APK'larınıza ekleyin.

Font API'yi kullanarak her yazı tipini yükleyin ve bunlarla kendi Typography öğenizi oluşturmak için TextStyle örneklerinde kullanabileceğiniz bir FontFamily oluşturun. Aşağıdaki kod, Crane Compose örneğinden ve Typography.kt dosyasından alınmıştır.

// 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'da indirilebilir yazı tiplerini kullanma hakkında bilgi edinmek için İndirilebilir yazı tipleri sayfasını inceleyin.

Tipografi hakkında daha fazla bilgiyi Compose'da Tema Oluşturma belgelerinde bulabilirsiniz.