Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Droppers/AnimatedBottomBar

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.
https://github.com/Droppers/AnimatedBottomBar

android android-bottom-navigation android-library android-tabs android-ui animations badges bottom-navigation bottombar bottomnavigationview customizable java kotlin navcontroller navigation navigationbar navigationcomponent sleek-animations viewpager viewpager2

Last synced: about 1 month ago
JSON representation

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

Lists

README 

        


AnimatedBottomBar











  



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






    

    

    

    By Joery Droppers




## Screenshots






## Playground app




Download the playground app from Google Play, with this app you can try out all features and even generate XML with your selected configuration.






## Contents

- [Getting started](#getting-started)

- [Managing tabs](#managing-tabs)

- [Usage with ViewPager](#usage-with-viewpager)

- [Configuration](#configuration)



## Getting started



This library is available on Maven Central, install it by adding the following dependency to your build.gradle:

```gradle

implementation 'nl.joery.animatedbottombar:library:1.1.0'

```



*Versions 1.0.x can only be used with jCenter, versions 1.1.x and up can be used with Maven Central.*



Define `AnimatedBottomBar` in your XML layout with custom attributes.

```xml



```



Create a file named `tabs.xml` in the `res/menu/` resources folder:

```xml



    

    

    

    



```



Get notified when the selected tab changes by setting callbacks:

```kotlin

bottom_bar.onTabSelected = {

    Log.d("bottom_bar", "Selected tab: " + it.title)

}

bottom_bar.onTabReselected = {

    Log.d("bottom_bar", "Reselected tab: " + it.title)

}

```



Or set a listener if you need more detailed information:

```kotlin

bottom_bar.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {

    override fun onTabSelected(

        lastIndex: Int,

        lastTab: AnimatedBottomBar.Tab?,

        newIndex: Int,

        newTab: AnimatedBottomBar.Tab

    ) {

        Log.d("bottom_bar", "Selected index: $newIndex, title: ${newTab.title}")

    }



    // An optional method that will be fired whenever an already selected tab has been selected again.

    override fun onTabReselected(index: Int, tab: AnimatedBottomBar.Tab) {

        Log.d("bottom_bar", "Reselected index: $index, title: ${tab.title}")

    }

})

```



## Managing tabs

Short overview on how to manage tabs using code.



### Creating new tabs

```kotlin

// Creating a tab by passing values

val bottomBarTab1 = AnimatedBottomBar.createTab(drawable, "Tab 1")



// Creating a tab by passing resources

val bottomBarTab2 = AnimatedBottomBar.createTab(R.drawable.ic_home, R.string.tab_2, R.id.tab_home)

```

### Adding new tabs

```kotlin 

// Adding a tab at the end

AnimatedBottomBar.addTab(bottomBarTab1)



// Add a tab at a specific position

AnimatedBottomBar.addTabAt(1, bottomBarTab2)

```



### Removing tabs

```kotlin

// Removing a tab by object reference

val tabToRemove = AnimatedBottomBar.tabs[1]

AnimatedBottomBar.removeTab(tabToRemove)



// Removing a tab at a specific position

AnimatedBottomBar.removeTabAt(tabPosition)



// Removing a tab by the given ID resource

AnimatedBottomBar.removeTabById(R.id.tab_home)

```



### Selecting tabs

```kotlin

// Selecting a tab by object reference

val tabToSelect = AnimatedBottomBar.tabs[1]

AnimatedBottomBar.selectTab(tabToSelect)



// Selecting a tab at a specific position

AnimatedBottomBar.selectTabAt(1)



// Selecting a tab by the given ID resource

AnimatedBottomBar.selectTabById(R.id.tab_home)

```



### Enabling / disabling tabs

```kotlin

// Disabling a tab by object reference

val tabToDisable = AnimatedBottomBar.tabs[1]

AnimatedBottomBar.setTabEnabled(tabToDisable, false) // Use true for re-enabling the tab



// Disabling a tab at a specific position

AnimatedBottomBar.setTabEnabledAt(1, false)



// Disabling a tab by the given ID resource

AnimatedBottomBar.setTabEnabledById(R.id.tab_home, false)

```



### Intercepting tabs

This could be useful for example restricting access to a premium area. You can use a callback or a more detailed listener:

```kotlin

bottom_bar.onTabIntercepted = {

    if (newTab.id == R.id.tab_pro_feature && !hasProVersion) {

        // e.g. show a dialog

        false

    }

    true

}

```



Detailed listener:

```kotlin

bottom_bar.setOnTabInterceptListener(object : AnimatedBottomBar.OnTabInterceptListener {

    override fun onTabIntercepted(

        lastIndex: Int,

        lastTab: AnimatedBottomBar.Tab?,

        newIndex: Int,

        newTab: AnimatedBottomBar.Tab

    ): Boolean {

        if (newTab.id == R.id.tab_pro_feature && !hasProVersion) {

            // e.g. show a dialog

            return false

        }

        return true

    }

})

```



## Tab badges

Instructions on how to set badges for tabs, a `AnimatedBottomBar.Badge` object should be supplied to the BottomBar, note that it is also possible to add badges without text.



### Adding badges

```kotlin

// Adding a badge by tab reference

val tabToAddBadgeAt = AnimatedBottomBar.tabs[1]

AnimatedBottomBar.setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar.Badge("99"))



// Adding a badge at a specific position

AnimatedBottomBar.setBadgeAtTabIndex(1, AnimatedBottomBar.Badge("99"))



// Adding a badge at the given ID resource

AnimatedBottomBar.setBadgeAtTabId(R.id.tab_home, AnimatedBottomBar.Badge("99"))

```



### Removing badges

```kotlin

// Removing a badge by tab reference

val tabToRemoveBadgeFrom = AnimatedBottomBar.tabs[1]

AnimatedBottomBar.clearBadgeAtTab(tabToRemoveBadgeFrom)



// Removing a badge at a specific position

AnimatedBottomBar.clearBadgeAtTabIndex(1, AnimatedBottomBar.Badge("99"))



// removing a badge at the given ID resource

AnimatedBottomBar.clearBadgeAtTabId(R.id.tab_home, AnimatedBottomBar.Badge("99"))

```



### Styling individual badges

Additionally there is also the possibility to individually style badges.

```kotlin

AnimatedBottomBar.Badge(

    text = "99",

    backgroundColor = Color.RED,

    textColor = Color.GREEN,

    textSize =  12.spPx // in pixels

)

```



## Usage with ViewPager

It is easy to use the BottomBar with a ViewPager or ViewPager2, you can simply use the `setupWithViewPager()` method. Please note that the number of tabs and ViewPager pages need to be identical in order for it to function properly.



Usage

```kotlin

// For ViewPager use:

bottom_bar.setupWithViewPager(yourViewPager)



// For ViewPager2 use:

bottom_bar.setupWithViewPager2(yourViewPager2)

```



## Configuration

An overview of all configuration options. All options can also be accessed and set programmatically, by their equivalent name.



### Tabs



    

        Attribute

        Description

        Default

    

    

        abb_tabs

        Tabs can be defined in a menu file (Menu resource), in the res/menu/ resource folder.

The icon and title attribute are required. By default all tabs are enabled, set android:enabled to false to disable a tab.


<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/tab_example"

        android:icon="@drawable/ic_example"

        android:title="@string/tab_example"

        android:enabled="true|false" />

    ...etc

</menu>



        

    

    

        abb_selectedIndex

        Define the default selected tab index.

        

    

    

        abb_selectedTabId

        Define the default selected tab by its ID, for example @id/tab_id

        

    



### Tab appearance



    

        Attribute

        Description

        Default

    

    

        abb_selectedTabType

        

            Determines whether the icon or text should be shown when a tab has been selected.



            icon


            


            text


            


        

        icon

    

    

        abb_tabColor

        The color of the icon or text when the tab is not selected.

        @color/textColorPrimary

    

    

        abb_tabColorSelected

        The color of the icon or text when the tab is selected.

        @color/colorPrimary

    

    

        abb_tabColorDisabled

        The color of the icon or text whenever the tab has been disabled.

        @color/textColorSecondary

    

    

        abb_textAppearance

        Customize the look and feel of text in tabs, down below is an example of a custom text appearance.



            Define a new style in res/values/styles.xml:


<style name="CustomText">

    <item name="android:textAllCaps">true</item>

    <item name="android:fontFamily">serif</item>

    <item name="android:textSize">16sp</item>

    <item name="android:textStyle">italic|bold</item>

</style>





        

        

    

    

        abb_textStyle

        Style (normal, bold, italic, bold|italic) for the text.



            Use bottom_bar.typeface to programmatically set text style.

        normal

    

    

        abb_textSize

        Size of the text. Recommended dimension type for text is "sp" (scaled-pixels), for example: 14sp.

        14sp

    

    

        abb_iconSize

        Increase or decrease the size of the icon.

        24dp

    

    

        abb_rippleEnabled

        Enables the 'ripple' effect when selecting a tab.



            

        false

    

    

        abb_rippleColor

        Change the color of the aforementioned ripple effect.

        Default theme color

    



### Badges



    

        Attribute

        Description

        Default

    

    

        abb_badgeBackgroundColor

        

            The background color of the badges.

        

        #ff0c10 (red)

    

    

        abb_badgeTextColor

        

            The text color of the text inside the badges.

        

        #FFFFFF

    

    

        abb_badgeTextSize

        

            The text size of the text inside the badges. Recommended dimension type for text is "sp" (scaled-pixels), for example: 14sp.

        

        10sp

    

    

        abb_badgeAnimation

        

            The enter and exit animation type for badges.



            none


            scale


            fade


        

        scale

    

    

        abb_badgeAnimationDuration

        

            The duration of the entry and exit animation of a badge.

        

        150

    



### Animations



    

        Attribute

        Description

        Default

    

    

        abb_animationDuration

        

            The duration of all animations, including the indicator animation.

        

        400

    

    

        abb_tabAnimation

        

            The enter and exit animation style of the tabs which are not selected.



            none


            


            slide


            


            fade


            


        

        fade

    

    

        abb_tabAnimationSelected

        

            The enter and exit animation style of the selected tab.



            none


            


            slide


            


            fade


            


        

        slide

    

    

        abb_animationInterpolator

        

            The interpolator used for all animations.

See "Android Interpolators: A Visual Guide" for more information on available interpolators.



            Example value: @android:anim/overshoot_interpolator


            

        

        FastOutSlowInInterpolator

    



### Indicator



    

        Attribute

        Description

        Default

    

    

        abb_indicatorColor

        The color of the indicator.

        @android/colorPrimary

    

    

        abb_indicatorHeight

        The height of the indicator.

        3dp

    

    

        abb_indicatorMargin

        The horizontal margin of the indicator. This determines the width of the indicator.

        0dp

    

    

        abb_indicatorAppearance

        

            Configure the shape of the indicator either to be square or round.



            invisible


            


            square


            


            round


            


        

        square

    

    

        abb_indicatorLocation

        

            Configure the location of the selected tab indicator, top, bottom or invisible.



            top


            


            bottom


            


        

        top

    

    

        abb_indicatorAnimation

        

            The animation type of the indicator when changing the selected tab.



            none


            



            slide


            


            fade


            

        

        slide

    



## Featured in

- [Android Weekly: Issue 404](https://androidweekly.net/issues/issue-404)

- [Medium: The 25 Best Android Libraries and Projects of 2020](https://medium.com/better-programming/25-best-android-libraries-projects-of-2020-summer-edition-dfb030a7fb0a)

- [Medium: The Top 5 Trending Android Libraries From Q1 2020](https://medium.com/better-programming/the-top-5-trending-android-libraries-from-q1-2020-45deda73af0f)



## Credits

- [Dribble: Readable Tab Bar](https://dribbble.com/shots/6130593-Readable-Tab-Bar)



## License

```

MIT License



Copyright (c) 2021 Joery Droppers (https://github.com/Droppers)



Permission is hereby granted, free of charge, to any person obtaining a copy

of this software and associated documentation files (the "Software"), to deal

in the Software without restriction, including without limitation the rights

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the Software is

furnished to do so, subject to the following conditions:



The above copyright notice and this permission notice shall be included in all

copies or substantial portions of the Software.



THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

SOFTWARE.

```