iOS: How to set the proper image scale for a bar button item

Question

I'm trying to add my own image as a bar button item, but I don't know how to get the image to scale properly. Apple's Human Interface guidelines recommends that my image be 44x44 px, but when I use a 44x44 px image, it is too large for the toolbar, as you can see:

When I use a smaller version of the image, it looks pixellated on the Retina display. What am I supposed to do here?

Use 22*22 image.Take 44*44 as your 2x and 66*66 as your 3x.May be it will solve your problem. — , Sep 28 '15 at 04:00
What exactly do you mean by "take 44*44 as my 2x"? Is there somewhere in XCode where I specify what scale to use? — yesthisisjoe, Sep 28 '15 at 04:05
she just want to say ,when you setting image, set button size to {22,22}. — Saurabh Prajapati, Sep 28 '15 at 04:25
possible duplicate of [How big should a UIBarButtonItem image be?](http://stackoverflow.com/questions/1590170/how-big-should-a-uibarbuttonitem-image-be) — goodcow, Sep 28 '15 at 04:52
In images.xcassets, you can add image sizes for 1x, 2x, and 3x sizes. Your app will automatically use the correct size. — goodcow, Sep 28 '15 at 04:55
@goodcow That was it, thanks. Submit it as an answer if you'd like. — yesthisisjoe, Sep 28 '15 at 15:41

score 10 · Accepted Answer · answered Sep 28 '15 at 19:26

10

In images.xcassets, you can add the images as 1x, 2x and 3x. Xcode will use the appropriate image size depending on the device.

answered Sep 28 '15 at 19:26

goodcow

4,495
6
33
52

mrunal thanki · Answer 2 · 2015-09-28T07:00:59.320

You need to follow apple guidelines for designing you can find it from this link https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1

You can find the attached screenshot image for correct sizing for the UIBarButtonItem image size as par the apple guidelines you have to use 44X44 for ratina (@2x) and 22X22 for normal (@1x) for UIBarButtonItem

score 1 · Answer 3 · answered Oct 14 '16 at 23:26

1

width 22 pixels X height 22 pixels - ideal for left or right BarButtonItem. You can resize any image to custom sizes using online tools, one such I used is http://www.picresize.com/

answered Oct 14 '16 at 23:26

Naishta

11,885
4
72
54

iOS: How to set the proper image scale for a bar button item

3 Answers3

Linked