Animated Navigation Bar – A navigation bar with a number of preset animations written in Jetpack Compose

AnimatedNavigationBar is a navigation bar with a number of preset animations written in Jetpack Compose.

Animated Navigation Bar Usage

1. Remember Int to store the current selection

var selectedIndex by remember { mutableStateOf(0) }

2. Pass your buttons to the AnimatedNavigationBar

AnimatedNavigationBar(selectedIndex = selectedIndex) {
   Button1()
   Button2()
   Button3()
}

Required parameters

selectedIndex – binding to the current index
content – buttons to display in the tabbar

Additional parameters

barColor – Color of the navigation bar itself
ballColor – Ball indicator color
cornerRadius – The corner radius to all corners applied to the navigation bar
ballAnimation – Ball animation with the animation curve, default value Parabolic(tween(300))

• Parabolic – Jump to the selected button following a parabolic arc
• Teleport – Disappear and quickly re-appear above selected tab
• Straight – Slide to the selected tab
  You can build your own animation, just implement the BallAnimation interface.

indentAnimation – Indent animation with the animation curve, default value is Height(tween(300))

• Height – Disappear by decreasing in height and quickly re-appear by increasing in height above the selected tab
• StraightIndent – Slide to the selected tab
  You can also build your own animation, just implement the IndentAnimation interface.

Built-in animatable tab buttons

This library has two built-in button types you can use out-of-the-box: DropletButton and WiggleButton, and a super custom ColorButton type in the Example project. Please feel free to use them in your projects or build your own buttons.

Animated Navigation Bar Download

Add the dependency in build.gradle file:

dependencies {
    implementation("com.exyte:animated-navigation-bar:1.0.0")
}

Acknowledgements

Many thanks to Yeasin Arafat for their beautiful original work that we recreated with JetpackCompose.

Animated Navigation Bar on GitHub: https://github.com/exyte/AndroidAnimatedNavigationBar
Platform: Android
⭐️: 55