Take the 2-minute tour ×

I'm developing a universal app using XCode 4.2 on Snow Leopard and wanted to display rounded buttons with png files embedded within. The rounded buttons are from UIGlossyButton classes from cocoacontrols.com. The png files are both retina and non-retina varieties. I set the height and width of the UIButtons to 60, 60 on the iPhone and 120, 120 on the iPad. I'm attaching a screenshot from the iPad simulator (non retina version). I'm kind of worried on the icon sizes. It looks so tiny. I wanted the app to run on iPad 2 and also on Mini as both are non-retina displays. Is this the correct approach to display on a real iPad2 device?. Also, does the rounded button look perfect on iPad? I haven't paid for the developer license yet and I don't own a iPad.

The following is the code to draw the rounded UIGlossy button (with references to the rounded button classes):

UIGlossyButton *b;
    b = (UIGlossyButton*) [self.view viewWithTag: 78];
    b.tintColor = [UIColor colorWithRed:0.2 green:0.3 blue:0.7 alpha:1.0];
    [b useWhiteLabel: YES];
    b.buttonBorderWidth = 2.0f;
    b.buttonCornerRadius = 200.0f; //iPad. For iPhone, I'm using 40.0f
    [b setGradientType: kUIGlossyButtonGradientTypeLinearSmoothExtreme];
    [b setExtraShadingType:kUIGlossyButtonExtraShadingTypeRounded];

The screenshot is shown below,


Please help.

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

Are you worried about the small-ness of the buttons, or the small-ness of the greyscale images on top of them? If you're worried about the size of the buttons, then changing the buttons' frames will make them bigger.

If you're worried about the button images though, do note that a "Retina Display" will not change the size of your images as perceived by the naked eye, it only improves the resolution of the images if an appropriate @2x image is available. Therefore the "size" of the icon image will be the same on both a retina and non-retina display. That is, if you open the same App on an iPad 1 and an iPad 3, everything will be the same size, but the images on the screen of the iPad 3 will appear smoother due to the increased resolution.

(This is because when you set the size of a UIButton you set it in points, not pixels. Points are designed to be resolution-independent - see the Points Versus Pixels section here.)

Of course, with the iPad Mini, everything will appear slightly smaller anyway - but still in proportion.

Therefore if the icons on the buttons are looking too small, you'll need to use larger overlay images. If you do, the icons will look larger on all displays, retina and non-retina alike.

As for round buttons looking 'perfect', I don't see anything wrong with the gloss on the buttons as you've shown them above, but I would say the icons on them are much too small (and difficult to see grey-on-blue). Therefore, I would use larger icon images. - But that is my personal opinion.

Reponse to comment:

@2x images are only used on retina screens (iPad 3+, iPhone 4+). You shouldn't ever load @2x images directly, the device takes care of that. If the icons only appear small on the iPad, try making copies of the images (both normal and @2x), and scale them up manually (say 1.5x) in Photoshop/Preview/etc. Then, modify your code so that the iPhone loads the images as normal, but the iPad loads these slightly-larger images. So your App bundle could include:

  • buttonImage_Tag_iPhone.png --- Say 64x64
  • buttonImage_Tag_iPhone@2x.png --- Therefore, 128x128
  • larger_button_image_tag_iPad.png --- Say 96x96
  • larger_button_image_tag_iPad@2x.png --- Therefore, 192x192

Then you can use the following code to load the appropriate image:

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    // Use larger_button_image_tag_iPad.png
else {
    // Use buttonImage_Tag_iPhone.png

Of course you can name the images whatever you like, I've just made them different for the example.

share|improve this answer
Thoughtful reply. These png files are the regular png files that I set in Interface Builder. I also have the @2x (retina display) ones. On the iPhone simulator (both retina and non retina), I'm seeing it ok. It is on the iPad, it looks small as you had mentioned. So, on the retina/non-retina iPad, do you always want me to load the 2x ones all the time to make the icons show bigger?. Btw, how do you see the size of the button as a user would see? –  Hema Dec 24 '12 at 6:21
@Hema See modified answer :) –  ephemera Dec 24 '12 at 6:37
After thinking on what you had suggested, I revisited iPhone simulator only to find out that the icons are smaller there too. So, if the rounded button dimensions are 60,60 [height, width] on the iphone and 120, 120 on the iPad, what would be the ideal icon sizes for each of the devices both for retina and non-retina variants? –  Hema Dec 24 '12 at 7:52
@Hema Well the retina variants should always be the same as the non-retina size, as the device handles the points-to-pixels conversion for you. 60x60 is good for an iPhone, I believe there are minima as described by the Human Interface Guidelines, but 60x60 is definitely fine. As for the iPad, unfortunately the answer is "whatever looks best", just make sure that as you make your button size larger, you also scale your iPad button images (and the 2x images) along with it. Again, sizes should be the same normal-to-retina. (Try 60x60 for the iPad, you might be surprised!) –  ephemera Dec 24 '12 at 11:07
I reduced the rounded button dimensions to 60x60 on the iPad as well and it looks small on the iPad simulator. I wanted to confirm that we're talking about the dimensions of the rounded UIButton and not the images. I also scaled the non-retina png file to 64x64 using Preview tool and it looks ugly and blocky. I'm using the Glyphish Pro set and it looks like their pngs are small (28x28 and the 2x ones are 56x56). I'm looking for a best commercial/free icon set. All I'm looking is three icons (a man running, settings and help/about). I'm a very poor designer and come from a developer background. –  Hema Dec 24 '12 at 15:55
add comment

Your Answer


