A demo project for my Titanium Mobile Android ViewPager Module
Latest commit 690b90c Apr 1, 2012 @mudderman Updates for v1.2



This module brings the Android ViewPager to the Titanium Mobile SDK.

You can download a pre-built version of this app on Google Play


To create a new view pager you use the factory method createViewPager(opts).

var viewPager = module.createViewPager();

possible options to pass into the method through the options object are:

data - Array

An Array of TiView objects, alternatively as an object like this:

data: [
    { title: "Tab title", view: viewObject }

or like this if you don't need tabs:

data: [
    tiView1, tiView2, tiView3

tabs - Object

The main options for styling the tabs. Can have the following attributes:

Attribute Type Description
style Integer constant Can be any of the following constants: NONE, NORMAL, SCROLLING, MARKET
backgroundColor Hexadecimal string The background color of an unselected tab
backgroundColorSelected Hexadecimal string The background color of the selected tab (Not if style is MARKET)
lineColor Hexadecimal string The color of the line underneath the tab view
lineColorSelected Hexadecimal string The color of the line between the selected tab and the bottom line
lineHeight Integer Height of the bottom line
lineHeightSelected Integer Height of the line of the selected tab
font (Object)
size Integer The size of the font on the tab
color Hexadecimal string The font color of an unselected tab
colorSelected Hexadecimal string The font color of the selected tab.
bold Boolean If the text should bold or not.
padding (Object)
left Integer the left padding of a tab
top Integer the top padding of a tab
right Integer the right padding of a tab
bottom Integer the bottom padding of a tab
title Integer Padding between tabs. NOTE: Only if style is MARKET
clip Integer The padding of the left and right visible tabs. A negative value will push them ouside the view area and hide some (or all) of the text. NOTE: Only if style is MARKET

indicator - Object

If you want your viewpager to have an indicator at the bottom of the view add this to the options.

For now you can use one attribute to the object, but more are planned.

Attribute Type Description
style Integer constant Can be NONE or LINE
color Hexadecimal string The color of the line
height Integer The height of the line
fadeOutTime Integer (default: 200 miliseconds) In milliseconds. How long before the line starts to fade out
fadingTime Integer (default 500 milliseconds) In milliseconds. How long the line should be fading.


You can add three different type of events for the ViewPager:

pageChange, will trigger each time the page was changed. Parameters returned from event: to, from

pager.addEventListener("pageChange", funtion (e) {
    Ti.API.debug("Page changed from " + e.from + " to " + e.to);

pageScroll, will spam you with information about the page currently being scrolled: Parameters returned: page, offset, offsetPx

pager.addEventListener("pageScroll", function (e) {
    Ti.API.debug("Scrolling page " + e.page + " offset: " + e.offset + ", offset in pixels: " + e.offsetPx);

pageState, the state of the page being scrolled Parameters returned: page, state, stateString

pager.addEventListener("pageState", function (e) {
    Ti.API.debug("Page " + e.page + " has state " + e.state + " = " + e.stateString);

state can be any of the contants:


stateString is just a string representation of the state: idle, dragging and settling



For indicator style: LINE (more coming...)



See the demo project at github