Today’s tutorial teaches how to use KMP Text from the Common Resource String.xml file in Kotlin Compose Multiplatform. This is useful when we add multiple text strings to our app because all the strings are maintained using a single file. We can reuse Text strings when calling from a String.xml file. It also plays a major role in integrating localization in our Android and iOS applications.
KMP Text from Common Resource String.xml in Kotlin Compose Multiplatform
All the native Android Java & Kotlin developers are familiar with String.xml files because we all have used them. It would be new to you if you came from another development arena. So, the primary purpose of using String.xml is to put all the Text Strings within a single XML resource file, which we can call from there.
Setup KMP project for String.xml file :
1. String.xml is not in our KMP Compose multiplatform project by default. We must create this file manually.
2. To create a String.xml file, go to your KMP project -> composeApp -> src -> composeResource. Create a folder named values.
3. In the values folder, create a file string.xml file.
4. Paste the code below into the string.xml file. For learning purposes, I have created only two String keys. You can create or modify these keys and their Strings.
|
1 2 3 4 5 |
<?xml version="1.0" encoding="UTF-8" ?> <resources> <string name="app_title">Test App</string> <string name="hello_text">This is a Hello World text from String.xml file.</string> </resources> |
5. Now, you must rebuild your project. To rebuild the KMP project, click Build -> Rebuild Project.
6. you can access these Strings in your KMP project after successfully rebuilding the project. To do so, use the stringResource(Res.string.your_key) format. See the code example below.
|
1 2 3 4 5 6 7 8 9 10 |
@Composable fun SampleTextFromStringXML_1() { Text( text = stringResource(Res.string.app_title), style = TextStyle( fontSize = 24.sp, textAlign = TextAlign.Center ), ) } |
7. Accessing another String key from the String.xml file in Text.
|
1 2 3 4 5 6 7 8 9 10 |
@Composable fun SampleTextFromStringXML_2() { Text( text = stringResource(Res.string.hello_text), style = TextStyle( fontSize = 24.sp, textAlign = TextAlign.Center ), ) } |
Complete source code for App.kt file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
package com.app.test import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import org.jetbrains.compose.resources.stringResource import testapp.composeapp.generated.resources.Res import testapp.composeapp.generated.resources.app_title import testapp.composeapp.generated.resources.hello_text @Composable fun App() { MaterialTheme { Column( modifier = Modifier .fillMaxSize() .padding(8.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { SampleTextFromStringXML_1() SampleTextFromStringXML_2() } } } @Composable fun SampleTextFromStringXML_1() { Text( text = stringResource(Res.string.app_title), style = TextStyle( fontSize = 24.sp, textAlign = TextAlign.Center ), ) } @Composable fun SampleTextFromStringXML_2() { Text( text = stringResource(Res.string.hello_text), style = TextStyle( fontSize = 24.sp, textAlign = TextAlign.Center ), ) } |
Screenshot in Android device:
Screenshot in iOS device:
Thanks for reading our article. If you have any issues integrating this functionality, please feel free to comment. I will surely reply to you and resolve your issue.
