An android navigation bar widget

Overview

Download     Android Arsenal

Chip Navigation Bar

A navigation bar widget inspired on Google Bottom Navigation mixed with Chips component.

Usage

<!-- bottom_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home"
        app:cnb_iconColor="@color/home"/>
    <item
        android:id="@+id/activity"
        android:icon="@drawable/ic_activity"
        android:title="Activity"
        app:cnb_iconColor="@color/activity"/>
    <item
        android:id="@+id/favorites"
        android:icon="@drawable/ic_heart"
        android:title="Favorites"
        app:cnb_iconColor="@color/favorites" />
    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:cnb_iconColor="@color/settings" />
</menu>

<!-- layout.xml -->
<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:cnb_menuResource="@menu/bottom_menu" />

Vertical orientation

ChipNavigationBar supports a vertical orientation mode. This is very useful for tablets or devices with large screens.

Just add the attribute cnb_orientationMode to your xml:

<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:id="@+id/bottom_menu"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:cnb_menuResource="@menu/test"
    app:cnb_orientationMode="vertical" />

... or programmatically call the method setMenuOrientation before inflate the menu:

menu.setMenuOrientation(MenuOrientation.VERTICAL)
menu.setMenuResource(R.menu.my_menu)

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.


Badges

The library supports badges on the menu items.

menu.showBadge(R.id.menu_home) 
menu.showBadge(R.id.menu_activity, 8)
menu.showBadge(R.id.menu_favorites, 88)
menu.showBadge(R.id.settings, 10000)

XML custom attributes

MenuItem xml custom attributes

attribute description default
android:id id required
android:enabled enabled state true
android:icon icon drawable required
android:title label string required
cnb_iconColor color used to tint the icon on selected state R.attr.colorAccent
cnb_iconTintMode PorterDuff.Mode to apply the color. Possible values: [src_over, src_in, src_atop, multiply, screen] null
cnb_textColor color used for the label on selected state same color used for cnb_iconColor
cnb_backgroundColor color used for the chip background same color used for cnb_iconColor with 15% alpha
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/home"
        android:enabled="true"
        android:icon="@drawable/ic_home"
        android:title="@string/home"
        app:cnb_backgroundColor="@color/home_chip"
        app:cnb_iconColor="@color/home_icon"
        app:cnb_iconTintMode="src_in"
        app:cnb_textColor="@color/home_label" />

        ...

</menu>

ChipNavigationBar xml custom attributes

attribute description default
cnb_menuResource menu resource file optional since you can set this programmatically
cnb_orientationMode menu orientation. Possible values: [horizontal, vertical] horizontal
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
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
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
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
cnb_minExpandedWidth minimum width for vertical menu when expanded 0
cnb_unselectedColor color used for unselected state #696969
cnb_badgeColor color used for the badge #F44336
cnb_radius radius used on the background Float.MAX_VALUE fully rounded
cnb_iconSize menu item icon size 24dp
cnb_textAppearance menu item text appearance theme default
<com.ismaeldivita.chipnavigation.ChipNavigationBar
    android:id="@+id/menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cnb_menuResource="@menu/bottom_menu"
    app:cnb_orientationMode="horizontal"
    app:cnb_addBottomInset="false"
    app:cnb_addLeftInset="false"
    app:cnb_addRightInset="false"
    app:cnb_addTopInset="false"
    app:cnb_unselectedColor="@color/my_menu_unselected_color"
    app:cnb_badgeColor="@color/my_menu_badge_color"
    app:cnb_radius="8dp"
    app:cnb_iconSize="24dp"
    app:cnb_textAppearance="?myThemeTextAppearance"/>

Public API

method description
setMenuResource(@MenuRes menuRes: Int) Inflate a menu from the specified XML resource
setMenuOrientation(menuOrientation: MenuOrientation) Set the menu orientation
setItemEnabled(id: Int, isEnabled: Boolean) Set the enabled state for the menu item with the provided [id]
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]
setOnItemSelectedListener(listener: OnItemSelectedListener) Register a callback to be invoked when a menu item is selected
collapse() Collapse the menu items if orientationMode is VERTICAL otherwise, do nothing
expand() Expand the menu items if orientationMode is VERTICAL otherwise, do nothing
showBadge(id: Int) Display a numberless badge for the menu item with the [id]
showBadge(id: Int, count: Int) Display a countable badge with for the menu item with the [id]

Installation

Required

Gradle

Make sure that the repositories section includes JCenter

buildscript {
    ...
    repositories {
        jcenter()
        ...
    }

Add the library to the dependencies:

implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.4'

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.

License

MIT License

Copyright (c) 2019 Ismael Di Vita

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • Failed to resolve: com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.4

    Failed to resolve: com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.4

    maven { url 'https://jitpack.io' }

    minSdkVersion 25

    implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.4' implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.5.10'

    opened by ashu9152 5
  • setItemSelected calls setOnItemSelectedListener everytime

    setItemSelected calls setOnItemSelectedListener everytime

    Context: when the user clicks on any item from chip-navigation-bar then setOnItemSelectedListener is called then he has to pass through a Dialog box in which if he presses "No" he will stay in the current activity. Problem: So the problem is after pressing "No" the clicked item stays selected so if I try to set the previous/default item selected by setItemSelected then it also calls setOnItemSelectedListener again which repeats the Dialog box part!! Is there any recommended way to fix it?

    Thank you!

    opened by AkshayAshokCode 4
  • Java compatibility

    Java compatibility

    Hello @ismaeldivita

    Please make this library for java compatible, so we can use in java project also. It is very good looking working is there.

    Thanks

    opened by rajam1215 4
  • How to change Icon when selected?

    How to change Icon when selected?

    I already do selector.xml for each icon and i program each icon for true and false android:state_checked. but it didn't work. did anyone have the solution?

    bug 
    opened by syafiqadibafham 3
  • Active menu

    Active menu

    I have following menu file but android:enabled="true" is not working (I mean by default when I open my app it is not active)

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/home"
            android:icon="@drawable/abc_vector_test"
            android:title="Home"
            android:enabled="true"
            app:cnb_iconColor="@color/home" />
        <item
            android:id="@+id/activity"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="@string/services"
            app:cnb_iconColor="@color/services" />
        <item
            android:id="@+id/favorites"
            android:icon="@android:drawable/arrow_down_float"
            android:title="@string/orders"
            app:cnb_iconColor="@color/orders" />
        <item
            android:id="@+id/settings"
            android:icon="@android:drawable/arrow_up_float"
            android:title="@string/settings"
            app:cnb_iconColor="@color/settings" />
    </menu>
    
    opened by robertnicjoo 3
  • Unable to Install in my Java Project

    Unable to Install in my Java Project

        implementation 'androidx.legacy:legacy-support-v4:1.0.0'
        implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.3.72'
    

    I have imported project successfully And yet cant use app:cnb_menuResource in my XML file.

    Android max API 30 min API level 23

    Sync with Gradle and cleared caches and restarted no use.

    opened by katesaikishore 3
  • Unresolved class error

    Unresolved class error

    when i use the dependencies, the "tools:context" field of every layout file shows error. i am using it with java so used this dependencies:

    implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.2'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.3.72'
    

    the error shows " Unresolved class 'class_name' ". please help me with this.

    opened by Mustangodhra 2
  • issue regarding the

    issue regarding the ".setOnItemSelectedListener"

    "java.lang.NullPointerException: Attempt to invoke virtual method 'void com.ismaeldivita.chipnavigation.ChipNavigationBar.setOnItemSelectedListener(com.ismaeldivita.chipnavigation.ChipNavigationBar$OnItemSelectedListener)' on a null object reference"

    opened by tauqirpasha 2
  • Kotlin cannot access kotlin.jvm.functions.Function1 when calling kotlin function with java lambda

    Kotlin cannot access kotlin.jvm.functions.Function1 when calling kotlin function with java lambda

        chipNavigationBar.setOnItemSelectedListener(new ChipNavigationBar.OnItemSelectedListener() {
            @Override
            public void onItemSelected(int i) {
    
                if (i==R.id.menu_home) {
    
                    LoadFrag(new HomeFrag());
    
    
                } else if (i == R.id.menu_fav) {
    
    
                    LoadFrag(new FavFrag());
    
    
                }
    
    
            }
        });
    

    while useing above event iam geting error as below during compiling

    error: cannot access Function1 class file for kotlin.jvm.functions.Function1 not found

    opened by JagadishaIncture 2
  • OnItemSelctedListener Java

    OnItemSelctedListener Java

    I am not sure what I have to write in the OnItemSelctedListener in Java can you send me an Example sir?

    This is a Part of my Current Code what do it Need to Change? i want to open an New Actvity on Click Item

    public class MainActivity extends AppCompatActivity {

    ChipNavigationBar chipNavigationBar;
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_test);
    
        chipNavigationBar = findViewById(R.id.menu);
    
        chipNavigationBar.setOnItemSelectedListener(new ChipNavigationBar.OnItemSelectedListener() {
    
            @Override
            public void onItemSelected(int id) {
               Toast.makeText(MainActivity.this, "Test", Toast.LENGTH_SHORT).show();
            }
        });
    
    }
    
    opened by tsplay 2
  • SetOnItemSelectedListener() being called twice on clicking once.

    SetOnItemSelectedListener() being called twice on clicking once.

    So when I am clicking on one item once, the fragment matching with the clicked item id is being called twice. I don't think this is happening because of my code.

    bottomBar is the chip-navigation-bar

    binding.bottomBar.setOnItemSelectedListener { id -> when (id) { R.id.home1 -> { setFragment(HomeFragment1()) } R.id.home2 -> { setFragment(HomeFragment2()) } R.id.home3 -> { setFragment(HomeFragment3()) } } }

    opened by Arpit0492 2
  • Icon animation

    Icon animation "state_checked"=true/false not working

    Just like material bottom navigation bar I want to achieve something like: When icon selected : filled icon When icon not selected : Outlined icon

    IN PLACE OF MENU ITEMS ICON I'M USING BELOW XML FILE :

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/homeoutline" android:state_checked="false"/>
        <item android:drawable="@drawable/homefilled" android:state_checked="true"/>
    </selector>
    
    

    But this is not working I'm getting outlined icon every time whether icon selected or not selected. Please help.

    opened by AsitDixit 0
  • Could not find com.github.ismaeldivita:chip-navigation-bar:1.4.0.

    Could not find com.github.ismaeldivita:chip-navigation-bar:1.4.0.

    Execution failed for task ':app:mergeDebugJavaResource'.
    > Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
       > Could not find com.github.ismaeldivita:chip-navigation-bar:1.4.0.
         Searched in the following locations:
           - https://dl.google.com/dl/android/maven2/com/github/ismaeldivita/chip-navigation-bar/1.4.0/chip-navigation-bar-1.4.0.pom
           - https://repo.maven.apache.org/maven2/com/github/ismaeldivita/chip-navigation-bar/1.4.0/chip-navigation-bar-1.4.0.pom
         Required by:
             project :app
    

    Can any body suggest how to fix this 👆.

    opened by 0-0Rohit-Roshan 0
Releases(1.4.0)
Owner
Ismael Di Vita
@transferwise
Ismael Di Vita
Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

Zain Ul Hassan 3 Jul 27, 2022
🎉 [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of 🎨 customization option.

Bubble Navigation ?? A light-weight library to easily make beautiful Navigation Bars with a ton of ?? customization options. Demos FloatingTopBarActiv

Gaurav Kumar 1.6k Sep 23, 2022
React Native lets you customize the navigation bar for Android.

react-native-system-navigation-bar React Native lets you customize the navigation bar for Android. Hide Lean Back Immersive Sticky Immersive Low Profi

Kadir Aydınlı 97 Sep 20, 2022
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Usage <com.fxn.BubbleTabBar android:id="@+id/

Akshay sharma 554 Sep 30, 2022
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Alperen Çevlik 3 Jul 27, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Artur Artikov 292 Jul 7, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Jeziel Lago 21 Aug 31, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Breens Mbaka 6 Feb 3, 2022
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

Gabor Varadi 1.2k Sep 23, 2022
Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Kaique Ocanha 4 Jun 15, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 4 Jul 6, 2022
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Kaique Ocanha 6 Jun 15, 2022
NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect.

NTabLayout Brief NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect. This tab bar's effe

XellossRyan 1 Oct 22, 2021
Okuki is a simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick DI integration.

Okuki A simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick integration for automatic dependency-

Cain Wong 144 Feb 11, 2022
A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

Kaustubh Patange 84 Sep 11, 2022
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

Hamidreza Etebarian 1.1k Sep 27, 2022
A multi back stack android navigation

Labyrinth A multi back stack android navigation MIT License - Copyright (c) 2020 Abanoub Milad Nassief Hanna [email protected] @Linkedin @Github Scr

Abanoub Milad Nassief Hanna 7 Dec 28, 2021
A simple navigation library for Android 🗺️

Enro ??️ A simple navigation library for Android "The novices’ eyes followed the wriggling path up from the well as it swept a great meandering arc ar

Isaac Udy 206 Sep 5, 2022
Annotation processor that provides better navigation on android multi-modules projects 🛳.

FlowNav FlowNav is a mobile library for Android that helps and provider a better way to make multi-modules navigation. The main purpose of this librar

Jeziel Lago 135 Sep 1, 2022