Managing Images for Localization in Tizen .NET Applications

[Samsung Newsroom]

Localization is the process of translating an application’s resources into multiple languages. In my previous post, Managing Strings for Localization in Tizen .NET Applications, I explained how to manage strings for localization. I strongly recommend you to read it before you get started.

This post explains how to localize images in a Tizen .NET application. You can obtain the sample application used in this post here.

Add image files

Devices have a range of screen sizes and pixel densities, so you may need to display density-dependent images. Resx files can store binary data such as images, but does not meet this need. Therefore, the localization functionality provided by Tizen should be used.

1. Add localized images
   On Tizen, localized images are stored using a naming convention for folders in the res/contents directory. Folders are named LANGUAGE_REGION-DPI. For example, the folder for the American English language supporting all DPI is named en_US-All.

   Visual Studio Tools for Tizen provides the Resource Manager tool to create folders for each language you want to support. Using this tool is recommended for convenience and prevention of mistakes.

   Select Tools > Tizen > Resource Manager in the Visual Studio menu bar and select the Configuration tab In the Resource Manager window. In the Configuration tab, select the Language and DPI you want to support then click Add.

   

   The resource folders are created automatically in the res/contents directory. Add localized images into each folder for each language.

2. Add the default images
   If your app runs in a language for which it does not provide localized images, Tizen displays images from the res/contents directory instead. Therefore, you should add the images for the default language into the res/contents directory.

   

   rex.xml is created automatically after building your app, which is used internally when finding a localized image. You should not edit this file because it is updated automatically.

Display a localized image

You can get the path of a localized image using the Tizen.Applications.ResourceManager class. Using this class, you can update the source of image whenever the language setting of the device is changed.

<ContentPage
    x:Class="LocalizationSample.Views.CenterLayoutPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ext="clr-namespace:LocalizationSample.Extensions"
    xmlns:viewModels="clr-namespace:LocalizationSample.ViewModels">
    <ContentPage.BindingContext>
        <viewModels:CenterLayoutViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <StackLayout Margin="0, 40, 0, 30" VerticalOptions="FillAndExpand">
            <Image Source="Flag.png" />
            <Label
                Text="{ext:Localizing CountryName}"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

In XAML, the localized version of an image is displayed if your app has the localized image and sets the image name as the source of the image. Internally, the localized image is set using Tizen.Applications.ResourceManager. But that image is not changed on-the-fly when the language setting of a device is changed while your app is running.

The XAML markup extension LocalizingExtension, introduced in my previous post, can be a good solution to meet this requirement. This extension enables text to be localized when an application is started and when the language setting is changed. Because the image name Flag.png is not found in any Resx resource file, the image name is returned and the localized image is set internally. Then the image can be displayed as we want.

<ContentPage
    x:Class="LocalizationSample.Views.CenterLayoutPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:ext="clr-namespace:LocalizationSample.Extensions"
    xmlns:viewModels="clr-namespace:LocalizationSample.ViewModels">
    <ContentPage.BindingContext>
        <viewModels:CenterLayoutViewModel/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <StackLayout Margin="0, 40, 0, 30" VerticalOptions="FillAndExpand">
            <Image Source="{ext:Localizing Flag.png}" />
            <Label
                Text="{ext:Localizing CountryName}"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Sample application demo

You can see that the text (CountryName) and the image (Flag.png) on the display is changed when the language setting is changed.

Alternative solution

So far, I have explained how to manage images using the Tizen localization functionality. But there is a weakness in this functionality. The name of the folder for localized images can’t use only the language code without a country code, such as es-All. That is, you need to create folders for each Spanish-speaking country such as es_ES-All, es_MK-All, and so on.

Alternatively, you can use Resx resource files and LocalizingExtension. Add an image to the res/contents/es-All folder and create a Name/Value pair in the AppResources.es.resx file that consists of the image name and the location of the image using the relative path from the res directory.

Then, LocalizingExtension enables res/contents/es-All/Flag.png to be displayed when your app runs in any Spanish language setting. But there is a weakness in this mechanism too: a density-dependent image is not selected automatically. Therefore, your app needs to determine which density-dependent image to display.

Make your application global

To learn more about developing a world-ready application, see the Globalizing and localizing .NET applications guide.
In addition, please do not hesitate to visit Tizen .NET Portal and create an issue if you have any questions.

View the full blog at its source