{"id":15489226,"url":"https://github.com/roughike/bottombar","last_synced_at":"2025-05-13T19:17:36.814Z","repository":{"id":40643505,"uuid":"53991171","full_name":"roughike/BottomBar","owner":"roughike","description":"(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.","archived":false,"fork":false,"pushed_at":"2021-09-16T11:19:06.000Z","size":40819,"stargazers_count":8404,"open_issues_count":276,"forks_count":1497,"subscribers_count":238,"default_branch":"master","last_synced_at":"2025-04-27T11:52:25.159Z","etag":null,"topics":["android","bottom-navigation","java","library","material-design"],"latest_commit_sha":null,"homepage":"","language":"Java","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/roughike.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-16T01:31:05.000Z","updated_at":"2025-04-26T13:21:46.000Z","dependencies_parsed_at":"2022-08-09T23:50:51.605Z","dependency_job_id":null,"html_url":"https://github.com/roughike/BottomBar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roughike%2FBottomBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roughike%2FBottomBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roughike%2FBottomBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roughike%2FBottomBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roughike","download_url":"https://codeload.github.com/roughike/BottomBar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251134653,"owners_count":21541376,"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","bottom-navigation","java","library","material-design"],"created_at":"2024-10-02T07:04:29.089Z","updated_at":"2025-04-27T11:52:48.031Z","avatar_url":"https://github.com/roughike.png","language":"Java","readme":"# BottomBar (Deprecated)\n\nI don't have time to maintain this anymore. I basically wrote the whole library in a rush, without tests, while being a serious expert beginner at the time. As a result, there's a lot of unpredictable moving parts and the tests probably aren't that great either. Don't really know, since I haven't touched this in ages.\n\nI'd recommend you to use the official BottomNavigationView from Google and urge them to implement the features you need. Or use another 3rd party library.\n\n[![Build Status](https://travis-ci.org/roughike/BottomBar.svg?branch=master)](https://travis-ci.org/roughike/BottomBar) [![Coverage Status](https://coveralls.io/repos/github/roughike/BottomBar/badge.svg?branch=development)](https://coveralls.io/github/roughike/BottomBar?branch=master) [![Download](https://api.bintray.com/packages/roughike/maven/bottom-bar/images/download.svg)](https://bintray.com/roughike/maven/bottom-bar/_latestVersion)\n\n\u003cimg src=\"https://raw.githubusercontent.com/roughike/BottomBar/master/graphics/shy-demo.gif\" width=\"30%\" /\u003e \u003cimg src=\"https://raw.githubusercontent.com/roughike/BottomBar/master/graphics/shifting-demo.gif\" width=\"30%\" /\u003e \u003cimg src=\"https://raw.githubusercontent.com/roughike/BottomBar/master/graphics/screenshot_tablet.png\" width=\"33%\" /\u003e\n\n## Version 2.0 released!\n\n[The latest version before that can be found in the v1 branch](https://github.com/roughike/BottomBar/tree/v1)\n\n* Cleaner code and better APIs\n* No more unnecessary stuff or spaghetti mess\n* Now the look, feel and behavior is defined in XML, as it should be\n* No more nasty regressions, thanks to the automated tests\n* **Everything is a little different compared to earlier, but it's for the greater good!**\n\n[How to contribute](https://github.com/roughike/BottomBar/blob/master/README.md#contributions)\n\n[Changelog](https://github.com/roughike/BottomBar/blob/master/CHANGELOG.md)\n\n## What?\n\nA custom view component that mimics the new [Material Design Bottom Navigation pattern](https://www.google.com/design/spec/components/bottom-navigation.html).\n\n## Does it work on my Grandpa Gary's HTC Dream?\n\nNope. The minSDK version is **API level 11 (Honeycomb).**\n\n## Gimme that Gradle sweetness, pls?\n\n```groovy\ncompile 'com.roughike:bottom-bar:2.3.1'\n```\n\n**Maven:**\n```xml\n\u003cdependency\u003e\n  \u003cgroupId\u003ecom.roughike\u003c/groupId\u003e\n  \u003cartifactId\u003ebottom-bar\u003c/artifactId\u003e\n  \u003cversion\u003e2.3.1\u003c/version\u003e\n  \u003ctype\u003epom\u003c/type\u003e\n\u003c/dependency\u003e\n```\n\n## How?\n\nYou can add items by **writing a XML resource file**.\n\n### Creating the icons\n\nThe icons must be fully opaque, solid black color, 24dp and **with no padding**. For example, [with Android Asset Studio Generic Icon generator](https://romannurik.github.io/AndroidAssetStudio/icons-generic.html), select \"TRIM\" and make sure the padding is 0dp. Here's what your icons should look like:\n\n![Sample icons](https://raw.githubusercontent.com/roughike/BottomBar/master/graphics/icons-howto.png)\n\n### Adding items from XML resource\n\nDefine your tabs in an XML resource file.\n\n**res/xml/bottombar_tabs.xml:**\n\n```xml\n\u003ctabs\u003e\n    \u003ctab\n        id=\"@+id/tab_favorites\"\n        icon=\"@drawable/ic_favorites\"\n        title=\"Favorites\" /\u003e\n    \u003ctab\n        id=\"@+id/tab_nearby\"\n        icon=\"@drawable/ic_nearby\"\n        title=\"Nearby\" /\u003e\n    \u003ctab\n        id=\"@+id/tab_friends\"\n        icon=\"@drawable/ic_friends\"\n        title=\"Friends\" /\u003e\n\u003c/tabs\u003e\n```\n\nThen, add the BottomBar to your layout and give it a resource id for your tabs xml file.\n\n**layout/activity_main.xml**\n\n```xml\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\u003e\n\n    \u003c!-- This could be your fragment container, or something --\u003e\n    \u003cFrameLayout\n        android:id=\"@+id/contentContainer\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:layout_above=\"@+id/bottomBar\" /\u003e\n\n    \u003ccom.roughike.bottombar.BottomBar\n        android:id=\"@+id/bottomBar\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"60dp\"\n        android:layout_alignParentBottom=\"true\"\n        app:bb_tabXmlResource=\"@xml/bottombar_tabs\" /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n### Setting up listeners\n\nBy default, the tabs don't do anything unless you listen for selection events and do something when the tabs are selected.\n\n**MainActivity.java:**\n\n```java\npublic class MainActivity extends Activity {\n    @Override\n    protected void onCreate(@Nullable Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n\n        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);\n        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {\n            @Override\n            public void onTabSelected(@IdRes int tabId) {\n                if (tabId == R.id.tab_favorites) {\n                    // The tab with id R.id.tab_favorites was selected,\n                    // change your content accordingly.\n                }\n            }\n        });\n    }\n}\n```\n\nIf you want to listen for reselection events, here's how you do it:\n\n```java\nbottomBar.setOnTabReselectListener(new OnTabReselectListener() {\n    @Override\n    public void onTabReSelected(@IdRes int tabId) {\n        if (tabId == R.id.tab_favorites) {\n            // The tab with id R.id.tab_favorites was reselected,\n            // change your content accordingly.\n        }\n    }\n});\n```\n\n### Intercepting tab selections\n\nIf you want to conditionally cancel selection of any tab, you absolutely can. Just assign a ```TabSelectionInterceptor``` to the BottomBar, and return true from the ```shouldInterceptTabSelection()``` method.\n\n```java\nbottomBar.setTabSelectionInterceptor(new TabSelectionInterceptor() {\n    @Override\n    public boolean shouldInterceptTabSelection(@IdRes int oldTabId, @IdRes int newTabId) {\n        if (newTabId == R.id.tab_pro_feature \u0026\u0026 !userHasProVersion()) {\n          startProVersionPurchaseFlow();\n          return true;\n        }\n        \n        return false;\n    }\n});\n```\n\n### Changing icons based on selection state\n\nIf you want to have different icon when a specific tab is selected, just use state list drawables.\n\n**res/drawable/my_tab_icon.xml**\n\n```xml\n\u003cselector xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003citem android:drawable=\"@drawable/ic_myicon_selected\" android:state_selected=\"true\" /\u003e\n    \u003citem android:drawable=\"@drawable/ic_myicon_default\" android:state_selected=\"false\" /\u003e\n\u003c/selector\u003e\n```\n\n**res/xml/bottombar_tabs.xml**\n\n```xml\n...\n\u003ctab\n    id=\"@+id/tab_favorites\"\n    icon=\"@drawable/my_tab_icon\"\n    title=\"Favorites\" /\u003e\n\u003c!-- You can use @color resources too! --\u003e\n...\n```\n\n### Those color changing tabs look dope. Howdoidodat?\n\nJust add ```barColorWhenSelected``` to each tab. When that tab is selected, the whole BottomBar background color is changed with a nice animation.\n\n**res/xml/bottombar_tabs.xml**\n\n```xml\n\u003ctabs\u003e\n    \u003ctab\n        id=\"@+id/tab_favorites\"\n        icon=\"@drawable/ic_favorites\"\n        title=\"Favorites\"\n        barColorWhenSelected=\"#5D4037\" /\u003e\n    \u003c!-- You can use @color resources too! --\u003e\n\u003c/tabs\u003e\n```\n\n### How do I draw it under the navbar?\n\nFirst, define a style that is a child of your main application theme:\n\n**res/values-v21/styles.xml**\n\n```xml\n\u003cstyle name=\"AppTheme.TransNav\" parent=\"AppTheme\"\u003e\n    \u003citem name=\"android:navigationBarColor\"\u003e@android:color/transparent\u003c/item\u003e\n    \u003citem name=\"android:windowTranslucentNavigation\"\u003etrue\u003c/item\u003e\n    \u003citem name=\"android:windowDrawsSystemBarBackgrounds\"\u003etrue\u003c/item\u003e\n\u003c/style\u003e\n```\n\nYou'll also have to **make a stub version of the same theme** to avoid crashes in previous API levels than Lollipop:\n\n**res/values/styles.xml**\n\n```xml\n\u003cstyle name=\"AppTheme.TransNav\" parent=\"AppTheme\" /\u003e\n```\n\nAlso include the same stub in your ```values-land-v21.xml``` to avoid transparent navbar and weird behavior on landscape.\n\n**res/values-land-v21.xml:**\n\n```xml\n\u003cstyle name=\"AppTheme.TransNav\" parent=\"AppTheme\" /\u003e\n```\n\nApply the theme in ```AndroidManifest.xml``` for your Activity.\n\n**AndroidManifest.xml:**\n\n```xml\n\u003cactivity android:name=\".MyAwesomeActivity\" android:theme=\"@style/AppTheme.TransNav\" /\u003e\n```\n\nFinally, set ```bb_behavior``` to include the ```underNavbar``` flag and you're good to go!\n\n**activity_my_awesome.xml:**\n\n```xml\n\u003ccom.roughike.bottombar.BottomBar\n    android:id=\"@+id/bottomBar\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"56dp\"\n    android:layout_alignParentBottom=\"true\"\n    app:bb_tabXmlResource=\"@xml/my_awesome_bottombar_tabs\"\n    app:bb_behavior=\"underNavbar\" /\u003e\n```\n\n### What about Tablets?\n\nSpecify a different layout for your activity in ```res/layout-sw600dp``` folder and set ```bb_tabletMode``` to true.\n\n**res/layout-sw600dp/activity_main.xml:**\n\n```xml\n\u003cRelativeLayout\n    xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\u003e\n\n    \u003ccom.roughike.bottombar.BottomBar\n        android:id=\"@+id/bottomBar\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"match_parent\"\n        android:layout_alignParentLeft=\"true\"\n        app:bb_tabXmlResource=\"@xml/bottombar_tabs_three\"\n        app:bb_tabletMode=\"true\" /\u003e\n\n    \u003c!-- This could be your fragment container, or something --\u003e\n    \u003cFrameLayout\n        android:id=\"@+id/contentContainer\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:layout_toRightOf=\"@+id/bottomBar\" /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n### How do I hide it automatically on scroll?\n\nEasy-peasy!\n\n**activity_main.xml:**\n\n```xml\n\u003candroid.support.design.widget.CoordinatorLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\u003e\n\n    \u003candroid.support.v4.widget.NestedScrollView\n        android:id=\"@+id/myScrollingContent\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\u003e\n\n        \u003c!-- Your loooooong scrolling content here. --\u003e\n\n    \u003c/android.support.v4.widget.NestedScrollView\u003e\n\n    \u003ccom.roughike.bottombar.BottomBar\n        android:id=\"@+id/bottomBar\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"60dp\"\n        android:layout_gravity=\"bottom\"\n        app:bb_tabXmlResource=\"@xml/bottombar_tabs_three\"\n        app:bb_behavior=\"shy\"/\u003e\n\n\u003c/android.support.design.widget.CoordinatorLayout\u003e\n```\n\n### Badges\n\nYou can easily add badges for showing an unread message count or new items / whatever you like.\n\n```java\nBottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);\nnearby.setBadgeCount(5);\n\n// Remove the badge when you're done with it.\nnearby.removeBadge/();\n```\n\n## All customization options\n\n### For the BottomBar\n\n```xml\n\u003ccom.roughike.bottombar.BottomBar\n    android:id=\"@+id/bottomBar\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"60dp\"\n    android:layout_alignParentBottom=\"true\"\n    app:bb_tabXmlResource=\"@xml/bottombar_tabs_three\"\n    app:bb_tabletMode=\"true\"\n    app:bb_behavior=\"shifting|shy|underNavbar\"\n    app:bb_inActiveTabAlpha=\"0.6\"\n    app:bb_activeTabAlpha=\"1\"\n    app:bb_inActiveTabColor=\"#222222\"\n    app:bb_activeTabColor=\"@color/colorPrimary\"\n    app:bb_badgesHideWhenActive=\"true\"\n    app:bb_titleTextAppearance=\"@style/MyTextAppearance\"\n    app:bb_titleTypeFace=\"fonts/MySuperDuperFont.ttf\"\n    app:bb_showShadow=\"true\" /\u003e\n```\n\n\u003cdl\u003e\n    \u003cdt\u003ebb_tabXmlResource\u003c/dt\u003e\n    \u003cdd\u003ethe XML Resource id for your tabs, that reside in \u003ccode\u003evalues/xml/\u003c/code\u003e\u003c/dd\u003e\n    \u003cdt\u003ebb_tabletMode\u003c/dt\u003e\n    \u003cdd\u003eif you want the BottomBar to behave differently for tablets. \u003cu\u003eThere's an example of this in the sample project!\u003c/u\u003e\u003c/dd\u003e\n    \u003cdt\u003ebb_behavior\u003c/dt\u003e\n    \u003cdd\u003e\u003ccode\u003eshifting\u003c/code\u003e: the selected tab is wider than the rest. \u003ccode\u003eshy\u003c/code\u003e: put the BottomBar inside a CoordinatorLayout and it'll automatically hide on scroll! \u003ccode\u003eunderNavbar\u003c/code\u003e: draw the BottomBar under the navBar!\u003c/dd\u003e\n    \u003cdt\u003ebb_inActiveTabAlpha\u003c/dt\u003e\n    \u003cdd\u003ethe alpha value for inactive tabs, that's used in the tab icons and titles.\u003c/dd\u003e\n    \u003cdt\u003ebb_activeTabAlpha\u003c/dt\u003e\n    \u003cdd\u003ethe alpha value for active tabs, that's used in the tab icons and titles.\u003c/dd\u003e\n    \u003cdt\u003ebb_inActiveTabColor\u003c/dt\u003e\n    \u003cdd\u003ethe color for inactive tabs, that's used in the tab icons and titles.\u003c/dd\u003e\n    \u003cdt\u003ebb_activeTabColor\u003c/dt\u003e\n    \u003cdd\u003ethe color for active tabs, that's used in the tab icons and titles.\u003c/dd\u003e\n    \u003cdt\u003ebb_badgeBackgroundColor\u003c/dt\u003e\n    \u003cdd\u003ethe background color for any Badges in this BottomBar.\u003c/dd\u003e\n    \u003cdt\u003ebb_badgesHideWhenActive\u003c/dt\u003e\n    \u003cdd\u003ewhether badges should be hidden for active tabs, defaults to true.\u003c/dd\u003e\n    \u003cdt\u003ebb_titleTextAppearance\u003c/dt\u003e\n    \u003cdd\u003ecustom textAppearance for the titles\u003c/dd\u003e\n    \u003cdt\u003ebb_titleTypeFace\u003c/dt\u003e\n    \u003cdd\u003epath for your custom font file, such as \u003ccode\u003efonts/MySuperDuperFont.ttf\u003c/code\u003e. In that case your font path would look like \u003ccode\u003esrc/main/assets/fonts/MySuperDuperFont.ttf\u003c/code\u003e, but you only need to provide \u003ccode\u003efonts/MySuperDuperFont.ttf\u003c/code\u003e, as the asset folder will be auto-filled for you.\u003c/dd\u003e\n    \u003cdt\u003ebb_showShadow\u003c/dt\u003e\n    \u003cdd\u003econtrols whether the shadow is shown or hidden, defaults to true.\u003c/dd\u003e\n\u003c/dl\u003e\n\n### For the tabs\n\n```xml\n\u003ctab\n    id=\"@+id/tab_recents\"\n    title=\"Recents\"\n    icon=\"@drawable/empty_icon\"\n    inActiveColor=\"#00FF00\"\n    activeColor=\"#FF0000\"\n    barColorWhenSelected=\"#FF0000\"\n    badgeBackgroundColor=\"#FF0000\"\n    badgeHidesWhenActive=\"true\" /\u003e\n```\n\n\u003cdl\u003e\n    \u003cdt\u003einActiveColor\u003c/dt\u003e\n    \u003cdd\u003ethe color for inactive tabs, that's used in the tab icons and titles.\u003c/dd\u003e\n    \u003cdt\u003eactiveColor\u003c/dt\u003e\n    \u003cdd\u003ethe color for active tabs, that's used in the tab icons and titles.\u003c/dd\u003e\n    \u003cdt\u003ebarColorWhenSelected\u003c/dt\u003e\n    \u003cdd\u003ethe color that the whole BottomBar should be when selected this tab.\u003c/dd\u003e\n    \u003cdt\u003ebadgeBackgroundColor\u003c/dt\u003e\n    \u003cdd\u003ethe background color for any Badges in this tab.\u003c/dd\u003e\n    \u003cdt\u003ebadgeHidesWhenActive\u003c/dt\u003e\n    \u003cdd\u003ewhether or not the badge should be hidden when this tab is selected, defaults to true.\u003c/dd\u003e\n    \u003cdt\u003e\u003c/dt\u003e\n    \u003cdd\u003e\u003c/dd\u003e\n\u003c/dl\u003e\n\n## Apps using BottomBar\n\n\n  * [Nearby](https://play.google.com/store/apps/details?id=com.synergetechsolutions.nearbylive) : A location-based social networking app with over 5 million users.\n  * [FragNav](https://github.com/ncapdevi/FragNav) : An Android Library for managing multiple stacks of Fragments. BottomBar is used in the sample app.\n  * [BottomNavigationBar](https://github.com/pocheshire/BottomNavigationBar) : BottomBar ported to C# for Xamarin developers\n  * [KyudoScoreBookTeam](https://play.google.com/store/apps/details?id=com.bowyer.app.android.kyudoscoreteam\u0026hl=en) : BottomBar is used in the KyudoScoreBookTeam app.\n  * [memeham](https://play.google.com/store/apps/details?id=com.memeham.beyourself.memeham) : BottomBar is used in the memeham app.\n  * [NewsCatchr](https://play.google.com/store/apps/details?id=jlelse.readit) : A newsreader app, which uses this BottomBar library.\n  * [GitSkarios](https://play.google.com/store/apps/details?id=com.alorma.github) : A Github android App, to visit your repositories, gists and  more!\n    * [Code](https://github.com/gitskarios/Gitskarios)\n  \nSend me a pull request with modified README.md to get a shoutout!\n\n## Contributions\n\nFeel free to create issues and pull requests.\n\nWhen creating pull requests, **more is more:** I'd like to see ten small pull requests separated by feature rather than all those combined into a huge one.\n\n## License\n\n```\nBottomBar library for Android\nCopyright (c) 2016 Iiro Krankka (http://github.com/roughike).\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\nhttp://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```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froughike%2Fbottombar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froughike%2Fbottombar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froughike%2Fbottombar/lists"}