Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26477

Ti.Locale.setLanguage is not applying the locale effects properly on Android & iOS

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Critical
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: Release 7.5.0
    • Component/s: Android
    • Labels:
      None
    • Environment:

      Ti SDK - 7.4.0.GA
      Android 8.1.0
      iOS 11

    • Story Points:
      3
    • Sprint:
      2018 Sprint 22

      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

          Activity

            People

            • Assignee:
              gmathews Gary Mathews
              Reporter:
              prashant_saini Prashant Saini
            • Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-6640
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code