A customizable bottom bar library with curved animations

by androidexample

SSCustomBottomNavigation

Getting Started

SSCustomBottomNavigation is a customizable bottom bar library with curved animations.

The actual features are:

  • Bottom Bar which have customizable text, color, background, icon.
  • Animated wave with customizable height

Demo

Gradle Dependency

  • Add it in your root build.gradle at the end of repositories:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  • Add the dependency in your app's build.gradle file
dependencies {
	implementation 'com.github.simformsolutions:SSCustomBottomNavigation:1.0'
}

All Attributes

Attribute Description Default
app:ss_defaultIconColor Set Default Icon Color #757575
app:ss_selectedIconColor Set Selected Icon Color #00C957
app:ss_iconTextColor Set Bottom Bar Text Color #003F87
app:ss_iconTextTypeface Set Bottom Bar Fonts #none
app:ss_selectedIconTextColor Set Bottom Bar Selected Text Color #003F87
app:ss_iconTextSize Set Bottom Bar Text size 10sp
app:ss_waveHeight Set Wave Height 7
app:ss_backgroundBottomColor Set Background Color for Bottom Bar #FF5733
app:ss_countBackgroundColor Set Background Color for Notification Badge #ff0000
app:ss_countTextColor Set Notification Badge text Color #9281c1
app:ss_countTypeface Set Font for Notification Badge none
app:ss_rippleColor Set Ripple Color #757575
app:ss_shadowColor Set Bottom Bar Shadow Color shadowColor

Customization

Usage

<com.simform.custombottomnavigation.SSCustomBottomNavigation
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:ss_backgroundBottomColor="#ffffff"
            app:ss_circleColor="#ff6f00"
            app:ss_waveHeight="7"
            app:ss_countBackgroundColor="#ff6f00"
            app:ss_countTextColor="#ffffff"
            app:ss_countTypeface="fonts/graphik_semibold.ttf"
            app:ss_defaultIconColor="#6200EE"
            app:ss_iconTextColor="#6200EE"
            app:ss_iconTextTypeface="fonts/graphik_semibold.ttf"
            app:ss_rippleColor="#2f424242"
            app:ss_iconTextSize="14sp"
            app:ss_selectedIconColor="#ff6f00"
            app:ss_selectedIconTextColor="#ff6f00"
            app:ss_shadowColor="#1f212121" />

GitHub