The applications for mobile phones share similar issues of web sites, one of them is the language support. Accordingly to user's preferences or where the user is, the language of the application should change. Actually, it is not only a problem only of language, but also images, sometimes colors and style too. In this article there are the guide lines to create an international application that can run for every client, all over the world.

The first step to fully appreciate localization, namely L10N, from the first and the last word of the name L and N and 10 letters between them, is to create an application... without L10N. This approach is useful for international application too because in the case in which the language is not supported there should be a default case to present: in this way every possible case is consider and the application can work properly in every situation.

The application concerns a text and a button associated with a flag. At a code level there are 2 TextView and a Button.

The common elements

The directories where to put the files are under the directory res. In particular the text, graphic elements and layout should be put respectively in: res/values, res/drawable, res/values. A useful instrument to work with is Eclipse that is an IDE that gives advantages. The first step is to create a new project and Activity called HelloL10N. Eclipse will automatically create the directories to put the localized elements. Without Eclipse, it is simply necessary to manually create them.

Then it is necessary to declare the elements we want to use in our application (the 2 TextView and the Button): it is possible to do that in res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/text_a"
    />
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="@string/text_b"
    />
<Button
    android:id="@+id/flag_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    />
</LinearLayout>

The default version

Now that there is the declaration for the resources to use, it is necessary to insert the real values of them. For example, in the main.xml we have declared 2 TextView. In the file res/values/string.xml we say which elements to get:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Hello, L10N</string>
    <string name="text_a">Shall I compare thee to a summer"'"s day?</string>
    <string name="text_b">Thou art more lovely and more temperate.</string>
    <string name="dialog_title">No Localisation</string>
    <string name="dialog_text">This dialog box"'"s strings are not localised. 
        For every locale, the text here will come from values/strings.xml.</string>
</resources>

The default version uses English and there is the link between files using the name text_a and text_b, presented in both of the files.

In a similar manner, an image with the UK flag can be added in the directory for the graphical elements: res/drawable.

As every application, there is also the java code. In the src/HelloL10N.java adding the onCreate() method:

// assign flag.png to the button, loading correct flag image for current locale
Button b;
(b = (Button)findViewById(R.id.flag_button)).setBackgroundDrawable(this.
      getResources().getDrawable(R.drawable.flag));
// build dialog box to display when user clicks the flag
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage(R.string.dialog_text)
    .setCancelable(false)
    .setTitle(R.string.dialog_title)
    .setPositiveButton("Done", new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int id) {
        dialog.dismiss();
        }
    });
final AlertDialog alert = builder.create();
// set click listener on the flag to show the dialog box 
b.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        alert.show();
    }
    });

In the sample code there is the instruction that says to use an AlertDialog that displays a generic message, in case of not localization.

Run the default version

Running the application, it will show in any case the same message and flag.

Localization L10N

To move to the next step, it is necessary to know which behaviour the application should do.

To fully specifies which resources to put in what directories, the next table is a good summary.

If there is not a resources under the appropriate directory, the application will use the default one.

Localize the strings

To localize the string is necessary to create other files. It possible to do that with Eclipse or directly. The first file is res/valuse-de/strings.xml that contains the German (de) strings:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Hallo, Lokalisierung</string>
    <string name="text_a">Soll ich dich einem Sommertag vergleichen,</string>
    <string name="text_b">Der du viel lieblicher und sanfter bist?</string>
</resources>

In a similar way res/values-fr/strings.xml has the French strings:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Bonjour, Localisation</string>
    <string name="text_a">Irai-je te comparer au jour d'été?</string>
    <string name="text_b">Tu es plus tendre et bien plus tempéré.</string>
</resources> 

And res/values-ja/strings.xml the Japanese ones:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="text_a">あなたをなにかにたとえるとしたら夏の一日でしょうか？</string>
    <string name="text_b">だがあなたはもっと美しく、もっとおだやかです。</string>
</resources>

Be sure that Japanese characters are visible.

Localize the images

The images need simply to be put in the correct directories. For example, the German images should be put into the directory res/drawable-de-rDE/flag.png. The other directories will be: res/drawable-fr-rFR/, res/drawable-fr-rCA/, res/drawable-en-rCA/, res/drawable-jp-rJP/, res/drawable-en-rUS/. In this way it is possible to specify both the language and the country in wich it is used: for example there are twice Canada, one for Franch speaking and one for English.

Running the application

The application is now ready to be launched. To test it with different language settings, it is necessary to go to Setting application → Menu → Settings → Locale & text → Select locale. Then you can choose one of the settings that are available for the application or one that is not, to see the default behaviour.

The possible results are shown. In the case of German language in Germany, French in Canada, and Japanese in Japan the perfect behavoiur is shown for both text and image. In the case of German language in Switzerland there is only the correct text and the default UK flag is displayed. If Romansh in Switzerland, no resources are available, therefore the default version is shown.

Conclusion

This application shows how to use the localization to show the correct information in different part of the world. This include both text and images and it can be extended to style sheet too. It is important to consider the division between layers, style and context with the source code. It makes the application easier to create, manage, test and maintain.