Compose - Resource

  • kotlin/compose/resource

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

    Introduction

    Amper supports Compose Multiplatform 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:

    1. Images should be in the drawable directory.
    2. Fonts should be in the font directory.
    3. Strings should be in the values directory.
    4. 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).

    Pending