• Stars
    star
    320
  • Rank 131,126 (Top 3 %)
  • Language
    Kotlin
  • License
    MIT License
  • Created over 1 year ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Β Β Β Β Β 

demo

Animated Navigation Bar

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

Read Article Β»

Licence API Maven-Central

Usage

  1. Remember Int to store the current selection
var selectedIndex by remember { mutableStateOf(0) }
  1. 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.

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.

More Repositories

1

Macaw

Powerful and easy-to-use vector graphics Swift library with SVG support
Swift
6,005
star
2

PopupView

Toasts and popups library written with SwiftUI
Swift
3,315
star
3

Grid

The most powerful Grid container missed in SwiftUI
Swift
1,738
star
4

ARTetris

Augmented Reality Tetris made with ARKit and SceneKit
Swift
1,532
star
5

ActivityIndicatorView

A number of preset loading indicators created with SwiftUI
Swift
1,391
star
6

ConcentricOnboarding

SwiftUI library for a walkthrough or onboarding flow with tap actions
Swift
1,350
star
7

FloatingButton

Easily customizable floating button menu created with SwiftUI
Swift
1,098
star
8

ScalingHeaderScrollView

A scroll view with a sticky header which shrinks as you scroll. Written with SwiftUI.
Swift
1,096
star
9

Chat

A SwiftUI Chat UI framework with fully customizable message cells and a built-in media picker
Swift
833
star
10

ReadabilityKit

Preview extractor for news, articles and full-texts in Swift
Swift
830
star
11

fan-menu

Menu with a circular layout based on Macaw
Swift
728
star
12

SVGView

SVG parser and renderer written in SwiftUI
Swift
614
star
13

LiquidSwipe

Example of using SwiftUI to create a beautiful Liquid Swipe control
Swift
523
star
14

AnimatedTabBar

A tabbar with a number of preset animations written in pure SwiftUI
Swift
374
star
15

Macaw-Examples

Various usages of the Macaw library
Swift
353
star
16

MediaPicker

Customizable media picker written with SwiftUI
Swift
316
star
17

replicating

Kotlin
247
star
18

ProgressIndicatorView

An iOS progress indicator view library written in SwiftUI
Swift
247
star
19

ComposeMultiplatformDribbbleAudio

A repo for the Dribbble Replicating Compose Multiplatform article
Kotlin
78
star
20

android-waves-progressbar

A depth gauge progress bar, inspired by Apple Watch dive widget.
Kotlin
46
star
21

clean-swift-article

Swift
37
star
22

FlagAndCountryCode

A country code and flag icon provider library for iOS apps
Swift
37
star
23

AnimatedGradient

Swift
35
star
24

sweet.eclipse

Sweet Eclipse
HTML
33
star
25

OpenAI

Swift
32
star
26

gaster

Ethereum transactions stats for your smart contracts
JavaScript
29
star
27

ShapedBackgroundAndroid

Repo for the instagram-like shaped background on Android
Kotlin
25
star
28

android-replicating

Replicating complex UI using Jetpack Compose
Kotlin
23
star
29

wwdc2020-tutorials

Swift
21
star
30

core-haptics-example

Swift
15
star
31

homebrew-formulae

Ruby
1
star