Tab bar not using @2x retina images

Getting Started Newbie Questions
#1

Hi I noticed Tab bar widget does not picks up retina images so it looks pixilated. Image ratios are defined in image suffix correctly. Is there anyway I can use ios 7 native ui element or icon?
Since it’s look pixilated the looks horrible. I just want the tab bar icons looks same as ios native icons.
I also notice tab bar levels needs bottom padding . See attached screen looks like y is cut off .
Anyway to fix this. ?

Thank you for your help. My app is pretty much ready apart from
some ui issues.

#2

Hi @davidhagen,

What is your content area width and height as set up in config.lua?

Brent

#3

Thank you Brent for the reply.  It’s 320x480.

Here is my config file…

if string.sub(system.getInfo("model"),1,4) == "iPad" then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight \> 960 then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif display.pixelHeight / display.pixelWidth \> 1.72 then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } end
#4

Hi David,

Can you print the image suffix in your code and report its value on different simulated devices?

[lua]

print( display.imageSuffix )

[/lua]

Thanks,

Brent

#5

Hi Brent,  it prints  @2x 

#6

Here is another user had this issue - http://stackoverflow.com/questions/15943922/corona-sdk-the-tabbar-doesnt-load-2x-images

#7

Hi David,

Can you please re-post your screen shot? I don’t see it in the original post.

By tabBar “icons”, what do you refer to in iOS 7? There aren’t really any icons on iOS 7 tab bars, at least not in my estimation.

Also, are you setting a widget theme? And which version of Corona are you using?

Brent

#8

Hi Brent,

I’ve attached the tab bar screen shot.  As you can see there are two issues if you compare withe itunes tab bar for an example.

1> Tab bar doesn’t uses @2x images so it looks pixilatted

2> Tab bar labels seems cuts of off - ie y in Activity.

I’m using Build: 2014.2189 , widget_theme_ios7

Thank you.

#9

Oh, I see you’re using custom images/skinning now. Doing so is sort of an “all or nothing” process, depending on the widget to some degree… if you want to visually customize it, you need to customize the entire thing and provide the image sheets and frames for everything. Have you explored this sub-section of the documentation yet?

http://docs.coronalabs.com/api/library/widget/newTabBar.html

If you don’t want to go to those lengths, I suppose you could use a stock iOS 7 style tabBar and then just place some images over top of the buttons as individual elements. That would be easier from a code standpoint I suppose.

Best regards,

Brent

#10

Hi Brent,

I’m using Business Application  model -  

https://github.com/coronalabs/business-app-sample/tree/master/images

It using images tabbaricon-down.png and tabbaricon-down@2x.png. My App following the same thing ‘Image File Construction’

#11

Hi David,

And you’re specifying the width and height parameters for the original “@1x” of these images, in this case 64x64? Can I see your entire widget constructor code?

#12

Hi Brent,

My images are 30x30 and I doubled the size to be 60x60.

-- Create buttons table for the tab bar local tabButtons = { { id="dashboard", width = 30, height = 30, defaultFile = "assets/home.png", overFile = "assets/home-down.png", label = "Dashboard", onPress = handleTabBarEvent }, { id="activity", width = 30, height = 30, defaultFile = "assets/activity.png", overFile = "assets/activity-down.png", label = "Activity", onPress =handleTabBarEvent }, { id="account", width = 30, height = 30, defaultFile = "assets/account.png", overFile = "assets/account-down.png", label = "Account", onPress =handleTabBarEvent }, { id="reload", width = 30, height = 30, defaultFile = "assets/reload.png", overFile = "assets/reload-down.png", label = "Reload", onPress = handleTabBarEvent } } -- Create a tab-bar and place it at the bottom of the screen local tabBar = widget.newTabBar { top = display.contentHeight-50, width = display.contentWidth, buttons = tabButtons } composer.tabBar = tabBar
#13

Hi David,

I tested on my side and I’m getting @2x tab images to show up when the image suffix is “@2x”. Can you test this by putting a little “2” or some other indication over your larger @2x images in Photoshop or whatever image editor you use, and see if they show up when simulating the app?

Thanks,

Brent

#14

This may have nothing to do with your problem, but you said:

My images are 30x30 and I doubled the size to be 60x60.

So if you took 30x30 graphics and doubled the size and saved those as the @2x images, you know you won’t have good-looking @2x images, right? You can go down in size and be okay, but increasing the size of an image will make it blurrier.

Maybe I misunderstood what you were saying, in which case, just ignore me. But in case that’s what was going on, I wanted to pipe up. :slight_smile:

 Jay

#15

Thank you guys for the reply. The tab bar images are vector - regardlress what size I convert it  shouldn’t looks blurrier.

I’m still confused or don’t understand how Corona uses Tab Bar icons sizes.

I just looked at Business App Sample code. The tabbar images are 64x64 and 128x128.

https://github.com/coronalabs/business-app-sample/blob/master/images/tabbaricon.png [64x64]

https://github.com/coronalabs/business-app-sample/blob/master/images/tabbaricon%402x.png [128x128]

Tab Bar size defined in the code is  32x32- ref https://github.com/coronalabs/business-app-sample/blob/master/main.lua.

There is no  tab bar by that size!

label = "Menu", defaultFile = "images/tabbaricon.png", overFile = "images/tabbaricon-down.png", labelColor = { default = { 0.25, 0.25, 0.25 }, over = { 0.768, 0.516, 0.25 } }, width = 32, height = 32, onPress = myApp.showScreen1, selected = true,

I can see corona business App is using icon size 128x128 for retina screen which is not correct according to Apple.

Apple says -  Regardless of the icon’s visual style, create a tab bar icon in the following sizes:About 50 x 50 pixels (96 x 64 pixels maximum). About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution.

I guess I will have to try and see which one matches  with standard Tab Bar size. It would be nice if corona enforce some rules or let uses

iPhone’s native icons by passing paramter ie  ios_more and corona handle the rest.

Thank you again… My business app looking great but could be better if you Corona Dev team put more features for business type app.

The most ugly thing about corona is native texfield which can’t manage by scene. Hide and Show method does’t works 100%. I had transition in scenes. now and then text box appear in the screen if I use hide and show technics for native text field. If no transition it looks little bit better.

#16

Yes, the images are 64x64 and 128x128, but they are being downsized to 32x32 and 64x64, but there is transparency around the image.  I suspect this is a left over from where I originally built the sample app on an 800x1200 content area before changing it back to 320x480.  So at a 32x32 image size, the size of the circle is 28 pixels in diameter so it’s only a touch over the 25x25 that Apple recommends.   The tabBar widget uses display.newImageRect() to load the images and when you pass in a size, it will resize the image to fit.

As a test, I renamed the tabbaricon-down@2x.png to tabbaricon-down@4x.png.  I took the tabbaricon-down.png and renamed it to tabbaricon-down@2x.png and colored it blue.  I then resized it to 32x32, colored it red and saved it out as tabbaricon-down.png.  That way I could visually see which was selected.  On the iPhone simulator skin (which emulated a real 320x480 device) I got a red icon telling me it got the 1x version.  I switched to the iPhone 4 skin, which should use the @2x image and it did.  I changed to the retina iPad which should use the @4x image and it did.

Therefore the tabBar is working as specified from what I can tell.

Rob

#17

Thank you Rob.

#18

Hi @davidhagen,

What is your content area width and height as set up in config.lua?

Brent

#19

Thank you Brent for the reply.  It’s 320x480.

Here is my config file…

if string.sub(system.getInfo("model"),1,4) == "iPad" then application = { content = { width = 360, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight \> 960 then application = { content = { width = 320, height = 568, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif string.sub(system.getInfo("model"),1,2) == "iP" then application = { content = { width = 320, height = 480, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } elseif display.pixelHeight / display.pixelWidth \> 1.72 then application = { content = { width = 320, height = 570, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, } else application = { content = { width = 320, height = 512, scale = "letterBox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, notification = { iphone = { types = { "badge", "sound", "alert" } } } } end
#20

Hi David,

Can you print the image suffix in your code and report its value on different simulated devices?

[lua]

print( display.imageSuffix )

[/lua]

Thanks,

Brent