68

I am currently adding images to each one of my tab bar items. One image I like has a size that is much bigger then the area of the bar item. When I set the image of the bar item in the storyboard and run the emulator... the bar button with that image covers the entire screen.

Now I thought there was some automatic way of allowing the images to resize for each bar button. This is sadly not the case. Is there a way when the tab bar loads that I can resize the images within each tab bar?

Leo Dabus
  • 198,248
  • 51
  • 423
  • 494
MooCow
  • 1,245
  • 1
  • 11
  • 28

4 Answers4

117

You should prepare 3 images icons for each tab bar item (1x, 2x and 3x).

First create the 3x at 75w 75h pixels (maximum: 144 x 96) and save it as iconTab0@3x.png.

Then resize it to 50w 50h pixels (maximum: 96 x 64) and save it as iconTab0@2x.png.

Finally resize it to 25w 25h pixels (maximum: 48 x 32) and save it as iconTab0.png.

Now all you need is to select those 3 images at your finder and drag them to your image assets.

Human Interface Guidelines

enter image description here

enter image description here

Leo Dabus
  • 198,248
  • 51
  • 423
  • 494
  • Going to images.xcassets, I then select new image set and how do I populate image? – MooCow Apr 26 '15 at 07:25
  • 1
    I see... drag and drop – MooCow Apr 26 '15 at 07:26
  • First select Images.xcassets then select those 3 files and just drop them anywhere below the AppIcon – Leo Dabus Apr 26 '15 at 07:28
  • By any chance, are the sizes for each tab item (1x,2x, and 3x) standard and accepted sizes? – MooCow Apr 26 '15 at 07:30
  • so if the smallest image I have of it is 60*60, then I have to resize it myself before dragging to Xcode? I mean is there anything I can just do on the image so it would know it should not expand? Why doesn't Xcode/Swift just shrink the size to its max? – Honey Oct 02 '16 at 02:39
  • what if we wanted the `selectedImage` to be the size of the entire `UITabBarItem`? -- see [my question here](https://stackoverflow.com/questions/45046365/what-are-the-correct-dimensions-for-a-custom-tab-bar-item-background-image) – shoe Jul 27 '17 at 22:52
  • 2
    You saved my life – ScottyBlades Oct 08 '17 at 18:18
  • This answer does not cover cases using the "preserve-vector-data" flag. In those cases, the image expands to the size of the element where presented. – regina_fallangi Nov 26 '19 at 14:45
62

Another option is to create a vector image PDF. What you do is resize your vector image to the smallest size (22x22) and export it to a PDF file. You can do this with Adobe Illustrator, Sketch and many other vector image editing tools.

Then you add the PDF file to your assets folder and in the Properties Inspector set "Scale Factors" to "Single Vector". That should do it!

Mark Moeykens
  • 625
  • 5
  • 5
  • 3
    This is the best answer. Not sure why it isn't marked as THE ANSWER. This way you don't have to create multiple images for all the different sizes. – zumzum Dec 10 '16 at 13:26
  • 3
    For tab bar icons I believe it should be 25x25 instead. https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/ – Rygen Feb 08 '17 at 15:36
  • Indeed, that's the way to go for quite some time now! Should be marked as *the* answer. – Karoly Nyisztor Jul 04 '18 at 08:20
  • I'm using 400*400 pdf image and i'm using it to UITabBar, is there any way such that UITabbar adopts 400*400 pdf image? I have enabled single scale also, Please do reply. – Nirav Zalavadia Aug 08 '18 at 13:43
  • I do recommend this way, however the answer has not been marked due to it being a little late to the party. – MooCow Mar 06 '19 at 06:10
  • 2
    Hi Mark. I'm not able to find the **Scale Factors** option in Xcode v10.2. The closest thing I can see is **Scales**, which has options for 'Single Scale' (i.e. All) and 'Individual Scales' (i.e. 1x, 2x, 3x); however, that doesn't mention anything about Vector. Is this still the same option? The resources I'm checking for are vector PDFs, so that's not the issue. – TheNeil Apr 30 '19 at 16:03
  • @TheNeil Here's a great answer on how to do this in Xcode 10.2: https://stackoverflow.com/a/55712653/1342984 – musical_coder Jun 06 '19 at 22:02
34

Pretty easy to do this with ios8. In Storyboard, click on each tab item (the individual controller for the tab you want to change the image of.

Set the insets accordingly...

enter image description here

There is this issue though. Fixed with this.

Community
  • 1
  • 1
Ryan Walton
  • 1,029
  • 11
  • 15
18

@LeoDabus provided a good answer.

For resizing the image, a good and easy way to do this is to:

  1. Add your image to the 1x, 2x, 3x boxes in Assets.xcassets folder.
  2. Then, click on the image in each box and double-finger tap the trackpad/right-click which will reveal the options here:

Open with External Editor

  1. Click on 'Open with External Editor', which will bring you to Preview.
  2. Click on 'Tools' then 'Adjust Size'.

Adjust Size

  1. Adjust the size of your image based on your requirements. Then hit 'Save' and close the window. The image in Xcode should be auto-updated.
Colin Hong
  • 229
  • 2
  • 6
  • This was awesome, I just tried it! Just a question - if you have an image that is 34px x 34px, and another that is say 64px x 64px, should you generally try to use an image smaller or larger than your target size (say when your target is the 50px x 50px size)? – cheznead Sep 22 '17 at 20:58
  • @Colin Hong Good answer! – Lance Samaria Oct 23 '17 at 04:31
  • See Here, https://softwarerecs.stackexchange.com/questions/399/app-to-quickly-generate-correctly-resized-ios-app-icons/37770#37770 – Rajamohan S Jan 23 '18 at 02:00