Add counter to TableViewRow

Hi there. I need to create custom table row with label, counter and right arrow (using hasChild property). Like on this picture.

I tried to do this with following code:

var data = [];
for (var item in items) {
    var tableRow = Ti.UI.createTableViewRow({
        layout: 'horizontal',
        hasChild: true
    });
 
    var text = Ti.UI.createLabel({
        text: items[item].text,
        width: 'auto',
        textAlign: 'left'
    });
 
    var counter = Ti.UI.createLabel({
        text: items[item].count,
        width: 'auto',
        textAlign: 'right',
        backgroundColor: '#ccc',
        borderRadius: 5
    });
 
    tableRow.add(text);
    tableRow.add(counter);
    tableRow.className = 'some_row';
 
    data.push(tableRow);
}
 
list= Ti.UI.createTableView({data: data});
 
window.add(list);

On Android it looks awfully:

1. Both lables are left aligned and I need "counter" label to be right aligned.
2. counter's background isn't smooth.

So can anyone help me to make such nice control?

instead of using "text align" if would be better to place them with left and right properties

Try this:

var counter = Ti.UI.createLabel({
        text: items[item].count,
        width: 'auto',
        left: '50%', // Can be % or fixed value
        backgroundColor: '#ccc',
        borderRadius: 5
});

Best,

Minh