{"id":13610144,"url":"https://github.com/ismaeldivita/chip-navigation-bar","last_synced_at":"2025-04-12T22:32:55.773Z","repository":{"id":37924835,"uuid":"189670994","full_name":"ismaeldivita/chip-navigation-bar","owner":"ismaeldivita","description":"An android navigation bar widget","archived":false,"fork":false,"pushed_at":"2022-02-05T17:27:07.000Z","size":4869,"stargazers_count":890,"open_issues_count":22,"forks_count":136,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-11-07T16:42:13.844Z","etag":null,"topics":["android","bottom-navigation","bottombar","kotlin","navigation","widget"],"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/ismaeldivita.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}},"created_at":"2019-05-31T23:50:33.000Z","updated_at":"2024-11-02T11:22:40.000Z","dependencies_parsed_at":"2022-07-07T23:13:08.456Z","dependency_job_id":null,"html_url":"https://github.com/ismaeldivita/chip-navigation-bar","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/ismaeldivita%2Fchip-navigation-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismaeldivita%2Fchip-navigation-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismaeldivita%2Fchip-navigation-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismaeldivita%2Fchip-navigation-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ismaeldivita","download_url":"https://codeload.github.com/ismaeldivita/chip-navigation-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248641465,"owners_count":21138209,"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","bottombar","kotlin","navigation","widget"],"created_at":"2024-08-01T19:01:41.701Z","updated_at":"2025-04-12T22:32:53.761Z","avatar_url":"https://github.com/ismaeldivita.png","language":"Kotlin","funding_links":[],"categories":["Kotlin"],"sub_categories":[],"readme":"[![Release](https://jitpack.io/v/ismaeldivita/chip-navigation-bar.svg)](https://jitpack.io/#ismaeldivita/chip-navigation-bar)\n\n# Chip Navigation Bar\nA navigation bar widget inspired on Google [Bottom Navigation](https://material.io/design/components/bottom-navigation.html) mixed with [Chips](https://material.io/design/components/chips.html) component.\n\n## Usage\n\u003cimg align=\"right\" width=\"350\" src=\"./art/h.gif\"\u003e\n\n```xml\n\u003c!-- bottom_menu.xml --\u003e\n\u003cmenu xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\u003e\n    \u003citem\n        android:id=\"@+id/home\"\n        android:icon=\"@drawable/ic_home\"\n        android:title=\"Home\"\n        app:cnb_iconColor=\"@color/home\"/\u003e\n    \u003citem\n        android:id=\"@+id/activity\"\n        android:icon=\"@drawable/ic_activity\"\n        android:title=\"Activity\"\n        app:cnb_iconColor=\"@color/activity\"/\u003e\n    \u003citem\n        android:id=\"@+id/favorites\"\n        android:icon=\"@drawable/ic_heart\"\n        android:title=\"Favorites\"\n        app:cnb_iconColor=\"@color/favorites\" /\u003e\n    \u003citem\n        android:id=\"@+id/settings\"\n        android:icon=\"@drawable/ic_settings\"\n        android:title=\"Settings\"\n        app:cnb_iconColor=\"@color/settings\" /\u003e\n\u003c/menu\u003e\n\n\u003c!-- layout.xml --\u003e\n\u003ccom.ismaeldivita.chipnavigation.ChipNavigationBar\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:layout_gravity=\"bottom\"\n    android:background=\"@color/white\"\n    app:cnb_menuResource=\"@menu/bottom_menu\" /\u003e\n```\n\u003cbr clear=\"right\"/\u003e\n\n## Vertical orientation\n\n`ChipNavigationBar` supports a vertical orientation mode. This is very useful for\ntablets or devices with large screens.\n\n\u003cimg width=\"350\" align=\"right\" src=\"./art/v.gif\"/\u003e\n\nJust add the attribute `cnb_orientationMode` to your xml:\n```xml\n\u003ccom.ismaeldivita.chipnavigation.ChipNavigationBar\n    android:id=\"@+id/bottom_menu\"\n    android:layout_width=\"wrap_content\"\n    android:layout_height=\"match_parent\"\n    app:cnb_menuResource=\"@menu/test\"\n    app:cnb_orientationMode=\"vertical\" /\u003e\n```\n... or programmatically call the method `setMenuOrientation` before inflate the menu:\n```kotlin\nmenu.setMenuOrientation(MenuOrientation.VERTICAL)\nmenu.setMenuResource(R.menu.my_menu)\n```\n\n \u003e**Note:** The view exposes methods to expand and collapse the menu but we don't provide the implementation for the toggle button. Check the sample for a basic implementation.\n\n \u003cbr clear=\"right\"/\u003e\n\n## Badges\nThe library supports badges on the menu items.\n\n\u003cimg width=\"350\" align=\"right\"  src=\"./art/badge.png\"/\u003e\n\n```kotlin\nmenu.showBadge(R.id.menu_home) \nmenu.showBadge(R.id.menu_activity, 8)\nmenu.showBadge(R.id.menu_favorites, 88)\nmenu.showBadge(R.id.settings, 10000)\n```\n\n## XML custom attributes\n\n### MenuItem xml custom attributes\n| attribute|description|default|\n|----------|-------------|------ |\n| `android:id`|id|**required**|\n| `android:enabled`|enabled state|true|\n| `android:icon`|icon drawable|**required**|\n| `android:title`|label string|**required**|\n| `cnb_iconColor`|color used to tint the icon on selected state|`R.attr.colorAccent`|\n| `cnb_iconTintMode`|`PorterDuff.Mode` to apply the color. Possible values: [src_over, src_in, src_atop, multiply, screen]|`null`|\n| `cnb_textColor`|color used for the label on selected state|same color used for `cnb_iconColor`|\n| `cnb_backgroundColor`|color used for the chip background|same color used for `cnb_iconColor` with 15% alpha\n\n```xml\n\u003cmenu xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\u003e\n\n    \u003citem\n        android:id=\"@+id/home\"\n        android:enabled=\"true\"\n        android:icon=\"@drawable/ic_home\"\n        android:title=\"@string/home\"\n        app:cnb_backgroundColor=\"@color/home_chip\"\n        app:cnb_iconColor=\"@color/home_icon\"\n        app:cnb_iconTintMode=\"src_in\"\n        app:cnb_textColor=\"@color/home_label\" /\u003e\n\n        ...\n\n\u003c/menu\u003e\n```\n\n### ChipNavigationBar xml custom attributes\n| attribute|description|default|\n|----------|-------------|------ |\n| `cnb_menuResource`|menu resource file|optional since you can set this programmatically|\n| `cnb_orientationMode`|menu orientation. Possible values: [horizontal, vertical]|horizontal|\n| `cnb_addBottomInset`|property to enable the sum of the window insets on the current bottom padding, useful when you're using the translucent navigation bar|false|\n| `cnb_addTopInset`|property to enable the sum of the window insets on the current bottom padding, useful when you're using the translucent status bar with the vertical mode|false|\n| `cnb_addLeftInset`|property to enable the sum of the window insets on the current start padding, useful when you're using the translucent navigation bar with landscape|false|\n| `cnb_addRightInset`|property to enable the sum of the window insets on the current end padding, useful when you're using the translucent navigation bar with landscape|false|\n| `cnb_minExpandedWidth`|minimum width for vertical menu when expanded|0\n| `cnb_unselectedColor` |color used for unselected state|`#696969`|\n| `cnb_badgeColor` |color used for the badge|`#F44336`|\n| `cnb_radius` |radius used on the background|`Float.MAX_VALUE` fully rounded|\n| `cnb_iconSize` |menu item icon size|24dp|\n| `cnb_textAppearance` |menu item text appearance|theme default|\n| `cnb_animationDuration` |animation duration|theme default|\n```xml\n\u003ccom.ismaeldivita.chipnavigation.ChipNavigationBar\n    android:id=\"@+id/menu\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    app:cnb_menuResource=\"@menu/bottom_menu\"\n    app:cnb_orientationMode=\"horizontal\"\n    app:cnb_addBottomInset=\"false\"\n    app:cnb_addLeftInset=\"false\"\n    app:cnb_addRightInset=\"false\"\n    app:cnb_addTopInset=\"false\"\n    app:cnb_unselectedColor=\"@color/my_menu_unselected_color\"\n    app:cnb_badgeColor=\"@color/my_menu_badge_color\"\n    app:cnb_radius=\"8dp\"\n    app:cnb_iconSize=\"24dp\"\n    app:cnb_textAppearance=\"?myThemeTextAppearance\"\n    app:cnb_animationDuration=\"175\"\u003e\n```\n## Public API\n\n| method|description|\n|---------------|----|\n|`setMenuResource(@MenuRes menuRes: Int)` | Inflate a menu from the specified XML resource|\n|`setMenuOrientation(menuOrientation: MenuOrientation)` | Set the menu orientation|\n|`setItemEnabled(id: Int, isEnabled: Boolean)` | Set the enabled state for the menu item with the provided [id]|\n|`setItemSelected(id: Int)` | Remove the selected state from the current item and set the selected state to true for the menu item with the [id]|\n|`setOnItemSelectedListener(listener: OnItemSelectedListener)`|Register a callback to be invoked when a menu item is selected|\n|`collapse()`|Collapse the menu items if orientationMode is VERTICAL otherwise, do nothing|\n|`expand()`|Expand the menu items if orientationMode is VERTICAL otherwise, do nothing|\n|`showBadge(id: Int)`|Display a numberless badge for the menu item with the [id]|\n|`showBadge(id: Int, count: Int)`|Display a countable badge with for the menu item with the [id]|\n|`setDuration(duration: Long)`|Set a custom animation duration|\n## Installation\n\n**Required**\n- AndroidX - See [migration guide](https://developer.android.com/jetpack/androidx/migrate)\n- Android Marshmallow - API Level [23](https://twitter.com/minsdkversion)\n\n### Gradle\n\nMake sure that the repositories section includes Jitpack\n```gradle\nallprojects {\n    repositories {\n        ...\n        maven { url 'https://jitpack.io' }\n    }\n}\n```\nAdd the library to the dependencies:\n\n```gradle\nimplementation 'com.github.ismaeldivita:chip-navigation-bar:1.4.0'\n```\n \u003e**Note:** For projects without kotlin, you may need to add `org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion` to your dependencies since this is a Kotlin library.\n\n## License\nMIT License\n\nCopyright (c) 2019 Ismael Di Vita\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismaeldivita%2Fchip-navigation-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismaeldivita%2Fchip-navigation-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismaeldivita%2Fchip-navigation-bar/lists"}