{"id":13428690,"url":"https://github.com/Droppers/AnimatedBottomBar","last_synced_at":"2025-03-16T01:32:59.634Z","repository":{"id":37665334,"uuid":"243871280","full_name":"Droppers/AnimatedBottomBar","owner":"Droppers","description":"A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.","archived":false,"fork":false,"pushed_at":"2023-02-18T17:36:50.000Z","size":33524,"stargazers_count":1386,"open_issues_count":30,"forks_count":110,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-29T17:43:31.967Z","etag":null,"topics":["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"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Droppers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-28T23:16:59.000Z","updated_at":"2024-10-25T09:28:59.000Z","dependencies_parsed_at":"2024-05-03T15:36:45.213Z","dependency_job_id":null,"html_url":"https://github.com/Droppers/AnimatedBottomBar","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FAnimatedBottomBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FAnimatedBottomBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FAnimatedBottomBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Droppers%2FAnimatedBottomBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Droppers","download_url":"https://codeload.github.com/Droppers/AnimatedBottomBar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814905,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-07-31T01:01:02.912Z","updated_at":"2025-03-16T01:32:59.095Z","avatar_url":"https://github.com/Droppers.png","language":"Kotlin","readme":"\n\u003ch1 align=\"center\"\u003eAnimatedBottomBar\u003c/h1\u003e\u003c/br\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./media/example/example-3.gif\" width=\"350\" /\u003e\n\u003cbr\u003e\n\u003cimg src=\"./media/example/example-1.gif\" width=\"350\" /\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.\n\u003c/p\u003e\n\u003ch6 align=\"center\"\u003e\n\n  \u003cimg src=\"https://maven-badges.herokuapp.com/maven-central/nl.joery.animatedbottombar/library/badge.svg\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/API-14%2B-brightgreen.svg?style=flat\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;\n  \u003cimg src= \"https://joery.nl/static/vector/logo.svg\" height=\"22\" valign=\"middle\"\u003e\u0026nbsp;\u0026nbsp;By \u003ca href=\"https://joery.nl\"\u003eJoery Droppers\u003c/a\u003e\n\u003c/h6\u003e\n\n\n\n## Screenshots\n\u003cimg src=\"./media/example/example-2.gif\" width=\"350\" /\u003e\n\u003cimg src=\"./media/example/example-4.gif\" width=\"350\" /\u003e\n\n## Playground app\n\u003cimg src=\"./media/static/playground-demo.png\"  width=\"400\" /\u003e\n\nDownload the playground app from Google Play, with this app you can try out all features and even generate XML with your selected configuration.\n\n\u003ca href=\"https://play.google.com/store/apps/details?id=nl.joery.demo.animatedbottombar\"\u003e\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg\" width=\"200\" /\u003e\u003c/a\u003e\n\n## Contents\n- [Getting started](#getting-started)\n- [Managing tabs](#managing-tabs)\n- [Usage with ViewPager](#usage-with-viewpager)\n- [Configuration](#configuration)\n\n## Getting started\n\nThis library is available on Maven Central, install it by adding the following dependency to your \u003cb\u003ebuild.gradle\u003c/b\u003e:\n```gradle\nimplementation 'nl.joery.animatedbottombar:library:1.1.0'\n```\n\n*Versions 1.0.x can only be used with jCenter, versions 1.1.x and up can be used with Maven Central.*\n\nDefine `AnimatedBottomBar` in your XML layout with custom attributes.\n```xml\n\u003cnl.joery.animatedbottombar.AnimatedBottomBar\n    android:id=\"@+id/bottom_bar\"\n    android:background=\"#FFF\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    app:abb_selectedTabType=\"text\"\n    app:abb_indicatorAppearance=\"round\"\n    app:abb_indicatorMargin=\"16dp\"\n    app:abb_indicatorHeight=\"4dp\"\n    app:abb_tabs=\"@menu/tabs\"\n    app:abb_selectedIndex=\"1\" /\u003e\n```\n\nCreate a file named `tabs.xml` in the `res/menu/` resources folder:\n```xml\n\u003cmenu xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003citem\n        android:id=\"@+id/tab_home\"\n        android:icon=\"@drawable/home\"\n        android:title=\"@string/home\" /\u003e\n    \u003citem\n        android:id=\"@+id/tab_alarm\"\n        android:icon=\"@drawable/alarm\"\n        android:title=\"@string/alarm\" /\u003e\n    \u003citem\n        android:id=\"@+id/tab_bread\"\n        android:icon=\"@drawable/bread\"\n        android:title=\"@string/bread\" /\u003e\n    \u003citem\n        android:id=\"@+id/tab_cart\"\n        android:icon=\"@drawable/cart\"\n        android:title=\"@string/cart\" /\u003e\n\u003c/menu\u003e\n```\n\nGet notified when the selected tab changes by setting callbacks:\n```kotlin\nbottom_bar.onTabSelected = {\n    Log.d(\"bottom_bar\", \"Selected tab: \" + it.title)\n}\nbottom_bar.onTabReselected = {\n    Log.d(\"bottom_bar\", \"Reselected tab: \" + it.title)\n}\n```\n\nOr set a listener if you need more detailed information:\n```kotlin\nbottom_bar.setOnTabSelectListener(object : AnimatedBottomBar.OnTabSelectListener {\n    override fun onTabSelected(\n        lastIndex: Int,\n        lastTab: AnimatedBottomBar.Tab?,\n        newIndex: Int,\n        newTab: AnimatedBottomBar.Tab\n    ) {\n        Log.d(\"bottom_bar\", \"Selected index: $newIndex, title: ${newTab.title}\")\n    }\n\n    // An optional method that will be fired whenever an already selected tab has been selected again.\n    override fun onTabReselected(index: Int, tab: AnimatedBottomBar.Tab) {\n        Log.d(\"bottom_bar\", \"Reselected index: $index, title: ${tab.title}\")\n    }\n})\n```\n\n## Managing tabs\nShort overview on how to manage tabs using code.\n\n### Creating new tabs\n```kotlin\n// Creating a tab by passing values\nval bottomBarTab1 = AnimatedBottomBar.createTab(drawable, \"Tab 1\")\n\n// Creating a tab by passing resources\nval bottomBarTab2 = AnimatedBottomBar.createTab(R.drawable.ic_home, R.string.tab_2, R.id.tab_home)\n```\n### Adding new tabs\n```kotlin \n// Adding a tab at the end\nAnimatedBottomBar.addTab(bottomBarTab1)\n\n// Add a tab at a specific position\nAnimatedBottomBar.addTabAt(1, bottomBarTab2)\n```\n\n### Removing tabs\n```kotlin\n// Removing a tab by object reference\nval tabToRemove = AnimatedBottomBar.tabs[1]\nAnimatedBottomBar.removeTab(tabToRemove)\n\n// Removing a tab at a specific position\nAnimatedBottomBar.removeTabAt(tabPosition)\n\n// Removing a tab by the given ID resource\nAnimatedBottomBar.removeTabById(R.id.tab_home)\n```\n\n### Selecting tabs\n```kotlin\n// Selecting a tab by object reference\nval tabToSelect = AnimatedBottomBar.tabs[1]\nAnimatedBottomBar.selectTab(tabToSelect)\n\n// Selecting a tab at a specific position\nAnimatedBottomBar.selectTabAt(1)\n\n// Selecting a tab by the given ID resource\nAnimatedBottomBar.selectTabById(R.id.tab_home)\n```\n\n### Enabling / disabling tabs\n```kotlin\n// Disabling a tab by object reference\nval tabToDisable = AnimatedBottomBar.tabs[1]\nAnimatedBottomBar.setTabEnabled(tabToDisable, false) // Use true for re-enabling the tab\n\n// Disabling a tab at a specific position\nAnimatedBottomBar.setTabEnabledAt(1, false)\n\n// Disabling a tab by the given ID resource\nAnimatedBottomBar.setTabEnabledById(R.id.tab_home, false)\n```\n\n### Intercepting tabs\nThis could be useful for example restricting access to a premium area. You can use a callback or a more detailed listener:\n```kotlin\nbottom_bar.onTabIntercepted = {\n    if (newTab.id == R.id.tab_pro_feature \u0026\u0026 !hasProVersion) {\n        // e.g. show a dialog\n        false\n    }\n    true\n}\n```\n\nDetailed listener:\n```kotlin\nbottom_bar.setOnTabInterceptListener(object : AnimatedBottomBar.OnTabInterceptListener {\n    override fun onTabIntercepted(\n        lastIndex: Int,\n        lastTab: AnimatedBottomBar.Tab?,\n        newIndex: Int,\n        newTab: AnimatedBottomBar.Tab\n    ): Boolean {\n        if (newTab.id == R.id.tab_pro_feature \u0026\u0026 !hasProVersion) {\n            // e.g. show a dialog\n            return false\n        }\n        return true\n    }\n})\n```\n\n## Tab badges\nInstructions 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.\n\n### Adding badges\n```kotlin\n// Adding a badge by tab reference\nval tabToAddBadgeAt = AnimatedBottomBar.tabs[1]\nAnimatedBottomBar.setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar.Badge(\"99\"))\n\n// Adding a badge at a specific position\nAnimatedBottomBar.setBadgeAtTabIndex(1, AnimatedBottomBar.Badge(\"99\"))\n\n// Adding a badge at the given ID resource\nAnimatedBottomBar.setBadgeAtTabId(R.id.tab_home, AnimatedBottomBar.Badge(\"99\"))\n```\n\n### Removing badges\n```kotlin\n// Removing a badge by tab reference\nval tabToRemoveBadgeFrom = AnimatedBottomBar.tabs[1]\nAnimatedBottomBar.clearBadgeAtTab(tabToRemoveBadgeFrom)\n\n// Removing a badge at a specific position\nAnimatedBottomBar.clearBadgeAtTabIndex(1, AnimatedBottomBar.Badge(\"99\"))\n\n// removing a badge at the given ID resource\nAnimatedBottomBar.clearBadgeAtTabId(R.id.tab_home, AnimatedBottomBar.Badge(\"99\"))\n```\n\n### Styling individual badges\nAdditionally there is also the possibility to individually style badges.\n```kotlin\nAnimatedBottomBar.Badge(\n    text = \"99\",\n    backgroundColor = Color.RED,\n    textColor = Color.GREEN,\n    textSize =  12.spPx // in pixels\n)\n```\n\n## Usage with ViewPager\nIt 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.\n\n\u003cb\u003eUsage\u003c/b\u003e\n```kotlin\n// For ViewPager use:\nbottom_bar.setupWithViewPager(yourViewPager)\n\n// For ViewPager2 use:\nbottom_bar.setupWithViewPager2(yourViewPager2)\n```\n\n## Configuration\nAn overview of all configuration options. All options can also be accessed and set programmatically, by their equivalent name.\n\n### Tabs\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_tabs\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eTabs can be defined in a menu file (\u003ca href=\"https://developer.android.com/guide/topics/resources/menu-resource\"\u003eMenu resource\u003c/a\u003e), in the \u003ci\u003eres/menu/\u003c/i\u003e resource folder.\u003cbr\u003e\u003cbr\u003eThe \u003cb\u003eicon\u003c/b\u003e and \u003cb\u003etitle\u003c/b\u003e attribute are required. By default all tabs are enabled, set \u003cb\u003eandroid:enabled\u003c/b\u003e to \u003ci\u003efalse\u003c/i\u003e to disable a tab.\n\u003cpre lang=\"xml\"\u003e\n\u0026#x3C;menu xmlns:android=\u0026#x22;http://schemas.android.com/apk/res/android\u0026#x22;\u0026#x3E;\n    \u0026#x3C;item\n        android:id=\u0026#x22;@+id/tab_example\u0026#x22;\n        android:icon=\u0026#x22;@drawable/ic_example\u0026#x22;\n        android:title=\u0026#x22;@string/tab_example\u0026#x22;\n        android:enabled=\u0026#x22;true|false\u0026#x22; /\u0026#x3E;\n    ...etc\n\u0026#x3C;/menu\u0026#x3E;\n\u003c/pre\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_selectedIndex\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eDefine the default selected tab index.\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_selectedTabId\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eDefine the default selected tab by its ID, for example \u003ci\u003e@id/tab_id\u003c/i\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Tab appearance\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_selectedTabType\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            Determines whether the icon or text should be shown when a tab has been selected.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003eicon\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/type-icon.png\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003etext\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/type-text.png\" width=\"240\" /\u003e\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003eicon\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_tabColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe color of the icon or text when the tab is not selected.\u003c/td\u003e\n        \u003ctd\u003e@color/textColorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_tabColorSelected\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe color of the icon or text when the tab is selected.\u003c/td\u003e\n        \u003ctd\u003e@color/colorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_tabColorDisabled\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe color of the icon or text whenever the tab has been disabled.\u003c/td\u003e\n        \u003ctd\u003e@color/textColorSecondary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_textAppearance\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eCustomize the look and feel of text in tabs, down below is an example of a custom text appearance.\u003cbr\u003e\u003cbr\u003e\n            Define a new style in \u003ci\u003eres/values/styles.xml\u003c/i\u003e:\n\u003cpre lang=\"xml\"\u003e\n\u0026lt;style name=\u0026quot;CustomText\u0026quot;\u0026gt;\n    \u0026lt;item name=\u0026quot;android:textAllCaps\u0026quot;\u0026gt;true\u0026lt;/item\u0026gt;\n    \u0026lt;item name=\u0026quot;android:fontFamily\u0026quot;\u0026gt;serif\u0026lt;/item\u0026gt;\n    \u0026lt;item name=\u0026quot;android:textSize\u0026quot;\u0026gt;16sp\u0026lt;/item\u0026gt;\n    \u0026lt;item name=\u0026quot;android:textStyle\u0026quot;\u0026gt;italic|bold\u0026lt;/item\u0026gt;\n\u0026lt;/style\u0026gt;\n\u003c/pre\u003e\n\u003cimg src=\"./media/static/text-appearance.png\" width=\"240\" /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_textStyle\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eStyle (normal, bold, italic, bold|italic) for the text.\u003cbr\u003e\u003cbr\u003e\n            Use \u003ci\u003ebottom_bar.typeface\u003c/i\u003e to programmatically set text style.\u003c/td\u003e\n        \u003ctd\u003enormal\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_textSize\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eSize of the text. Recommended dimension type for text is \"sp\" (scaled-pixels), for example: 14sp.\u003c/td\u003e\n        \u003ctd\u003e14sp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_iconSize\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eIncrease or decrease the size of the icon.\u003c/td\u003e\n        \u003ctd\u003e24dp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_rippleEnabled\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eEnables the 'ripple' effect when selecting a tab.\u003cbr\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/ripple.png\" width=\"240\" /\u003e\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_rippleColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eChange the color of the aforementioned ripple effect.\u003c/td\u003e\n        \u003ctd\u003eDefault theme color\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Badges\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_badgeBackgroundColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The background color of the badges.\n        \u003c/td\u003e\n        \u003ctd\u003e#ff0c10 (red)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_badgeTextColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The text color of the text inside the badges.\n        \u003c/td\u003e\n        \u003ctd\u003e#FFFFFF\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_badgeTextSize\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The text size of the text inside the badges. Recommended dimension type for text is \"sp\" (scaled-pixels), for example: 14sp.\n        \u003c/td\u003e\n        \u003ctd\u003e10sp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_badgeAnimation\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The enter and exit animation type for badges.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003enone\u003c/b\u003e\u003cbr\u003e\n            \u003cb\u003escale\u003c/b\u003e\u003cbr\u003e\n            \u003cb\u003efade\u003c/b\u003e\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003escale\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_badgeAnimationDuration\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The duration of the entry and exit animation of a badge.\n        \u003c/td\u003e\n        \u003ctd\u003e150\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Animations\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_animationDuration\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The duration of all animations, including the indicator animation.\n        \u003c/td\u003e\n        \u003ctd\u003e400\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_tabAnimation\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The enter and exit animation style of the tabs which are not selected.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003enone\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-none.gif\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003eslide\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-slide.gif\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003efade\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-active-fade.gif\" width=\"240\" /\u003e\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003efade\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_tabAnimationSelected\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The enter and exit animation style of the selected tab.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003enone\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-active-none.gif\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003eslide\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-active-slide.gif\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003efade\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-active-fade.gif\" width=\"240\" /\u003e\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003eslide\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_animationInterpolator\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The interpolator used for all animations.\u003cbr\u003e\u003cbr\u003eSee \"\u003ca href=\"https://thoughtbot.com/blog/android-interpolators-a-visual-guide\"\u003eAndroid Interpolators: A Visual Guide\u003c/a\u003e\" for more information on available interpolators.\u003cbr\u003e\u003cbr\u003e\n            Example value: \u003ci\u003e@android:anim/overshoot_interpolator\u003c/i\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/interpolator-overshoot.gif\" width=\"240\" /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003eFastOutSlowInInterpolator\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n### Indicator\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003eAttribute\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_indicatorColor\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe color of the indicator.\u003c/td\u003e\n        \u003ctd\u003e@android/colorPrimary\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_indicatorHeight\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe height of the indicator.\u003c/td\u003e\n        \u003ctd\u003e3dp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_indicatorMargin\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003eThe horizontal margin of the indicator. This determines the width of the indicator.\u003c/td\u003e\n        \u003ctd\u003e0dp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_indicatorAppearance\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            Configure the shape of the indicator either to be square or round.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003einvisible\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/shape-invisible.png\" width=\"140\" /\u003e\u003cbr\u003e\n            \u003cb\u003esquare\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/shape-square.png\" width=\"140\" /\u003e\u003cbr\u003e\n            \u003cb\u003eround\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/shape-round.png\" width=\"140\" /\u003e\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003esquare\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_indicatorLocation\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            Configure the location of the selected tab indicator, top, bottom or invisible.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003etop\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/type-icon.png\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003ebottom\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/static/type-icon-bottom.png\" width=\"240\" /\u003e\u003cbr\u003e\n        \u003c/td\u003e\n        \u003ctd\u003etop\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cb\u003eabb_indicatorAnimation\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            The animation type of the indicator when changing the selected tab.\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003enone\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-indicator-none.gif\" width=\"240\" /\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003cb\u003eslide\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-slide.gif\" width=\"240\" /\u003e\u003cbr\u003e\n            \u003cb\u003efade\u003c/b\u003e\u003cbr\u003e\n            \u003cimg src=\"./media/anim-indicator-fade.gif\" width=\"240\" /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003eslide\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Featured in\n- [Android Weekly: Issue 404](https://androidweekly.net/issues/issue-404)\n- [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)\n- [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)\n\n## Credits\n- [Dribble: Readable Tab Bar](https://dribbble.com/shots/6130593-Readable-Tab-Bar)\n\n## License\n```\nMIT License\n\nCopyright (c) 2021 Joery Droppers (https://github.com/Droppers)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","funding_links":[],"categories":["Libraries","Index","Kotlin"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDroppers%2FAnimatedBottomBar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDroppers%2FAnimatedBottomBar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDroppers%2FAnimatedBottomBar/lists"}