carousel in Android

Hello Everyone,

I have Implemented pagination in my app ... for iPhone its working perfectly fine but in android it shows two arrows for left and right respectively . is there any way to give it look and feel as iPhone. i don't need arrows instead proper carousel like in iPhone.

Regards

So the way I handled it was to create the scrollable view and define a new view full of imageviews, where I can change out the images depending on which dot is to be highlighted.

Take a look at my sample code below. SliderNavView.js should be fully functional, although you'll need two "dot" images -- dot_on.png and dot_off.png.

The app.js is not intended to be a functioning example; it's just trying to show you how to hook the nav view into your app.

app.js:

var sliderviews = [];
 
// ... build up the array of views to show in your scrollable view ...
 
var _sv = Ti.UI.createScrollableView ({...});
 
var SliderNavView = require ('SliderNavView.js');
 
// note -- you probably want to adjust the height based on screen resolution, but
// 24 will get you started
var nv = new SliderNavView ({
    ...
    height: 24,    
    numItems: sliderviews.length
});
 
_sv.addEventListener ('scroll', function (e) {
    nv.xsetCurrItem (e.currentPage);                
});

SliderNavView.js:

function SliderNavView (params)
{
    var _self = null;
    var _iviews = [];
 
    var _ivwidth = 0;
 
    var _numItems = 0;
    var _currItem = 0;
 
    var newparams = {};
    for (var k in params)
    {
        if (k == 'numItems')
        {
            _numItems = params[k];
        }
        else
        {
            newparams[k] = params[k];
        }       
    }
 
    _self = Ti.UI.createView (newparams);
 
    _ivwidth = _self.height;
 
    var x = 0;
    if (_self.width > 0)
    {
        x = parseInt ((_self.width - _ivwidth * _numItems) / 2);
    }
 
 
    for (var i = 0; i < _numItems; i++)
    {
        //Ti.API.debug ('[SliderNavView] adding dot at ' + x);
        var iv = Ti.UI.createImageView ({
            top: 0,
            left: x,
            height: _self.height,
            width: _ivwidth,
            image: (i == _currItem) ? '/images/dot_on.png' : '/images/dot_off.png',
            opacity: 1,
            zIndex: 100
        });
        _iviews.push (iv);
        _self.add (iv);
 
        x += _ivwidth;
    }
 
    _self.xsetCurrItem = function (idx) 
    {
        if ((idx < 0) || (idx > _iviews.length - 1) || (idx == _currItem))
        {
            return;
        }
 
        if ((_currItem >= 0) && (_currItem < _iviews.length))
        {
            _iviews[_currItem].setImage ('/images/dot_off.png');
        }
 
        _iviews[idx].setImage ('/images/dot_on.png');
 
        _currItem = idx;
    };
 
    return _self;
}
 
module.exports = SliderNavView;