Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26477] Ti.Locale.setLanguage is not applying the locale effects properly on Android & iOS

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2018-10-23T20:31:56.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.5.0
ComponentsAndroid
Labelsn/a
ReporterPrashant Saini
AssigneeGary Mathews
Created2018-10-12T09:30:58.000+0000
Updated2018-11-05T22:58:39.000+0000

Description

In Arabic mode, the locale should change the layout correctly like window-title to the right, home-up button on right as well. All RTL effects should be applied. However, using Ti.Locale the Arabic or RTL changes do not take place. If we use below code to apply Arabic language using Ti.Locale, the only changes that are taking place the Alert Dialog buttons are switched, but title, home-up button position, pickers are still unaffected, and it's incorrect behaviour as opposed to native Android app. *Full titanium code using Ti.Locale(not-working) and Hyperloop(working)*

var ios_nav;

var indexWindow = Ti.UI.createWindow({
    backgroundColor : 'white',
    title : 'Language Changes',
    layout : 'vertical'
});

var btn1 = Ti.UI.createButton({
    title : 'Set English using Ti.Locale',
    top : 10,
    width : Ti.UI.SIZE
});
btn1.addEventListener('click', function () {
    Ti.Locale.setLanguage('en');
    showAlert();
});

var btn2 = Ti.UI.createButton({
    title : 'Set Arabic using Ti.Locale',
    top : 10,
    width : Ti.UI.SIZE
});
btn2.addEventListener('click', function () {
    Ti.Locale.setLanguage('ar');
    showAlert();
});

var btn3 = Ti.UI.createButton({
    title : 'Set English using Hyperloop',
    top : 40,
    width : Ti.UI.SIZE
});
btn3.addEventListener('click', function () { changeByHyperloop('en') });

var btn4 = Ti.UI.createButton({
    title : 'Set Arabic using Hyperloop',
    top : 10,
    width : Ti.UI.SIZE
});
btn4.addEventListener('click', function () {changeByHyperloop('ar') });

var btn5 = Ti.UI.createButton({
    title : 'Open new Window to see changes',
    top : 50,
    width : Ti.UI.SIZE
});
btn5.addEventListener('click', openNewWindow);

indexWindow.add(btn1);
indexWindow.add(btn2);
indexWindow.add(btn3);
indexWindow.add(btn4);
indexWindow.add(btn5);

if (OS_IOS) {
    ios_nav = Ti.UI.iOS.createNavigationWindow({ window : indexWindow });
    ios_nav.open();

} else {
    indexWindow.open();
}

function showAlert(e){
    Ti.UI.createAlertDialog({
        cancel : 1,
        buttonNames: ['RIGHT', 'LEFT'],
        message: 'App language is ' + (Ti.Locale.currentLanguage == 'en' ? 'English' : 'Arabic'),
        title: 'Dialog Title'
    }).show();
}

function changeByHyperloop(language) {
    if (OS_ANDROID) {
        var Activity = require('android.app.Activity');
        var Configuration = require('android.content.res.Configuration');
        var Locale = require('java.util.Locale');
        var activity = new Activity(Ti.Android.currentActivity);

        var myLocale = new Locale(language);
        Locale.setDefault(myLocale);

        var config = new Configuration();
        config.locale = myLocale;

        // this doesn't work completely like moving scroll-bars and titles to right-edge.
        // seems Ti.Locale.setLanguage() also using Application-Context which doesn't work properly on layout-direction
        // var ctx = activity.getApplicationContext();

        // this is working fine by applying all layout and directional changes properly
        var ctx = activity.getBaseContext();
        ctx.getResources().updateConfiguration(config, ctx.getResources().getDisplayMetrics());

        showAlert();

    } else {
        alert('Hyperloop code not available on iOS. Please use Ti.Locale buttons to test language changes');
    }
}

function openNewWindow() {
    var win = Ti.UI.createWindow({
        backgroundColor : 'white',
        title : Ti.Locale.currentLanguage == 'en' ? 'English Language' : 'Arabic Language',
        layout : 'vertical'
    });

    if (OS_IOS) {
        win.backButtonTitle = '';

        win.add(Ti.UI.createLabel({
            top : 20,
            left : 20,
            right : 20,
            textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
            color : 'black',
            text : "New window opening transition animation is from right-to-left in English language.\n\nBut it should be left-to-right in Arabic language which it is not.\n\nAlso the back-arrow icon should be on different sides in both language.\n\nSo it's a bug on iOS also."
        }));

    } else {
        var picker = Ti.UI.createPicker({
            left : 20,
            right : 20,
            top : 20
        });

        var data = [];
        data[0]=Ti.UI.createPickerRow({title:'Bananas'});
        data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
        data[2]=Ti.UI.createPickerRow({title:'Mangos'});
        data[3]=Ti.UI.createPickerRow({title:'Grapes'});

        picker.add(data);
        win.add(picker);

        win.add(Ti.UI.createLabel({
            top : 20,
            left : 20,
            right : 20,
            textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
            color : 'black',
            text : 'Picker caret icon should be on right-side in English language and on left-side in Arabic language'
        }));

        win.addEventListener('open', function () {
            var actionBar = win.activity.actionBar;
            actionBar.displayHomeAsUp = true;
            actionBar.title = "Language Demo";
            actionBar.onHomeIconItemSelected = function() {
                win.close();
            };
        });
    }

    OS_IOS ? ios_nav.openWindow(win) : win.open();
}
The layout changes works all correctly ONLY using Hyperloop which replicates the native Android code. In this full sample code, using Ti.Locale, the alert-buttons are changing their positions, but title stays on left-edge in both Arabic and English language. But through Hyperloop or native Android, alert-title move to right-edge and so does the picker which is correct behaviour. After reviewing the Ti.Locale.setLanguage() method code, I was able to get only one hint that Ti SDK code is using application-context and my native Android or Hyperloop code works when using Activity's base-context. I do not know how to do this in iOS using Hyperloop, but I hope you get the issue.

Attachments

FileDateSize
Android-Alert-ar.png2018-10-12T09:24:48.000+000027781
Android-Alert-en.png2018-10-12T09:24:48.000+000027649
Android-List-ar.png2018-10-12T09:24:48.000+000048333
Android-List-en.png2018-10-12T09:24:49.000+000046784

Comments

  1. Sharif AbuDarda 2018-10-13

    Hello, Please share a full reproducible sample project that we can test to verify the issue. Thanks.
  2. Gary Mathews 2018-10-22

    master: https://github.com/appcelerator/titanium_mobile/pull/10391
  3. Lokesh Choudhary 2018-11-05

    Verified the fix in SDK 7.5.0.v20181101101355. Closing.

JSON Source