Titanium Community Questions & Answer Archive

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

Info: Label.backgroundImage - 1.3.0 release changes

Hi there,

If you have an app using labels with backgroundImage property you may have seen these disappear post-upgrade to 1.3.0.

The reason for this is the addition of 'padding' properties to enhance stretching effects.

Therefore you will need to set paddingLeft and paddingTop to zero, paddingRight to the image width and paddingBottom to the image height, see below:

myLabel = Ti.UI.createLabel({text:"label",top:2,left:2,height:32,width:32,backgroundImage:"wb.png"});
myLabel.backgroundPaddingLeft = 0;
myLabel.backgroundPaddingRight = 32;
myLabel.backgroundPaddingTop = 0;
myLabel.backgroundPaddingBottom = 32;

Without these, background images will not display for your labels in Ti Mobile 1.3.0 (on iPhone).

cheers,
Chris.

— asked May 16th 2010 by Chris Reed
  • 1.3.0
  • backgroundimage
  • iphone
  • label
  • padding
1 Comment
  • Another tidbit… if you are wanting to apply padding properties to a background image, make sure you're not declaring borderRadius property.

    — commented June 7th 2010 by TZ Martin

8 Answers

  • Also an issue with not being able to pad the label when just using backgroundColor.

    For instance, I can not push the text in 5px using "backgroundPaddingLeft:5" so that my text is not right up against the edge of the label.

    — answered June 28th 2010 by Todd Soligo
    permalink
    0 Comments
  • Nice job, Chris! Prime example of why we need a tips and tricks section here so great tips like this don't get lost in the Q&A black hole.

    — answered May 16th 2010 by Dan Giulvezan
    permalink
    0 Comments
  • Cheers Dan,

    Here's another gotcha, if you don't include the "text" parameter the backgroundimage scaling goes "totally tonto", so ensure you have at least got: text:"",

    rgds,
    Chris.

    — answered May 16th 2010 by Chris Reed
    permalink
    0 Comments
  • Oops, thinking there may be an issue/bug somewhere in this.

    Navigating between tabs (containing windows with tableviews) after a few moves the dimensions of the label backgroundimage go rather 'doo-lally'.

    cheers,
    Chris.

    — answered May 16th 2010 by Chris Reed
    permalink
    0 Comments
  • Thanks for the head-up, finally get the backgroundImage show up but can't seem to get the correct size display despite setting it with actual image size, i have a label on scrollview data and the BG are all overlapped.

    I find that funny that extra codes have to define paddings to get BG img displayed. Anyway, i suggest a single line backgroundPaddings to define all positions such as backgroundPadding:{0 0 0 0}

    I changed label to view to get thing going instead.

    — answered May 16th 2010 by Daniel Lim
    permalink
    0 Comments
  • Hi there Daniel,

    The label backgroundImage scaling does seem fairly temperamental, mainly I found this was more common with refreshing on focus.

    >>I changed label to view to get thing going instead.

    Exactly what I'm gonna do.

    cheers,
    Chris.

    — answered May 16th 2010 by Chris Reed
    permalink
    0 Comments
  • Hi Chris,

    I also have buttons as app menu with onclick event to change background image and text color and those items are better shown with label so i can change the text properties much easier. Unfortunately the BG image height and width messed up when on click. crap! Bug indeed.

    — answered May 16th 2010 by Daniel Lim
    permalink
    0 Comments
  • Since backgroundPaddingLeft etc are only support in iOS, what's the best way to do this in Android for labels as buttons with backgrounds ?

    — answered December 20th 2011 by Szymon Machajewski
    permalink
    0 Comments
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.