ICONS on Tabs

I’m new to XOJO IOS and created a ICON (.png 64x64 - used an external tool) and dropped it in XOJO IDE Studio. When I click on the ICON, it shows fine. When i add it to a tab, it’s always light blue, not the true color that the ICON is. It appears that way in the IDE and in IOS Simulator. Is there a property I can set to make the ICON looked correct?

Thanks for any help…

I might be wrong, but I believe that the image is just used as a mask for the default blue highlight color used for all tabs in iOS. If you look in the App Store or iTunes Store on an iPhone you will see that all tabs highlight the same blue color that you are seeing and the image is just used as a mask.

[quote=202115:@Mitch Fulmer]I’m new to XOJO IOS and created a ICON (.png 64x64 - used an external tool) and dropped it in XOJO IDE Studio. When I click on the ICON, it shows fine. When i add it to a tab, it’s always light blue, not the true color that the ICON is. It appears that way in the IDE and in IOS Simulator. Is there a property I can set to make the ICON looked correct?
[/quote]

According to Apple Human Interface Guidelines, Tab icons are not colored. See
https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1

You could of course fake something at the bottom of a standard view with color icons. I suspect it would look very ugly and would get kicked out of the Apple Store immediately.

Yep, you can’t set the colour of tab icons.

thanks for the replies…

It might be possible though to use a color icon – at least within a game or something Apple surely wouldn’t expect the UI to look that serious. There’s the

Declare Function imageWithRenderingMode lib "UIKit" selector "imageWithRenderingMode:" (id as ptr, RenderingMode as UIImageRenderingMode) as ptr
method on UIImage (aka iOSImage) which returns a copy of the image with the selected mode.

UIImageRenderingMode is an Integer with 0 = automatic, 1 = Always Original and 2 = Always Template. I guess an Image created with a value of 1 will still show its colors even on a Tab. But then, you’d have to declare into the tabbar too, so take this answer rather academic …

Guys I see a lot of apps with the tab icons colored and other colors as well, it seems that in XOJO they are blocked to that blue, is there a way to have real icons there and not only those shapes and to change that blue ?

Thanks.

You can change the color but basically the icons are mask (b/w images)

“Xojo for iOS” doesn’t expose the required attributes of the UITabBar

  • barTintColor controls the BACKGROUND color
  • unselectedItemTintColor controls the icon color (iOS 10.0 and above)
  • tintColor controls the Selected Icon color

It would require declares to control these values, otherwise Xojo just sets them to predetermined values

and as Antonio say… the icon image itself is just a mask

Of course it is possible.

The following code creates an iOSImage that will always display as original (not a mask).
Icon is an iOSImage in your Xojo project.
Assign originalImage to the View’s TabIcon

  Declare Function imageWithRenderingMode Lib UIKitLib selector "imageWithRenderingMode:" (id As ptr, RenderingMode As Integer) As ptr
  Dim originalImage As iOSImage 
  originalImage = iOSImage.FromHandle(imageWithRenderingMode(icon.Handle, 1))

And the following two functions will change the color of any image (using its mask)

[code]Public Function ColoredIcon(Icon As iOSImage, C As Color) as iOSImage

If icon is nil then Return nil

dim b As new iOSBitmap(Icon.Width, icon.Height, Icon.Scale)
Dim g As iOSGraphics = b.Graphics
Dim tmp As iOSImage = ImageWithMask(icon)

g.FillColor = c

g.DrawImage(tmp, 0, 0, tmp.Widthtmp.Scale, tmp.Heighttmp.Scale)

Return b.Image
End Function
[/code]

[code]Public Function ImageWithMask(image As iOSImage) as iOSImage

//Creates an image that will draw using the current Fillcolor

Declare Function imageWithRenderingMode lib UIKitLib selector “imageWithRenderingMode:” (id as ptr, RenderingMode as Integer) as ptr

Return iOSImage.FromHandle(imageWithRenderingMode(image.Handle, 2))
End Function
[/code]

[quote=361676:@JrmieLeroy]Of course it is possible.

The following code creates an iOSImage that will always display as original (not a mask).
Icon is an iOSImage in your Xojo project.
Assign originalImage to the View’s TabIcon

  Declare Function imageWithRenderingMode Lib UIKitLib selector "imageWithRenderingMode:" (id As ptr, RenderingMode As Integer) As ptr
  Dim originalImage As iOSImage 
  originalImage = iOSImage.FromHandle(imageWithRenderingMode(icon.Handle, 1))

[/quote]

Thanks a lot Jrmie, I will try and let you know how it goes.

Can you please provide a sample project on how you did those ? I`m still little bit confuse with those functions.

Thanks again.

Here it is.
In order to color the tabs in a TabView you need to create the TabView by code.

www.jeremieleroy.com/upload/ColoredTabs.zip

[quote=361769:@JrmieLeroy]Here it is.
In order to color the tabs in a TabView you need to create the TabView by code.

www.jeremieleroy.com/upload/ColoredTabs.zip[/quote]
Thanks a lot Jrmie