Titanium Studio - Cannot change the button text of my Tabs on Android devices

Question

I have implemented my own manual method of switching the app's localization within the application without having to modify the device's localization settings. The user either clicks on a tabbed bar via a set of right nav buttons on iOS devices, or use the native menu on Android devices to select the desired language.

This method works great on iOS devices. It almost works great on Android devices in that all text labels are immediately set to the respective language after the user makes their selection. However, the native TabGroup tab titles are not changing on my Android devices. They change immediately on my iOS devices.

I've tried many different methods to try and work around this. I tried removing the existing tabs from the TabGroup, but Android doesn't support this, at least not while using Titanium. I tried closing the tabGroup then re-opening it, but this just causes my app to lock up. I also tried looping through all my tabs and setting the titles that way to no avail. I also attempted to use the splice() command on the tabs array of the tabGroup, and that just throws a TypeError complaining about not finding a default value for object.

This is becoming very frustrating. I've looked at custom tab options available, including the Titanium Marketplace module called Tabulous. I've not been thrilled with any of those alternatives, particularly with their poor horizontal layout performance or reliance on using images instead of a mix of images and text.

One thing I do know is that on Android devices, my tab titles are being changed, because, within my event listener where I set the tab titles on language selection, I can loop through the tabs in my tabGroup collection and output the titles which reflect the chosen language. However, Android for some reason does not redraw the tabs to show the new text.

Here's a snippet of my event listener where I set the tab titles:

Titanium.App.addEventListener('langChanged', function() {
    homeTab.title = al.L('home_win_title');
    servicesTab.title = al.L('services_win_title');
    mediaTab.title = al.L('media_win_title');
    contactTab.title = al.L('media_win_title');

    // Android test:
    if (Ti.Platform.name == 'android') {
        for (var t in tabGroup.tabs) {
            // The alert below returns the expected title based on the language selection!
            alert(tabGroup.tabs[t].title);
        }
    }
});

As I said, on my test iOS devices, the tab titles are updated as expected. On Android devices, they do not change (are not re-drawn), though the alerts I throw in the above loop show the correct text.

Any ideas, anyone?

Answer 1

I ran into the same issue while also trying to support multiple languages in an app, and this post on the Appcelerator Q&A site appears to confirm that it's not possible to change the tab title on Android.

However I got around this problem by closing the tab group and opening a new one - so it is possible to do that, and it may be that you need to refactor some of your app to prevent the locking issue you mention.