Ressourcen in Compose

Jetpack Compose kann auf die in Ihrem Android-Projekt definierten Ressourcen zugreifen. In diesem Dokument werden einige der APIs beschrieben, die Compose dafür bietet.

Ressourcen sind die zusätzlichen Dateien und statischen Inhalte, die Ihr Code verwendet, z. B. Bitmaps, Layoutdefinitionen, Strings für die Benutzeroberfläche, Animationsanweisungen und mehr. Wenn du mit Ressourcen in Android nicht vertraut bist, lies die Übersicht über App-Ressourcen.

Strings

Die am häufigsten verwendete Art von Ressource sind Strings. Verwenden Sie die stringResource API, um einen String abzurufen, der statisch in XML-Ressourcen definiert ist.

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

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

stringResource funktioniert auch mit Positionsformatierung.

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

String-Plurale (experimentell)

Verwenden Sie die pluralStringResource API, um eine Pluralform mit einer bestimmten Anzahl zu laden.

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

Wenn Sie die Methode pluralStringResource verwenden, müssen Sie die Anzahl zweimal übergeben, wenn Ihr String eine Stringformatierung mit einer Zahl enthält. Beispiel: Für den String %1$d minutes wird mit dem ersten Zählparameter der entsprechende Pluralstring ausgewählt und der zweite Zählparameter wird in den Platzhalter %1$d eingefügt. Wenn deine Plural-Strings keine Stringformatierung enthalten, musst du den dritten Parameter nicht an pluralStringResource übergeben.

Weitere Informationen zu Pluralformen findest du in der Dokumentation zu Mengenstrings.

Abmessungen

Verwenden Sie die dimensionResource API, um Dimensionen aus einer Ressourcen-XML-Datei abzurufen.

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

Farben

Wenn Sie Compose schrittweise in Ihre App einbinden, verwenden Sie die colorResource API, um Farben aus einer XML-Datei abzurufen.

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

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

colorResource funktioniert wie erwartet mit statischen Farben, aber Ressourcen für Farbstatuslisten werden vereinfacht.

Vektor-Assets und Bildressourcen

Verwenden Sie die painterResource API, um entweder Vektor-Drawables oder gerasterte Asset-Formate wie PNGs zu laden. Sie müssen den Typ des Drawables nicht kennen. Verwenden Sie einfach painterResource in Image-Kompositionen oder paint-Modifikatoren.

// 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 decodiert und parst den Inhalt der Ressource im Hauptthread.

Animierte Vektor-Drawables

Verwenden Sie die AnimatedImageVector.animatedVectorResource API, um eine animierte Vektor-Drawable-XML-Datei zu laden. Die Methode gibt eine AnimatedImageVector-Instanz zurück. Verwenden Sie die Methode rememberAnimatedVectorPainter, um ein Painter zu erstellen, das in den Composables Image und Icon verwendet werden kann, um das animierte Bild anzuzeigen. Der boolesche Parameter atEnd der Methode rememberAnimatedVectorPainter gibt an, ob das Bild am Ende aller Animationen gezeichnet werden soll. Wenn sie mit einem änderbaren Status verwendet wird, lösen Änderungen an diesem Wert die entsprechende Animation aus.

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

Symbole

Jetpack Compose enthält das Objekt Icons, das der Einstiegspunkt für die Verwendung von Material Design-Symbolen in Compose ist. Es gibt fünf verschiedene Symboldesigns: Filled, Outlined, Rounded, TwoTone und Sharp. Jedes Design enthält dieselben Symbole, aber mit einem anderen visuellen Stil. In der Regel sollten Sie ein Design auswählen und es aus Gründen der Konsistenz in Ihrer gesamten Anwendung verwenden.

Wenn Sie ein Symbol zeichnen möchten, können Sie die zusammensetzbare Funktion Icon verwenden, die eine Tönung anwendet und eine Layoutgröße bereitstellt, die dem Symbol entspricht.

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

Einige der am häufigsten verwendeten Symbole sind als Teil der androidx.compose.material-Abhängigkeit verfügbar. Wenn Sie andere Material Design-Symbole verwenden möchten, fügen Sie die Abhängigkeit material-icons-extended der Datei build.gradle hinzu.

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

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

Schriftarten

Wenn Sie Schriftarten in Compose verwenden möchten, laden Sie die Schriftartdateien herunter und bündeln Sie sie direkt in Ihren APKs, indem Sie sie im Ordner res/font ablegen.

Laden Sie jede Schriftart mit der Font API und erstellen Sie damit eine FontFamily, die Sie in TextStyle-Instanzen verwenden können, um Ihre eigene Typography zu erstellen. Der folgende Code stammt aus dem Compose-Beispiel Crane und der zugehörigen Datei 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()
    }
}

Informationen zur Verwendung herunterladbarer Schriftarten in Compose finden Sie auf der Seite Herunterladbare Schriftarten.

Weitere Informationen zur Typografie findest du in der Dokumentation zu Designs in Compose.