Risorse in Compose

Jetpack Compose può accedere alle risorse definite nel tuo progetto Android. Questo documento illustra alcune delle API offerte da Compose per farlo.

Le risorse sono i file aggiuntivi e i contenuti statici utilizzati dal codice, ad esempio bitmap, definizioni di layout, stringhe dell'interfaccia utente, istruzioni di animazione e altro ancora. Se non hai familiarità con le risorse in Android, consulta la guida Panoramica delle risorse dell'app.

Stringhe

Il tipo di risorsa più comune sono le stringhe. Utilizza l'API stringResource per recuperare una stringa definita staticamente nelle risorse XML.

// 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 funziona anche con la formattazione posizionale.

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

Plurali delle stringhe (sperimentale)

Utilizza l'API pluralStringResource per caricare un plurale con una determinata quantità.

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

Quando utilizzi il metodo pluralStringResource, devi passare il conteggio due volte se la stringa include la formattazione della stringa con un numero. Ad esempio, per la stringa %1$d minutes, il primo parametro di conteggio seleziona la stringa plurale appropriata e il secondo parametro di conteggio viene inserito nel segnaposto %1$d. Se le stringhe plurali non includono la formattazione delle stringhe, non è necessario passare il terzo parametro a pluralStringResource.

Per saperne di più sui plurali, consulta la documentazione sulle stringhe di quantità.

Dimensioni

Allo stesso modo, utilizza l'API dimensionResource per ottenere le dimensioni da un file XML di risorse.

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

Colori

Se adotti Compose in modo incrementale nella tua app, utilizza l'API colorResource per ottenere i colori da un file XML di risorse.

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

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

colorResource funziona come previsto con i colori statici, ma appiattisce le risorse dell'elenco degli stati dei colori.

Asset vettoriali e risorse immagine

Utilizza l'API painterResource per caricare drawable vettoriali o formati di asset rasterizzati come i PNG. Non è necessario conoscere il tipo di risorsa disegnabile, basta utilizzare painterResource nei composable Image o nei modificatori paint.

// 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 decodifica e analizza i contenuti della risorsa nel thread principale.

Drawable vettoriali animati

Utilizza l'API AnimatedImageVector.animatedVectorResource per caricare un file XML di risorse grafiche vettoriali animate. Il metodo restituisce un'istanza AnimatedImageVector. Per visualizzare l'immagine animata, utilizza il metodo rememberAnimatedVectorPainter per creare un Painter che può essere utilizzato nei composable Image e Icon. Il parametro booleano atEnd del metodo rememberAnimatedVectorPainter indica se l'immagine deve essere disegnata alla fine di tutte le animazioni. Se utilizzato con uno stato modificabile, le modifiche a questo valore attivano l'animazione corrispondente.

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

Icone

Jetpack Compose include l'oggetto Icons, che è il punto di accesso per l'utilizzo delle icone Material in Compose. Esistono cinque temi di icone distinti: Piene, Contorno, Arrotondate, Bicolore e Nitide. Ogni tema contiene le stesse icone, ma con uno stile visivo distinto. In genere scegli un tema e utilizzalo in tutta l'applicazione per garantire la coerenza.

Per disegnare un'icona, puoi utilizzare il componente componibile Icon che applica la tinta e fornisce le dimensioni del layout corrispondenti all'icona.

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

Alcune delle icone più utilizzate sono disponibili come parte della dipendenza androidx.compose.material. Per utilizzare una delle altre icone Material, aggiungi la dipendenza material-icons-extended al file build.gradle.

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

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

Caratteri

Per utilizzare i caratteri in Compose, scarica e raggruppa i file dei caratteri direttamente negli APK inserendoli nella cartella res/font.

Carica ogni carattere utilizzando l'API Font e crea un FontFamily con questi caratteri da utilizzare nelle istanze di TextStyle per creare i tuoi Typography. Di seguito è riportato il codice tratto dall'esempio di composizione Crane e dal relativo file 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

Per utilizzare i caratteri scaricabili in Compose, consulta la pagina Caratteri scaricabili.

Scopri di più sulla tipografia nella documentazione sui temi in Compose.