Titanium: UI.Slider in horizontal layout

Question

I have 4 objects in a view with a horizontal layout in this order:

1. label
2. slider
3. label
4. button

labels and button are set to Ti.UI.SIZE and slider is set to Ti.UI.FILL

I am basically making my own video controls so

currentTimeLabel, slider, totalTimeLabel, playPauseButton

My issue is when I set the slider to FILL it fills the parent (which it should do I suppose) and pushes the 2nd label and button to a new line.

I need all 4 items on the same line. I've tried turning horizontalWrap to false on the parent view, but that just makes it so I cannot see the remaining two items.

The reason I am not using static widths is I need this slider to adjust its width based off the phone being in portrait and landscape modes.

If I use SIZE instead of fill, the slider basically has 0 width.

My simplified code is below:

var win = Ti.UI.currentWindow;

var transportBg = Ti.UI.createView({
    bottom:0,
    height:50,
    width:'100%',
    backgroundColor:'#50000000'
});
win.add(transportBg);

var transportControls = Ti.UI.createView({
    layout:'horizontal',
    width:'100%'
});
transportBg.add(transportControls);

var currentTimeText = Ti.UI.createLabel({
    left:25,
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE,
    text: '0:00',
    color:'#fff',
    font: {
        fontSize: 10
    },
    shadowColor: '#000',
    shadowOffset: {x:0, y:1}
});

var transport = Titanium.UI.createSlider({
    min:0,
    max:100,
    value:0,
    width:Ti.UI.FILL,
    backgroundColor:'red'
});

var totalTimeText = Ti.UI.createLabel({
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE,
    text: '0:00',
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
    color:'#fff',
    font: {
        fontSize: 10
    },
    shadowColor: '#000',
    shadowOffset: {x:0, y:1}
});

var playPauseBtn = Ti.UI.createButton({
    backgroundImage:'/images/pause.png',
    width:Ti.UI.SIZE,
    height:Ti.UI.SIZE
});
transportControls.add(currentTimeText);
transportControls.add(transport);
transportControls.add(totalTimeText);
transportControls.add(playPauseBtn);

And a screen shot of the current layout

Answer 1

In your case horizontal layout isn't very helpful and best effects can be achieved with absolute layout and setting left, right properties. The only problem which you have is that you have to make sure how much space you have to leave on both sides of slider.

Here are changes to your code which I've made:

var transportControls = Ti.UI.createView();

Removed width and layout property

var transport = Titanium.UI.createSlider({
    left: 50,
    right: 70,
    …
});

Removed width property and set left/right property.

var totalTimeText = Ti.UI.createLabel({
    right: 40,
    …
});

var playPauseBtn = Ti.UI.createButton({
    right: 0,
    …
});

Add right property.