BubbleTabBar

BubbleTabBar is bottom navigation bar with customizable bubble like tabs

Usage

<io.ak1.BubbleTabBar
               android:id="@+id/bubbleTabBar"
               android:layoutwidth="matchparent"
               android:layoutheight="wrapcontent"
               android:background="#FFF"
               android:elevation="16dp"
               android:padding="7dp"
               app:bubbletab_menuResource="@menu/list"
               app:bubbletabcustomf
               app:bubbletabdisabledic
               app:bubbletab_horiz
               app:bubbletab_ic
               app:bubbletabtitlesize="16sp"
               app:bubbletab_ic
               app:bubbletabverticalpadding="10dp"
               app:bubbletabtabcorner_radius="25dp">
       </io.ak1.BubbleTabBar>

or just use

<io.ak1.BubbleTabBar
               android:id="@+id/bubbleTabBar"
               android:layoutwidth="matchparent"
               android:layoutheight="wrapcontent"
               android:padding="7dp"
               app:bubbletab_menuResource="@menu/list">
       </io.ak1.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) {
                   
               }
           })

Connect with components like ViewPager, ViewPager2 and NavController

Setup 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,  ->
                setSelectedWithId(destination.id, false)
            }

Java Implementation

for Java-Implementation

Credits

Thanks to Ariana for transition in sample

Download

include in app level build.gradle

repositories {           mavenCentral()         }

implementation  'io.ak1:bubbletabbar:1.0.8'

or Maven:

<dependency>             <groupId>io.ak1</groupId>             <artifactId>bubbletabbar</artifactId>             <version>1.0.8</version>             <type>pom</type>         </dependency>

or ivy:

<dependency org='io.ak1' name='bubbletabbar' rev='1.0.8'>             <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 :coffee: to keep me recharged :metal: 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!