Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

backgroundGradient usage?


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?


— asked May 16th 2010 by Nigel Elliott
  • backgroundgradient

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:

    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
    — answered October 7th 2010 by brian kurzius
    • The note about the style being PLAIN is critical and should be included in the docs. The API docs indicate that PLAIN is the default style, but gradient didn't work for me until stating it explicitly.

      — commented November 28th 2010 by Ian Maddox
    • Also, it appears that #FFFFFF doesn't work, but #FFFFFE does.

      — commented January 28th 2011 by Dave Miller
    • Hey thanks… that works with the gradient, BUT how can i then maybe give it an other gradient when pressing/clicking the button??? Thanks much for feedback! :)

      — commented August 23rd 2011 by Christian Koch
    • When I use this code I get the gradient appearance, but the button does not "glow" when clicked. Problematic for userX. (I have copied and pasted it a couple of times - only change was to add a font family.)

      — commented September 7th 2011 by Patty Mapes
    • Brilliant! Solved our problem in creating buttons for iOS app. Thanks a ton!

      — commented November 18th 2011 by Taazza Dev
    • but its not works with titanium sdk version 2.1!

      — commented July 6th 2012 by chezhian p
  • 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.

    — answered May 19th 2010 by Magnus Rosenquist
    • Hi I'm also trying to achieve a gradient effect on a view-toolbar for android. I tried the code in kitchen sink but couldn't get it working. Is this even possible with android?


      — commented June 9th 2010 by Armagan Ozkan
    • Is this supported on Android?

      — commented October 21st 2010 by David Smith
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.