Difference between a default Tab Bar and a Tab Bar with no background etc.

Creating a fully transparent UITabBar in Swift

Programmatically in Swift 5!

George Garcia
3 min readApr 14, 2020

--

Hope you are having a good day so far! Today I am going to quickly show you how to create a UITabBar with a transparent background. So let’s not waste time and let’s code!

1. Getting started

Fire up that Xcode. Click “Create a new Xcode Project” >“Single View App” > Name the project to your liking > Save it wherever you want to save it at > click “Create”.

1a. Create a 2nd ViewController

Totally optional. Since we are having two tabs for now, I am just creating a 2nd ViewController. Definitely depends on you and of how many tabs you want. It doesn’t make a difference.

2. Creating a UITabBarController

There are several ways to create a UITabBarController. For now, I am going to create a UITabBarController in the SceneDelegate.swift file.

You don’t have to do it this way, you could also make a Custom UITabBarController Class!

Cool! Now we created a UITabBarController! So we set it in the scene (willConnectTo session: UISceneSession) method!

3. Customizing the appearance of the Tab Bar

George c’mon man! Show me how to customize it already!

Alright, alright! Chill 😅. We can make an extension, that can be helpful for future projects, by creating a file and call it “UITabBar+Ext”. Inside this extension, add this method!

Using an empty UIImage will help us create a transparent background. By also assigning the shadowImage to an empty UIImage, this will remove shadows (or that border line that is above the tab bar).

4. Configuring the appearance of the UITabBar

Sweet! Extension is done. Now let’s use it. Add “setTransparentTabbar” in the “createTabbar” method!

--

--

George Garcia

Down to earth software engineer who’s passionate in mobile development