Appcelerator Titanium bug in ListView custom templates on Android

Question

I've recently upgraded my appcelerator projects from the 5.5.1 titanium SDK to 6.1.0.

Custom templates for list views on Android behave differently in 6.1.1 to how they did in 5.5.1 and all previous versions of titanium I've used. The problem is nesting horizontal layout views inside vertical layout views.

In this example of the bug a list view displays the name of a fruit in English, then displays the French, German and Spanish translations horizontally but underneath the English name.

As can be seen in the attached images the iPhone version displays correctly but the Android version has the translations missing. Titanium 5.5.1 and earlier displayed correctly on both platforms.

In the custom template, I have used background colors to make it easy to see where each view and label is displayed.

Does anyone know why the subtitles are missing in the Android version? Is this a Titanium bug or am I doing something wrong?

Here's the iPhone image which displays correctly:

Here's the Android image which has the subtitles missing

Here's all the code required to reproduce the Android bug. Ensure you use the Titanium 6.1.0 SDK

var win = Ti.UI.createWindow({backgroundColor: 'white'});

// Create a custom template that displays the English title, then three
// subtitles for French, German & Spanish laid out horizontally below the
// English title
var myTemplate = {
    properties: {
        height: Ti.UI.SIZE,
        width: Ti.UI.FILL
    },
    childTemplates: [
        {
            type: 'Ti.UI.View',
            properties: {
                backgroundColor: '#fcf',
                height: Ti.UI.SIZE,
                layout: 'vertical',
                left: 15,
                right: 15,
                width: Ti.UI.FILL
            },
            childTemplates: [
                {                            // English 
                    type: 'Ti.UI.Label',     // Use a label for the text 
                    bindId: 'english',       // Maps to the english property of the item data
                    properties: {            // Sets the label properties
                        color: 'black',
                        font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                        left: 0
                    }
                },
                {                               // Container for language subtitles
                    type: 'Ti.UI.View',
                    properties: {
                        backgroundColor: '#ffc',
                        height: Ti.UI.SIZE,
                        layout: 'horizontal',   // subtitles should be laid out horiznontally
                    },
                    childTemplates: [
                        {                            // French 
                            type: 'Ti.UI.Label',     // Use a label for the text 
                            bindId: 'french',        // Maps to the french property of the item data
                            properties: {            // Sets the label properties
                                backgroundColor: 'gray',
                                color: 'white',
                                font: { fontFamily:'Arial', fontSize: '14dp' },
                                right: 10
                            }
                        },
                        {                            // German 
                            type: 'Ti.UI.Label',     // Use a label for the text 
                            bindId: 'german',        // Maps to the german property of the item data
                            properties: {            // Sets the label properties
                                backgroundColor: 'red',
                                color: 'white',
                                font: { fontFamily:'Arial', fontSize: '14dp' },
                                right: 10
                            }
                        },
                        {                            // Spanish 
                            type: 'Ti.UI.Label',     // Use a label for the text 
                            bindId: 'spanish',       // Maps to the spanish property of the item data
                            properties: {            // Sets the label properties
                                backgroundColor: 'blue',
                                color: 'white',
                                font: { fontFamily:'Arial', fontSize: '14dp' },
                                right: 10
                            }
                        }
                    ]
                }
            ]
        }
    ]
};

// Create the list view
var listView = Ti.UI.createListView({
    templates: { 'template': myTemplate },
    defaultItemTemplate: 'template',
    top: Ti.Platform.osname === 'iphone' ? 20 : 0   // Allow for iOS status bar
});

// Create the list data set
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
var fruitDataSet = [
    { english: {text: 'Apple'}, french: {text: 'Pomme', visible: true}, german: {text: 'Apfel'}, spanish: {text: 'Manzana'}},
    { english: {text: 'Banana'}, french: {text: 'Banane'}, german: {text: 'Banane'}, spanish: {text: 'Plátano'}}
];
fruitSection.setItems(fruitDataSet);

// Add the data set to the list view
var sections = [fruitSection];
listView.setSections(sections);

// Add the list view to the main window and open it
win.add(listView);
win.open();

Answer 1

Appcelerator have fixed this in Titanium SDK 6.1.1.v20170615113917