A customizable and easy to use BottomBar navigation view with sleek animations

AnimatedBottomBar

A customizable and easy to use bottom bar view with sleek animations.

Examples

Demo app

Download the app showcasing the examples: demo.apk

Getting started

Add the following dependency to your build.gradle:

implementation 'nl.joery.animatedbottombar:library:1.0.4'

Define AnimatedBottomBar in your XML layout with custom attributes.

<nl.joery.animatedbottombar.AnimatedBottomBar
    android:id="@+id/bottom_bar"
    android:background="#FFF"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:abb_selectedTabType="text"
    app:abb_indicatorAppearance="round"
    app:abb_indicatorMargin="16dp"
    app:abb_indicatorHeight="4dp"
    app:abb_tabs="@menu/tabs"
    app:abb_selectedIndex="1" />

Create a file named tabs.xml in the res/menu/ resources folder:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_home"
        android:icon="@drawable/home"
        android:title="@string/home" />
    <item
        android:id="@+id/tab_alarm"
        android:icon="@drawable/alarm"
        android:title="@string/alarm" />
    <item
        android:id="@+id/tab_bread"
        android:icon="@drawable/bread"
        android:title="@string/bread" />
    <item
        android:id="@+id/tab_cart"
        android:icon="@drawable/cart"
        android:title="@string/cart" />
</menu>

Get notified when the selected tab changes:

bottom_bar.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
    override fun onTabSelected(
        lastIndex: Int,
        lastTab: AnimatedBottomBar.Tab?,
        newIndex: Int,
        newTab: AnimatedBottomBar.Tab
    ) {
        Log.d("TAB_SELECTED", "Selected index: $newIndex, title: ${newTab.title}")
    }
})

Managing tabs

Short overview on how to manage tabs using code.

Creating new tabs

// Creating a tab by passing values
val bottomBarTab1 = AnimatedBottomBar.createTab(drawable, "Tab 1")

// Creating a tab by passing resources
val bottomBarTab2 = AnimatedBottomBar.createTab(R.drawable.ic_home, R.string.tab_2, R.id.tab_home)

Adding new tabs

// Adding a tab at the end
AnimatedBottomBar.addTab(bottomBarTab1)

// Add a tab at a specific position
AnimatedBottomBar.addTabAt(1, bottomBarTab2)

Removing tabs

// Removing a tab by object reference
val tabToRemove = AnimatedBottomBar.tabs[1]
AnimatedBottomBar.removeTab(tabToRemove)

// Removing a tab at a specific position
AnimatedBottomBar.removeTabAt(tabPosition)

// Removing a tab by the given ID resource
AnimatedBottomBar.removeTabById(R.id.tab_home)

Selecting tabs

// Selecting a tab by object reference
val tabToSelect = AnimatedBottomBar.tabs[1]
AnimatedBottomBar.selectTab(tabToSelect)

// Selecting a tab at a specific position
AnimatedBottomBar.selectTabAt(1)

// Selecting a tab by the given ID resource
AnimatedBottomBar.selectTabById(R.id.tab_home)

Intercepting tabs

Could be useful for example restricting access to a premium area.

bottom_bar.setOnTabInterceptListener(object : AnimatedBottomBar.OnTabInterceptListener {
    override fun onTabIntercepted(
        lastIndex: Int,
        lastTab: AnimatedBottomBar.Tab?,
        newIndex: Int,
        newTab: AnimatedBottomBar.Tab
    ): Boolean {
        if (newTab.id == R.id.tab_pro_feature && !hasProVersion) {
            // e.g. show a dialog
            return true;
        }
        return false
    }
})

Usage with ViewPager

It is easy to use the BottomBar with a ViewPager or ViewPager2, you can simply use the setupWithViewPager() method. Please note that the number of tabs and ViewPager pages need to be identical in order for it to function properly.

Usage

// For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager);

// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2);

Configuration

An overview of all configuration options. All options can also be accessed and set programmatically, by their equivalent name.

Tabs

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_example"
        android:icon="@drawable/ic_example"
        android:title="@string/tab_example" />
    ...etc
</menu>

Tab appearance

<style name="CustomText">
    <item name="android:textAllCaps">true</item>
    <item name="android:fontFamily">serif</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">italic|bold</item>
</style>

Animations

Indicator

GitHub