What size should TabBar images be

Question

I have icons for a tabBar of size 100   I checked at Apple s Human Interface Guidelines of 2013 and it says the image size should be 30x30   60x60   But as the height of tab bar controller is 50  I kept the size of the image at 50x50   Now  when I run the project  I see the ugly design below     Any idea what size images I should use so that the design will be perfect   Note  I am not writing text also  e g  Home  Search  etc   The text of the tab button is there in the image itself

User · Answer

According to the latest Apple Human Interface Guidelines:

In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

I suggest you to use the above link to understand the full concept. Because apple update it's document in regular interval

User · Answer

Reference  https   developer apple com ios human-interface-guidelines graphics custom-icons  https   developer apple com ios human-interface-guidelines graphics custom-icons       So the 50x50 size is a good choice

User · Answer

Thumbs up first before use codes please    Create an image that fully cover the whole tab bar item for each item  This is needed to use the image you created as a tab bar item button  Be sure to make the height width ratio be the same of each tab bar item too  Then   UITabBarController  tabBarController    UITabBarController   self  UITabBar  tabBar   tabBarController tabBar  UITabBarItem  tabBarItem1    tabBar items objectAtIndex 0   UITabBarItem  tabBarItem2    tabBar items objectAtIndex 1   UITabBarItem  tabBarItem3    tabBar items objectAtIndex 2   UITabBarItem  tabBarItem4    tabBar items objectAtIndex 3    int x y   x   tabBar frame size width 4   4    when doing division  it may be rounded so that you need to add 1 to each item   y   tabBar frame size height   10    the height return always shorter  this is compensated by added by 10  you can change the value if u like     because the whole tab bar item will be replaced by an image  u dont need title tabBarItem1 title        tabBarItem2 title        tabBarItem3 title        tabBarItem4 title          tabBarItem1 setFinishedSelectedImage  self imageWithImage  UIImage imageNamed   item1-select png   scaledToSize CGSizeMake x  y   withFinishedUnselectedImage  self imageWithImage  UIImage imageNamed   item1-deselect png   scaledToSize CGSizeMake x  y      do the same thing for the other 3 bar item

User · Answer

30x30 is points  which means 30px  1x  60px  2x  not somewhere in-between  Also  it s not a great idea to embed the title of the tab into the image   you re going to have pretty poor accessibility and localization results like that

User · Answer

According to my practice  I use the 40 x 40 for standard iPad tab bar item icon  80 X 80 for retina   From the Apple reference  https   developer apple com library ios documentation UserExperience Conceptual MobileHIG BarIcons html   apple ref doc uid TP40006556-CH21-SW1  If you want to create a bar icon that looks like it s related to the iOS 7 icon family  use a very thin stroke to draw it  Specifically  a 2-pixel stroke  high resolution  works well for detailed icons and a 3-pixel stroke works well for less detailed icons   Regardless of the icon   s visual style  create a toolbar or navigation bar icon in the following sizes   About 44 x 44 pixels About 22 x 22 pixels  standard resolution  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

User · Answer

According to the Apple Human Interface Guidelines    1x   about 25 x 25  max  48 x 32    2x   about 50 x 50  max  96 x 64    3x   about 75 x 75  max  144 x 96

[ios] What size should TabBar images be?

Examples related to ios

Examples related to objective-c

Examples related to uitabbarcontroller

Examples related to uitabbar

Examples related to uitabbaritem