BottomNavigationView with rounded corners how-to

Photo by Anastasia Petrova on Unsplash

BottomNavigationView is one of the components available as part of the Material Design Components (MDC). As of version 1.3.0-alpha01 of MDC, BottomNavigationView supports a bunch of customizations like changing its background color, changing the color and size of its menu icons, etc. But one thing missing is changing its shape. It could be nice if we had the option to have a BottomNavigationView with rounded corners.

In this post, I’m going to talk about how to customize the shape of a BottomNavigationView but, before getting to that it’s good to know about MaterialShapeDrawable and ShapeAppearanceModel.

MaterialShapeDrawable and ShapeAppearanceModel

Some of the components of MDC support custom shapes. This support is provided by classes MaterialShapeDrawable and ShapeAppearanceModel. MaterialShapeDrawable draws itself using a path generated by a ShapeAppearanceModel. A ShapeAppearanceModel is made of CornerTreatments and EdgeTreatments that are combined to create a custom shape path.

To define a custom shape we need to define a ShapeAppearanceModel and this is done in a layout file using the shapeAppearance attribute. This attribute references a style that contains shape values that are used to style the component. In other words, when you set the shapeAppearance attribute, you are defining a ShapeAppearanceModel. ShapeAppearanceModel reads in the shapeAppearance style and creates corner and edge treatments out of the shapeAppearance values. MaterialShapeDrawable uses this ShapeAppearanceModel to draw the shape of the component.

Take a Button as an example. We want to set a custom shape for it. To do so, first, we define a style in styles.xml as follows:

Then we use the defined style in our layout file like this:

and the result would be like the following:

A MaterialButton with custom shape

To the point!

Now it’s time to see how we can set a custom shape for a BottomNavigationView. As already mentioned, BottomNavigationView doesn’t support the shapeAppearance attribute. So we should find a workaround for changing its shape.

If you take a look at the source code of BottomNavigationView you can see that the background of BottomNavigationView is an instance of MaterialShapeDrawable. To access this MaterialShapeDrawable we get the background of the BottomNavigationView, and cast it to MaterialShapeDrawable. Now that we have the MaterialShapeDrawable we can access it to change the shape of the BottomNavigationView.

The above code changes the shape of a BottomNavigationView to be like the following image.

A BottomNavigationView with custom shape

That’s it!




Android Engineering @ Accedo. Software engineer, *nix lover, curious learner, gym guy, casual gamer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Truthy and Falsy values in javascript

Node.js 10 Is Being End-of-Lifed Today, but What Does It All Mean?

Everything about JavaScript Array[]

Deno vs. Node, Trying out deno for the first time

An Introduction to Redis Stream

ES2022 Get Ready For A Change

Solving LeetCode 258 Add Digits Problem in JavaScript Step-by-Step

Cute cats web app (Django + VueJs) — Settings

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
Masood Fallahpoor

Masood Fallahpoor

Android Engineering @ Accedo. Software engineer, *nix lover, curious learner, gym guy, casual gamer.

More from Medium

Quick hacks to enhance your Android gaming experience(2022)

How Digital Video as a Technology Works

Join 57.7B USD language services market and earn money with Localazy Affiliate Program

Solve problem commonMain error: Expected class <classname> has no actual declaration in module…