AnimatedBottomBar
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.
Install / Use
/learn @Droppers/AnimatedBottomBarREADME
<img src="https://maven-badges.herokuapp.com/maven-central/nl.joery.animatedbottombar/library/badge.svg" height="22" valign="middle"> <img src="https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat" height="22" valign="middle"> <img src="https://img.shields.io/badge/License-MIT-yellow.svg" height="22" valign="middle"> <img src= "https://joery.nl/static/vector/logo.svg" height="22" valign="middle"> By <a href="https://joery.nl">Joery Droppers</a>
</h6>Screenshots
<img src="./media/example/example-2.gif" width="350" /> <img src="./media/example/example-4.gif" width="350" />Playground app
<img src="./media/static/playground-demo.png" width="400" />Download the playground app from Google Play, with this app you can try out all features and even generate XML with your selected configuration.
<a href="https://play.google.com/store/apps/details?id=nl.joery.demo.animatedbottombar"><img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" width="200" /></a>
Contents
Getting started
This library is available on Maven Central, install it by adding the following dependency to your <b>build.gradle</b>:
implementation 'nl.joery.animatedbottombar:library:1.1.0'
Versions 1.0.x can only be used with jCenter, versions 1.1.x and up can be used with Maven Central.
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 by setting callbacks:
bottom_bar.onTabSelected = {
Log.d("bottom_bar", "Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
Log.d("bottom_bar", "Reselected tab: " + it.title)
}
Or set a listener if you need more detailed information:
bottom_bar.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {
override fun onTabSelected(
lastIndex: Int,
lastTab: AnimatedBottomBar.Tab?,
newIndex: Int,
newTab: AnimatedBottomBar.Tab
) {
Log.d("bottom_bar", "Selected index: $newIndex, title: ${newTab.title}")
}
// An optional method that will be fired whenever an already selected tab has been selected again.
override fun onTabReselected(index: Int, tab: AnimatedBottomBar.Tab) {
Log.d("bottom_bar", "Reselected index: $index, title: ${tab.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)
Enabling / disabling tabs
// Disabling a tab by object reference
val tabToDisable = AnimatedBottomBar.tabs[1]
AnimatedBottomBar.setTabEnabled(tabToDisable, false) // Use true for re-enabling the tab
// Disabling a tab at a specific position
AnimatedBottomBar.setTabEnabledAt(1, false)
// Disabling a tab by the given ID resource
AnimatedBottomBar.setTabEnabledById(R.id.tab_home, false)
Intercepting tabs
This could be useful for example restricting access to a premium area. You can use a callback or a more detailed listener:
bottom_bar.onTabIntercepted = {
if (newTab.id == R.id.tab_pro_feature && !hasProVersion) {
// e.g. show a dialog
false
}
true
}
Detailed listener:
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 false
}
return true
}
})
Tab badges
Instructions on how to set badges for tabs, a AnimatedBottomBar.Badge object should be supplied to the BottomBar, note that it is also possible to add badges without text.
Adding badges
// Adding a badge by tab reference
val tabToAddBadgeAt = AnimatedBottomBar.tabs[1]
AnimatedBottomBar.setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar.Badge("99"))
// Adding a badge at a specific position
AnimatedBottomBar.setBadgeAtTabIndex(1, AnimatedBottomBar.Badge("99"))
// Adding a badge at the given ID resource
AnimatedBottomBar.setBadgeAtTabId(R.id.tab_home, AnimatedBottomBar.Badge("99"))
Removing badges
// Removing a badge by tab reference
val tabToRemoveBadgeFrom = AnimatedBottomBar.tabs[1]
AnimatedBottomBar.clearBadgeAtTab(tabToRemoveBadgeFrom)
// Removing a badge at a specific position
AnimatedBottomBar.clearBadgeAtTabIndex(1, AnimatedBottomBar.Badge("99"))
// removing a badge at the given ID resource
AnimatedBottomBar.clearBadgeAtTabId(R.id.tab_home, AnimatedBottomBar.Badge("99"))
Styling individual badges
Additionally there is also the possibility to individually style badges.
AnimatedBottomBar.Badge(
text = "99",
backgroundColor = Color.RED,
textColor = Color.GREEN,
textSize = 12.spPx // in pixels
)
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.
<b>Usage</b>
// 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.
