Titanium Community Questions & Answer Archive

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

Titanium.UI.createButton + backgroundImage = cursing

I'm trying to create an image button.
(a custom image that looks like it would be in the same family as the SystemButton.INFO_LIGHT one)

The createButton code has a backgroundImage property -so this should be doable right?
Heck I even see buttons with images in the kitchen sink app.

But when I cut and paste the code (changing the image paths of course) … nothing.

As far as I can tell none of the following do… anything.

image:'../iphone/help_20.png',
backgroundImage:'../iphone/help_20.png',
backgroundSelectedImage:'../iphone/help_20_on.png',
backgroundDisabledImage: '../iphone/help_20_off.png',

I've checked my paths about billion times.
But for the life of me I can't seem to:

Create a button from an image!!

If any one can help me figure out what I'm missing I'd be most grateful.

— asked April 28th 2010 by Doug Meade
  • backgroundimage
  • buton
  • createbutton
  • image
  • iphone
0 Comments

7 Answers

  • Accepted Answer

    Glad that I was able to help.

    — answered May 4th 2010 by Jeffrey Messick
    permalink
    2 Comments
    • Those of you who are down voting read the whole thread.

      >Jeffrey Messick shot me the answer. If he chimes in here I'll mark his answer.
      >Turns out the "iphone" directory is a special one. It can hold the default and app icon… but other images wont resolve there.
      >Created a different directory and all seems to be well.
      …ugh… thanks Jeffery!

      http://developer.appcelerator.com/question/20881/titaniumuicreatebutton–backgroundimage–cursing.html#answer-48161

      — commented August 9th 2011 by Elyas Shaiwani
    • grate

      — commented June 12th 2012 by Lu Huaxiu
  • Dont forget to set the title, even blank, and set the width and height. It doesnt get from the image file. Can you put the whole code?

    — answered April 28th 2010 by Carlos Costa
    permalink
    1 Comment
    • This is gold, thanks!
      I just spent a whole morning figuring out why 2 of the 10 buttons a had where displaying a backgroundSelectedImage's and the others didn't. Turns out I set the title property to "" for those to and didn't for the others.
      Thanks for the 2 year old tip :p

      — commented January 13th 2012 by Gertjan Smits
  • The code below is failing to create ANYTHING.

    Am I missing something obvious here?
    Do I somehow need to register the images I want to use with the app?

    var alertButton2 = Titanium.UI.createButton({
        backgroundImage:'../iphone/help_20.png',
        width:22,
        height:22,
        title:'',
        right:15,
        top:49
    });
    
    — answered May 2nd 2010 by Doug Meade
    permalink
    0 Comments
  • Jeffrey Messick shot me the answer.
    If he chimes in here I'll mark his answer.

    Turns out the "iphone" directory is a special one.
    It can hold the default and app icon… but other images wont resolve there.

    Created a different directory and all seems to be well.

    …ugh… thanks Jeffery!

    — answered May 4th 2010 by Doug Meade
    permalink
    0 Comments
  • Weird…
    I can get the images (and thus the buttons to show) if I use absolute paths.
    Relative paths aren't resolving.

    The code is in screen1.js which is in the "main_windows folder under the "Resources" folder.

    screen1.js being called from app.js which is in the "Resources" folder..

    And the images are in the "iphone" folder under the "Resources" folder."

    But I get nothing If I use the path:

    backgroundImage:'../iphone/alert2_54.png',
    

    So I thought "maybe" it needs to be relative to app.js but I still get nothing using:

    backgroundImage:'iphone/alert2_54.png',
    

    … ? … this should not be hard … ?

    — answered May 2nd 2010 by Doug Meade
    permalink
    0 Comments
  • I'm seriously confused.
    In a fit of desperation I changed this:

    backgroundImage:'/Users/xxxx/Desktop/v2/yyyy/Resources/iphone/alert2_54.png',
    

    to this:

    backgroundImage:Titanium.App.appURLToPath('alert2_54.png'),
    

    It worked like a champ in the simulator, but of course
    errored out in a big red screen once it hit the hardware.

    — answered May 4th 2010 by Doug Meade
    permalink
    0 Comments
  • Please check this article about platform-specific images. Note that this does not work for iPhone Simulator at the moment. Please check this bug for details.

    — answered November 28th 2011 by Anton Chikin
    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.