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

Profile
Written by dermdaly on April 29th, 2010

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.

Comments (19)

[...] This post was mentioned on Twitter by Dermot Daly, Philip Kirwan. Philip Kirwan said: RT @dermdaly: “Tired of trying to create nice buttons for your iPhone app? Try this”. http://bit.ly/akK65k. With thanks to @schwa [...]

Used it today. Worked great thanks Dermot :)

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?

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

[...] how to customize your UIButtons already. My personal favorite for quick and easy button making is Button Maker by Dermot Daly, by the [...]

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

[...] how to customize your UIButtons already. My personal favorite for quick and easy button making is Button Maker by Dermot Daly, by the [...]

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.

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

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

Cheers
Dermot.

Nice work. Thanks for sharing this!!!

Hello!

thanks for nice app for DermDaley.

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

Yours

MV

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

This is way cool man…many thanks

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.”

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

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.

[...] how to customize your UIButtons already. My personal favorite for quick and easy button making is Button Maker by Dermot Daly, by the [...]

Comment on this post