Customisations

BottomNavigationBar Customisations

-------------	MODE_FIXED	MODE_SHIFTING
BACKGROUND_STYLE_STATIC
BACKGROUND_STYLE_RIPPLE

MODE_FIXED_NO_TITLE => MODE_FIXED without title (bottom text)

MODE_SHIFTING_NO_TITLE => MODE_SHIFTING without title (bottom text)

1. Modes

Attribute: bnbMode Values: mode_default, mode_fixed, mode_shifting, mode_fixed_no_title, mode_shifting_no_title
Method: setMode() Values:MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING, MODE_FIXED_NO_TITLE, MODE_SHIFTING_NO_TITLE

Code Snippet Example

to set mode :

bottomNavigationBar
                .setMode(BottomNavigationBar.MODE_FIXED)

MODE_DEFAULT: if number of tabs are less than or equal to three then MODE_FIXED will be used other cases MODE_SHIFTING will be used.

2. Background Styles

Attribute: bnbBackgroundStyle Values: background_style_default, background_style_static, background_style_ripple
Method: setBackgroundStyle() Values: BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

Code Snippet Example

to set background style:

bottomNavigationBar
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)		

BACKGROUND_STYLE_DEFAULT: if mode is MODE_FIXED then BACKGROUND_STYLE_STATIC will be used if mode is MODE_SHIFTING then BACKGROUND_STYLE_RIPPLE will be used.

3. Colors

Attributes: bnbActiveColor, bnbInactiveColor, bnbBackgroundColor Value: Color value or resource
Methods: setActiveColor, setInActiveColor, setBarBackgroundColor Value: Color value or resource

Code Snippet Example

to set colors:

 bottomNavigationBar
                 .setActiveColor(R.color.primary)
                 .setInActiveColor("#FFFFFF")
                 .setBarBackgroundColor("#ECECEC")

in-active color : is the icon and text color of the in-active/un-selected tab

active color : In BACKGROUND_STYLE_STATIC active color is the icon and text color of the active/selected tab. In BACKGROUND_STYLE_RIPPLE active color is the bottom bar background color (which comes with ripple animation)

background color : In BACKGROUND_STYLE_STATIC background color is the bottom bar background color. In BACKGROUND_STYLE_RIPPLE background color is the icon and text color of the active/selected tab.

Default colors:

1. Theme's Primary Color will be active color.
2. Color.LTGRAY will be in-active color.
3. Color.WHITE will be background color.

4. Individual BottomNavigationItem Colors

set colors to BottomNavigationItem : if you need different active/in-active colors for different tabs. you can also set active and inactive color for the BottomNavigationItem.

Code Snippet Example

        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColor(R.color.orange).setInActiveColor(R.color.teal))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books").setActiveColor("#FFFF00"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music").setInActiveColor("#00FFFF"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games").setActiveColor(R.color.grey))

if you didn't set active/in-active colors for the BottomNavigationItem then these will inherited from BottomNavigationBar active/in-active colors respectively

5. Elevation

Attribute: bnbElevation

You can set elevation to 0dp if you don't want a shadow or plan to draw your own.

Default elevation: 8dp

6. BottomNavigationItem Icon Customisations

If changing color isn't enough to differentiate between Active and In-Active Icon. This method allows to set different Icons for active and Inactive Colors.

Code Snippet Example

        new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setInactiveIcon(R.drawable.ic_home_black)