Titanium: Tab's icon image not working

Question

I am trying to change icons of my tab group's tab, but it doesn't show the image.

For iOS

I've used below code:

var win1 = Titanium.UI.createWindow
({  
    url:'Tab1.js'
});

var tab1 = Titanium.UI.createTab
({  
      icon:'footer_contactus_hover.png',
      window:win1
});

// create controls tab and root window
var win2 = Titanium.UI.createWindow
({        
    url:'Tab2.js'
});

var tab2 = Titanium.UI.createTab
({  
    icon:'footer_search.png',
    window:win2
});

I am having 4 tabs. Image's size is 81x51 . It shows me only blue rectangle instead of original image.

Also I've tried <property name="ti.android.fastdev" type="bool">false</property>

Whats wrong with the code ?

@MuhammadZeeshan: ya its working .... I've downloaded images from http://glyphish.com/ that also work... but my images are not transparent... Is there any way to display images those are not transparent ? — Maulik, Mar 30 '12 at 05:15

score 1 · Answer 1 · answered Mar 29 '12 at 21:08

Assuming that your image does exist at the locations specified my first guess would be that your images are not created properly so that when the get masked all you see is a blue rectangle. I would suggest grabbing some other icon images from http://glyphish.com/ to see if it may be that your images are not created properly (I do not have any affiliation with that except I have used their icons in my projects and they are top-notch).

Also you may want to check out the Human Interface Guidelines as it sets forth specified sizes.

Thanks for your help... It works after I make them transparent — Maulik, Mar 31 '12 at 12:19

score 1 · Accepted Answer · answered Mar 31 '12 at 12:23

Solved by making images Transparent.

Also found : - Icon needs to be fileld with a color for visible pixels and transparent for the invisible part. The os will apply the blue glowing stuff, so if icon does not have transparent pixels you will only see a rectangle.

Titanium: Tab's icon image not working

2 Answers2