Need help with NavigationTabBar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Devlight
4.8K Stars 873 Forks Apache License 2.0 88 Commits 62 Opened issues

Description

Navigation tab bar with colorful interactions.

Services available

!
?

Need anything else?

Contributors list

No Data


Devlight


NavigationTabBar

Navigation tab bar with colorful interactions.

Android Arsenal       Android       Download       License       Codacy

You can check the sample app here.

Warn

This library is not more supported. 
If you want to add new feature or fix a bug, grab source code and do it. 
If you think your fix or feature would be useful to other developers, 
I can add link of your repository to this README file. 
Thank you for using our libraries.

Download

You can download a

.aar
from GitHub's releases page.

You can use Gradle:

groovy
compile 'devlight.io:navigationtabbar:1.2.5'

Or Maven:

groovy

    devlight.io
    navigationtabbar
    1.2.5
    aar

Or Ivy:

groovy

  

Android SDK Version

NavigationTabBar
requires a minimum SDK version of 11.

Sample

Parameters

For

NTB
you can set such parameters as:
  • models:
    allows you to set

    NTB
    models, where you set icon and color. Can be set up only via code.
  • behavior:
    allows you to set bottom translation behavior.

  • view pager:
    allows you to connect

    NTB
    with
    ViewPager
    . If you want your can also set
    OnPageChangeListener
    .
  • background color:
    allows you to set background to

    NTB
    which automatically set with offset relative to badge gravity and corners radius.
  • model selected icon:
    allows you to set selected icon when current model is active.

  • model title:
    allows you to enable title in you model.

  • model badge:
    allows you to enable badge in you model.

  • use custom typeface on badge:
    allows you to handle set of custom typeface in your badge.

  • title mode:
    allows you to handle mode of the model title show. Can show all or only active.

  • title size:
    allows you to set titles size.

  • scale mode:
    allows you to handle mode of the model icon and title scale.

  • tint mode:
    allows you to enable or disable icon tinting.

  • badge size:
    allows you to set badges size.

  • badge position:
    allows you to set the badge position in you model. Can be: left(25%), center(50%) and right(75%).

  • badge gravity:
    allows you to set the badge gravity in NTB. Can be top or bottom.

  • badge colors:
    allows you to set the badge bg and title colors.

  • typeface:
    allows you to set custom typeface to your title.

  • corners radius:
    allows you to set corners radius of pointer.

  • icon size fraction:
    allows you to set icon size fraction relative to smaller model side.

  • animation duration:
    allows you to set animation duration.

  • inactive color:
    allows you to set inactive icon color.

  • active color:
    allows you to set active icon color.

  • tab bar listener:
    allows you to set listener which triggering on start or on end when you set model index.

  • preview colors:
    allows you to set preview colors, which generate count of models equals to count of colors.

Tips

Creation of models occurs through

Builder
pattern.
ModelBuilder
requires two fields: icon and color. Title, badge title and selected icon is optional.

You can set selected icon. Resize and scale of selected icon equals to original icon.
Orientation automatically detected according to

View
size.

By default badge bg color is the active model color and badge title color is the model bg color. To reset colors just set

AUTO_COLOR
value to badge bg and title color.
By default badge sizes and title sizes is auto fit. To reset calculation just set
AUTO_SIZE
value to badge size and title size.
By default icon size fraction is
0.5F
(half of smaller side of
NTB
model). To reset scale fraction of icon to automatic just put in method
AUTO_SCALE
value.

If your set

ViewPager
and enable swipe you can action down on active pointer and do like drag.

Init

Check out in code init:

final NavigationTabBar navigationTabBar = (NavigationTabBar) findViewById(R.id.ntb);
final ArrayList models = new ArrayList<>();
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_first),
                Color.parseColor(colors[0])
        ).title("Heart")
                .badgeTitle("NTB")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_second),
                Color.parseColor(colors[1])
        ).title("Cup")
                .badgeTitle("with")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_third),
                Color.parseColor(colors[2])
        ).title("Diploma")
                .badgeTitle("state")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_fourth),
                Color.parseColor(colors[3])
        ).title("Flag")
                .badgeTitle("icon")
                .build()
);
models.add(
        new NavigationTabBar.Model.Builder(
                getResources().getDrawable(R.drawable.ic_fifth),
                Color.parseColor(colors[4])
        ).title("Medal")
                .badgeTitle("777")
                .build()
);
navigationTabBar.setModels(models);
navigationTabBar.setViewPager(viewPager, 2);

navigationTabBar.setTitleMode(NavigationTabBar.TitleMode.ACTIVE); navigationTabBar.setBadgeGravity(NavigationTabBar.BadgeGravity.BOTTOM); navigationTabBar.setBadgePosition(NavigationTabBar.BadgePosition.CENTER); navigationTabBar.setTypeface("fonts/custom_font.ttf"); navigationTabBar.setIsBadged(true); navigationTabBar.setIsTitled(true); navigationTabBar.setIsTinted(true); navigationTabBar.setIsBadgeUseTypeface(true); navigationTabBar.setBadgeBgColor(Color.RED); navigationTabBar.setBadgeTitleColor(Color.WHITE); navigationTabBar.setIsSwiped(true); navigationTabBar.setBgColor(Color.BLACK); navigationTabBar.setBadgeSize(10); navigationTabBar.setTitleSize(10); navigationTabBar.setIconSizeFraction(0.5); </navigationtabbar.model>

If your models is in badge mode you can set title, hide, show, toggle and update badge title like this:

java
model.setTitle("Here some title to model");
model.hideBadge();
model.showBadge();
model.toggleBadge();
model.updateBadgeTitle("Here some title like NEW or some integer value");

To enable behavior translation inside

CoordinatorLayout
when at bottom of screen:
java
navigationTabBar.setBehaviorEnabled(true);

To deselect active index and reset pointer:

java
navigationTabBar.deselect();

Other methods check out in sample.

And XML init:


XML属性中文详解:

xml

Getting Help

To report a specific problem or feature request, open a new issue on Github.

Xamarin

Thanks to Martijn van Dijk for developing Xamarin bindings library for NavigationTabBar.
Plugin is available on Nuget.

use navbar using materialize css

navbar using materialize css is really easy and would take just assigning right classes to the html tags and it would create a navigation tab bar using its prewritten css and js files. This can be easily used in html pages using downloaded files or cdn links... https://materializecss.com/navbar.html

Credits

Sincere thanks, to portal FAnDroid.info (StartAndroid) who released the review of this library in detail. If you understand the Russian language, then feel free to see the video or read the text version of its great post.

Inspired by:

|Sergey Valiukh| |:--------------------------------------------------:| ||

Thanks to Valery Nuzhniy for NTB badge design.

Author

Created by Basil Miller - @gigamole

Company

Facebook     Twitter     LinkedIn

Here you can see open source work developed by Devlight LLC.
This and another works is an exclusive property of Devlight LLC.

If you want to use this library in applications which will be available on Google Play, please report us about it or author of the library.

Whether you're searching for a new partner or trusted team for creating your new great product we are always ready to start work with you.

You can contact us via [email protected] or [email protected]
Thanks in advance.

Devlight LLC, 2016
devlight.io

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.