Member-only story
Creating a Modern Bottom Navigation Bar with a Curved Cut-Out for a Docked/Floating Action Button in Jetpack Compose
A Step-by-Step Guide to Designing Custom Navigation Panels with Smooth Curves and Docked Action Buttons
Published in
4 min read3 days ago
Floating Action Button or Docked Action Button — these have become very common UI designs for any app and yet, we faced significant challenges while implementing the same in Jetpack Compose.
We struggled so that you don’t have to anymore. In this tutorial, I’ll break it down into simple steps so that you can do it very easily. In this example, I will be sharing the codes for the bottom navigation panel with a centered curved cutout.
Part 1: Creating the Custom Shape for the Cutout
The BottomNavShape Class:
To create the curved cutout effect, we define a custom Shape that carves out a semicircle and smooth curves from the navigation bar.
The Code:
class BottomNavShape(
private val cornerRadius: Float, // Rounded corners at the panel's top
private val dockRadius: Float, // Size of the cutout
) : Shape {
override fun createOutline(
size: Size,
layoutDirection…
