Kotlin Multiplatform / MOKO resources 0.21 with Compose Multiplatform support

MOKO resources 0.21 with Compose Multiplatform support

MOKO resources is a multiplatform Kotlin library that provides a convenient way to access resources like images, colors, strings, and fonts in your Kotlin Multiplatform projects. With the release of version 0.21.0, MOKO resources now includes support for Compose Multiplatform, allowing developers to easily access resources across all supported platforms.

One of the key benefits of using MOKO resources with Compose Multiplatform is the ability to easily use fonts, colors, and images in your UI. With the fontFamilyResource, colorResource, and painterResource functions provided by MOKO resources, it's easy to reference resources from your shared code.

In this article, we’ll take a closer look at how to use MOKO resources with Compose Multiplatform, and how it can help you build better multiplatform applications.

Usage

MOKO resources provides several functions for accessing resources like images, colors, strings, and fonts. Here's a brief overview of how to use each of these functions:

ImageResource

To display an image in your Compose Multiplatform UI, use the painterResource function with the ID of the image resource you want to use:

Image(
   painter = painterResource(MR.images.logo),
   contentDescription = null
)

FontResource

To use a custom font in your Compose Multiplatform UI, use the fontFamilyResource function:

Text(
   text = "Hello, World!",
   fontFamily = fontFamilyResource(MR.fonts.custom_font)
)

StringResource

To display a localized string in your Compose Multiplatform UI, use the stringResource function with the ID of the string resource you want to use:

Text(text = stringResource(MR.strings.hello_world))

ColorResource

To set the color of a Compose Multiplatform component, use the ColorResource class with the ID of the color resource you want to use:

Text(
   text = "Hello, World!",
   color = colorResource(MR.colors.background)
)

AssetResource

To load the contents of an asset file in your Compose Multiplatform UI, use the AssetResource and extension function:

val assetContent: String? by MR.assets.some_asset.readTextAsState()
Text(text = assetContent.orEmpty())

FileResource

To load the contents of a file in your Compose Multiplatform UI, use the FileResource and extension function:

val fileContent: String? by MR.files.some_file.readTextAsState()
Text(text = fileContent.orEmpty())

Compose Multiplatform Screen

To show how to use MOKO resources with Compose Multiplatform, let's build a simple screen that displays an image, a text input, and some localized text. Here's the code:

@Composable
internal fun App() {
   MaterialTheme(
       colors = if (isSystemInDarkTheme()) darkColors() else lightColors()
   ) {
       Column(
           modifier = Modifier.fillMaxSize()
               .background(color = MaterialTheme.colors.background)
               .padding(16.dp),
           horizontalAlignment = Alignment.CenterHorizontally
       ) {
           Image(
               painter = painterResource(MR.images.moko_logo),
               contentDescription = null
           )

           var text: String by remember { mutableStateOf("") }

           OutlinedTextField(
               modifier = Modifier.fillMaxWidth()
                   .padding(top = 16.dp),
               value = text,
               colors = TextFieldDefaults.outlinedTextFieldColors(
                   textColor = MaterialTheme.colors.onBackground
               ),
               onValueChange = { text = it }
           )

           val counter: Int = text.length
           Text(
               modifier = Modifier.fillMaxWidth()
                   .padding(vertical = 8.dp),
               text = stringResource(MR.plurals.chars_count, counter, counter),
               color = colorResource(MR.colors.textColor),
               fontFamily = fontFamilyResource(MR.fonts.cormorant.italic)
           )

           Button(onClick = { text = "Hello, ${getPlatformName()}" }) {
               Text(text = stringResource(MR.strings.hello_world))
           }

           val fileContent: String? by MR.files.some_file.readTextAsState()
           Text(
               modifier = Modifier.padding(top = 16.dp),
               text = fileContent.orEmpty(),
               color = MaterialTheme.colors.onBackground
           )

           val assetContent: String? by MR.assets.some_asset.readTextAsState()
           Text(
               modifier = Modifier.padding(top = 16.dp),
               text = assetContent.orEmpty(),
               color = MaterialTheme.colors.onBackground
           )
       }
   }
}

With this simple example, we can see how easy it is to use MOKO resources with Compose Multiplatform to build UIs that look and feel great across all supported platforms.

Full code you can see in moko-resources GitHub repository.

Conclusions

MOKO resources is a powerful library that provides a convenient way to access resources like images, colors, strings, and fonts in your Kotlin Multiplatform projects. With the release of version 0.21.0, MOKO resources now includes support for Compose Multiplatform, making it even easier to build great multiplatform applications.

Using MOKO resources with Compose Multiplatform allows developers to easily access resources across all supported platforms, and to create UIs that look and feel great everywhere. With the fontFamilyResource, colorResource, and painterResource functions provided by MOKO resources, it's easy to reference resources from your shared code, and to create UIs that are consistent across all platforms.

In this article, we provided some examples of how to use MOKO resources with Compose Multiplatform, including how to load images, fonts, colors, strings, and assets in your UIs. We also showed how to use MOKO resources to build a simple screen that displays an image, a text input, and some localized text.

In summary, if you're building Kotlin Multiplatform applications with Compose Multiplatform, MOKO resources is an essential library to have in your toolkit. Its support for Compose Multiplatform makes it easy to create consistent and great-looking UIs across all supported platforms, and its convenient resource-loading functions make it easy to access resources from your shared code.

Thanks

I want to say thanks for great community members, that helps us to create new release.

@kevincianfarini, @jittya, @zacharee, @Cilestal, @InsanusMokrassar, @wakaztahir, @PaulWoitaschek.

And also, thanks to OpenAI for ChatGPT. This article was written with great help of ChatGPT.