Titanium Community Questions & Answer Archive

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

Do backgroundLeftCap and backgroundTopCap work on Android buttons?

Does Android support intelligent stretching of background images for buttons in Titanium mobile? Should the backgroundLeftCap and backgroundTopCap properties have any effect under Android?

I am trying to use an image which is 11 pixels wide. It has 5 pixel wide corner radius curves, with a single pixel in the middle to be used for the stretch. So I tried setting both caps to 5 pixels but nothing I do seems (whether 5 or something else) seems to have any effect and the image just seems stretched to fit the button size instead of honoring the caps.

I even tried renaming the image xxx.9.png in hopes that may allow Android to treat it as a NinePatchDrawable image (see http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch ).

I found a thread asking about these caps in views, and the answer was that they are only supported in buttons and text fields. But I am trying to use them on a button. See this thread:


I am using Titanium mobile 1.4.3 because my project won't run under the nightly 1.5.0 builds.

— asked November 29th 2010 by Doug Handy
  • android
  • backgroundleftcap
  • image
  • mobile
  • strech

5 Answers

  • Doug

    Personally, I use 9Patch images when possible, although currently it only works on android. The 9Patch tool will create and save them using the correct extension. It will also indicate whether the image contains any errors, thus helping to ensure that it is valid.

    — answered November 29th 2010 by Paul Dowsett
    1 Comment
    • To answer your question, yes I believe the background*Cap properties work under android

      — commented November 29th 2010 by Paul Dowsett
  • I've just noticed that if you specify a filename, eg 'refresh.png' and a '.9' version exists, eg. 'refresh.9.png', Android will preference the 9-patch version. So it should be possible to use the filename 'refresh.png' in your code, put a 'refresh.9.png' in android/ and a 'refresh.png' in iphone/. Hope this helps someone having the same issue.

    — answered August 21st 2011 by Josh Sharp
    1 Comment
    • This might come in handy (this reminds me of the epiphany I had with the @2x on iOS development :p)

      — commented January 24th 2012 by Robbe Clerckx
  • Hal,

    I got my buttons to stretch properly on Android after using the 9Patch Tool, so thanks. From my experiments using 1.4.3, it seems Android ignores the backgroundXxxCap properties and you must use a proper *.9.png for the images to stretch correctly.

    But then those same images don't look right in iOS due to the extra 1-pixel partial lines in the edges. So what I ended up doing was changing my image names to .9.png then putting a real 9patch version in the Resources/android folder, and my former non-9patch version in the Resources/iphone folder. Still called .9.png, but without the edges.

    Is that what you do? Is there a simpler way to make them properly stretch on both platforms?

    Thanks again for the pointer to the 9patch tool. I was so close and yet so far…

    — answered November 30th 2010 by Doug Handy
  • Hi again, Doug

    I'm glad you could make use of the 9patch tool - it was the first time I had heard of it, and I found it pretty cool once I got used to it.

    What I would do is write a wrapper in the form of a function around the logic that constructs an image file path and name based on platform, and then use this function in my buttons' image properties.

    Hope this helps.

    — answered December 1st 2010 by Paul Dowsett
  • We're two years down the line, and the docs still say that backgroundLeftCap and backgroundTopCap are iOS only. In my experience, they do have an effect when used on Android, but the effect is unpredictable and different from what happens on iOS.

    On iOS if you set leftCap to 15, then the leftmost 15 pixels are 'protected' and the 16th leftmost pixel is stretched (and the remaining pixels are protected). On Android I get the impression that if you set leftCap to 15, the first 15 pixels will be stretched until the image fills the assigned space. But I could be wrong here. Suffice it to say the result is just different on the two platforms.

    — answered April 18th 2013 by remko posthuma
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.