How to Draw a Custom TabBar Shape in iOS

Make your TabBar a little more interesting

Philipp Weiss
Nov 17, 2018 · 3 min read
Image for post
Image for post
Image source: Author

After reading an article on how to create a custom Android bottom-bar shape, I asked myself how to archive the same on iOS. Above is an image of the layout that I want to build.

First of all, we need to create a custom IBDesignable UITabBar class and override the draw method. Here we need to insert a sublayer to the views layer. In the created layer, we define the inner color, the stroke color, and the path that we want to draw. Furthermore, I created a switch that is replacing the layer if it already exists. This way the layout also supports orientation changes.

Since the drawing of the path takes a little more code, I extracted it into a separate method.

Image for post
Image for post

The actual drawing of the custom TabBar is implemented in the createPath method. With the help of the UIBezierPath, we draw a line from the top left to the beginning of our indentation. Here it’s getting a little tricky (at least for me). I got the correct Bézier curves by trial and error, and this nice tool.

After finishing the curves, we simply need to connect the missing corners of the UIBezierPath.

Image for post
Image for post

As we set the class of the TabBar in the interface builder to our custom TabBar, we can already see a preview of the new layout.

Image for post
Image for post

To add a button to the indentation, I simply created a button sized 70 x 70 in the two ViewControllers. For the layout, I used constraints, centering the button horizontally in the view and adding its vertical center to the bottom of the TabBar. To give the button rounded corners, I used the layer.cornerRadius key path and set it to 25. Also, don’t forget to enable “clip to bounds.”

You maybe noticed that the icons are not really centered in relation to the indentation. I found no better solution than setting the key path of titlePositionAdjustment for the UITabBarItem. The left item is shifted by -20 and the right by 20.

By executing the project, you will end up with a UI that looks exactly like the requested layout, but there is one thing missing: the click area of the button.
To avoid the TabBar receiving touch events by clicking the button in the lower areas, we need to override the point-inside method of the TabBar and return false if the button was clicked.

Image for post
Image for post

That's it!

If you do not like the Bézier curve, you can also go with a circle:

Image for post
Image for post
Image for post
Image for post

You can find an example project on GitHub: https://github.com/Monntay/CustomTabBarShape.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Philipp Weiss

Written by

Imprint: https://us-central1-work-1d727.cloudfunctions.net/imprint

Better Programming

Advice for programmers.

Philipp Weiss

Written by

Imprint: https://us-central1-work-1d727.cloudfunctions.net/imprint

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store