How to Update Your App for iOS 7

As you probably know by now, iOS 7 has brought a couple of changes to the design language. This means your app needs to be updated so as not to look out of place on the OS.

Here at the Vault, we are going through the same process. You may have 2 or 3 apps to work on. But in our case, we have over 30 templates to update! That’s going to be fun.

NOTE: You can download our free Flat Design Pack here. This will give your apps a fresh look for iOS 7

So I thought since I am going to be going through the same headaches, I might as well blog about it and let you know of the pitfalls you might encounter.

ios-7-re-design-foody-1

Below, I will detail some of the changes we made to the Foody design template. The changes are now live and you can download the updated version if you have bought it previously.

Skeuomorphic Or Flat

I intentionally started this case study with the Foody template because it is arguably the most Skeuomorphic of the bunch. iOS 7 tries to tone down textures and shadows but that is a matter of taste. We decided not to retire the Foody template because a lot of you do like the template as it is still one of the bestsellers on the site.

We are going to tone down the effects a little bit but the leather is still going to stay. Else, Foody will lose its identity.

The Extended Navigation Bar

ios-7-re-design-foody-3

In iOS 7, the status bar and the navigation bar are now kind of intertwined. This means if you use custom images for your navigation bars, you will need to provide a separate “taller” image for the bar on iOS 7.

In my case, I exported a new navigation bar image from Photoshop which is 64 pixels high and then applied it when the user runs iOS 7.

First thing is to check whether the user in on iOS and below. This is done using a handy method

+(BOOL)isVersion6AndBelow{
 
    return floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1;
}

And then I use the old navigation bar background image if the user is on iOS 6 and below. Else the app uses the new background image with the 64px height.

    UIImage *navBarImage = [UIImage imageNamed:@"navbar-7.png"];
    if([Utils isVersion6AndBelow]){
        navBarImage = [UIImage imageNamed:@"navbar.png"];
    }

Back Button and Bar Button Items have been Toned Down

ios-7-re-design-foody-2

Previously, the buttons on the Foody template had an inset embossed into the leather. This style is really prevalent on iOS 6.

For iOS 7 though, I decided to go with Apple’s guidelines and implemented borderless buttons. I think it looks better because the design is not competing with the content.

For the bar button items, I didn’t go all borderless though. I included a subtle transparent white background. This helps users understand this is a button and not just some text on the screen.

Here is how it was implemented.

This was the previous code that was used to customise the appearance of the navigation bar on iOS 6.

UIImage *barButton = [[UIImage imageNamed:@"navbar-icon.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 4, 0, 4)];
 
[[UIBarButtonItem appearance] setBackgroundImage:barButton forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
 
UIImage *backButton = [[UIImage imageNamed:@"back-button.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 4)];
 
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];

ios-7-re-design-foody-2

As you can see we use custom images for both the back button and the bar button items. I did away with all that and used the default setting. But I had to make sure the colour of the text is white. (Otherwise it shows up as blue).

[[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:
[UIColor whiteColor], UITextAttributeTextColor,
[UIFont boldSystemFontOfSize:16.0f], UITextAttributeFont, [UIColor darkGrayColor], UITextAttributeTextShadowColor, [NSValue valueWithCGSize:CGSizeMake(0.0, -1.0)], UITextAttributeTextShadowOffset,
nil] forState:UIControlStateNormal];

To apply the transparent white background on the bar button item, I use this helper method.

-(UIImage*)createSolidColorImageWithColor:(UIColor*)color andSize:(CGSize)size{
 
CGFloat scale = [[UIScreen mainScreen] scale];
UIGraphicsBeginImageContextWithOptions(size, NO, scale);
 
CGContextRef currentContext = UIGraphicsGetCurrentContext();
CGRect fillRect = CGRectMake(0,0,size.width,size.height);
CGContextSetFillColorWithColor(currentContext, color.CGColor);
CGContextFillRect(currentContext, fillRect);
 
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
 
return image;
}

This creates a UIImage with the colour and size specified. I then use the method above to create a background image for my bar button item.

UIImage* barButtonImage = [self createSolidColorImageWithColor:[UIColor colorWithWhite:1.0 alpha:0.1] andSize:CGSizeMake(10, 10)];
 
[[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

iOS 7 ready

There are other updates that I will write about in another post but for now. Foody is ready for the iOS 7 primetime.

If you have bought Foody previously, you get this update for free. Login here and download the update.

NOTE: You can download our free Flat Design Pack here. This will give your apps a fresh look for iOS 7

Want to give your app a makeover today?

Want to know how to make your app stand out in the App Store? Enter your details below and get a Free design with an 8 min video showing you how to implement it for your app

Free! Don't pay a cent

About Tope

Tope is the Founder of App Design Vault. The mission is to give developers the super-hero qualities that designers have. And in the process, rid the App store of ugly apps. Is that possible? He sure as well will try.

15 Responses to “How to Update Your App for iOS 7”

  1. Kesler says:

    Thanks Tope! It’s awesome that you are offering the updated format for people that have already purchased the template. Look forwarding to seeing more stuff from Vault!

    #
    • Tope says:

      Thanks Kesler. Always happy to see happy customers :-)

      #
  2. claudia garcia says:

    Users gold can also download ?

    Thanks

    #
    • Tope says:

      If you have bought it, previously yes… But it is not automatically available to Premium members.

      #
  3. Ivan says:

    In my opinion the new design of this template does not look better! At all. It looks like a mixture of styles! You also now have two font colors black(signal and battery) and white. And since the bar elements and navigaional elements now occupy the same space the whole text looks missaligned!
    But hey thats just my opinion…

    #
      • Ivan says:

        It’s a bit less pronounced in Apple’s example because they have dots for the signal. While in your screen shot there is a word ‘carrier’… But I agree its not such an issue and is largley subjective! However I spotted another thing that kinda aestetically bothers me… The whole navigation bar now looks big .. Maybe too big? Like, there is a feeling it is using up too much screen estate.
        And this mixture of styles… So you have a skeumorphic backround, on the right you have a flat button, on the left you have a button with no edges and on the top you have text with different color/style…
        It’s not bad. But I believe it can be even more tuned up.

        #
      • Rafael says:

        I have to agree with Ivan here about the mixture of styles.
        As the idea is to keep the skeuomorphism of the leather but integrate better with the new, simpler look in iOS 7, here’s what I recommend:

        Embossing.
        If possible, make each element look like it was embossed into the leather, without any white. I don’t know what effects are available for text, but perhaps you can use something analogous to Photoshop’s color burn effect to keep the leather texture slightly visible. Experiment with both the default and bold weights to see what works best.

        I believe the result will be a much cleaner look that distracts less from the content of the app but is still clean and readable. This also removes the need for the translucent background on the Edit button. Have fun. =)

        #
        • Rafael says:

          Side note: should we even be calling these “buttons” now? “Links” seems more appropriate now as a “button” in itself is a skeuomorphic concept, is it not? It seems that without borders, the last vestiges of the “button” concept is gone, making them into links.

          #
          • Tope says:

            Thanks for the feedback, guys.. That does help. I will integrate those ideas when updating the new templates.

            Yes, the word “buttons” don’t make sense anymore :-)

            #
  4. Francesco says:

    Hi,
    I applied this procedure to my app but only UIBarButtonItem(s) on Navigation bars seems change their backgrounds… on the buttons on Toolbars doesn’t work.

    However great post! :)

    #
  5. Murat says:

    When you update “Ocean” template? Actually will you update “Ocean” to iOS7?

    #
  6. ThomasCle says:

    Hi,
    Nice post about the new navigation buttons ;)

    I am experincing some problems with the back button’s background image on iOS 7. Do you have any idea what’s going wrong here: http://stackoverflow.com/q/18999507/1118969

    Best regards.

    #
  7. Lou Valencia says:

    Nice post. There are 2 updates that can/should be made, though. First, the first code snipet can be shown since iOS 7 is now released. Second, in the code snipet where you change the color of the back button and bar button items, the use of UITextAttributeFont, UITextAttributeTextShadowColor, & UITextAttributeTextShadowOffset are depricated in iOS 7. The current keys are NSFontAttributeName (taking a UIFont object) & NSShadowAttributeName (taking an NSShadow object). Thanks.

    #
    • Tope says:

      Well spotted, Lou.

      I have added the code that was redacted. And you are right, those methods are deprecated. I will re-visit the implementation in the next round of updates.

      #