GOOGLE BOTTOM NAVIGATION

 

A navigation bar widget inspired on Google Bottom Navigation

Chip Navigation Bar

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

Usage

Chip-Navigation-Bar

XML

Vertical orientation

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

v

Just add the attribute cnb_orientationMode to your xml:

XML

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

Kotlin

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.

badge

Kotlin

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_iconTintModePorterDuff.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
XML

ChipNavigationBar xml custom attributes

ATTRIBUTEDESCRIPTIONDEFAULT
cnb_menuResourcemenu resource fileoptional since you can set this programmatically
cnb_orientationModemenu orientation. Possible 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
cnb_unselectedColorcolor used for unselected state#696969
cnb_badgeColorcolor used for the badge#F44336
cnb_radiusradius used on the backgroundFloat.MAX_VALUE fully rounded
cnb_iconSizemenu item icon size24dp
cnb_textAppearancemenu item text appearancetheme default
XML

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

Gradle

Add the library to the dependencies:

Gradle

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.

(Visited 36 times, 1 visits today)

You May Also Like

About the Author: Android Developer

This is Mohammad I am Android Application Developer. I am the founder of Android Tutorial Online blog. I am programming lover and professional blogger from India. I spend most of my time doing programming and helping other programmers. This Android tutorial online blog for learning and share Android code.
My Chatbot
Powered by Replace Me