Badges

Basic Usage

How to add badge:

• Badge can be coupled with NavigationItem.
• Each Navigation Item have one Badges.
• Create a BadgeItem with the required preferences and link it to BottomNavigationItem via setBadgeItem() method

Types of badges:

• TextBadgeItem
• ShapeBadgeItem

Code Snippet Example

simple code

TextBadgeItem numberBadgeItem = new TextBadgeItem();
ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem();
bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(shapeBadgeItem))

numberBadgeItem.setText("")// whenever you need to update code

You can customise both heavily depending on your needs check customisations in the below section.

 numberBadgeItem.setBorderWidth(4)
                .setBackgroundColorResource(R.color.blue)
                .setText("" + lastSelectedPosition)
                .setHideOnSelect(autoHide.isChecked());

 shapeBadgeItem.setShape(ShapeBadgeItem.SHAPE_STAR_5_VERTICES)
                .setShapeColorResource(R.color.teal)
                .setGravity(Gravity.TOP | Gravity.END)
                .setHideOnSelect(autoHide.isChecked());

All BadgeItem Behaviour and Animation Features

Property	Description	Method	Values
Hide On Select	Badge hides on Tab Selection, reappears when it is un-selected	setHideOnSelect()	boolean
Animation Duration	Hide/Show Animation Duration	setAnimationDuration()	int (time in milliseconds)
Hide	hides with animation	hide()	-
Hide with animation control	hides with/without animation	hide()	boolean (true->animate, false-> don't animate)
UnHide/Show	un-hides with animation	show()	-
UnHide/Show with animation control	un-hides with/without animation	show()	boolean (true->animate, false-> don't animate)
Toggle	toggles badge between hide/show with animation	toggle()	-
Toggle with animation control	toggles badge between hide/show with/without animation	toggle()	boolean (true->animate, false-> don't animate)
Is Hidden	returns if the badge is hidden	isHidden()	boolean
Gravity	Position of Badge on the BottomNavigationItem	setGravity()	Gravity.TOP/BOTTOM/LEFT/RIGHT (any combination of these)

TextBadgeItem Customisation Properties

Property	Description	Method	Values
Text	Text on the Badge	setText()	CharSequence
Text Color	Badge Text Color	setTextColorResource(), setTextColor()	Resource/ColorCode(String)/Color
BackgroundColor	Badge Background Color	setBackgroundColorResource(), setBackgroundColor()	Resource/ColorCode(String)/Color
Border Width	Width of badge around border	setBorderWidth()	int (width in pixels)
Border Color	Badge Border Color	setBorderColorResource(), setBorderColor()	Resource/ColorCode(String)/Color

ShapeBadgeItem Customisation Properties

Property	Description	Method	Values
Shape	Shape on the Badge	setShape()	SHAPE_OVAL, SHAPE_RECTANGLE, SHAPE_HEART, SHAPE_STAR_3_VERTICES, SHAPE_STAR_4_VERTICES, SHAPE_STAR_5_VERTICES, SHAPE_STAR_6_VERTICES
Shape Color	Shape Color	setShapeColorResource(), setShapeColor()	Resource/ColorCode(String)/Color
Shape Size	Shape Width and Height	setSizeInDp(), setSizeInPixels()	int(width and height in pixels/dp)
Shape Margin	Margin around the shape	setEdgeMarginInDp(), setEdgeMarginInPixels()	int (margin in pixels/dp)