{"id":15628389,"url":"https://github.com/skydoves/androidbottombar","last_synced_at":"2025-04-07T19:16:18.459Z","repository":{"id":48517427,"uuid":"280658391","full_name":"skydoves/AndroidBottomBar","owner":"skydoves","description":" 🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations.","archived":false,"fork":false,"pushed_at":"2021-06-01T01:08:05.000Z","size":383,"stargazers_count":293,"open_issues_count":4,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-31T16:19:15.428Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skydoves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null},"funding":{"github":"skydoves","custom":["https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"]}},"created_at":"2020-07-18T13:07:23.000Z","updated_at":"2024-12-28T06:12:10.000Z","dependencies_parsed_at":"2022-08-23T00:20:21.466Z","dependency_job_id":null,"html_url":"https://github.com/skydoves/AndroidBottomBar","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FAndroidBottomBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FAndroidBottomBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FAndroidBottomBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FAndroidBottomBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skydoves","download_url":"https://codeload.github.com/skydoves/AndroidBottomBar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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":[],"created_at":"2024-10-03T10:22:22.171Z","updated_at":"2025-04-07T19:16:18.425Z","avatar_url":"https://github.com/skydoves.png","language":"Kotlin","readme":"\n\u003ch1 align=\"center\"\u003eAndroidBottomBar\u003c/h1\u003e\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e \n🍫 A lightweight bottom navigation view, fully customizable with an indicator and animations.\n\u003c/p\u003e\n\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/Apache-2.0\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://android-arsenal.com/api?level=17\"\u003e\u003cimg alt=\"API\" src=\"https://img.shields.io/badge/API-17%2B-brightgreen.svg?style=flat\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves/AndroidBottomBar/actions\"\u003e\u003cimg alt=\"Build Status\" src=\"https://github.com/skydoves/AndroidBottomBar/workflows/Android%20CI/badge.svg\"/\u003e\u003c/a\u003e \n   \u003ca href=\"https://skydoves.github.io/libraries/androidbottombar/javadoc/androidbottombar/index.html\"\u003e\u003cimg alt=\"Javadoc\" src=\"https://skydoves.github.io/badges/javadoc-androidbottombar.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves\"\u003e\u003cimg alt=\"Profile\" src=\"https://skydoves.github.io/badges/skydoves.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/87856727-ecc8a200-c95b-11ea-85d8-2ff9221736e8.gif\" width=\"32%\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/87853258-b3843800-c943-11ea-8ded-a9ec068e7862.gif\" width=\"32%\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/87856728-f05c2900-c95b-11ea-86b0-1740a6794ac2.gif\" width=\"32%\"/\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/87857471-e2a9a200-c961-11ea-838d-529ef2bfe8f7.gif\" width=\"64%%\"/\u003e\n\u003c/p\u003e\n\n## Including in your project\n[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/androidbottombar.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22androidbottombar%22)\n[![Jitpack](https://jitpack.io/v/skydoves/AndroidBottomBar.svg)](https://jitpack.io/#skydoves/AndroidBottomBar)\n### Gradle\nAdd below codes to your **root** `build.gradle` file (not your module build.gradle file).\n```gradle\nallprojects {\n    repositories {\n        mavenCentral()\n    }\n}\n```\nAnd add a dependency code to your **module**'s `build.gradle` file.\n```gradle\ndependencies {\n    implementation \"com.github.skydoves:androidbottombar:1.0.2\"\n}\n```\n\n## Usage\nAdd following XML namespace inside your XML layout file.\n\n```gradle\nxmlns:app=\"http://schemas.android.com/apk/res-auto\"\n```\n\n### AndroidBottomBarView\nHere is a basic example of implementing `AndroidBottomBarView`. \u003cbr\u003e\n\n```gradle\n\u003ccom.skydoves.androidbottombar.AndroidBottomBarView\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"64dp\"\n    android:background=\"@color/colorPrimary\"\n    app:bottomBar_duration=\"300\" // duration of the menu animation.\n    app:bottomBar_flavor=\"icon\" // decides which type (icon, title) will be shown as default.\n    app:bottomBar_indicator_color=\"@color/md_blue_200\" // color of the indicator.\n    app:bottomBar_indicator_height=\"4dp\" // height size of the indicator.\n    app:bottomBar_indicator_padding=\"6dp\" // left and right padding of the indicator.\n    app:bottomBar_indicator_radius=\"12dp\" // corner radius of the indicator.\n    app:bottomBar_indicator_visible=\"true\" // visibility of the indicator.\n    app:bottomBar_menuAnimation=\"overshoot\" // animations for selected or unselected menu item.\n    app:bottomBar_selectedIndex=\"1\" // preselected index when initialized.\n  /\u003e\n```\n\n### BottomMenuItem\nWe can add menu items to the `AndroidBottomBarView` using the `BottomMenuItem`, fully customizable.\n```kotlin\nandroidBottomBar.addBottomMenuItems(mutableListOf(\n      BottomMenuItem(this)\n        .setTitle(\"Movie\") // sets the content of the title.\n        .setTitleColorRes(R.color.black) // sets the color of the title using resource.\n        .setTitleActiveColorRes(R.color.white) // sets the color of the title when selected/active.\n        .setTitlePadding(6) // sets the padding of the title.\n        .setTitleSize(14f) // sets the size of the title.\n        .setTitleGravity(Gravity.CENTER) // sets gravity of the title.\n        .setIcon(R.drawable.ic_movie)\n        .setIconColorRes(R.color.md_blue_200) // sets the [Drawable] of the icon using resource.\n        .setIconActiveColorRes(R.color.md_blue_200) // sets the color of the icon when selected/active.\n        .setBadgeText(\"New!\") // sets the content of the badge.\n        .setBadgeTextSize(9f) // sets the size of the badge.\n        .setBadgeTextColorRes(R.color.white) // sets the text color of the badge using resource.\n        .setBadgeColorRes(R.color.md_blue_200) // sets the color of the badge using resource.\n        .setBadgeAnimation(BadgeAnimation.FADE) // sets an animation of the badge.\n        .setBadgeDuration(450) // sets a duration of the badge. \n        .build(),\n      \n      BottomMenuItem(this)\n      // .. //\n```\nHere is the Java way.\n```java\nList\u003cBottomMenuItem\u003e bottomMenuItems = new ArrayList\u003c\u003e();\nbottomMenuItems.add(new BottomMenuItem(context)\n    .setTitle(\"Tv\")\n    .setIcon(R.drawable.ic_tv)\n    .build());\n// add more BottomMenuItems. //\nandroidBottomBarView.addBottomMenuItems(bottomMenuItems);\n```\n\n### BottomBarFlavor\n`BottomBarFlavor` decides which type (icon, title) will be shown as default (if unselected). \u003cbr\u003e\nThe default flavor is icon.\n```kotlin\napp:bottomBar_flavor=\"icon\"\n```\n\n| ICON | TITLE |\n| :---------------: | :---------------: |\n| \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87853260-b5e69200-c943-11ea-8431-f8662f01a779.png\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87853261-b5e69200-c943-11ea-86ab-5ec3456cc8cf.png\" align=\"center\" width=\"100%\"/\u003e\n\n\n### Indicator\nWe can customize the indicator using below attributes.\n```gradle\napp:bottomBar_indicator_color=\"@color/md_blue_200\" // color of the indicator.\napp:bottomBar_indicator_height=\"4dp\" // height of the indicator.\napp:bottomBar_indicator_padding=\"6dp\" // padding of the indicator.\napp:bottomBar_indicator_radius=\"12dp\" // corner radius of the indicator.\napp:bottomBar_indicator_visible=\"true\" // visibility of the indicator.\n```\n\n### Title Composition\nWe can customize the title of the menu item.\n```kotlin\n.setTitle(\"Movie\") // sets the content of the title.\n.setTitleColorRes(R.color.black) // sets the color of the title using resource.\n.setTitleActiveColorRes(R.color.white) // sets the color of the title when selected/active.\n.setTitlePadding(6) // sets the padding of the title.\n.setTitleSize(14f) // sets the size of the title.\n.setTitleGravity(Gravity.CENTER) // sets gravity of the title.\n```\n\n#### TitleForm\nTitleForm is a collection of attribute class that related to a menu title for customizing the menu item title easily.\u003cbr\u003e\nGenerally, we set the almost same attributes for consistency of the menu items.\u003cbr\u003e\nWe can build a common form of the title, and we can reuse on every menu item.\u003cbr\u003e\nThen we can reduce boilerplate work from writing the same attributes on every menu item.\n\n```kotlin\n// we can create the form using kotlin dsl.\nval titleForm = titleForm(this) {\n  setTitleColorRes(R.color.black)\n  setTitlePadding(6)\n  setTitleSize(14f)\n}\n\n androidBottomBar.addBottomMenuItems(mutableListOf(\n      BottomMenuItem(this)\n        // setTitleForm must be called before other title related methods.\n        .setTitleForm(titleForm)\n        .setTitle(\"Movie\")\n        .build(),\n\n      BottomMenuItem(this)\n        .setTitleForm(titleForm)\n        .setTitle(\"Tv\")\n        .build(),\n     // ** //   \n```\nHere is the Java way to build the `TitleForm`.\n```java\nTitleForm.Builder titleForm = new TitleForm.Builder(context)\n    .setTitleColorRes(R.color.black)\n    .setTitlePadding(6)\n    .setTitleSize(14f);\n```\n\n### Icon Composition\nWe can customize the icon of the menu item.\n\n```kotlin\n.setIcon(R.drawable.ic_movie)\n.setIconColorRes(R.color.md_blue_200) // sets the [Drawable] of the icon using resource.\n.setIconActiveColorRes(R.color.md_blue_200) // sets the color of the icon when selected/active.\n.setIconSize(24) // sets the size of the icon.\n```\n\n#### IconForm\nIconForm is a collection of attribute class that related to a menu icon for customizing the menu item icon easily.\u003cbr\u003e\nThe same concept of the `TitleForm`, and we must call before other icon related methods.\n\n```kotlin\n// we can create the form using kotlin dsl.\nval iconForm = iconForm(this) {\n  setIcon(R.drawable.ic_movie)\n  setIconColorRes(R.color.md_blue_200) // sets the [Drawable] of the icon using resource.\n  setIconSize(24) // sets the size of the icon.\n}\n\nandroidBottomBar.addBottomMenuItems(mutableListOf(\n      BottomMenuItem(this)\n        .setIconForm(iconForm)\n        .setIcon(R.drawable.ic_star)\n        .build(),\n        // ** //\n```\nHere is the Java way to build the `IconForm`.\n```java\nIconForm.Builder iconForm = new IconForm.Builder(context)\n        .setIconColorRes(R.color.md_blue_100)\n        .setIconSize(24);\n```\n\n### Badge Composition\nWe can customize the badge of the menu item.\n\n```kotlin\n.setBadgeText(\"New!\") // sets the content of the badge.\n.setBadgeTextSize(9f) // sets the size of the badge.\n.setBadgeTextColorRes(R.color.white) // sets the text color of the badge using resource.\n.setBadgeColorRes(R.color.md_blue_200) // sets the color of the badge using resource.\n.setBadgeStyle(Typeface.BOLD)// sets the [Typeface] of the badge.\n.setBadgePadding(6) // sets the padding of the badge.\n.setBadgeMargin(4) // sets the margin of the badge.\n.setBadgeRadius(6) // sets the radius of the badge.\n.setBadgeAnimation(BadgeAnimation.FADE) // sets an animation of the badge.\n.setBadgeDuration(450) // sets a duration of the badge. \n```\n\n#### Show and dismiss\nWe can show and dismiss badges using below methods.\n```kotlin\nandroidBottomBar.showBadge(0) // shows the badge by an index.\nandroidBottomBar.showBadge(0, \"123\") // shows the badge by an index and changes badge text.\nandroidBottomBar.dismissBadge(0) // dismisses the badge by an index.\n```\n\n#### BadgeForm\nBadgeForm is a collection of attribute class that related to a menu badge for customizing the menu item badge easily.\u003cbr\u003e\nThe same concept of the `TitleForm`, and we must call before other badge related methods.\n```kotlin\n// we can create the form using kotlin dsl.\nval badgeForm = badgeForm(this) {\n  setBadgeTextSize(9f)\n  setBadgePaddingLeft(6)\n  setBadgePaddingRight(6)\n  setBadgeDuration(550)\n}\n\nandroidBottomBar.addBottomMenuItems(mutableListOf(\n      BottomMenuItem(this)\n        .setTitle(\"movie\")\n        .setBadgeForm(badgeForm)\n        .setBadgeText(\"New!\")\n        .setBadgeColorRes(R.color.md_blue_200)\n        .setBadgeAnimation(BadgeAnimation.FADE)\n        .build(),\n\n      BottomMenuItem(this)\n        .setTitle(\"star\")\n        .setBadgeForm(badgeForm)\n        .setBadgeText(\"⭐⭐⭐\")\n        .setBadgeColorRes(R.color.white)\n        .setBadgeTextColorRes(R.color.black)\n        .build(),\n\n        // ** //\n```\n\n#### BadgeAnimation\nWe can customize badge animations using the below method.\n```gradle\n.setBadgeAnimation(BadgeAnimation.FADE) // fade, scale\n```\n\nFADE | SCALE |\n| :---------------: | :---------------: |\n| \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87858267-aaa55d80-c967-11ea-998b-dc7980922a77.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87858287-cdd00d00-c967-11ea-9265-c92a880682fd.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-\n\n\n### OnMenuItemSelectedListener\nWe can listen to menu items are selected.\u003cbr\u003e\nThe listener gives us `index`, `bottomMenuItem`, and `fromUser` arguments.\n```kotlin\nandroidBottomBar.onMenuItemSelectedListener = object : OnMenuItemSelectedListener {\n      override fun onMenuItemSelected(index: Int, bottomMenuItem: BottomMenuItem, fromUser: Boolean) {\n        // when selected, changed viewpager's current item.\n        viewpager.currentItem = index\n        // when selected, dismiss a badge of the item.\n        androidBottomBar.dismissBadge(index)\n      }\n    }\n```\n\n### OnBottomMenuInitializedListener\nWe can listen to the menu items are initialized when they are initialized completely.\u003cbr\u003e\nIf we want to show badges, bind `AndroidBottomBarView` to `ViewPager` or etc, we have to call them in this listener.\n```kotlin\nandroidBottomBar.setOnBottomMenuInitializedListener {\n    // binds to a viewpager.\n    androidBottomBar.bindViewPager(viewpager)\n    // shows a badge index 0.\n    androidBottomBar.showBadge(index = 0)\n    // gets a BottomMenuItemView by index.\n    val menuItemView = androidBottomBar.getBottomMenuItemView(index = 0)\n}\n```\n\n### bindViewPager, bindViewPager2\nWe can bind a `ViewPager` and `ViewPager2` to the `AndroidBottomBarView` for selecting menu items and moving an indicator\u003cbr\u003e \nautomatically by scrolling of viewPager.\n```kotlin\nandroidBottomBar.setOnBottomMenuInitializedListener {\n  androidBottomBar.bindViewPager(viewpager)\n}\n```\n\n### BottomMenuAnimation\nWe can customize the selected/unselected animations of menu items and an indicator.\n```kotlin\napp:bottomBar_menuAnimation=\"overshoot\" // normal, accelerate, bounce, overshoot\n```\n\nNORMAL | OVERSHOOT |\n| :---------------: | :---------------: |\n| \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87857934-8b0d3580-c965-11ea-9c79-e7b643e87b6d.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87857938-8cd6f900-c965-11ea-9dd6-1da48690be6d.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-\n\nACCELERATE | BOUNCE |\n| :---------------: | :---------------: |\n| \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87857940-8cd6f900-c965-11ea-9287-89e04ef92990.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/24237865/87857942-8d6f8f80-c965-11ea-8117-8889daa72aa8.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-\n\n## AndroidBottomBarView Attributes\nAttributes | Type | Default | Description\n--- | --- | --- | ---\nflavor | enum | icon | decides which type (icon, title) will be shown as default (unselected).\nselectedIndex | integer | 0 | preselected index when initialized.\nindicator_visible | boolean | true | visibility of the indicator.\nindicator_color | color | theme accent | color of the indicator.\nindicator_drawable | drawable | null | drawable of the indicator.\nindicator_radius | dimension | 3dp | corner radius of the indicator.\nindicator_height | dimension | 4dp | height of the indicator.\nindicator_padding | dimension | 2dp | padding of the indicator.\nmenuAnimation | enum | normal | animations for selected or unselected BottomMenuItemView with an interpolator.\nduration | integer | 300 | duration of the menu animation.\n\n## Design Credits\nAll design and inspiration credits goes to [Readable Tab Bar](https://dribbble.com/shots/6130593-Readable-Tab-Bar). \n  \n## Find this library useful? :heart:\nSupport it by joining __[stargazers](https://github.com/skydoves/AndroidBottomBar/stargazers)__ for this repository. :star: \u003cbr\u003e\nAnd __[follow](https://github.com/skydoves)__ me for my next creations! 🤩\n\n# License\n```xml\nCopyright 2020 skydoves (Jaewoong Eum)\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","funding_links":["https://github.com/sponsors/skydoves","https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Fandroidbottombar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskydoves%2Fandroidbottombar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Fandroidbottombar/lists"}