BubbleTabBar

Additional

Language
Kotlin
Version
N/A
Created
Aug 20, 2019
Updated
Jan 18, 2021
Owner
Akshay sharma (akshay2211)
Contributors
Vadim Kotov (vkotovv)
Codacy Badger (codacy-badger)
Akshay sharma (akshay2211)
Islam Khaled (IslamKhSh)
Saksham Khurana (DawnImpulse)
André Silva (andre00nogueira)
6
Activity
Badge
Generate
Download
Source code
APK file

Advertising

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) {
                   
               }
           })

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

Java Implementation

for 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!