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!

Psst. Look at line 29…

5. BOOM!

We finally implemented it!

Awesome! We made a transparent UITabBar! For visual reference, check out this example of a project that I am currently working on.

Looking good 😎

A Big Thank You

This is my first Medium post. Man it feels good! But more importantly, I want to thank you for your time in reading this article. I hope this helps ya out and that you can use it in your future projects! Happy Coding!

P.S. Below is the code snippet! For all of you “copy and pasters” 😉

Here is the gist!

--

--

George Garcia
George Garcia

Written by George Garcia

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

No responses yet