{"id":21957581,"url":"https://github.com/sephiroth74/material-bottomnavigation","last_synced_at":"2025-04-15T03:48:47.087Z","repository":{"id":38237317,"uuid":"55439112","full_name":"sephiroth74/Material-BottomNavigation","owner":"sephiroth74","description":"Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html","archived":false,"fork":false,"pushed_at":"2023-07-03T17:57:55.000Z","size":97146,"stargazers_count":1463,"open_issues_count":53,"forks_count":236,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-04-15T03:48:41.396Z","etag":null,"topics":["android","bottombar","bottomnavigation","google-material","material-design","menu-xml","navigation","tablet","widget","xml"],"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/sephiroth74.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}},"created_at":"2016-04-04T19:34:04.000Z","updated_at":"2025-03-31T12:54:28.000Z","dependencies_parsed_at":"2024-01-14T02:37:02.453Z","dependency_job_id":"dd0fcab8-8943-481b-9e5a-11fa2f1bd91a","html_url":"https://github.com/sephiroth74/Material-BottomNavigation","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sephiroth74%2FMaterial-BottomNavigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sephiroth74%2FMaterial-BottomNavigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sephiroth74%2FMaterial-BottomNavigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sephiroth74%2FMaterial-BottomNavigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sephiroth74","download_url":"https://codeload.github.com/sephiroth74/Material-BottomNavigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003941,"owners_count":21196794,"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","bottombar","bottomnavigation","google-material","material-design","menu-xml","navigation","tablet","widget","xml"],"created_at":"2024-11-29T08:54:40.827Z","updated_at":"2025-04-15T03:48:47.071Z","avatar_url":"https://github.com/sephiroth74.png","language":"Kotlin","readme":"# Material Bottom Navigation Library\n\n[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-MaterialBottomNavigation-green.svg?style=true)](https://android-arsenal.com/details/1/3414)\n[![Build Status](https://travis-ci.org/sephiroth74/Material-BottomNavigation.svg?branch=master)](https://travis-ci.org/sephiroth74/Material-BottomNavigation)\n\u003cbr /\u003e\n[![Maven Central](https://maven-badges.herokuapp.com/maven-central/it.sephiroth.android.library.bottomnavigation/bottom-navigation/badge.svg)](https://maven-badges.herokuapp.com/maven-central/it.sephiroth.android.library.bottomnavigation/bottom-navigation)\n\nLightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html\n\nThis project is also inspired by https://github.com/roughike/BottomBar\n\n\u003cbr /\u003e\n\u003cimg src=\"./art/animated_video.gif\" /\u003e\n\n\nTable of contents\n=================\n\n  * [Installation](#installation)\n  * [Usage](#usage)\n  * [Examples](#examples)\n  * [Sizing](#sizing)\n  * [Styling](#styling)\n  * [Badges](#badges)  \n    * [Badges Customization](#badges-customization)\n  * [Wiki](https://github.com/sephiroth74/Material-BottomNavigation/wiki)\n    * [Custom Layout Behavior](https://github.com/sephiroth74/Material-BottomNavigation/wiki/Custom-Layout-Behavior)\n    * [Always Show Labels](https://github.com/sephiroth74/Material-BottomNavigation/wiki/Always-Show-Labels)\n  * [License](#license)\n\n\nInstallation\n=================\n\nIn your project's `build.gradle` file add the following line to the `dependencies` group:\n\n\tcompile 'it.sephiroth.android.library.bottomnavigation:bottom-navigation:3.0.0'\n\n\nUsage\n=================\nUsage of the BottomNavigation widget is very easy. Just place it in your layout.xml like this:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003candroidx.coordinatorlayout.widget.CoordinatorLayout android:id=\"@+id/CoordinatorLayout01\"\n\txmlns: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\tandroid:layout_height=\"match_parent\"\n    android:fitsSystemWindows=\"true\"\u003e\n\n\t...your content...\n\n    \u003cit.sephiroth.android.library.bottomnavigation.BottomNavigation\n\t    android:id=\"@+id/BottomNavigation\"\n        android:layout_width=\"match_parent\"\n\t    android:layout_height=\"wrap_content\"\n        android:layout_gravity=\"bottom\"\n\t    app:bbn_entries=\"@menu/bottombar_menu_4items\"\n        app:bbn_scrollEnabled=\"true\"\n        app:bbn_badgeProvider=\"@string/bbn_badgeProvider\"\n\t    app:layout_behavior=\"@string/bbn_phone_view_behavior\" /\u003e\n\u003c/androidx.coordinatorlayout.widget.CoordinatorLayout\u003e\n```\n\nAll the menu main configurations are defined within the xml menu resource itself. Here's an example of a menu with 4 items:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cmenu xmlns:android=\"http://schemas.android.com/apk/res/android\"\n\txmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:background=\"@android:color/black\"\n    app:bbn_badgeColor=\"#FFFF0000\"\n\tapp:bbn_rippleColor=\"#33ffffff\"\u003e\n    \u003citem\n\t    android:id=\"@+id/bbn_item1\"\n    \tandroid:color=\"@color/colorPrimary\"\n        android:icon=\"@drawable/ic_cloud_off_white_24dp\"\n\t    android:title=\"Cloud Sync\" /\u003e\n    \u003citem\n\t    android:id=\"@+id/bbn_item2\"\n        android:color=\"@android:color/holo_green_dark\"\n\t    android:icon=\"@drawable/ic_cast_connected_white_24dp\"\n        android:title=\"Chromecast\" /\u003e\n\t\u003citem\n        android:id=\"@+id/bbn_item3\"\n\t    android:color=\"@android:color/holo_orange_dark\"\n        android:icon=\"@drawable/ic_mail_white_24dp\"\n\t    android:title=\"Mail\" /\u003e\n    \u003citem\n\t    android:id=\"@+id/action4\"\n    \tandroid:color=\"#FF5252\"\n        android:icon=\"@drawable/ic_format_list_numbered_white_24dp\"\n\t    android:title=\"List\" /\u003e\n\u003c/menu\u003e\n```\n\n\nExamples\n=================\n\n| 4 shifting items menu | 3 fixed items menu |\n| :------------: | :-----------: |\n|\t![Video 1](art/video1.gif)\t|\t![Video 2](art/video2.gif)\t|\n\n| 4 items no background |  Tablet mode |\n| :------------: | :-----------: |\n| 4 items without changing background. \u003cbr /\u003eMenu show/hide feature is also disabled | Menu can be easily setup for (left or right) tablet support. |\n| ![Video 3](art/video3.gif) | ![Tablet Mode](art/tablet.png) |\n\nSizing\n=================\n\nDimensions and paddings follow the Google giudelines\u003cbr /\u003e\n![Sizing](art/sizing.png)\n\n# Tablets\n\nThe View supports tablet mode too (Left or Right). In order to enable tablet mode this is the configuration that should be used:\n\n```xml\n\u003cit.sephiroth.android.library.bottomnavigation.BottomNavigation\n    android:id=\"@+id/BottomNavigation\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:layout_gravity=\"start\"\n    app:bbn_entries=\"@menu/bottombar_menu_3items\"\n    app:bbn_badgeProvider=\"@string/bbn_badgeProvider\"\n    app:layout_behavior=\"@string/bbn_tablet_view_behavior\" /\u003e\n```\n\n\n\nStyling\n=================\n\nThe xml menu supports the following attributes in the \u0026lt;menu\u0026gt; tag:\n\n\n```xml\n\u003cdeclare-styleable name=\"BottomNavigationMenu\"\u003e\n    \u003c!-- menu default background color --\u003e\n    \u003cattr name=\"android:background\" /\u003e\n    \n    \u003c!-- default badge color --\u003e\n    \u003cattr name=\"bbn_badgeColor\" format=\"color\" /\u003e\n\n    \u003c!-- animation duration for the menu items --\u003e\n    \u003cattr name=\"bbn_itemAnimationDuration\" format=\"integer\" /\u003e\n\n    \u003c!-- ripple selector color --\u003e\n    \u003cattr name=\"bbn_rippleColor\" format=\"color\" /\u003e\n\n    \u003c!-- menu item active color --\u003e\n    \u003cattr name=\"bbn_itemColorActive\" format=\"color\" /\u003e\n\n    \u003c!-- menu item inactive color --\u003e\n    \u003cattr name=\"bbn_itemColorInactive\" format=\"color\" /\u003e\n\n    \u003c!-- menu item disabled color --\u003e\n    \u003cattr name=\"bbn_itemColorDisabled\" format=\"color\" /\u003e\n\n    \u003c!-- force fixed behavior and always display item labels --\u003e\n    \u003c!-- default implementation is false and the labels are --\u003e\n    \u003c!-- shown only if there are less than 4 items in the menu --\u003e\n    \u003cattr name=\"bbn_alwaysShowLabels\" format=\"boolean\" /\u003e\n\u003c/declare-styleable\u003e\n```\n\n\u003e **Note:** By default when there are 4 or 5 elements, only the selected item will display the label.\nIn order to force all the items to always show their label, use `bbn_alwaysShowLabels` in the menu xml.\n\nBadges\n=================\n\n![Badges](https://raw.githubusercontent.com/sephiroth74/Material-BottomNavigation/master/art/badges1.png)\n\nThere's a basic support for badges using the default implementation.\nIn order to display a badge in the current BottomNavigation view, all you have to do is:\n\n```java\n    final BadgeProvider provider = bottomNavigationView.getBadgeProvider();\n    provider.show(R.id.bbn_item3);\n```\n            \nThis code will show a little circle badge on the menu item with the id \"bbn_item3\". \u003cbr /\u003e\nYou can define the default badge color inside the menu xml itself:\n\n```xml\n\u003cmenu xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    app:bbn_badgeColor=\"#FFFF0000\"\u003e\n    \n    \u003citem\n        android:id=\"@+id/bbn_item1\"\n        android:color=\"@color/colorPrimary\"\n        android:icon=\"@drawable/ic_cloud_off_white_24dp\"\n        android:title=\"Cloud Sync\" /\u003e\n        \n    ...\n\u003c/menu\u003e\n```\n\nThen you can hide the badge using:\n\n```java\n    bottomNavigation.getBadgeProvider().remove(R.id.bbn_item3);\n```\n\nBadges Customization\n=================\n\nYou can use your own [Drawable](http://developer.android.com/reference/android/graphics/drawable/Drawable.html) by extending the `BadgeProvider` class. \nOnce you've setup your new class you can tell the BottomNavigation view to use your class by specifying it in the \"bbn_badgeProvider\" attribute of your xml file. \u003cbr /\u003e\nFor instance:\n\n```xml\n\u003cit.sephiroth.android.library.bottomnavigation.BottomNavigation\n    android:id=\"@id/BottomNavigation\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:layout_gravity=\"bottom\"\n    app:bbn_badgeProvider=\"my.custom.BadgeProviderCustom\"\n    app:bbn_entries=\"@menu/bottombar_menu_4items\"\n    app:layout_behavior=\"@string/bbn_phone_view_behavior\" /\u003e\n```\n\nThis will make your `my.custom.BadgeProviderCustom` the default BadgeProvider.\n\n\n\nLicense\n=================\n\nThe MIT License (MIT)\n\nCopyright (c) 2016 Alessandro Crugnola\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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsephiroth74%2Fmaterial-bottomnavigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsephiroth74%2Fmaterial-bottomnavigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsephiroth74%2Fmaterial-bottomnavigation/lists"}