Multi-language App

If you were wondering if it is possible to have one app for iPhone and Android mobile devices and at the same time in multiple languages – you came to the right place! You don’t need to struggle anymore with choosing one localization and embrace multilingualism.

Shoutem builder and features are by default in English language which is the leading language in today’s world, but let’s face it, providing more than language in your app is having a positive impression on your app users giving that nudge of carefulness. 

One leads to another, at the end it has a positive impact on your mobile app business.

No matter if we fully understand English, native language will always be our first choice so let’s get started!

Back to the basics

Rules from our Localization tutorial are applying here as well. For each language, you are required to translate English strings from this JSON file. For more detailed instructions, make sure to check the steps under Translating your App title. 

Worth mentioning, translating strings in the JSON file will apply only on strings in Shoutem features, that means the content you add within the builder area will always be in the languages you saved it. Changing languages in the app will not change the language of your app’s content.

See the video tutorial on how to set a multilingual app, and find the written steps below:

Language & Region Settings page

Open your app in the builder, navigate to Settings page from the left menu bar and select Language & Region setting. First two steps are only half of the work. It is important to properly add and activate your languages here, or the multi-language support will not be configured properly.

Step 1. Upload your languages

Each JSON file stands for one language. Therefore, for each language you are required to upload a separate JSON file and select language for it as it is displayed in the following video.

Multi-language App

Step 2. Activate the language

For the languages you wish to have in your app, you need to activate them by toggling the button status.

Multi-language App

Default language

Selected language in the Default language dropdown will be default localization from the moment your app user opens the app. The dropdown menu will list languages you have uploaded on the list, feel free to choose any language per your choice.

The last step in configuration – assign content to upload languages

Last but not least, if this final step is not completed, some of your app’s content will not be displayed in certain selected languages.Depending on the size of your app’s content, this might be challenging, make sure to have enough time to properly complete the multi-language setup.

The steps are the same as when you are sorting your content items in categories. Only this time, you will be adding content items to languages which will grant permission to access your previously uploaded JSON files.

The process

The following steps will need to be done in all screens in your app so make sure not to miss anything.

After you select one screen and click on the EDIT ITEMS button, a new modal window will be opened where you are adding and editing content for that screen. For each item, you will see a column Languages. Dropdown menu will list all your previously uploaded languages. If you want for that item to use multiple languages, select those languages as displayed on the following video.

Multi-language App

Add Languages screen to your app

In the Screens area, click on + symbol and under More section, search for Language & Region screen.

Multi-language App

Language screen will automatically list available languages you have previously uploaded in the settings page in the builder. Here your app users will be able to select their preferred language.

Multi-language App

CSV import option in Multi-language support

If you are using the CSV import option while filling your app with content, you can use our Importer for assigning content items to languages and save some time! The importer will do all the work.

Before you start importing your content, make sure you have uploaded (Step 1.) and activated (Step 2.) desired languages on the Language & Region Setting page in the builder.

CSV file

A general overview of how content can be imported via CSV files is shared in our support article here, CSV file format stays the same, you don’t have to add additional columns for your languages.

Import

When CSV import wizard is opened, you will have a field for CSV data source where you need to attach the CSV file you want to upload, and you will see Import to languages option. In the dropdown menu, the importer will list all your previously uploaded and activated languages. Make sure to select each one before proceeding with the import.

Multi-language App

How does it work in the app?

On the Languages screen, the app user selects preferred language. 

If the selected language is not visible right away while you are still using the app, use the pull-to-refresh action as shown below, or simply reopen the app.

Multi-language App