How do I create a customer style progress bar using titanium?

Question

I want to create my own progress bar using titanium instead of using the createProgressBar function ... or I want to be able to style (change the look, background, etc) of the progressBar created using createProgressBar function. How can I do that?

var ind2 = Titanium.UI.createProgressBar({
    width : 200,
    min : 0,
    max : 90,
    value : 0,
    height : 150,
    color : '#000000',
    font : {
        fontSize : 14,
    },
    top : 60
});

on iOS or android? For iOS this isn't really possible, aside from hacking, you would have to make a module. [Check this out.](http://stackoverflow.com/questions/6228626/are-there-customizable-progress-bars-for-ios) — Josiah Hester, Nov 02 '12 at 05:15

score 2 · Accepted Answer · answered Nov 02 '12 at 20:43

Use views. Spruce it up with graphics.

var win = Ti.UI.createWindow({
    backgroundColor: 'white'
});
var track = Ti.UI.createView({
    width: 100, height: 30,
    backgroundColor: 'red'
});
var progress = Ti.UI.createView({
    left: 0,
    width: 1, height: 30,
    backgroundColor: 'green'
});
track.add(progress);
win.add(track);
win.addEventListener('open', function () {
    progress.animate({
        width: 100,
        duration: 5000
    });
    // or: progress.width = 100;
});
win.open();

score 0 · Answer 2 · answered Oct 08 '13 at 09:47

if it's iOS only, you can use the NappAppearance module and customize your progressbar like this:

var NappAppearance = require('dk.napp.appearance');
NappAppearance.setGlobalStyling({
    progressBar:{
        progressTintColor:"#CD1625",
        trackTintColor:"#ececec",
        progressImage:"/images/components/progressBarBG.png",
        trackImage:"/images/components/progressBarTrack.png"

    },
});

How do I create a customer style progress bar using titanium?

2 Answers2