Skip to content

AhmedMSayed/Titanium_RTL_guide

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Steps for Titanium RTL Application:

1 - Add android:supportsRtl="true" to tag in tiapp.xml

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application android:supportsRtl="true" />
    </manifest>
</android>

2 - Use if in .tss file to switch RTL & LTR

// alloy.js
Alloy.Globals.isRTL = Ti.App.Properties.hasProperty('language') ? true : false;
'#exampleLabel' : {
	color: ‘red'
}
'#exampleLabel[if=Alloy.Globals.isRTL]' : {
	right: 5
}
'#exampleLabel[if=!Alloy.Globals.isRTL]' : {
	left: 5
}

3 - add toggle button to change between languages then reopen the index to see the changes

//index.js
var button = Ti.UI.createButton({title: "Change Language"});

button.addEventListener("click", function() {
	
	if (Ti.Locale.currentLanguage == 'ar') {
	
		Ti.Locale.setLanguage('en');
		Ti.App.Properties.removeProperty('language');
		Alloy.Globals.isRTL = false;
		
	} else {
	
		Ti.Locale.setLanguage('ar');
		Ti.App.Properties.setString('language', 'ar');
		Alloy.Globals.isRTL = true;
		
	}
	
	Alloy.createController("index").getView().open();
});

4 - Set iOS 9+ is minimum in tiapp.xml

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
  <ios>
    <min-ios-ver>9.0</min-ios-ver>
  </ios>
</ti:app>

5 - Set Android 4.2 as minimum

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
  <android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest android:versionCode="17">
      <uses-sdk android:minSdkVersion="17"/>
    </manifest>
  </android>
</ti:app>

This items flip from/to RTL/LTR fine

iOS 9+

  1. LeftNavButton & RightNavButton
  2. Default ListView/TableView templates
  3. Window open transition come from right with RTL and left with LTR
  4. CollectionView list items from top right with RTL and top left with LTR

Android 4.2+

  1. ActionBar and menus items flip RTL/LTR with zero code
  2. Drawer layout come from right instead of left

Current Titanium issues RTL support issues

  1. linearlayout (horizontal/vertical layout) will not flip, Titanium calculate positions manually, same with autolayout in iOS. ref
  2. Natural direction for the text supported nativly in both iOS and Android, while Titanium has only right, left and center allignment. Android iOS
  3. Titanium has no API to change local, but we can use this module
  4. Titanium has an issue to re-open the hole UI stack on iOS, so change loal will load strings from the new selected file but will not wich RTL/LTR till you close the app and open it again.

About

Appcelerator Titanium RTL/RTL application

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.7%
  • Python 39.3%