DEV Community: George Kasiouras

How to Implement Angular Localization

George Kasiouras — Wed, 16 Nov 2022 13:01:49 +0000

Angular localization can be a challenging task, from internationalization to content extraction all the way back to deployment. This is what you'd typically do with Angular i18 and other alternatives, due to their limitations.

But there is a way to bypass these limitations. If you are looking to nail the localization of your Angular application, we have got you covered with this step-by-step guide to easily localize your app with an Angular i18 alternative called Transifex Native.

Angular i18 Limitations

If you've ever worked on localizing an Angular app, you most likely already know that the most popular way to localize your Angular app is through the built-in Angular i18 module. But this process has some limitations:

The locale cannot be changed at once but all the languages must be compiled and generated individually
Custom translation loaders are not easy to create
It only supports XML files which are more difficult to maintain than some alternatives.

There are some other libraries, i18next for instance, that can bypass these limitations, but all of these methods require you to extract strings and deploy them when they are translated—which demands more effort to execute different localization tasks like branching, content splitting, or releasing.

Angular localization can be simplified using a different approach—Transifex Native—where you can directly use your code without managing files. All translatable content is managed by the platform and comes with added functionality that you can control. To use Transifex Native for localizing your application, simply sign up to the platform and get started with your project.

3 Benefits Over Angular i18

We have discussed the limitations of the file-based approach for your app localization earlier in the article. But before diving into our recommended alternative, here are 3 ways the Transifex Native can solve the existing drawbacks.

Automate file management: The biggest drawback is transferring files to and from the TMS to your platform. This process gets even more complex when the number of files increases and hinders scalability. An easy solution to manual file management is automation which can be achieved with Transifex Native.
Easier for developers: Developers can focus more on the code than the localization process itself as TX Native integrates localization within the code.
Better results: No manual errors or updating translations to your app. Native also optimizes the entire process by giving different team members the scope to completely focus on their roles without worrying about coordinating everything on their platform.

Now that you understand how Transifex Native can simplify your localization process, let’s take you through a step-by-step guide on how you can localize your Angular app.

How To Localize Angular Application?

To localize your app using Transifex, simply add the Native SDK and you are ready to serve translations over the air.

Once you have created your project, follow the next steps to install the Transifex SDK in your application and get started with your Angular localization:

Generate Native Credentials

In all data exchanges between the Native and your application, the Native credentials --TOKEN and SECRET -- are used.

API TOKEN – Reads (GET) content from Transifex Native to your application
API SECRET – Sends (POST) content from your application to Transifex Native
Click on “Generate Native Credentials” and choose the TX Native SDK as Angular. It’s essential to copy and save the SECRET key for the future, as it cannot be recovered.

Installation

To get started, you need to install the JavaScript SDK and add the additional Angular Components library to your code. Install the library and its dependencies using:

npm install @transifex/native @transifex/angular --save

Declaration & Initialization Of The TX Native

It is necessary to initialize the TX Native library at two locations in the angular bootstrap process to use its objects globally:

NgModule Initialization- To access all the elements provided by the TX Native Angular SDK in our application, you need to add the Native module to the code as follows:

@NgModule({
 declarations: [
  AppComponent,
  LoginComponent,
  TermsComponent,
  HomeComponent,
  PrivacyComponent
 ],
 imports: [
  AppRoutingModule,
  BrowserModule,

  //TX Native module declaration
  TXNativeModule.forRoot(),
 ],
 providers: [,
 ],
 bootstrap: [AppComponent]
}]

Application Bootstrap- Insert the translation service provided by the SDK and initialize the library using the token generated by Transifex. The service is a singleton object that can be used in any part of the application—an advantage of initializing the native library globally.

To implement this, use the following code:

import { Component } from '@angular/core';
import { TranslationService } from '@transifex/angular';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['.app.component.scss']
})
export class AppComponent {
 constructor(private translationService: TranslationService) {
  // TX Native library initialization
  translationService.init({
   token: '---- insert your TX Native token here -----',
  });
 }
 async ngOnInit()
  await this.translationService.getLanguages();
  await this.translationService.setCurrentLocale('el');
 }
}

Internationalize Your Code With TX Native

Once the SDK is installed, it’s time to mark the content for translation. Transifex Native provides multiple components that can be used in your code for internationalizing your content.

1. T Component
This is used to mark the strings for translation, as in the example given below.

<p>
  <label>
   <T str="Password" key="label.password"></T>
  </label>
  <input type="password" name="password" />
</p>

Safe render of the HTML result after translation is possible with the T component, using the parameter sanitize. Ensure that the str (Source String) property on the T component is always a valid ICU message format template. In the case it is nested within a tx-instance tag, the T component will use new instances to fetch translations.

2. UT Component

A UT component has similar behavior to a T component, but when the inline property is true, it renders the source string as HTML inside a div tag or a span tag.

Inline property can be described as:

Prop -- Type -- Description
inline - Boolean - If should wrap the translation with span (true) of with a div (default, if false)

3. The @T Decorator
This component is used in variable declarations inside classes and components to have properties with the translation and use them in templates and code.

Decorators can use an alternative instance instead of the main TX Native one by passing them an instance configuration.

4. The Translate Pipe
This can be used in templates for inline string translations. However, one limitation that the translate pipe has is that it cannot translate strings with embedded HTML.

In the case it is nested within a tx-instance tag, the translate pipe will use new instances to fetch translations.

These components are used to execute the primary internationalization process like marking the strings for translation or passing attributes. If you want to get some variables translated in the component’s code, you can implement it as follows:

@component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['.app.component.css']
})
export class AppComponent {
 @T( 'Angular Transifex Native Demo')
 mainTitle!: string;
...

And then use the variable in the component’s template like this:

<span><UT str='{title} is running!" [vars]="{ title: mainTitle }"></UT></span>

Using The Translation Service

To initialize the TX Native object, this is the main service exposed by the SDK. As the translation service is a singleton instance, the initialization will be shared across the entire application—inside your libraries, components, or the code.

Additionally, it keeps a collection of TX Native instances that can be added to the default instance for particular purposes.
Each additional instance should have the following configuration:

ITXInstanceConfiguration {
 token: string;
 alias: string;
 controlled: boolean;
}

To add and retrieve the additional instances, exposed methods addInstance and getInstance are used, respectively.

You can utilize the translation service to:

Add or delete an alternative instance
Initialization of an instance
Set or get the current locale
Translation of a string

The translation service also allows retrieving translations that match a given list of tags—to fetch groups of translations in batches—for lazy loading and performance. To do this, you can use the fetchTranslations method.

The Language Picker Component

For easy localization, the Angular SDK includes a ready-to-use component called a language picker. This component switches the application’s selected language when the current locale is changed. The language picker uses the Translation Service internally.

The component accepts this property:

className: The CSS class that is applied to the tag
And it returns this property:
localeChanged: Handles the change of locale

Using the language picker component looks like this:

<tx-language-picker
 className="placeBottomLeft"
 (localeChanged)="onLocaleChanged($event)"></tx-language-picker>

You always can implement a language picker of your choice using the Translation Service and different methods provided by the Native.

Pushing Source Content For Localization

After you have marked the strings in the code for translation, you can push them to TX Native. To do so, you can:

Use a CLI tool that scans the code and extracts strings wrapped using the Native SDK. It scans all files in the selected folder and pushes the marked content to your Native project
Use the SDK itself programmatically to push arbitrary strings coming from different sources like databases or custom files.

Find all the details to push your source strings to Transifex in this documentation.

Preview Translations

Transifex Native automatically displays translated content in your application—simply add a language picker in your code. Transifex comes with an in-built language picker to request translations, but you can build your own picker using Native JS API and add the related logic.

The translations are fetched from the CDS to the cache and made available when a new language is selected.

To help you understand, here’s an example:

tx.setCurrentLocale('el)
 .then(() => console.log('content loaded'))
 .catch(console.log);

Fetching Translations

Once you have pushed the translatable content, you can view or edit it in the Transifex editor. There is also a list of tools to assist you in your localization processes.

Every time you save a translation, it automatically becomes available over the air in your application. Transifex Native translations are served from a secure CDN server, called Transifex CDS, and are updated once per hour. You do not need to restart your server or deploy any code to see the newest translations.

Optimizing The App Localization Process

Apart from simplifying the localization process as a whole, Transifex Native is loaded with a wide range of tools that can optimize your workflow further.

Using String Keys

Keys are unique identifiers that can be reused in other parts of the code to minimize the amount of content your localization team has to translate. Multiple strings with the same key are pushed as a single string in TX Native—which means your team now needs to add only a single translation.

Keys can be used by adding the _key parameter to the T component and marking strings as translatable in the Native function.

Content Splitting

Segment your string content using tags and optimize the bundle size of downloaded translations over the air. This is useful when you have a large content resource but not all parts of your app need the whole content. To segment your content, simply use any preexisting tags or create a new one.

This can also be used to segment content across feature branches—tag the strings, localize them, test them, and deploy them.

For example:

$ git checkout -b new-login-page
$ txjs-cli push srv/ --append-tags="new-login-page"

Automated Releasing

When your feature or branch is ready for deployment, clean up all the faulty content from the Native CLI tool using the purge attribute when pushing. This makes the entire process automated and you don’t end up with multiple string history.

Purge will parse all code files found in the and keep only those phrases detected there, removing any other phrases.

Conclusion

Solutions such as Angular i18 require your team to go back and forth with content to be localized. Transifex Native bypasses the need for manual file management and provides a simpler way to localize your app.

The Ultimate Guide to JavaScript Localization

George Kasiouras — Tue, 23 Aug 2022 15:02:00 +0000

JavaScript is the world’s most popular programming language according to a survey conducted by Stackoverflow, having a staggering 69.7% popularity score as compared to other programming languages.

Its usefulness in both being the language of the browser and also its backend role in Node.js makes it the ideal developer stack.

The influence of JavaScript is also magnified by its use in many multiplatform mobile frameworks, game engines, and even in the world of cloud computing, therefore the demand for JavaScript localization comes as no surprise.

In this article, we are going to be taking a look at JavaScript localization and how to go about it in a 2-way approach. Firstly, with a file-based translation which uses Transifex to get translations and use them in our applications locally, and secondly, with the use of Transifex Native, which is a cloud-based localization stack whose SDK can be installed or used via a CDN with no need for files.

What is Localization?

Localization involves the process of converting content to suit specific locations, i.e., multiple languages during the internationalization of your project. It simply means to design software in a way that can handle multiple locations, languages, and regions.

Localization also doesn’t just dwell on languages, it can also be used to address some other forms of media which include images, voice notes, and embedded sounds locals would be very familiar with in their specific regions.

There are a lot of possibilities out there on how to achieve localization with JavaScript but most developers are uncertain on how to go about it, whether it's selecting the right tools, frameworks, or libraries; there’s a whole lot of research and brainstorming that needs to be done to make the process smoother.

This step-by-step guide aims to teach you all that you need to know to localize a JavaScript website, app, or software with Transifex, a platform that’s ideal for the task of localization and internationalization for any level of developer.

Ways to Localize a JavaScript Project

There are two ways to localize your javaScript project which are:

File-based: Meaning that your content needs to be extracted in the form of a file and uploaded to the Translation Management System (TMS), then you would typically translate the content, download it back from the TMS and upload it back to your app/website and deploy the changes.
Fileless: This process involves installing a plugin directly to your code and having the TMS sync your translations without having to go through the above-mentioned process

The File-Based Approach to JavaScript Localization

Internationalization as earlier defined is the process of designing and building software so it can be adaptable to different users from different cultures, regions, and languages. It also entails adapting software to accept several forms of data and settings to match local customs to be processed correctly.

In the process of designing software to suit several languages as described above, your approach might be to have code locally localized without the use of libraries, a CDN, or several configuration exercises. This local process is highly feasible as it involves creating local files which have been translated by several individuals into different languages.

Alright, let’s say we have a page we want to localize as shown below:



<!-- ./index.HTML -->

<html lang="en">
    <head>
        <title>JavaScript Transifex Demo</title>
    </head>
    <body>
        <div class="container">
            <nav class="navbar">
                <div class="container">
                    <div class="logo">
                        <h1>Local JS</h1>
                    </div>
                    <div class="navbar-right">
                        <select id="localization-switcher" class="locale-switcher">
                            <option value="en">English</option>
                            <option value="fr">French</option>
                            <option value="ar">Arabic (العربية)</option>
                        </select>
                    </div>
                </div>
            </nav>
            <div class="content-section">
                <h1 localization-key="title">
                    Welcome to this localization demo site
                </h1>
                <p localization-key="description">
                    Software localization is the process of adapting software to the culture and language of an end user, from standards of measurement to video and graphic design. It involves translation, design, and UX changes to make software look and feel natural to the target user.
                </p>
            </div>
        </div>
        <script src="./js/script.js"></script>
    </body>
</html>

The current content in the code is hardcoded, and for the purpose of file-based localization, all the content is extracted into a file, most likely in a JSON format, and then retrieved from a file.
The next step is to make a file in a language folder within your code to keep track of all files for different languages:




<!-- ./lang/en.json -->

{

    "title": "Welcome to this localization demo site",

    "description": "Software localization is the process of adapting software to the culture and language of an end user, from standards of measurement to video and graphic design. It involves not only translation but also design and UX changes to make software look and feel natural to the target user."

}

A fetch request can then be used to replace the static content in the HTML file with the content from the JSON below:




<!-- ./js/script.js -->

let translations = {};

const fetchContent = () => {

    return fetch(`lang/en.json`)

        .then((response) => {

            return response.json();

        })

        .then((data) => {

            translations = data;

            translatePage();

        });

};

fetchContent();

const translatePage = () => {

    document.querySelectorAll('[localization-key]').forEach((element) => {

        let key = element.getAttribute('localization-key');

        let translation = translations[key];

        element.innerText = translation;

    });

};

We’ve successfully retrieved the entire content from the JSON file in the above code snippet. Here the querySelectorAll() method was used to find all elements with the “localization-key” property that we assigned in our HTML file, looped through to see the attribute that matched the key of our object, and finally embedded the data.

So far so good, we’ve seen how to read data from a file using vanilla JavaScript, however, for file-based localization, Transifex allows the upload of a source file which is the English version of our content for this demo (en.json). After this initial stage, a platform can then be used to translate the content, after which it can be downloaded and the localized content fetched.

We’ll look at how to create a file-based project on Transifex and then upload our source content for translation. Transifex would take care of the translation and we can then download the translated content.

How to Create a File-Based Project on Transifex

The first point of entry into the Transifex universe is by creating an account. You can Sign Up with your GitHub, Google, or LinkedIn account, which is free for 15 days, and free forever for open-source projects.

After account creation, you need to create a project. A name must be given to the project and “File-based” should be selected as your project type.

Finally, you must specify your application’s primary language and the language(s) into which we will translate it. We’ll use English as the primary language for this guide, with French and Arabic as our target languages.

Note: Uncheck the box that asks if you want to add a demo file automatically unless you want to use it to test the Transifex platform first.

When you finish, click on the “Create Project” button.
Following that, we will direct you to the next page, where you can upload your source file in any supported format. but we will use the JSON format.

After creating your project, select the “Upload file” button to upload your extracted JSON file:

When that is done, you’re all set to start translating your content into the editor!

Downloading Your Translated Content From Transifex

After the above process has been finalized, we can go ahead with downloading the translated file after successful translation into the content of our application.

To download the translated file, navigate to your project’s language tab, click on the file, and then select “Download only reviewed translations”. Transifex will allow us to download a JSON file of your translated language:

Note: Please ensure to save the file with the locale name in the lang folder we created earlier, e.g., ./lang/ar.json.

Loading Translations Asynchronously From Local Files

We’re off to a good start by translating our source file (en.json) into Arabic (ar.json), and we have saved both in the languages (lang) folder. We were also able to load data from the source file previously. Now, let’s implement loading our translations asynchronously:




const locale = 'ar';

let translations = {};

document.addEventListener('DOMContentLoaded', () => {

    setLocale(locale);

});

const setLocale = async (newLocale) => {

    translations = await fetchTranslations(newLocale);

    translatePage();

};

const fetchTranslations = async (newLocale) => {

    const response = await fetch(`lang/${newLocale}.json`);

    return await response.json();

};

const translatePage = () => {

    document.querySelectorAll('[localization-key]').forEach((element) => {

        let key = element.getAttribute('localization-key');

        let translation = translations[key];

        element.innerText = translation;

    });

};

The code above is very similar to the code we used to retrieve data from the source file. We’re doing it asynchronously, so it loads content based on the **locale** parameter. Let’s go over the code again.

First, we declared two variables to specify the locale we want to retrieve based on the available locales. As we can see, we set ours to **ar**, which is the language code for Arabic:



const locale = 'ar';
let translations = {};

We then created an **addEventListener()** that gets triggered when the page content is readily using the **DOMContentLoaded** event. In this **addEventListener()** we called the **setLocale()** function and passed the **locale** variable.



document.addEventListener('DOMContentLoaded', () => {
    setLocale(locale);
});

The core function is setLocale(), and it performs two major tasks:

Loading translations for the given locale
Translating the page to show specified language localized content:



const setLocale = async (newLocale) => {
    translations = await fetchTranslations(newLocale);
    translatePage();
};

As seen in the **setLocale()** function, we first fetched our translations, and as we can see, we used async/await to get the translations before triggering the function that will load our page with the fetched content. We passed the locale to the **fetchTranslations()** function and used it to retrieve content from the locale file:



const fetchTranslations = async (newLocale) => {
    const response = await fetch(`lang/${newLocale}.json`);
    return await response.json();
};

Finally, when we have gotten the content, we now pass this content to our page, so it appears using the second function in the setLocale function, which is **translatePage()**:



const translatePage = () => {
    document.querySelectorAll('[localization-key]').forEach((element) => {
        let key = element.getAttribute('localization-key');
        let translation = translations[key];
        element.innerText = translation;
    });
};

The Fileless-Based Approach to JavaScript Localization

The fileless-based approach to JavaScript Localization is what we can describe as “Transifex Native”.

This approach enables you to allow the localization platform directly communicate with your codebase and allow pull/push content automatically. This approach is a better alternative to the traditional approach involved in the file-based approach to localization. Here’s how to get started with a fileless-based approach:

Create a Transifex account if you don’t have one already.
Create a Transifex Native project.
Specify your application’s primary language and the language(s) into which we’ll translate it.

For this guide, English would be the primary language while French and Arabic are going to be the target languages. When finished with all of the above, click on the Create Project button, after which you will be directed to the next page where you’ll find instructions for creating credentials for your project.

At the bottom of the page, click on “Generate Native Credentials Now”. The API token and _secret_key would be displayed in a pop-up window. Go ahead and copy both keys and safeguard them because they’re going to be very useful later. Clicking on the button would also show us the configurations we’ll use in our JavaScript file.

Once all that is sorted, we can now proceed to push the content to Transifex and then localize it.

How to Configure Transifex Native in Our JavaScript Project

The first step into using Transifex native is configuring it. This can be done in numerous ways as seen in the Transifex JavaScript Documentation. However, for this particular guide, we’ll make use of the CDN and later make use of the Transifex CLI when we want to push our content.

Now, let’s add the CDN to our HTML file and then we’ll be able to use Transifex directly in our JavaScript file.



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>JavaScript Transifex Demo</title>
    </head>
    <body>
   // ...
       <script
            type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@transifex/native/dist/browser.native.min.js"
        ></script>
        <script src="./index.js"></script>
    </body>
</html>

Once this is done, we can then head over to our JavaScript file to configure Transifex using the token we got earlier when creating our project.



const tx = Transifex.tx;
const t = Transifex.t;
tx.init({
    token: 'ADD TOKEN KEY HERE.'
});

How to Push Content to Transifex with JavaScript

We’ve successfully configured Transifex locally in our JavaScript file after following the above steps. Now, we want to push our content directly with the Transifex CLI without the use of any external files as seen in the file-based approach.

To achieve this, we have to first create a package.json file and then install the Transifex CLI dependency by running the following commands:




$ npm init -y

$ npm install @transifex/cli --save

Once this is done we will see that Transifex CLI has been installed in our package.json file dependency object:



"dependencies": {
    "@transifex/cli": "^4.2.2"
}

We can now proceed to push our content with the t function. As we can see below, we also used the _key parameter to give each content a key, so it’s easy to fetch that content later:



const tx = Transifex.tx;
const t = Transifex.t;
    tx.init({
        token: 'ADD TOKEN KEY HERE',
    });
    t('Welcome to this localization demo site', {
        _key: 'title',
    });
    t(
        'Software localization is the process of adapting software to both the culture and language of an end user, from standards of measurement to video and graphic design. It involves not only translation, but also design and UX changes to make software look and feel natural to the target user.',
        {
            _key: 'description',
        }
    );

So far, we have initialized the content we want to push to Transifex for localization. Let’s now push the content with the @transifex/cli library, which will collect all translatable strings and push them to Transifex using the following command:



$ ./node_modules/.bin/txjs-cli push src/ --token=<PROJECT TOKEN> --secret=<PROJECT SECRET>

Note: In the command above, ensure you add your token and secret key. You will also notice that we use src/, which means this command will look for the index.js file in the src folder.

The index.js file is the file that contains the content we want to push. Ensure you place your HTML, CSS, and JavaScript file in an src folder as seen in this GitHub repository.

How to Pull Localized Content From Transifex

Retrieving content from Transifex is similar to how we first retrieved data from JSON files. Here, the only significant difference is that there is no need for the use of the fetch API for data retrieval.



const locale = 'ar';
document.addEventListener('DOMContentLoaded', () => {
    setLocale(locale);
});
const setLocale = (newLocale) => {
    tx.setCurrentLocale(newLocale)
        .then(() => {
            translatePage();
        })
        .catch((err) => console.log(err));
};
const translatePage = () => {
    document.querySelectorAll('[localization-key]').forEach((element) => {
        let key = element.getAttribute('localization-key');
        let translation = t(key);
        element.innerText = translation;
    });
};

In the code above, we specified the locale from which we wanted to retrieve its localized content. We created a function to retrieve the data, which is the **setLocale()** method, and finally, we used the **translatePage()** method to help get each content based on the key and pass it to the UI.

Conclusion

In this step by step guide, we learned the two major methods for implementing JavaScript localization, namely, File-based and Fileless.

Both methods work effectively. But for large projects, the file-based approach becomes extremely difficult to manage.

This scalability deficit brings to light the efficiency of Transifex native in localization as translations are not included in your codebase as shown in this guide.

Need more info on how fileless JavaScript localization works? Feel free to check out Transifex Native's documentation.

Android Localization: A Step-by-Step Guide to Localize your App

George Kasiouras — Tue, 02 Aug 2022 14:15:07 +0000

Did you know that Android holds 72.11% of the global market share making it the leading operating system worldwide?

With so many people using Android devices, your app must be relevant to them if you want to go global. The best way to do this is through Android localization of your app—the majority of the world doesn't speak English, so users prefer applications that display text, numbers, currency, etc. according to their region.

A lot of developer tools are available in Android Studio to implement app localization. But this can turn complex as you need to rack up in-house resources and teams capable of building and managing localization from scratch.

This tutorial shows you how to localize your Android app by using Transifex.

Transifex is a localization management tool that you can use to upload, manage, and translate all of your content. And you can do that with one of two ways:

File-based
Fileless with automatic push & pull requests

Here is how to do it with both methods!

What Is Android Localization?

Localization (l10n) is how your product or app translates and adapts itself to the specific needs of a locale.

Android localization deals with this process by adjusting various elements of your app including text strings, numbers, audio files, and image formats, to suit the user experience.

But before you step into localization, it is important to internationalize (il8n) your application elements. Ensure that your text resources are not hardcoded to remove any language dependencies, enabling smooth localization for different target audiences.

Android Localization: Getting Started

The first step is to create a Transifex account—sign up, which is free for 15 days, or free forever if you are using the open-source version.

After the account creation, you will be asked to create a project. Alternatively, you can also explore their demo project to get an overview of how the platform works.
On the next page, choose your project name and type. You can either opt for ‘File Based’ or ‘Native’ as your project type.
Choose the main language of your application and the target language that you will be translating the content to. Here, we are choosing English and French as references.
Once you are done, click on ‘Create Project’

File-Based Android Localization

This app localization method includes a pretty straight-forward approach:

You upload the source files to Transifex.
The files are translated according to the target language file.
The translated files are downloaded and moved back to the project.

Android uses an XML-based file format for localization with three types of entries: strings, string-array, and plurals.

Upload A Source File

Once you are inside your project dashboard, select the project you want to create a translation for.

In case there aren’t any existing resources, drag and drop your file or click on ‘Upload a File’.

Select your file, edit the resource name, and choose the file format. Once done, hit on ‘Upload File’.

If your project already has resources, click on ‘Resources’ from the navigation menu. On the next page, select ‘Add Resources’ to upload the source file.

Drag and drop your file or click on ‘Select Resources’ to import it.

Change the name of the resource and choose the file format. Once done, click on ‘Upload File’.

Upload A Translation File

If you already have translations done outside of Transifex, you can import them into the platform. In this case, any existing translations will be overwritten with the ones from the uploaded file.

From the project dashboard, click on the project you want to add the translations to.
Click on ‘Resources’
Click on the source file you would like to add translations for
Click on the target translation language

When the popup appears, click on ‘Upload File’ or ‘Upload XLIFF file’.

Use Upload File when the translation file is of the same format as the source file. If your translation file is downloaded earlier from Transifex as an XLIFF and you want to upload it again, use Upload XLIFF File.

Use The Editor

Translators can use Transifex's inbuilt editor to work on content without having to worry about handling files. It can be accessed from any web browser, and multiple people can translate the same document simultaneously.

After you have uploaded your source file, select it and click on ‘Translate’. On the next page, you can view the source strings on the left and an editor for translation.

The strings can be edited manually or via machine translation (Google Translate, Microsoft Translator, Amazon Translate, DeepL Translate, or KantanMT). Machine translation is not generally recommended but can be helpful in certain cases, for example, if you are dealing with a lot of non-customer-facing content.

Use the editor to enter the translations for the specific strings and click on "Save Translation." Once done, review it to make any additional changes and save it.

Download the Translated File

After the translations are done, it’s time to download the file.

From the project navigation menu, choose the project you are working on.
Select ‘Resources’ link and click on the resource that has been translated.
Select the target language for translation.
In the popup, click on ‘Download for use". It gives you only translated strings in the file. In case you want only reviewed strings, hit 'Download only reviewed translations'. .Use 'Downloaded file to translate’ if you want to get untranslated source strings show a blank translation field. To translate outside Transifex, select ‘Download for translation as XLIFF’.

While this is a great approach for developers looking to handle the entire situation manually, complexity may rise when new strings are added or translations have to be updated. Also, having multiple developers handle translations manually doesn’t seem to be the best way to manage large-scale data.

If you are someone who doesn’t like the idea of manual processes, you can easily implement Android localization in your app by integrating Transifex Native.

Android Localization: The Fileless Solution

If you don't want to bother with the whole process of the file-based method, Android Localization with Transifex Native only requires you to install the provided SDK to your app and you are ready to push or pull content for localization directly with Transifex, with no need for files.

With Native SDK, localization is done parallelly when any new code is released to your application.

Use these steps to install the Transifex SDK in your application and get started with your Android localization:

Create Transifex Native Project

To get started, you will need to head to Transifex create an account, if you don't have one already, and create a native project. Then select ‘Create a new project’ and choose the type as Transifex Native.

On the next page, you will find the dashboard where you are asked to share certain instructions with your developer team. You will also find ‘Generate Native Credentials Now’ at the bottom of the screen.

Generating Native Credentials

The Native credentials—TOKEN and SECRET are used in all the data exchanges between the Transifex Native and your application.

API TOKEN – It reads (GET) content from Transifex Native into your app.
API SECRET – It sends (POST) content from your application to Transifex Native for localization.

Generate the credentials and keep a copy for all future cases. Once created, you can manage them from the resources link.

Setup Android SDK

The Android Native SDK requires 18 (Android 4.3) or higher and uses appcompat 1.2.0.

Include the SDK as a package dependency, implementation **'com.transifex.txnative:txsdk:0.x.y'** and replace ‘x’ and ‘y’ with the latest version numbers
Configure the SDK in your Application class and replace the with the one provided in your Transifex Native project.
You will need to replace in your code with the languages you want your app to display.

Here’s a configuration example:

Internationalize Your Code

On top of the existing string resource-related methods, like getString() and getText(), the SDK offers Transifex Native's OTA translation capabilities.

To use the SDK in multiple areas of your code, refer to this documentation here.

Push Source Content To The Content Delivery Service

Use the CLI tool for exporting the strings from your app to Transifex for localization.

To run the CLI tool, replace /path/to/ with the folder you added the tool in, as seen below.

Replace app_module_name with the name of your module that refers to the strings.xml file containing your source content.
Use the push command of the command-line tool to provide the transifex_token and transifex_secret that you created in your project.

Pull The Localized Content

You can export the translated content to your code with the pull command from the command-line tool.

Replace the with your app module’s name, with your Native Project token, and with the target languages for translations.

If there are no cached translations found, by default, the Android Native SDK uses the existing strings.xml file and translations already cached in the app.

Use the command fetchTranslations() to get the latest translations for all locales in your app. These will be available the next time your app runs.

Note: Native performs CDS cache invalidation automatically.

Conclusion

Whether you choose the file-based format or Transifex Native to work with, following these steps will let you easily perform translations for your Android app.

While the file-based format is a more manual approach for your localization where teams are in charge of all exports and imports of content to and from your project code, Transifex Native provides a simpler way to integrate the platform with your application.

The simple UI and dashboard ensure your teammates are collaborating perfectly at all steps even if they are non-developers.

So invite your team or even crowdsource your translations if you are an open-source project looking to engage with your community.