BubbleTabBar is bottom navigation bar with customizable bubble like tabs

Overview

BubbleTabBar

BubbleTabBar is bottom navigation bar with customizable bubble like tabs

Codacy Badge BubbleTabBar

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

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!

Comments
  • First bubble text shown on activity recreate from saved state

    First bubble text shown on activity recreate from saved state

    Hello, thank you for your great work on useful library!

    I found a small bug relatively long time ago, but cannot find a way to reproduce it. Now I can :)

    When user left from the app on 2 or any next page and activity with viewpager recreated from saved state after app resume, colored text of first bubble unexpectedly shown. This behaviour can be forced (for testing purpose only, of course) in developer settings in this way: https://stackoverflow.com/a/19622671

    I attached screenshot of sample app with force "do not keep activities" enabled. (In real world this process may take a long time, but it will definitely happen)

    image

    Please take a look at this when you have time)

    wontfix 
    opened by vellrya 4
  • Customize MenuItem title.

    Customize MenuItem title.

    Hi akshay2211, Thanks you for providing me a great library. I love using it!

    However, it restricts me to customize the MenuItem titles. I found no way to modify it.

    I would appreciate if you could guide me how to change, or maybe improve it in latter version.

    Regards,

    opened by ionate12 4
  • Bubble tab stutters

    Bubble tab stutters

    Hi,

    I am trying to load BubbleTabBar in my activity. But because there was slow loading I set offScreenPageLimit to 1 (default). I have checked network calls in my app prior to setting offscreenpagelimit to my viewpager.

    Everything loads properly but when I try to switch between the tabs, it stutters. The transition isn't smooth. Noticing a lag.

    Can you help?

    opened by dighechinmay 3
  • Attempt to invoke virtual method 'int io.ak1.Bubble.getId()' on a null object reference

    Attempt to invoke virtual method 'int io.ak1.Bubble.getId()' on a null object reference

    My app implement navigation controller. I got this error when try to navigate to another fragment within navigation graph. My first MovieFragment has deep link to MovieDetailFragment.

    Error log :

    java.lang.NullPointerException: Attempt to invoke virtual method 'int io.ak1.Bubble.getId()' on a null object reference
            at io.ak1.BubbleTabBar.setSelectedWithId(BubbleTabBar.kt:69)
            at com.kadon.moviebasejetpack.MainActivity.onCreate$lambda-1(MainActivity.kt:40)
            at com.kadon.moviebasejetpack.MainActivity.lambda$m7AD07XFDrhvcoED8pyMVzjbbRU(Unknown Source:0)
            at com.kadon.moviebasejetpack.-$$Lambda$MainActivity$m7AD07XFDrhvcoED8pyMVzjbbRU.onDestinationChanged(Unknown Source:2)
            at androidx.navigation.NavController.dispatchOnDestinationChanged(NavController.java:504)
            at androidx.navigation.NavController.navigate(NavController.java:1149)
            at androidx.navigation.NavController.navigate(NavController.java:944)
            at androidx.navigation.NavController.navigate(NavController.java:877)
            at androidx.navigation.NavController.navigate(NavController.java:863)
            at com.kadon.moviebasejetpack.ui.movie.MovieFragment.onClickedCharacter(MovieFragment.kt:56)
    

    This is my MainActivity :

    override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            binding = ActivityMainBinding.inflate(layoutInflater)
            setContentView(binding.root)
    
            val bubble = binding.bubbleTabBar
    
            val navHostFragment = supportFragmentManager.findFragmentById(
                R.id.nav_host_fragment_activity_main
            ) as NavHostFragment
            navController = navHostFragment.navController
    
            appBarConfiguration = AppBarConfiguration(navController.graph)
            setupActionBarWithNavController(navController, appBarConfiguration)
    
            bubble.addBubbleListener { id ->
                bubble.onNavDestinationSelected(id, navController)
            }
    
            navController.addOnDestinationChangedListener { _, destination, _ ->
                bubble.setSelectedWithId(destination.id, false)
            }
    
        }
    

    This HomeFragment list onclick listner :

    private fun onClickedCharacter(id: Int) {
            findNavController().navigate(
                R.id.action_navigation_movie_to_navigation_movie_detail,
                bundleOf("id" to id)
            )
        }
    
    opened by heskadon 2
  • ViewPager2 Support

    ViewPager2 Support

    Hey akshay2211, I just updated my project from ViewPager to ViewPager2 and found out that your library does not support it. Are there any thoughts of updating your code? Btw, can you please suggest any work-around solutions to alternate this:

    fun setupBubbleTabBar(viewPager: ViewPager) {
            viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
                override fun onPageScrollStateChanged(state: Int) {
                }
    
                override fun onPageScrolled(
                    position: Int,
                    positionOffset: Float,
                    positionOffsetPixels: Int
                ) {
                }
    
                override fun onPageSelected(position: Int) {
                    setSelected(position)
                }
            })
        }
    

    Thanks. Ionate12

    wontfix 
    opened by ionate12 2
  • Make tab scrollable

    Make tab scrollable

    First of all, thanks for your library! I've got a problem with BubbleTabBar: while it looks awesome on my tablet on my phone if I've got too many items the icons are squished/cut and the same happens with the text. Since I can't remove any item from this bar, do you think it's possible to make it scrollable to fit (theorically) any number of items without cutting them?

    Screenshot_20200217_180341_it tipsyapp caneva

    opened by IvanMazzoli 2
  • Custom Font

    Custom Font

    For "app:bubbletab_custon_font" attribute, suggestions show @strings which is wrong IMHO, It should show @font instead. Please reply how can one apply custom font.

    Regards

    opened by harshsingh98 2
  • Java compatible

    Java compatible

    Hello @akshay2211

    This is good library, but it make more flexible if you show java compatibility, Please elaborate your kotlin classes in java Structure or how to use this library in java.

    Thanks

    opened by rajam1215 2
  • How to connect with NavController in Java?

    How to connect with NavController in Java?

    Can you show me a java example how to use it with navigation component?

    When I try to use NavigationUI.onNavDestinationSelected() it asks me for MenuItem

    image

    wontfix 
    opened by mso45mso 1
  • How To Perform Android Instrument Testing

    How To Perform Android Instrument Testing

    How to perform android Instrument testing something like : onView(withId(R.id.bubbleTabBar)).perform(NavigationViewActions.navigateTo(R.id.navigation_user_profile))

    or how to perform click to R.id.bubbleTabBar menu

    opened by heskadon 1
  • Received status code 403 from server: Forbidden

    Received status code 403 from server: Forbidden

    classpath 'com.android.tools.build:gradle:4.2.1'

    When delete jcenter() i get

    Could not GET 'http://dl.bintray.com/lukaville/maven/com/fxn769/bubbletabbar/1.0.6/bubbletabbar-1.0.6.pom'. Received status code 403 from server: Forbidden

    opened by serrokitskiy 1
Owner
Akshay sharma
Developer | Freelancer | Inquisitive | Autodidact | Creative
Akshay sharma
Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

Zain Ul Hassan 4 Nov 30, 2022
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Alperen Çevlik 3 Jul 27, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 5 Nov 24, 2022
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Kaique Ocanha 6 Jun 15, 2022
Implementing bottom navigation in jetpack compose

Compose-Bottom-Navigation Implementing bottom navigation in jetpack compose Add the Navigation dependency Open the app's build file, found at app/buil

Steve Chacha 5 Dec 26, 2021
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

Hamidreza Etebarian 1.2k Dec 30, 2022
🎉 [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of 🎨 customization option.

Bubble Navigation ?? A light-weight library to easily make beautiful Navigation Bars with a ton of ?? customization options. Demos FloatingTopBarActiv

Gaurav Kumar 1.7k Dec 31, 2022
An android navigation bar widget

Chip Navigation Bar A navigation bar widget inspired on Google Bottom Navigation mixed with Chips component. Usage <!-- bottom_menu.xml --> <menu xmln

Ismael Di Vita 743 Jan 1, 2023
React Native lets you customize the navigation bar for Android.

react-native-system-navigation-bar React Native lets you customize the navigation bar for Android. Hide Lean Back Immersive Sticky Immersive Low Profi

Kadir Aydınlı 120 Jan 3, 2023
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

AnimatedBottomBar A customizable and easy to use bottom bar view with sleek animations. Examples Playground app Download the playground app from Googl

Joery 1.2k Dec 30, 2022
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

Joery Droppers 1000 Dec 5, 2021
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

Vitali Olshevski 290 Dec 29, 2022
A simple, highly customizable compose navigation component for Android & Desktop platform.

介绍 一个简单并提供高度扩展功能的 Compose 导航组件,同时支持 Android 和 Desktop 平台。 常用功能 使用 下载 // Android implementation("io.github.succlz123:compose-screen-android:0.0.1") //

Ning 15 Nov 24, 2022
Jetpack Compose BottomDrawerScaffold (Material Bottom Drawer)

BottomDrawerScaffold Current Compose Version: 1.0.2 Compose BottomDrawerScaffold which implements the Material Bottom Drawer https://material.io/compo

Alexander Karkossa 8 Dec 28, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Artur Artikov 290 Dec 9, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Jeziel Lago 21 Dec 10, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Breens Mbaka 6 Feb 3, 2022
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

Gabor Varadi 1.3k Jan 2, 2023
Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Kaique Ocanha 4 Jun 15, 2022