Get Updates By E-mail 

Article Written By:
Johann Dowa

iOS Source Code Example: Making Reflective Metallic Buttons Like The Music App

  •  
  •  
  •  
  •  
  •  

When iOS 6 was first revealed many tech sites wrote about the “reflective” metallic buttons found within the new music app.

If you’ve wondered how to do this effect yourself I’ve come across an open source project that you can look at and see exactly how this effect was done.

Looking at the source code you can see the effect can be created by blending the regular button image with several different layers containing a shadowed button, an inverted button, a darkened button, along with a base layer.

Overall a very cool effect, this video show’s it in action (with a much bigger button than in the music app so it’s quite noticeable here):

This project is by Ryan Engle and can be found on Github here.

UPDATE: You might want to take a look at this code showing how to add the metallic effect to a slider.

Definitely a cool effect – especially on bigger buttons.


  •  
  •  
  •  
  •  
  •  

Submit A Resource

Have you created a useful tutorial, library or tool for iOS development that you would like to get in front of our 300,000+ monthly page views from iOS developers?

You can submit the url here.

The resources we feel will appeal to our readers the most will be posted on the front page.

Comments