Resource

Resources are static content, such as images, fonts, and strings, which you can use in your application.

On this page

Introduction
Project setup
Directory structure
Strings
Pending

Introduction

Project setup

Amper supports Compose Multiplatform resources.

dependencies:
  - $compose.components.resources

The file layout in Amper is:

|-my-kmp-module/
|  |-module.yaml
|  |-src/ # your code is here
|  |  |-...
|  |-composeResources/ # place your multiplatform resources in this folder
|  |  |-values/
|  |  |  |-strings.xml
|  |  |-drawable/
|  |  |  |-image.jpg
|  |-...

Amper automatically generates the accessors for resources during the build and when working with code in the IDE. Accessors are generated in a package that corresponds to the module name.

All non-letter symbols are replaced with _.

In the given example where the module name is my-kmp-module, the package name for the generated resources will be my_kmp_module.

Here is how to use the resources in the code:

import my_kmp_module.generated.resources.Res
import my_kmp_module.generated.resources.hello
// other imports

@Composable
private fun displayHelloText() {
    BasicText(stringResource(Res.string.hello))
}

Read more about setting up and using compose resources in the documentation.

Directory structure

Create a new directory composeResources in the source set directory you want to add the resources to.

src/composeResources

Organize the composeResources directory structure according to these rules:

Images should be in the drawable directory.
Fonts should be in the font directory.
Strings should be in the values directory.
Other files should be in the files directory, with any folder hierarchy you may find appropriate.

When you’ve set up the resources for your project, build the project to generate the special Res class which provides access to resources. To regenerate the Res class and all the resource accessors, build the project again or re-import the project in the IDE.

After that, you can use the generated class to access the configured multiplatform resources from your code or from external libraries.

To use the prepared resources, import the generated class, for example:

import project.composeapp.generated.resources.Res
import project.composeapp.generated.resources.example_image

Here:

project is the name of your project
composeapp is the module where you placed the resource directories
Res is the default name for the generated class
example_image is the name of an image file in the composeResources/drawable directory (example_image.png, for example).

Strings

Store all string resources in XML files in composeResources/values directories. A static accessor is generated for each item in each file.

For more information on how to localize strings for different locales, refer to the guide on localizing strings.

Simple strings

To store a simple string, add a <string> element to your XML:

<resources>
    <string name="app_name">My awesome app</string>
    <string name="title">Some title</string>
</resources>

To get string resources as a String, use the following code:

From composable code

@Composable
fun stringResource(resource: StringResource): String {...}

@Composable
fun stringResource(resource: StringResource, vararg formatArgs: Any): String {...}

For example:

Text(stringResource(Res.string.app_name))

From non-composable code

suspend fun getString(resource: StringResource): String

suspend fun getString(resource: StringResource, vararg formatArgs: Any): String