Navigation tab bar with colorful interactions.

Overview

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:

compile 'devlight.io:navigationtabbar:1.2.5'

Or Maven:

<dependency>
    <groupId>devlight.io</groupId>
    <artifactId>navigationtabbar</artifactId>
    <version>1.2.5</version>
    <type>aar</type>
</dependency>

Or Ivy:

<dependency org='devlight.io' name='navigationtabbar' rev='1.2.5'>
  <artifact name='$AID' ext='pom'></artifact>
</dependency>

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<NavigationTabBar.Model> 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);

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

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:

navigationTabBar.setBehaviorEnabled(true);

To deselect active index and reset pointer:

navigationTabBar.deselect();

Other methods check out in sample.

And XML init:

<devlight.io.library.ntb.NavigationTabBar
   android:id="@+id/ntb"
   android:layout_width="match_parent"
   android:layout_height="50dp"
   app:ntb_animation_duration="400"
   app:ntb_preview_colors="@array/colors"
   app:ntb_corners_radius="10dp"
   app:ntb_active_color="#fff"
   app:ntb_inactive_color="#000"
   app:ntb_badged="true"
   app:ntb_titled="true"
   app:ntb_scaled="true"
   app:ntb_tinted="true"
   app:ntb_title_mode="all"
   app:ntb_badge_position="right"
   app:ntb_badge_gravity="top"
   app:ntb_badge_bg_color="#ffff0000"
   app:ntb_badge_title_color="#ffffffff"
   app:ntb_typeface="fonts/custom_typeface.ttf"
   app:ntb_badge_use_typeface="true"
   app:ntb_swiped="true"
   app:ntb_bg_color="#000"
   app:ntb_icon_size_fraction="0.5"
   app:ntb_badge_size="10sp"
   app:ntb_title_size="10sp"/>

XML属性中文详解:

<devlight.io.library.ntb.NavigationTabBar 各属性详解
    全局:
    app:ntb_bg_color="#000"             ntb的背景颜色                可自定义
    app:ntb_active_color="#000"         ntb活动时的图标+标题颜色      可自定义
    app:ntb_inactive_color="#0f0"       ntb不活动时的图标+标题颜色    可自定义
    app:ntb_corners_radius="10dp"       ntb切换时的动画弧度大小       可自定义
    app:ntb_animation_duration="1000"   ntb切换时的动画时间           单位:ms
    图标相关:
    app:ntb_icon_size_fraction="1"      图标所占的大小比例            最佳值:0.5
    标题相关:
    app:ntb_titled="true"               是否显示图标所对应的标题       默认为false
    app:ntb_title_mode="active"         图片所对应的标题显示模式       active:活动时才显示 all:总是显示  PS:app:ntb_titled属性值为 true 时才可用
    app:ntb_title_size="10sp"           设置图标所对应的标题文字大小    请自定义
    勋章相关:
    app:ntb_badged="false"              是否显示勋章                  默认为false
    app:ntb_badge_gravity="top"         勋章的上下位置                top|bottom
    app:ntb_badge_position="right"      勋章的左右位置                left(25%), center(50%) and right(75%)
    app:ntb_badge_bg_color="#ffff0000"  勋章的背景颜色                可自定义
    app:ntb_badge_title_color="#000000" 勋章的标题文字颜色             可自定义 PS:不设置的话默认为切换动画的背景色
    app:ntb_badge_size="12sp"           勋章的标题文字大小             可自定义
    字体相关:
    app:ntb_badge_use_typeface="false"  是否使用自定义字体             默认为false
    app:ntb_typeface="fonts/by3500.ttf" 设置ntb的自定义字体            请将自定义的字体文件放在 asset/fonts 文件夹下
    其他:
    app:ntb_preview_colors="@array/colors"
    app:ntb_scaled="true"
    app:ntb_tinted="true"
    app:ntb_swiped="true"/>

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

Issues
  • menu without a title

    menu without a title

    I am a Chinese but English is not very good, I use your library, but the menu does not have a title, I try to use your demo,it dose not have a title too. I don't know what's wrong?

    help wanted question 
    opened by baoxin 33
  • Selected index

    Selected index

    How I can select index just to paint.

    Because, the method setModelIndex call method onStartTabSelected and reset my fragment and don't want this.

    I try to work with onBackPressed, when a fragment is removed and called who is top, then selected this tab. But how called onStartTabSelected this instance again. Thanks.

    PD: I can't show badge too.

    help wanted question 
    opened by juanlabrador 21
  • null object reference

    null object reference

    When I try to run my code I get this.

    I included you library from code

    java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.graphics.Bitmap.isRecycled()' on a null object reference

    bug help wanted question 
    opened by MrThiago 15
  • Cannot get badges to show

    Cannot get badges to show

    Hi,

    Otherwise the NTB works like a charm, but I can't get the badges to show at all...

    Here's my layout xml: `

    <com.gigamole.navigationtabbar.ntb.NavigationTabBar
        android:id="@+id/main_ntb"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        app:ntb_animation_duration="200"
        app:ntb_active_color="#ffffff"
        app:ntb_inactive_color="@color/grey"
        app:ntb_badged="true"
        app:ntb_titled="false"
        app:ntb_scaled="false"
        app:ntb_tinted="true"
        app:ntb_badge_position="right"
        app:ntb_badge_gravity="bottom"
        app:ntb_badge_bg_color="@color/theme_red"
        app:ntb_badge_title_color="#ffffff"
        app:ntb_swiped="true"
        app:ntb_bg_color="@color/dark_grey"
        app:ntb_badge_size="10sp"
        app:ntb_title_size="10sp" />
    
    <io.altru.lack.components.NonSwipeableViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/main_ntb"
        android:layout_alignParentBottom="true"
        android:background="@color/lightgrey" />
    

    `

    Here's the code for setting up my NTB:

    navigationTabBar = (NavigationTabBar) findViewById(R.id.main_ntb);

    final ArrayList<NavigationTabBar.Model> models = new ArrayList<>();

    IconDrawable browse = new IconDrawable(this, TypiconsIcons.typcn_home_outline).sizeDp(40);

    IconDrawable create = new IconDrawable(this, TypiconsIcons.typcn_camera).sizeDp(40);

    IconDrawable lists = new IconDrawable(this, TypiconsIcons.typcn_pin).sizeDp(40);

    models.add( new NavigationTabBar.Model.Builder(browse, getResources().getColor(R.color.theme_accent)) .build() );

    models.add( new NavigationTabBar.Model.Builder(create, getResources().getColor(R.color.theme_accent)) .build() );

    models.add( new NavigationTabBar.Model.Builder(lists, getResources().getColor(R.color.theme_accent)) .badgeTitle("Wee") .build() );

    navigationTabBar.setModels(models);

    navigationTabBar.setViewPager(viewPager, 0);

    navigationTabBar.setIsBadged(true);

    And finally, here's the code where I try to show the badge (pretty much copied from the sample app):

    navigationTabBar.postDelayed(new Runnable() { @Override public void run() { final NavigationTabBar.Model model = navigationTabBar.getModels().get(0); Log.v(TAG, "Is badge showing before: " + model.isBadgeShowed()); model.showBadge(); Log.v(TAG, "Is badge showing after: " + model.isBadgeShowed()); } }, 500);

    In the last code snippet, the model.isBadgeShowed() returns false on both calls, both before and after calling model.showBadge()

    Any help?

    help wanted 
    opened by juiceo 14
  • Fab Button layout_marginBottom=

    Fab Button layout_marginBottom="76dp" is not 16dp above from NavigationTabBar.

    Android Studio 2.1.3. gradle:2.1.3 compileSdkVersion 24 buildToolsVersion "24.0.0" minSdkVersion 14 targetSdkVersion 24

    compile 'com.android.support:design:24.2.0'
    compile 'com.android.support:appcompat-v7:24.2.0'
    compile 'com.github.devlight.navigationtabbar:navigationtabbar:1.2.5'
    

    It's not work good on SnakeBar showed.

    By use layout_marginBottom="76dp",the Fab Button is 16dp above from NavigationTabBar. But when SnakeBar showed ,it's 76dp+snakeBar's heigt above from NavigationTabBar.

    screenshot_2016-09-06-15-35-33_com lxt msgr screenshot_2016-09-06-15-35-34_com lxt msgr

    enhancement wontfix 
    opened by dyguests 13
  • Set some tab with title and other not

    Set some tab with title and other not

    Hello,

    is it possible to have tab elements with title and other with no title in same tab bar ?

    Thanks and Regards

    help wanted question 
    opened by darcheville06 12
  • I can't make it show title

    I can't make it show title

    I use your NavigationTabBar in my project,But it is not work so better,it can not show title,can you please help me debug it?

    There is a part of code about it.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="com.bigmercu.qinxinjiajiao.activity.bigmercuActivity"
        tools:showIn="@layout/activity_bigmercu">
        <com.gigamole.library.NavigationTabBar
            android:id="@+id/ntb"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimaryDark"
            app:ntb_animation_duration="400"
            app:ntb_preview_colors="@array/polluted_waves"
            app:ntb_active_color="#ffffff"
            app:ntb_inactive_color="#000000"
            app:ntb_badged="true"
            app:ntb_titled="true"
            app:ntb_title_mode="all"
            app:ntb_badge_position="right"
            app:ntb_badge_gravity="top"
            app:ntb_badge_use_typeface="true"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"/>
    </RelativeLayout>
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bigmercu);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ButterKnife.bind(this);
    
        String[] colors = getResources().getStringArray(R.array.default_preview);
        ArrayList<NavigationTabBar.Model> models = new ArrayList<>();
        models.add(new NavigationTabBar.Model(
                getResources().getDrawable(R.drawable.ic_first), Color.parseColor(colors[0]), "首页"));
        models.add(new NavigationTabBar.Model(
                getResources().getDrawable(R.drawable.ic_second), Color.parseColor(colors[1]), "赵老师"));
        models.add(new NavigationTabBar.Model(
                getResources().getDrawable(R.drawable.ic_third), Color.parseColor(colors[2]), "周边家长"));
        models.add(new NavigationTabBar.Model(
                getResources().getDrawable(R.drawable.ic_fourth), Color.parseColor(colors[3]), "消息"));
        models.add(new NavigationTabBar.Model(
                getResources().getDrawable(R.mipmap.me), Color.parseColor(colors[4]), "我"));
    
        navigationTabBar.setBadgeGravity(NavigationTabBar.BadgeGravity.TOP);
        navigationTabBar.setBadgePosition(NavigationTabBar.BadgePosition.CENTER);
        navigationTabBar.setIsBadged(true);
        navigationTabBar.setIsTitled(true);
        navigationTabBar.setTitleMode(NavigationTabBar.TitleMode.ALL);
        navigationTabBar.setModels(models);
    

    Do you now why?

    bug help wanted question wontfix 
    opened by Lswks 12
  • Setting default Icon

    Setting default Icon

    i want to set a coloured icon , but it fills the default color in the icon. i want to keep my icon as it is coloured without setting any colour through nt_inactive_color .

    help wanted 
    opened by abumoallim 12
  • How can i modify the size of title or the size of pic?

    How can i modify the size of title or the size of pic?

    image like this error! so,How can i modify the size of title or the size of pic?

    help wanted wontfix 
    opened by AlphaHans 10
  • java.lang.IllegalArgumentException: width and height must be > 0 navigation tab bar

    java.lang.IllegalArgumentException: width and height must be > 0 navigation tab bar

    i just got java.lang.IllegalArgumentException: width and height must be > 0 navigation tab bar

    opened by satriabw 9
  • i want to disable this nav

    i want to disable this nav

    I want to disable this nav, but i use navBar.setEnabled(false) not working, how can i disable this nav?

    opened by zlebhs 0
  • No fake drag in progress. Call beginFakeDrag first.

    No fake drag in progress. Call beginFakeDrag first.

    when i focus the tab button,and click the tab button twice will cause this bug,why?

    opened by qwasnm789 2
  •  Can you give each icon a color?

    Can you give each icon a color?

    I want different colors for different icons. Is there a way?

    opened by lomo57 1
  • Does this navigation support sliding, such as 5 menu items on the side. Only show four, the other can be displayed by sliding

    Does this navigation support sliding, such as 5 menu items on the side. Only show four, the other can be displayed by sliding

    Does this navigation support sliding, such as 5 menu items on the side. Only show four, the other can be displayed by sliding

    opened by BuildFy 0
  • Migrate to AndroidX

    Migrate to AndroidX

    As of right now there are problems with working with this library with AndroidX. I suggest migrating to AndroidX namespace.

    opened by ColorfulHorse 0
  • Drawable Background

    Drawable Background

    Hi! I am looking for set drawable background, How can I do it ? Thanks

    opened by smarteutech 0
  • my first commit

    my first commit

    opened by rkrider 0
  • I try to change title in runtime.But it won't be changed everytime.

    I try to change title in runtime.But it won't be changed everytime.

    Here is my code. mBinding.tabs.setOnTabBarSelectedIndexListener(new NavigationTabBar.OnTabBarSelectedIndexListener() {

            @Override
            public void onEndTabSelected(NavigationTabBar.Model model, int index) {
               if (index == 2) {
                   model.setTitle("刷新");
               } else {
                   mBinding.tabs.getModels().get(2).setTitle("发现");
               }
            }
        });
    

    Thanks for helping. ASAP

    opened by DarrenWorks 0
  • boolean android.graphics.Bitmap.isRecycled() null object reference error

    boolean android.graphics.Bitmap.isRecycled() null object reference error

    i had to Refactoring Androidx

    actually, it's work before convert

    first, Bitmap.createBitmap( .. ) in onDraw occured width, height > 0 error

    so i had to fix code if(mBitmap != null && !mBitmap.isRecycled()){ mBitmap.recycle(); ...}

    i can avoid this error but mPointerBitmap, mIconBitmap, mTitlesBitmap also occured same error

    so i fixed it too

    then new error come to me :( boolean android.graphics.Bitmap.isRecycled() null object reference

    mCanvas.drawBitmap(mPointerBitmap, 0.0F, 0.0F, mPointerPaint); << this code.

    how can i fix it? plz help

    opened by trandmore 0
Releases(1.2.5)
Owner
Devlight
We deliver the right results in terms of efficiency, performance, interoperability, and user experience comprehensive technology.
Devlight
A custom ViewPager title strip which gives continuous feedback to the user when scrolling

SmartTabLayout A custom ViewPager title strip which gives continuous feedback to the user when scrolling. This library has been added some features an

ogaclejapan 6.9k Jul 30, 2021
Navigation tab bar with colorful interactions.

NavigationTabBar Navigation tab bar with colorful interactions. You can check the sample app here. Warn This library is not more supported. If you wa

Devlight 4.9k Jul 29, 2021
An interactive indicator to navigate between the different pages of a ViewPager

Android PagerSlidingTabStrip (default Material Design) This library is not maintained anymore and there will be no further releases. For most of the c

JPARDOGO 2.2k Jul 27, 2021
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

Florent CHAMPIGNY 8.2k Aug 2, 2021
Navigation tab strip with smooth interaction.

NavigationTabStrip Navigation tab strip with smooth interaction. You can check the sample app here. Warn This library is not more supported. If you w

Devlight 2.2k Jul 22, 2021
Android library for fluid tablayout animation as seen on Snapchat.

SnapTabLayout Show some ❤️ and star the repo to support the project This library is the implementation of TabLayout as seen on popular messaging app S

Niranjan Kurambhatti 560 Jul 18, 2021
Custom Tabs with Material Design effects

MaterialTabs Custom Tabs with Material Design animations for pre-Lollipop devices       Download example apk It requires 14+ API and android support v

Fabio Biola 1.4k Jul 20, 2021
A simple app that consumes The Ricky & Morty API to display the tv show characters, was trying to learn about pagination with the paging 3 library

Ricky&MortyAPIDemo A simple app that consumes The Rick and Morty API which is a REST and GraphQL API based on the television show Rick and Morty. I wa

Joel Kanyi 3 May 28, 2021
ViewPagers library for Android

freepager Ready-to-use view pagers for your project. Based on Swipes navigation demo repository Usage: Gradle: dependencies { compile 'pro.alexza

Alex Zaitsev 460 Jun 23, 2021
Shall we spin ?

SpinningTabStrip & SpinningViewPager SpinningTabStrip & SpinningViewPager are android extensions allowing infinite scrolling. Moreover, YOU CAN SPIN t

eccyan 257 Mar 31, 2021
Put some bubble in your tabs and give your apps a supa fresh style !

BubbleTab Put some bubble in your tabs and give your apps a supa fresh style ! Usage Add a BubbleTab with your icons on the layout.xml Customisable pa

Florent CHAMPIGNY 535 Jul 12, 2021