Your First Kotlin Android App: An App From Scratch

Transcript: 09. Add String Resources

Let’s talk a bit about localization.

All your titles are currently in English. But that doesn’t mean that your app will always support just English.

If one of your goals is to make your app more accessible, you might want to translate the user interface to other languages.

With this, your app can be used by a wider audience.

Of course, you can say that you don’t care about localization at this point and that you’ll worry about it later. But it’s easier to create the app in a way that makes it easy to add localization for different languages in the future right from the outset.

This is a better approach than to translate it after the project is completed. Because this would involve changing hard-coded text in many places.

This is where Android String resources come in and a string in programming is generally used to refer to text.

In Android, you can set up resources for values which are used often - like specific colors, or values which could be dynamically changed at runtime - like text titles.

These titles are stored in a file called strings.xml.

This file stores all the strings used in the app so that they are gathered together in one central place.

This means that if the same string is used in multiple places - for example, common buttons such as OK and Cancel - then there is only one copy of the string for all those instances.

A title change requires only one change in the strings.xml file.

To provide actual translations, all you need to do is to copy strings.xml and translate everything in the copy to the second language to be sure that all the text used in the app has been translated to support the new language.

Now, the big question is: “How can you use strings.xml in your layout?”

Well, Android Studio takes all the resources from the res folder and adds them to what is known as the R file.

It adds it there as a list of constants, meaning, that their values can’t be changed later on. Don’t worry too much about the R file yet - you will see it in action soon enough.

But basically, every resource used in your app has a unique constant identifier that you can use to refer to it.

And the R file provides you with the necessary medium to access these constants.

So, for example, the constant to access the text for the app’s name would be app_name and you’d access this value in your code via the R file using a reference such as R.string.app_name.

You can add your own strings to the strings.xml file by simply editing the file to add more values to it. OR, You can do it via the fix action.

You’ll start off by extracting the instruction text to the string resource file. Go ahead and click on the string. Then the bulb icon. Then select “Extract string resource.”

This opens up a dialog box.

In here, you have the resource name which is the identifier for this text. Go ahead and give it a more decriptive name. In this case, name it: instruction_text

Next is the resource value which is the actual text that would be displayed. I’ll leave as it is since this is the text we want to see in the Text widget.

After that, we have the source set, we’ll leave it to the default value. We also have the file we want to store this value in. It is currently set to strings.xml We have other types of resources we can extract but since we’re working with strings, leave it as stirng.xml

Then click “OK”

And instantly, the string is substituted with the stringResource() function.

Text(text = stringResource(id = R.string.instruction_text))

Do a build and refresh by clicking on the refresh icon in the preview window.

You can now see that the Text widget now gets the text to display from the string resource and this is possible because of the stringResource() function. This function takes in the id of the the string resource that is stored in R file which I talked about earlier on in this episode.

To check it out, you can simple CMD + click the resource id OR open up the project panel, then navigate to res > values > strings.xml file.

You can see we have the string we extracted stored in this file. And you can access it by its name, in this case instruction_text.

This file also contains the app_name string and this is added for you whenever you create an Android project. You can use this string where you need your app name for example in the TopAppBar.

So you see, this is the recommended way to store text in an Android app. And at the top, you can also see how to add translations for different langauges referred to as locales. But that’s beyond the scope of this course.

I’ll pause this recording in a bit because I want to repeat the same update for other widgets. I’ll really love you to try doing it yourself.

This is the updated strings.xml file containing all the text for the widgets in your layout.

<string name="app_name">Bullseye</string>
<string name="instruction_text">PUT THE BULLSEYE AS CLOSE AS YOU CAN TO</string>
<string name="min_value_text">1</string>
<string name="max_value_text">100</string>
<string name="target_value_text">89</string>
<string name="hit_me_button_text">HIT ME</string>

Use these names as you update your strings. OR you can just copy and paste them from the transcript of this episode if you feel like.

I’ll pause the recording and make the updates.

Okay, I’m back!!! Now, if you look at the GameScreen composable you can see that all the text widgets and button now use string resources.

Go ahead and run the app.

Everything works fine as expected and our texts are now gotten from the string resource file.