backgroundGradient usage?
Hi
I'm trying to apply a gradient to a button using the backgroundGradient property but the documentation doesn't really give much guidance on how to do this and there is nothing in the Kitchen Sink as far as I can see.
The docs say:
'a background gradient for the view with the properties: type,startPoint,endPoint,startRadius,endRadius,backfillStart,backfillEnd,colors.'
What types does it accept (I'm guessing linear or radial?) and how do I define the colors?
Thanks.
2 Answers
-
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:
- 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.
- Make sure that the gradient property for backFillStart is false.
- 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
-
In the latest KitchenSink for 1.3.0 there is some samples in the "examples/gradient.js" file, which is accessible from within KitchenSink through the "Views" demo.
Hope this helps.