Thursday, October 7, 2010

Creating a Titanium gradient button for iPhone

This took a while to figure out. I wanted to get a gradient button in Titanium but there were a number of variables that didn't seem to work properly. Here is a finished button with a gradient from black to lighter gray:

closeButton = Titanium.UI.createButton({
title:'Close',
width:150,
height:40,
style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN,
borderRadius:10,
font:{fontSize:16,fontFamily:_fontFamily,fontWeight:'bold'},
backgroundGradient:{type:'linear',
colors:['#000001','#666666'],
startPoint:{x:0,y:0},
endPoint:{x:2,y:50},
backFillStart:false},
borderWidth:1,
borderColor:'#666'
});

It seems that a few items are critical to make it work:

1. You have to define the style as "style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN" -- BORDERED will not work and if you don't have a style it also won't show.
2. Make sure that the gradient property for backFillStart is false.
3. There seems to be a bug when you put in #000000 as one of the colors. You need to set it to #000001 (or something like that), in order to get black to show

No comments: