iOS Programming 101: How To Hide Tab Bar in Navigation Interface
Appcoda started out with weekly tutorials to show you how to build an app. The weekly tutorials are very detailed with step by step procedures. So far the feedbacks about the tutorials and our free iOS development course are very positive. But some readers suggested us to take one step further and create mini tutorials to answer some common iOS development questions such as how to change the color of navigation bar or color of UIbutton. Thanks for the suggestions. From this week onwards, we’ll start a new series – iOS Programming 101. Every week, we’ll publish a short tutorial to answer a common question raised in the comment area or forum.
As a fresh start of the series, we’ll show you how to hide the tab bar in a navigation-based app. Several weeks ago, we developed the tab bar app. In that tutorial, we embed the navigation controller inside the tab bar controller. So when user taps on any of the recipes, the navigation controller pushes to the detail view.

Tab Bar App with Tab Bar in Detail View
Some said the tab bar takes up considerable screen estate when displaying the detail view. How can we hide it to free up more space for better reading?
If you’ve read the official API reference of UIViewController, you know the tab bar can be hidden using a line of code. There is a property named “hidesBottomBarWhenPushed” in UIViewController. It’s a Boolean value indicating whether the toolbar at the bottom of the screen is hidden. When it’s set to YES, the tab bar will be hidden when the view controller is pushed on to a navigation controller.
In our code of the Tab Bar app, we can simply add a line of code in “prepareForSegue:” method and set the “hidesBottomBarWhenPushed” properties of the RecipeDetailViewController to “YES”.
1 2 3 4 5 6 7 8 9 10 |
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([segue.identifier isEqualToString:@"showRecipeDetail"]) { NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow]; RecipeDetailViewController *destViewController = segue.destinationViewController; destViewController.recipeName = [recipes objectAtIndex:indexPath.row]; // Hide bottom tab bar in the detail view destViewController.hidesBottomBarWhenPushed = YES; } } |
Save the change and run the app. The tab bar should be hidden when the detail view is displayed.

Tab Bar App with Hidden Tab Bar in Detail View
What Do You Think?
What do you think about this mini tutorial? Does it help to solve the common iOS programming issue you encounter? Leave us comment to share your thought and let us know what else you’d like to see in the next mini tutorial.
Comments
Keane Kwa
AuthorMini tutorials are good. Simple and easy. Just hope that there will be a combination of this and the usual more complicated tutorials.
Simon Ng
AuthorDon’t worry 🙂 We’ll still have the detailed tutorials.
Bubumuk
AuthorThanks!
Nice.
Sunny
Authornice work !
James
AuthorHey man I love your tutorials a lot!!! The previous tutorial was amazing and simple. This tutorial may be helpful in the future. I do however need your help badly. In the search bar tutorial I requested a tutorial in the comments. You gave me a suggestion on what to do but since my coding knowledge is limited I wasn’t able to do it. Can you post a tutorial soon maybe on how to do it? It would be really appreciated:)
bug bugger
Authorthanks
Spencer
AuthorThanks man..!! really useful!! Was struggling with this issue since last few days. Thanks again:))
satya
Authorhow to hide paticular tabbar item in tabbar….
satya
Authoris it possible to hide paticular item in tababar…..plz any one help me on this
gregoryzhou
AuthorGood article but how can i get first item hidden when app open?
hamid mahj
Authordon’t work youcan send me pls your project
Andres
AuthorYOU ARE A BEAST! thanks a lot
Kaliyarajalu
AuthorHi AppCoda Team..Thanks for your wonderful job. Can u publish How to login using Facebook or twitter account ? Thanks in Advance
Simon Ng
AuthorNot sure if you’ve checked out the tutorial, we’ve published one about Facebook login.
http://104.131.120.244/ios-programming-facebook-login-sdk/
Julius
AuthorIt’s working! But how can you now implement your own toolbar? Say a toolbar that allows you to delete the recipe?