--ADVERTISEMENT--

Android Clip Navigation Bar Widget

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

Menu xml custom attributes

attributedescriptiondefault
cnb_disabledColorcolor used for the disable stateR.attr.colorButtonNormal
cnb_unselectedColorcolor used for unselected state#696969
cnb_badgeColorcolor used for the badge#F44336
<menu
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cnb_disabledColor="#606060"
    app:cnb_unselectedColor="@color/my_unselected_color"
    app:cnb_badgeColor="@color/my_badge_color">
    ...

</menu>

MenuItem xml custom attributes

attributedescriptiondefault
android:ididrequired
android:enabledenabled statetrue
android:iconicon drawablerequired
android:titlelabel stringrequired
cnb_iconColorcolor used to tint the icon on selected stateR.attr.colorAccent
cnb_icontTintModePorterDuff.Mode to apply the color. Possible values: [src_over, src_in, src_atop, multiply, screen]null
cnb_textColorcolor used for the label on selected statesame color used for cnb_iconColor
cnb_backgroundColorcolor used for the chip backgroundsame 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

attributedescriptiondefault
cnb_menuResourcemenu resource fileoptional since you can set this programmatically
cnb_orientationModemenu orientation. Posisble values: [horizontal, vertical]horizontal
cnb_addBottomInsetproperty to enable the sum of the window insets on the current bottom padding, useful when you're using the translucent navigation barfalse
cnb_addTopInsetproperty 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 modefalse
cnb_addLeftInsetproperty to enable the sum of the window insets on the current start padding, useful when you're using the translucent navigation bar with landscapefalse
cnb_addRightInsetproperty to enable the sum of the window insets on the current end padding, useful when you're using the translucent navigation bar with landscapefalse
cnb_minExpandedWidthminimum width for vertical menu when expanded0
<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_minExpandedWidth="150dp" />

Public API

methoddescription
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.2.0'
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.

Download From GitHub

Download complete project source code from GitHub

Post a Comment

Powered by Blogger.