BubbleTabBar
BubbleTabBar is bottom navigation bar with customizable bubble like tabs
Usage
<com.fxn.BubbleTabBar
android:id="@+id/bubbleTabBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFF"
android:elevation="16dp"
android:padding="7dp"
app:bubbletab_menuResource="@menu/list"
app:bubbletab_custom_font="@font/opensans"
app:bubbletab_disabled_icon_color="@color/colorPrimaryDark"
app:bubbletab_horizontal_padding="20dp"
app:bubbletab_icon_size="20dp"
app:bubbletab_title_size="16sp"
app:bubbletab_icon_padding="5sp"
app:bubbletab_vertical_padding="10dp">
</com.fxn.BubbleTabBar>
or just use
<com.fxn.BubbleTabBar
android:id="@+id/bubbleTabBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="7dp"
app:bubbletab_menuResource="@menu/list">
</com.fxn.BubbleTabBar>
inflate menu list
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/home"
android:icon="@drawable/ic_grid"
android:title="Home"
android:checked="true"
android:color="@color/home"/>
<item
android:id="@+id/log"
android:icon="@drawable/ic_clock"
android:title="Logger"
android:color="@color/logger"/>
</menu>
add onclick listener
bubbleTabBar.addBubbLeListener(object : OnBubbleClickListener{
override fun onBubbleClick(id: Int) {
}
})
ViewPager, ViewPager2 and NavController
connect with components likesetup ViewPager to BubbleTabBar
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
override fun onPageScrolled(
position: Int,
positionOffset: Float,
positionOffsetPixels: Int
) {
}
override fun onPageSelected(position: Int) {
bubbleTabBar.setSelected(position, false)
}
override fun onPageScrollStateChanged(state: Int) {
}
})
setup ViewPager2 to BubbleTabBar
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
bubbleTabBar.setSelected(position)
}
})
setup NavController to BubbleTabBar
onNavDestinationSelected can be found in here
bubbleTabBar.addBubbleListener { id ->
bubbleTabBar.onNavDestinationSelected(id, navController)
}
navController.addOnDestinationChangedListener { _, destination, _ ->
bubbleTabBar.setSelectedWithId(destination.id, false)
}
Java Implementation
Credits
Thanks to Ariana for transition in sample
IOS
Similar library BubbleTabBar by Cuberto
Download
include in app level build.gradle
repositories {
maven { url 'https://jitpack.io' }
}
implementation 'com.fxn769:bubbletabbar:1.0.6'
or Maven:
<dependency>
<groupId>com.fxn769</groupId>
<artifactId>bubbletabbar</artifactId>
<version>1.0.6</version>
<type>pom</type>
</dependency>
or ivy:
<dependency org='com.fxn769' name='bubbletabbar' rev='1.0.6'>
<artifact name='bubbletabbar' ext='pom' ></artifact>
</dependency>
License
Licensed under the Apache License, Version 2.0, click here for the full license.
Author & support
This project was created by Akshay Sharma.
If you appreciate my work, consider buying me a cup of
☕ to keep me recharged🤘 by PayPal
I love using my work and I'm available for contract work. Freelancing helps to maintain and keep my open source projects up to date!