aurelhubert/ahbottomnavigation

A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design.

ahbottomnavigation's Issues

No items visible

When the view is in a Fragment, then there are no items visible. I see the view, but without any items in it. Also when I tap inside the view, then the underlying RecyclerView receives the OnClick.

When I have the same code in an Activity, then I do see the items.

AHBottomNavigation bottomNavigation = (AHBottomNavigation) v.findViewById(R.id.bottom_navigation);

AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.item1, R.drawable.icon1, R.color.color1);
AHBottomNavigationItem item2 = new AHBottomNavigationItem("item1", R.drawable.icon2, R.color.color2);
AHBottomNavigationItem item3 = new AHBottomNavigationItem("item3", R.drawable.icon3, R.color.color3);

ArrayList<AHBottomNavigationItem> bottomNavigationItems = new ArrayList<>();
bottomNavigationItems.add(item1);
bottomNavigationItems.add(item2);
bottomNavigationItems.add(item3);
bottomNavigation.addItems(bottomNavigationItems);

........

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />
</android.support.design.widget.CoordinatorLayout>

Use With ViewPager and Fragment

Such a great work and made so quickly!

But I'm stuck to call a fragment with on "onTabSelected" method. How to do this like a TabLayout Widget ?

Thank's !

Seeing 'The items list should not have more than 5 items' even though I only have 5 items

I think it's being called from addItems in AHBottomNavigation

(items.size() >= MAX_ITEMS

Is this warning intentional or am I misunderstanding it?
In my opinion it'd make more sense to display this warning if I tried to add more than 5 items.

Ripple effect on item hold

Hello!
I'd like to see if it's possible to add a new feature to show a ripple effect when holding any items of the bar.
I saw this in the Google Photos (see gif below) app and thought it'd be good to have here too.

Thanks!

AHBottomNavigationItem constructor parameters

Current AHBottomNavigationItem contructor takes a mixture of resource identifiers and resources. I suggest using two constructors taking only resource identifiers or resources.

Current constructor:

AHBottomNavigationItem(String, @DrawableRes int, @ColorInt int);

Suggested constructors:

AHBottomNavigationItem(@TextRes int, @DrawableRes int, @ColorRes int);
AHBottomNavigationItem(CharSequence, Drawable, @ColorInt int);

Possible to create an alternative method to setCurrentItem(position)?

is it possible to add new method for just highlight the tab item only? I found out that when i call setCurrentItem(), it highlight the tabs and trigger the "tabSelectedListener.onTabSelected(itemIndex, true)".

UI freezing when using the shared element transitions

Hi, when using the library to start a new activity for each tab press, I used shared element transitions to make it appear that the bottom bar never changed. However this is causing the UI to freeze when switching quickly between tabs.

When I remove the transitions, it works fine, but the fade in/out is too noticeable. Happy to give more details if needed...

Notification bigger than 10 don't appear.

Hello.

Working with the library, at the moment of my notification badge is greater than 10. Don't appear any number. Is this a bug? or improvement.

Tested on Android Lollipop - Nexus 6.

Implementation:

bottomNavigation.setNotification(idChat, response.body().getData().size());
bottomNavigation.setNotification(1, 16);

Set TypeFace for title of item

Can we set TypeFace / custom font type for title of bottom item?

Ripple does not work on Items with Black Backgroud color

The bottom navigation item's onClick ripple effect does not work if set with black background color.

int colorBlack = Color.parseColor("#000000");
AHBottomNavigationItem item1 = new AHBottomNavigationItem(getString(R.string.title_1), R.mipmap.ic_my_details, colorBlack);
AHBottomNavigationItem item2 = new AHBottomNavigationItem(getString(R.string.title_2), R.mipmap.ic_profile_club, colorBlack);
AHBottomNavigationItem item3 = new AHBottomNavigationItem(getString(R.string.title_3), R.mipmap.ic_complete_profile, colorBlack);

AHBottomNavigation not Scorlling if added inside any child layout

AHBottomNavigation is not showing the scorll behaviour, after adding inside any kind of layout.

As its Parent layout should be CoordinatorLayout, so tried by adding inside CoordinatorLayout, still same issue.

Add a TabLayoutOnPageChangeListener that implements ViewPager.OnPageChangeListener

Similar to: http://developer.android.com/reference/android/support/design/widget/TabLayout.TabLayoutOnPageChangeListener.html

No need to implemented the scrolling methods, but essentially this would allow for using a FragmentPagerAdapter with the Bottom tab layout like you would have with the the android.support.design.widget.TabLayout

Drawable unselected color

noticed, that unselected tab's icon have a same color when it was selected

impplementation code:

   AHBottomNavigationItem notificationItem = new AHBottomNavigationItem(R.string.notification_tab, R.drawable.ic_notifications_none_white_24dp, R.color.notification_tab_color);

    AHBottomNavigationItem accountItem = new AHBottomNavigationItem(R.string.account_item, R.drawable.ic_person_white_24dp, R.color.account_tab_color);

    AHBottomNavigationItem applicationItem = new AHBottomNavigationItem(R.string.application_item, R.drawable.ic_info_outline_white_24dp, R.color.application_tab_color);

    ahBottomNavigation.addItem(notificationItem);
    ahBottomNavigation.addItem(accountItem);
    ahBottomNavigation.addItem(applicationItem);


    ahBottomNavigation.setAccentColor(Color.WHITE);
    ahBottomNavigation.setInactiveColor(Color.GRAY);
    ahBottomNavigation.setForceTint(true);
    ahBottomNavigation.setColored(true);`

MinSDK

hi, really good and amazing lib.
can u decrease min sdk version to 14?

TnQ

No support for Fragment v4?

Version 0.1.3 is not available on Maven

Docs refer to a version 0.1.3, but version 0.1.1 is the latest version up on maven
http://search.maven.org/#search%7Cga%7C1%7Cahbottomnavigation

How can I add red point in the bottom item?

When a new message push to App I want to add something in my bottom item ( like red point number),what should I do ?

setCurrentItem() crashes with 5 items and bottomLayout.setForceTitlesDisplay(true)

Hi, I have a crash when I use setCurrentItem with five AHBottomNavigationItems and bottomLayout.setForceTitlesDisplay(true) ( all is ok for three items ). The crash happens in setCurrentItem > updateSmallItems

final View container = views.get(currentItem).findViewById(R.id.bottom_navigation_small_container);
final TextView title = (TextView) views.get(currentItem).findViewById(R.id.bottom_navigation_small_item_title);
final ImageView icon = (ImageView) views.get(currentItem).findViewById(R.id.bottom_navigation_small_item_icon);
final TextView notification = (TextView) views.get(currentItem).findViewById(R.id.bottom_navigation_notification);

All these views are nulls for some reason. Here's the full log

Process: com.itelinc.android.itelnow, PID: 29095
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewGroup$LayoutParams android.view.View.getLayoutParams()' on a null object reference
at com.aurelhubert.ahbottomnavigation.AHHelper$1.onAnimationUpdate(AHHelper.java:57)
at android.animation.ValueAnimator.animateValue(ValueAnimator.java:1374)
at android.animation.ValueAnimator.setCurrentFraction(ValueAnimator.java:602)
at android.animation.ValueAnimator.setCurrentPlayTime(ValueAnimator.java:550)
at android.animation.ValueAnimator.start(ValueAnimator.java:1039)
at android.animation.ValueAnimator.start(ValueAnimator.java:1050)
at com.aurelhubert.ahbottomnavigation.AHHelper.updateTopMargin(AHHelper.java:64)at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.updateSmallItems(AHBottomNavigation.java:543)
at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.setCurrentItem(AHBottomNavigation.java:779)
at com.itelinc.android.itelmobile.ui.home.MainActivity.lambda$selectCurrentTab$16(MainActivity.java:342)
at com.itelinc.android.itelmobile.ui.home.MainActivity.access$lambda$17(MainActivity.java)
at com.itelinc.android.itelmobile.ui.home.MainActivity$$Lambda$20.run(Unknown Source)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:135)
at android.app.ActivityThread.main(ActivityThread.java:5254)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)

FragmentBackstack

is your library managing the fragment backstack??

AHBottomNavigation#createItems() function called too many times

The AhBottomNavigation#createItems is called each time we add a single item or when we change a view parameter.

Wouldn't it be possible to call it in a more adapted way for optimizing the view ?

Potential solutions:

• Concerning the colors and other parameters, one could use use [http://developer.android.com/training/custom-views/create-view.html#customattr](custom attributes) in order to set the params directly in the xml.
• Having an update function for changing just what is needed when we change a parameter.

Snackbar?

Hello!
I'm having problems showing the snackbar with the bottom navigation. The problem is it stays behind the bottom navigation instead of on top of it like in the guidelines.

Is this a problem with the library or with my layouts?
Here's my layout and how I show the snackbar:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator_layout"
    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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>

</android.support.design.widget.CoordinatorLayout>

Snackbar.make(R.id.coordinator_layout, message, Snackbar.LENGTH_LONG).show();

Here's a GIF of how it happens, I'm scrolling to hide the bottom navigation and show the snackbar behind it:

Thanks!

Issue with indicator

Hi,

First at all excelente work, i'm testing in my project but i having one issue but i'm not
found any report about that.

All the tabs are selecting when i choose one at one.

See the image below.

Regards.

can not set the bottomnavigation background

like this ：
// Set background color
bottomNavigation.setDefaultBackgroundColor(Color.WHITE);

but not useful

Hide bottom navigation

If possible can you implement a "hideBottomNavigation" function?

How to remove Focus/Ripple on Icon Click ?

As title conveys - any convenience method to remove ripple effect on Icon click in the BottomBar?

Also , any way to remove text from the tabs ?

Using with FAB

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/ChatBackground">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imgBG"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:scaleType="fitXY" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bfEnter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@drawable/ic_compose"
        android:onClick="onNewSquawkClicked"
        app:borderWidth="0dp"
        app:backgroundTint="@color/PeliPink"
        android:layout_above="@+id/bottom_navigation"
        android:layout_gravity="end|bottom"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp" />

    </FrameLayout>

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

</android.support.design.widget.CoordinatorLayout>

I am unsure how to use this lib with a FAB. As Discussed in issue #38 I would like my FAB to be permanently visible with it moving either up or down based on whether the bottom navigation is open or not.

I am using 1.1.0 and it currenlty just makes the FAB totally invisible, not sure why

first item setNotification bug

when at first i call bottomNavigation.setNotification(110, 0), the notification is not have marginleft to icon, when i click the second item, it plays animation from marginleft to 0, it's not friendly

Notification number bigger than 10 don't appear.

Hello.

Working with the library, at the moment of my notification badge is greater than 10. Don't appear any number. Is this a bug? or improvement.

Tested on Android Lollipop - Nexus 6.

Implementation:

bottomNavigation.setNotification(idChat, response.body().getData().size());
bottomNavigation.setNotification(1, 16);

items' color is wrong with API 19

hi, really thanks for your work.

But the items' color is not work well when I use android 4.4.4(API 19)
as below shows:

I also found your demo has the same problem.
for example, set 5 items, when firstly choose 2ed item, them change to 4th items. the demo shows as below:

when I changed emulator to android 5.0(API 21) it would be no problem.
Does your library just work well beyond Android 5.0? (as README says, minSdkVersion >16 would be OK?)

Sliding feature

Hi,

I have a project coming up with this bottom navigation feature but Is it possible to include more than 5 item in the menu and make it slide like IOS does?

Activity...

How should i use it with more activities?
For example
if (position == 1 && !wasSelected) { i have to start a new activity here }

How can i do it with in both the activities the bottom nav bar?
Should i start everytime a new activity and put a new bar with the setted item there?
Sorry but i am new at this...

The view doesn't save its selection state when it is is killed.

It's easy to reproduce when "don't keep activity" mode is enabled.

No animation when change tab

I use android 4.1 animation works fine when change tab. But when I use android 4.4.2 it does'nt works.
I setted up:

AHBottomNavigationItem item1 = new AHBottomNavigationItem("Home", R.drawable.ic_n_home_selected);
AHBottomNavigationItem item2 = new AHBottomNavigationItem("Chi tiết", R.drawable.ic_n_chitiet_selected);

bottomNavigation.addItem(item1);
bottomNavigation.addItem(item2);

bottomNavigation.setAccentColor(Color.parseColor("#0000ff"));
bottomNavigation.setInactiveColor(Color.parseColor("#cc747474"));

bottomNavigation.setCurrentItem(0);

where is my fault ?
Thank you.

Using setBehaviorTranslationEnabled(false) breaks Snackbar

I want my BottomNavigation to stay fixed, so I used setBehaviorTranslationEnabled(false), but this makes the Snackbar to stay hidden, since it shows at the bottom of the screen behind the BottomNavigation.

In the DemoActivity you can use setBehaviorTranslationEnabled(false) and you won't see the Snackbar at all, but I know that it's showing behind the BottomNavigation because I use a custom bigger Snackbar, so I see the top of it.

Tabs Disappear When navigating back using fragment backstack

I am using your lib to create a flexible layout for my android application very nice lib by the way.

The only problem I am having is when I navigate away from the fragmentA with the bottomNavigation to a fragmentB without bottomNavigation and then come back to the fragmentA with the bottomNavigation all of the tabs are gone. ( I have run the debugger and it goes through the code to recreate the tabs but the tabs do not show up I have even checked with layoutBounds enabled they just have not been created although all of the tab have been added to the bottomNavigation according to the code ) but then as soon as a configuration change happens ( show or hide of the keyboard, Rotation change, ect... ) the tabs get drawn and are there ready to be used again. Any idea why this maybe happening.

Back press shows previous activity highlighted.

When I click away from an activity using the bottom navigation and then return to the activity by back pressing.. the old activity / bottom icon is highlighted.

adding: setCurrentPosition(4); to the onresume will, for some reason, cause onresume to run in a loop crashing the program.

Also, is there an option to have the bottom navigation displayed without any options highlighted? maybe a setCurrentPosition(null); type of method call would be nice.

hide bottom navigation bar with scrollviews ?

@aurelhubert
first of all, hats off sir for such a smooth, simple library.

I noticed that the bar hides and shows up well while working with recyclerview scrolling.
can this be done with scrollView/nestedScrollview too ?
because that would enhance the functionality of standard pages too which aren't using list type structure.

How to show shadow like the way in design guideline

Sorry for asking the question over and over again. I just want to know how to make the shadow more apparent like the way in design guideline.
I found the shadow position is always a little bit lower to the position of the current view component. But I think we need to customize the shadow so that it's a little bit higher to the position of the current view component.
https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-style

Change icon when item selected

Can we change the icon when item selected. thanks

How to always make FAB above it?

I am using a Coordniator layout and I have a FAB in the bottom right hand corner that I want to always be visible but when the bottom nav is shown it covers the button

Vector images doesn't work

With support lib 23.2.0, we now have compatible vector drawables. But method ContextCompat.getDrawable(context, drawableRes) in AHBottomNavigationItem doesn't work with vector drawables, in pre lollipop devices:

android.content.res.Resources$NotFoundException: File res/drawable/bottom_fav.xml from drawable resource ID #0x7f02009c
at android.content.res.Resources.loadDrawable(Resources.java:2041)
at android.content.res.Resources.getDrawable(Resources.java:683)
at android.support.v4.content.ContextCompat.getDrawable(ContextCompat.java:323)
at com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem.getDrawable(AHBottomNavigationItem.java:123)
at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.createClassicItems(AHBottomNavigation.java:224)
at com.aurelhubert.ahbottomnavigation.AHBottomNavigation.createItems(AHBottomNavigation.java:164)

Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #2: invalid drawable tag vector

Does the version of Support Library have to be so new?

Does the version of Support Library have to be so new?

How to always display text below item?

Currently I only have text displayed below the selected item. How can I have it always displayed?

About the Auto Hide of Bottom Bar while scrolling the recycling view

It seems you got a demo gif about this features. But I cannot find related demo code for this feature. Would you mind tell us the api ?

Refresh selected item when tapped

The spec says

Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.

but there's currently no callback to know that the currently selected item was clicked and we should refresh.

remove shadow or elevation top

Thanks

Slow animation changes

I am using 4 fragments, all works, but when I pressed a tab, the animation is very slow, not talk about fragment transition, it's about navigation icon focus. Any idea of why? Thanks.

title only shown on active element on navigation bar with 4 icons

As described in the title:

My navigation bar contains 4 items but the title is only shown for the active item.
How can I enable that all titles are shown regardless of selected state?

Potential crash when !(context instanceof Activity)

In the helper class:

Window window = ((Activity) view.getContext()).getWindow();

view.getContext() could return a ContextThemeWrapper. Unwrap activity object with this:

public static Activity unwrap(Context context) {
    while (!(context instanceof Activity)) {
        ContextWrapper wrapper = (ContextWrapper) context;
        context = wrapper.getBaseContext();
    }
    return context;
}

BottomNavigation Stays Hidden after Fragment Switch

I have a Fragment with a RecyclerView. As I Scroll Down as desired the bottom navigation bar is hidden. In this state - if I click on an Item in my recyclerView - Its replaces the Fragment with a new Fragment with Item Detail. This new Fragment does not have Scrollable content and the BottomNavigation stays hidden and cannot be accessed.