Show Menu

Looking for an iOS Developer?

Submit your 30 day Job Listing for FREE

Great App design is now a must-have when developing apps for the App Store. Especially, now that you have to contend with so many other pas for attention. If your apps are not selling as well as they should spice it up with a good design and you should see an uplift.

[socialRansom file=”http://ios-blog.co.uk/wp-content/uploads/2011/11/TabBarController.zip”]

If you need to learn the basics of Objective-C, We have a great Beginners Guide to Objective-C Tutorial, check it out.

In this post, I am going to show you how to design the tab bar you see in the screenshot below. The tab bar has a leather background with a black selection background. There are also four icons that are specific to a music app.

We shall use some sample iPhone App Design files and at the end of this tutorial, I will share a link to the sample project with the design images and icons so you can use them in your apps for free.

In previous iOS SDK’s, it was a pain to totally customise the TabBar in this way. In iOS5, Apple has recognised the need to be able to customise the UI so they have added the Appearance API thankfully. This gives developers more control on the look and feel of the app.

Starting with a simple user interface.

Well, to start with. Fire up Xcode, and create a new sample project. Give it any name you like and choose the single view project. We are going to code up our tab views manually. Just like the pros.

In the AppDelegate.m file, add the following code. In that piece of code, we are creating four views and adding them to a Tab Controller. These views are empty for now because we don’t need any content in them for the purposes of this project.

 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    
    UITabBarController *tabController = [[UITabBarController alloc] init];
    
    UIViewController *viewController1 = [[UIViewController alloc] init];
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    
    UIViewController *viewController3 = [[UIViewController alloc] init];
    
    UIViewController *viewController4 = [[UIViewController alloc] init];
    
    
    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 
                                     viewController2, 
                                     viewController3, 
                                     viewController4, nil];
    
    
    self.window.rootViewController = tabController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

If you run the application in the simulator, you should see something similar to the image below. Kind of boring, I know but we will get there.

Adding Tabs to the Tab Controller

In the design resources folder, I have four icons. To add them to our tabs, we will need to add them to our project. When they are added, note down the names of the images. In our case, they are called artist-tab.png, music-tab.png, podcast-tab.png and clock-tab.png.

We will now create UITabBarItems using the following code.


UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Artists" image:[UIImage imageNamed:@"artist-tab.png"] tag:1];

This will initialise a UITabBarItem with the image and title given. In this case, the image is the “artist-tab.png” and the title is called “Artists”.

The next step is to set this as the Tab Item for one of our ViewControllers.


[viewController1 setTabBarItem:tab1];

This is how our application:DidFinishLaunchingWithOptions method looks like.


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    
    UITabBarController *tabController = [[UITabBarController alloc] init];
    
   
    
    UIViewController *viewController1 = [[UIViewController alloc] init];
    
    UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Artists" image:[UIImage imageNamed:@"artist-tab.png"] tag:1];
    [viewController1 setTabBarItem:tab1];
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    
    UIViewController *viewController3 = [[UIViewController alloc] init];
    
    UIViewController *viewController4 = [[UIViewController alloc] init];
    
    
    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 
                                     viewController2, 
                                     viewController3, 
                                     viewController4, nil];
    
    
    self.window.rootViewController = tabController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

If you run this in the simulator, you should see the something similar to the image below.

Our little app is taking some shape . The next step is to extrapolate the method and add tabs for all our views.


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    
    UITabBarController *tabController = [[UITabBarController alloc] init];

    UIViewController *viewController1 = [[UIViewController alloc] init];
    
    UITabBarItem *tab1 = [[UITabBarItem alloc] initWithTitle:@"Artists" 
                                                       image:[UIImage imageNamed:@"artist-tab.png"] tag:1];
    [viewController1 setTabBarItem:tab1];
    
    
    UIViewController *viewController2 = [[UIViewController alloc] init];
    UITabBarItem *tab2 = [[UITabBarItem alloc] initWithTitle:@"Music" 
                                                       image:[UIImage imageNamed:@"music-tab.png"] tag:2];
    [viewController2 setTabBarItem:tab2];
    
    UIViewController *viewController3 = [[UIViewController alloc] init];
    UITabBarItem *tab3 = [[UITabBarItem alloc] initWithTitle:@"Podcast" 
                                                       image:[UIImage imageNamed:@"podcast-tab.png"] tag:3];
    [viewController3 setTabBarItem:tab3];
    
    UIViewController *viewController4 = [[UIViewController alloc] init];
    UITabBarItem *tab4 = [[UITabBarItem alloc] initWithTitle:@"Time" 
                                                       image:[UIImage imageNamed:@"clock-tab.png"] tag:4];
    [viewController4 setTabBarItem:tab4];    
    
    tabController.viewControllers = [NSArray arrayWithObjects:viewController1, 
                                     viewController2, 
                                     viewController3, 
                                     viewController4, nil];
    
    
    self.window.rootViewController = tabController;
    
    [self.window makeKeyAndVisible];
    return YES;
}

This will add the other tabs to our Tab Controller, using our four icon images. This is what you should see when running the app in the simulator

Styling the Tab Bar using the iOS 5 Appearance API

This is starting to look good. We just need to add our leather background. To do this, we will create a new method in the AppDelegate.m file and call it customiseAppearance.

In this method, we will add the background to the Tab Bar. . See the code below.


- (void)customizeInterface
{
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
}

And then make sure to call the method at the top of our application:DidFinishLaunchingWithOptions
method. This will customize all the Tab Bars in our app globally by adding an image
called tabbar.png. The image can be downloaded as part of the sample project of this post.


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [self customizeInterface];
    

Run the application and you will see that our tab bar has a nice leather background to it.

The last thing to do it customise how the Tab Bar Item will look when the user taps on each Item.
We employ the appearance API again to make this happen.


- (void)customizeInterface
{
    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];
    
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"selection-tab.png"]];
}

In the code above, we have added the third line, which sets the Selection Indicator of our tabs.
This is the final step and you should see the following when you run the app.

There you have it. A fully customized Tab Controller with a leather background. Now you can go forth and modify your apps, make the look good and sell more.

[socialRansom file=”http://ios-blog.co.uk/wp-content/uploads/2011/11/TabBarController.zip”]

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


Written by:

+Tope Abayomi is Vault Overseer at App Design Vault. Find out how to design an app with our themes for developers with a budget or lack of good design contacts.

Comments

There are currently: 18 Responses to “How To Customize The Tab Bar Using iOS 5 Appearance API”. Leave your comment!

Hi,
I want to make the tab bar as transparent (like displaying the background text or images) displaying in this link https://d2lrcewmgtja44.cloudfront.net/02052016122913533.jpeg .Please give suggestions for displaying the tab bar of that transparent.


Wow, this is a great tutorial. Can’t wait until your next one :) thanks for this!!
Steve


Can we set this tab bar on top instead of bottom?


In that image How you change the TabbarItem text color to default white to gray.


Great tutorial is there a sample how to navigate to the a viewcontoller once the tab is clicked

Thanks


Hi, Thanks a lot for the tutorial. It was very helpful. But i am not able to figure it out how to add colorful images to the UITabBarItem. Can u please help me on this regard?


hi. thanks for your great tip, but how can i change the icon appearance and the selected icon appearance if i use a “Tabbed Application”-Template and the Storyboard? Any Ideas?

Thanks a lot!!


Nice tutorial, but do you hnow how to change the color and font used in the title of UITabBar?
Thanks!


Thanks Tope!


Nice tutorial. But you missed two things, one is changing the tint color of tab bar item selection. The other one, which I want to know badly, is how to change the color of unselected tab bar item images. It usually has a greyish tinge, can it be changed? The first image in the page tells me its possible, pls help.


Nice tutorial. Any idea how to do this if you’re using storyboards?


    It is kind of simpler when you are using story boards. You can easily set the tab icons and title. But you will have to use the appearance SDK to set the background of the tab bar and the selected items


Hi Tony,

Thanks I am happy you liked the tutorial. Customizing the tab bar pre iOS 5 was a pain, man. I think Apple took notice of that and implemented the Apperance API.

If you want to customise your tab bar in iOS 4.3… take a look at this open source resource…
https://github.com/rumex/RXCustomTabBar


Hi Tope, great tutorial, not just a copy and paste but a good explanation of every step.

But unfortunately some people are still using the 4.3 (or even older) version of iOS. I tried running this code on simulator/iphone with 4.3 and it crashed. Do you have a work around for supporting both versions?


Thanks for the reply!Amazing Blog , congrats!


Very nice post!! How can i make the dotted line on the Navigation Bar?
Thanks!


Leave a Reply

Would you like to sign up to the mailing list by our sister site: SwiftMonthly?