This Day In History Jetpack Compose App - In App Language Selection

Objective:

Our App provides content in a number of languages. We want to allow users to select a language that is different from their system language. Since Android 13, it is possible to do so in the two following ways, and we want to support both:

System Settings.
In-App Language Selection.

The outcome will be as below:

in-App Selection:		System Settings:

build.gradle.kts

Add resourceConfigurations += listOf("en", "fr", "it", "pt", "es", "de", "sv", "ar", "ru") entry to the app module gradle file:


      defaultConfig {
        applicationId = "com.coroutines.thisdayinhistory"
        minSdk = 29
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary = true
        }

        resourceConfigurations += listOf("en", "fr", "it", "pt", "es", "de", "sv", "ar", "ru")
    }

Resources

Locales.xml


<?xml version="1.0" encoding="utf-8"?>
<locale-config xmlns:android="http://schemas.android.com/apk/res/android">
    <locale android:name="en-US"/>
    <locale android:name="en-GB"/>
    <locale android:name="ar"/>
    <locale android:name="es"/>
    <locale android:name="fr"/>
    <locale android:name="it"/>
    <locale android:name="de"/>
    <locale android:name="pt"/>
    <locale android:name="ru"/>
    <locale android:name="sv"/>

Add strings.xml for each language supported by the app:

English



<resources>
    <string name="app_name">This Day In History</string>
    <string name="title">History Cat</string>
    <string name="drawer_home">Home</string>
    <string name="drawer_settings">Settings</string>
    <string name="drawer_about">About</string>
    <string name="drawer_language">Languages</string>
    <string name="language_prompt">Please choose your language</string>
    <string name="welcome_message">Welcome to our app! You will learn all history secrets here!</string>
    <string name="cancel">Cancel</string>
    <string name="error_message_prefix">There was an error: %s</string>
    <string name="appbar_calendar">Calendar</string>
    <string name="light_mode">Light</string>
    <string name="dark_mode">Dark</string>
    <string name="auto_mode">Auto</string>
    <string name="home_screen_placeholder">Home Screen Placeholder</string>
<resources>

French



<resources>
    <string name="app_name">HistoryCat</string>
    <string name="title">History Cat</string>
    <string name="welcome_message">Welcome to our app! You will learn all history secrets here!</string>
    <string name="language_prompt">Choisissez votre langue</string>
    <string name="drawer_home">Accueil</string>
    <string name="drawer_settings">Paramètres</string>
    <string name="drawer_about">À propos de appt</string>
    <string name="drawer_language">Langues</string>
    <string name="cancel">Cancel</string>
    <string name="error_message_prefix">Erreur:</string>
    <string name="appbar_calendar">Calendar</string>
    <string name="light_mode">Light</string>
    <string name="dark_mode">Dark</string>
    <string name="auto_mode">Auto</string>
    <string name="home_screen_placeholder">espace réservé pour l\'écran d\'accueil</string>
<resources>

Repeat for all the remaining languages

Code

Replace Component Activity with AppCompatActivity

For backward compatibility with previous Android versions, per-app language selection APIs are also available in AndroidX. However, the backward compatible APIs work with the AppCompatActivity context, not the application context, for Android 12 (API level 32) and earlier. Compose apps are created with Component Activity by default. Therefore, we will need to replace Component Activity with AppCompatActivity, and we will need Appcompat version 1.6.0 to higher to access backward compatible API.


package com.coroutines.thisdayinhistory

class MainActivity : AppCompatActivity()

Using Locale API

Add getDeviceLanguage() and setPerAppLanguage() functions to the MainActivity:


 private fun getDeviceLanguage(): String  {
        return LocaleListCompat
            .getDefault()
            .get(LANGUAGE_INDEX)?.language
            ?:
            LangEnum.ENGLISH.langId
    }

    private fun setPerAppLanguage(settingsUiState: AppConfigurationState) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            with(
                getSystemService(
                    LocaleManager::class.java
                )
            ) {
                val appLang = applicationLocales[LANGUAGE_INDEX]
                if (appLang == null || appLang.toLanguageTag() != settingsUiState.appLanguage.langId) {
                    applicationLocales =
                        LocaleList(Locale.forLanguageTag(settingsUiState.appLanguage.langId))
                }
            }
        } else {
            val appLang = AppCompatDelegate.getApplicationLocales()[LANGUAGE_INDEX]
            if (appLang == null || appLang.toLanguageTag() != settingsUiState.appLanguage.langId) {
                AppCompatDelegate.setApplicationLocales(
                    LocaleListCompat.forLanguageTags(
                        settingsUiState.appLanguage.langId
                    )
                )
            }
        }
    }

Our runUi() function will leverage these two functions to set the in-App language:


  private fun runUi() = setContent {
       val settingsViewModel = viewModel()
       val deviceLanguage = getDeviceLanguage()
       val appConfigState by settingsViewModel.appConfigurationState.collectAsStateWithLifecycle()

       settingsViewModel.setDeviceLanguage(deviceLanguage)

        when (!appConfigState.isLoading) {
            true ->
                { }//load animation
            false -> {
                if (deviceLanguage != appConfigState.appLanguage.langId) {
                    setPerAppLanguage(appConfigState)
                }

                isStatePendingRestore = false

                MainContent(settingsViewModel, appConfigState)
            }
        }
    }

The app should build just fine. However, the following error will appear at runtime:


FATAL EXCEPTION: main
Process: com.coroutines.thisdayinhistory, PID: 12108
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.coroutines.thisdayinhistory/com.coroutines.thisdayinhistory.MainActivity}:
    java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:4169)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:4325)

As suggested by the compiler, we need to change our android theme in the manifest to be a descendant of Theme.AppCompat



  <application
        android:allowBackup="true"
        ...
        android:theme="@style/Theme.AppCompat.NoActionBar"
        android:localeConfig="@xml/locales_config"
        tools:targetApi="tiramisu">