UITabBarItem Image Size

Question

I am making images for my UITabBar. I am making them of size 60x60, because that's what retina screens use. However, when I use that size, it shows up too big in the bar, so you can only see part of the image. When I reduce it down to 30x30, it works, but that size is supposed to be for non-retina displays. Why does it not show up properly when I use 60x60?

Make sure your 60x60 retina image is named with the `@2x` suffix in the filename. — rmaddy, Sep 06 '13 at 14:28
possible duplicate of [iOS7 Tabbar icons too big](http://stackoverflow.com/questions/22166644/ios7-tabbar-icons-too-big) — sam_smith, May 27 '14 at 00:31

score 13 · Answer 1 · edited Feb 01 '14 at 15:04

13

You probably may have to rename your retina image to imagename@2x.png.

edited Feb 01 '14 at 15:04

BastiBen

19,679
11
56
86

answered Sep 06 '13 at 14:36

thatzprem

4,697
1
33
41

score 7 · Answer 2 · edited Sep 29 '16 at 20:06

You were getting this behavior because you were supplying a high-resolution image, when iOS was looking for a standard resolution image.

iOS automatically selects the appropriate image size for you, depending on the resolution of the accessing device. So you will be responsible for supplying a "standard resolution" image, for non-retina devices, and a "high resolution" image, for retina displays. The way you do this in iOS is to append "@2x" to the end of your filename, but before the file extension, like this:

my-image.png     // for non-retina displays (Ex: 30x30 dpi)
my-image@2x.png  // for retina displays (Ex: 60x60 dpi)
my-image@3x.png  // for retina displays(plus editions) (Ex: 90x90 dpi)

Then, when you are referencing files in your XCode project, you only need to supply the filename to the standard resolution (e.g, "my-image.png") and if the accessing device has a retina display, then XCode will automatically select the file with the "@2x" suffix for you. This is very convenient, because it saves us developers from having to detect whether or not the device has a retina display, and which image we need to supply.

Here is a code example:

// Select an image named "my-image.png"
UIImage *img = [UIImage imageNamed:@"my-image.png"];

// If the device this code is run on is a retina device,
// then Xcode will automatically search for "my-image@2x.png" and "my-image@3x.png"
// otherwise, it will use "my-image.png"

You can read more on the subject via the Apple Developer's Site: Optimizing for High Resolution

UITabBarItem Image Size

2 Answers2