Tired of trying to create nice buttons for your iPhone app? Try this.

Flat iPhone buttons as offered in Interface builder suck. They don’t look nice.

There’s the option of using Three20 to get good looking buttons. Its an option, but frankly, it feels a bit like using a sledgehammer to crack a nut. You end up with a large addition to your code, just for nice buttons. OK, you could go to the trouble of stripping out what you don’t need, but that again is more work.

All iPhone developers know about UIGlassButton – Its an undocumented API for making nice looking buttons, that exists only on the simulator and not on the iPhone itself. Why couldn’t we just have that for iPhone OS? I dunno, but its not there.

At some point in the past, I came across a nice snippet of code that used undocumented techniques for creating a glass button, and then saving the image to disk. This could then be used as a background to a “custom button”, producing the nice glass buttons I’ve been looking for. I think it was schwa on twitter; Nice. Full credit where it’s due.

So, building upon this, I’ve thrown together a simple single-screen app for creating the images for glass buttons using that technique. Basically, it allows you set the RGB values, and the size. Hitting “Save” writes the pngs to the application’s documents directory.
Now, you’ll have two png files, which you can use as images in custom buttons. Hey presto. Very simple UIGlassButtons.
Here’s a screen shot:

Our very simple button maker

Our very simple button maker

Full source is available on github. Comments welcome.


You’re reading the tapadoo blog. Did you know that as well as publishing our own applications, we offer iPhone development services and consultancy? If you have an idea, project or something you think we can help you with, please get in touch through our contact page.

19 Responses to Tired of trying to create nice buttons for your iPhone app? Try this.

  1. Pingback: Tweets that mention UIGlassButton maker. Very simple app for creating Glass Buttons for iPhone applications | tapadoo -- Topsy.com

  2. Finbarr says:

    Used it today. Worked great thanks Dermot :)

  3. Pingback: Cool Tool For Quickly Making Glossy iOS Buttons | iPhone iOS 4 iPad SDK Development Tutorials, Programming Tips, News

  4. Keller says:

    This is great, but any idea why it adds vertical lines where the rounded ends start under iOS 4? They don’t appear in the Simulator, but when you save them, the .png files have the lines. Also, any way you know of to get retina display glass buttons?

  5. dermdaly says:

    Ben Gottlieb has applied a fix to this for iOS 4.0. We’ve pulled his changes into the github tree.

  6. Pingback: Core Graphics 101: Glossy Buttons | Ray Wenderlich

  7. Peppermintbunny says:

    Thanks for posting info about this app. Great stuff.
    Works like a dream. :-)

  8. Pingback: [iOSDev] Générer des boutons travaillés avec Core Graphics | Romain Boulay . Ingénieur développement informatique mobile

  9. raj says:

    Love UIGlassButtonMaker. It’s been a boon to me. Bravo.

    Not sure if this is a big deal, but I’ve tweaked the ButtonMaker app a bit to add TextFields for fine tuning values (since the sliders are not always accurate), and writing out the file names as, for example, “button-RGB+31_127+255-120×40{-highlight}.png”. I find this more useful for my dev work.

    I’m also going to add “send files by email” so that this could potentially become a tool that you use away from your Mac, when a button color idea strikes.

    Another feature that I’ll add if time permits: History.

    I’ll make the files available soon on my mobile blog.

  10. Bryan says:

    Based on your idea I decided to distribute a free app with a few upgrades. Thanks and enjoy.
    - download directly from iTunes (no source necessary)
    - email the file to yourself (no searching through local device folders)
    - buttons to increment values by one
    - set the alpha

    UIButton Builder
    http://itunes.apple.com/us/app/uibutton-builder/id408204223?mt=8

  11. dermdaly says:

    Nice touch. Maybe take a look at the original which also saves the highlighted state.

    Cheers
    Dermot.

  12. Lynn says:

    Nice work. Thanks for sharing this!!!

  13. MV says:

    Hello!

    thanks for nice app for DermDaley.

    How you can avoid to get this white space which are rounded the graf-button?

    Yours

    MV

  14. devsri says:

    Hey!!…. that is really a cool and handy app form you…… heads up!!……. thanks a ton!!

  15. Andy says:

    This is way cool man…many thanks

  16. Ben says:

    I was surprised that creating glassy buttons was such a chore in xcode. Too bad I did not come by this site earlier. I ended up figuring out how to do this, and came up with my own simulator app, along with convenient features, for creating glassy button images.

    I decided to release the app, in hopes that other developers (of all platforms) can save time. For those who are interested, the iPhone app is “Button Shop.”

  17. Reid Belton says:

    The Github link appears to be broken. Would you mind checking that and posting an updated link? Thanks!

  18. Pingback: Core Graphics Tutorial: Glossy Buttons | RayWenderlich

  19. dermdaly says:

    Unfortunately, that code relied on UIGlassButton, a private class in the simulator only. Apple have subsequently removed it, so unfortunately, the code no longer works.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>