UITabBarItem Image misaligned

Question

My app has tab bar. I'm trying to customize the tab bar item by changing it's image. I created an image with size 106x49. The image is being placed using this code:

((UITabBarItem*)[self.tabBarController.tabBar.items objectAtIndex:0]).image = [[UIImage imageNamed:@"TabBarItemNow"] imageWithRenderingMode:UIImageResizingModeOriginal];
[((UITabBarItem*)[self.tabBarController.tabBar.items objectAtIndex:0]) setTitle:nil];

When i run the app, the tab bar item image looks like this:

Is there a way to fix this? Am i choosing the right image dimensions for the bar item? Besides, the image looks pixelated when it's presented. I tried it with a larger image, it also go beyond the tab bar.

Answer 1

You've to provide images with the right dimensions. A Tabbar Icon has to be at least 25x25 pixels for a device with a standard resolution and at least 50x50 pixels for high resolution screens.

See the Apple developer library for further reference : https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconMatrix

When you're using images.xcassets in your project to manage your images you'll see multiple versions of a image when you import it. E.g.:

Left: 25x25 pixels right:50x50 pixels. When you don't provide images with the right dimensions in your imageset, the compiler will give you a warning.