Easy way to make curved BottomNavigationView with FloatingActionButton
In this article I will tell you how you can easily make an animated BottomNavigationView a groove for the FloatingActionButton as shown in the gif below.
When I faced the task of making BottomNavigationView with FloatingActionButton.The only one useful thing that I found was this article below. Thank you Nour El Islam SAIDI SAIDI for a good option.
This solution works, but there are some unpleasant moments such as:
- Ripple from menu items is under BottomNavigationView
- No shadow
- Lack of ability to animate view easily
BottomAppBar
Looking at the n̵e̵w̵ BottomAppBar (read more here)component, you should see that it can work with the FloatingActionButton!
This is what we need! So strictly speaking, we will borrow most of the implementation from BottomAppBar. If you take a look under the hood you will find that the whole thing is in MaterialShapeDrawable.
Behold, documentation says:
Base drawable class for Material Shapes that handles shadows, elevation, scale and color for a generated path.
That’s it! Hence, this MaterialShapeDrawable class makes it easy to create rather peculiar shapes outlines for the views. You can read more about it here.
If we dig deeper, we will find BottomAppBarTopEdgeTreatment class, another, extremely useful thing for us! It describes all the magic of creating the groove. Unfortunately Great Google does not allow us fully use this class. For example:
Cannot access ‘getFabCradleRoundedCornerRadius’: it is public/*package*/ in ‘BottomAppBarTopEdgeTreatment’
However, you can just copy it anyway.
Now we can proceed to our BottomNavigationView.
BottomNavigationView
First, create your custom BottomNavigationView component.
Second, create an object of our TopCurvedEdgeTreatment.
Next thing you should be aware of is what are fabCradleMargin, fabCradleRoundedCornerRadius and cradleVerticalOffset .
These properties can be placed on custom attributes for xml, for ease of reference. Read more.
Now we will create the object of ShapePathModel and tell it how the top edge should be created.
Well, finally MaterialShapeDrawable. Background for our BottomNavigationView.
It is time to place our FabBottomNavigationView on the layout.
That is what we should get.
When you set the menu you, for sure, will want to add margin between menu items in the middle of the BottomNavigationView. You can come up with an elegant solution, but for now I will not tell anyone if you just do like in snippet below.
What should we do with a FloatingActionButton? My root ViewGroup is CoordinatorLayout. Therefore, I assigned it like this.
In order to our fab to be above BottomNavigationView, its app: elevation value must be greater than that correspondent value of BottomNavigationView.
Done.
Animation
To animate our FabBottomNavigationView as shown at the beginning of the article we will use ValueAnimator. Good article about animation.
This code animates the alignment and deformation of our FabBottomNavigationView.
The transform function will animate hiding or showing fab.
You can find full source code in my github repository.
UPD
With new version (1.1.0) API was changed. You can see new code on github repo