/ Tabs

Bottom navigation bar with customizable bubble like tabs

Bottom navigation bar with customizable bubble like tabs

BubbleTabBar

BubbleTabBar is bottom navigation bar with customizable bubble like tabs.

animation

media

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_disabled_icon_color="@color/colorPrimaryDark"
               app:bubbletab_horizontal_padding="20dp"
               app:bubbletab_icon_size="20dp"
               app:bubbletab_title_size="16sp"
               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:iconTint="@color/home"/>

    <item
        android:id="@+id/log"
        android:icon="@drawable/ic_clock"
        android:title="Logger"
        android:iconTint="@color/logger"/>
</menu>
            

add onclick listener

   bubbleTabBar.addBubbLeListener(object : OnBubbleClickListener{
               override fun onBubbleClick(id: Int) {
                   
               }
           })

setup viewpager to BubbleTabBar


   bubbleTabBar.setupBubbleTabBar(viewpager)
   

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.1'

or Maven:

        <dependency>
            <groupId>com.fxn769</groupId>
            <artifactId>bubbletabbar</artifactId>
            <version>1.0.1</version>
            <type>pom</type>
        </dependency>

or ivy:

        <dependency org='com.fxn769' name='bubbletabbar' rev='1.0.1'>
            <artifact name='bubbletabbar' ext='pom' ></artifact>
        </dependency>

GitHub