Skip to content
Ashok Varma edited this page Jun 24, 2017 · 7 revisions

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)
You can’t perform that action at this time.