I want to set my own color for bottom navigation background

I know it's a very nice experience to hide the bottom navigation automatically when user go through the content especially the content is a long list.
However, in some project of mine, the user want to fix the bottom navigation.
So how to deal with it? Thanks a lot.

In the sample app, if you choose MODE_SHIFTING and BS_STATIC, the first time you select items they sometimes show a double ripple effect (one ripple for the "entire shifted area" (large), and one for the "tab item" (small)). The second time you select the same tab it no longer has the double ripple. (i.e. select tab 2 (double ripple sometimes), select other tabs, select tab 2 (always "tab item ripple")).

Once you have MODE_SHIFTING and BS_STATIC, you can make it happen over and over if you simply click on the 5 items checkmark (to force a re-initialize) and then select other tabs.

Another thing that's interesting - changing tab does a "tab item ripple" (small), while clciking the already selected tab does a "entire shifted area ripple" (larger). The "double ripple" looks like ripples get created for both areas (small and large ripple happen at the same time).

When a new message pullsh to app, I want show something (just like red point number) in my bottom item what should I do?

Instead of calling a bunch of methods to set the colors and mode, it would be nice to be able to set the values in the XML.

I've added a pull request that implements this #14

I use a picture in MainActivity as a icon of bottom item and select it. But if I use the same picture in another activity and never select it, once I touch home button to back to the desktop and then return to app, when I return to MainActivity, the color of the icon I have selected before has turned to the color without selected.By the way, I found this problem in Android 4.4.

I would like to click on the item to change the picture and title。

I know that it's a bottom navigation bar, but it would be nice if it supports "vertical mode".

I find
labelView.animate().scaleY(1).scaleX(1).setDuration(animationDuration).start();

when selected Is it possible like this?

thanks

I think there is an issue with the layout for the icon and text for fixed mode - specifically it looks like there is much less distance between the bottom of the icon and the top of the text than the spec shows.

I think this fixes it:

FrameLayout
android:layout_width="@dimen/fixed_icon_badge_grid_width"
android:layout_height="30dp"
android:paddingTop="6dp"
android:layout_gravity="center_horizontal|top"

ImageView
android:id="@+id/fixed_bottom_navigation_icon"
android:layout_width="@dimen/fixed_icon_grid"
android:layout_height="@dimen/fixed_icon_grid"
android:layout_gravity="top|center_horizontal"
android:gravity="center"
android:scaleType="fitXY"

see this screenshot pic

Hi, this is my implementation:

<com.ashokvarma.bottomnavigation.BottomNavigationBar android:layout_alignParentBottom="true" android:id="@+id/bottom_navigation_bar" android:layout_width="match_parent" android:layout_height="wrap_content" app:bnbBackgroundStyle="background_style_static" app:bnbBackgroundColor="@color/colorPrimary" app:bnbMode="mode_fixed"/>

The problem is that no ripple is shown when I select a tab. Only when setting the bnbBackgroundColor to something different, the animation is shown.

Hi
how i can use snackbar when using bottom navigation in activity ?
I'm not getting any error , just its not showing , maybe its showing under the bottom bar ?

Flexibility is not high, not convenient

Hello,

I have a problem with the behaviour of an active element when I'm back to the Activity.

For example, I have a BottomNavigationBar with 5 items in my Activity.
Let's say I click the 4th item of my bar. If I change Activity, onBackPress, my BottomNavigationBarActivity will still be on my 4th Fragment as expected, but the active item of my bar will be the first one.

The same behaviour appears when I put my app in background and then go back to it.

Any idea how to solve the problem? Am I missing something in onPause / onResume or something?

Here is the initBottomBar() method I call in onCreate() :

public void initBottomBar() {
        // Bottom Bar
        bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
        // Mode
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        //bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
        // Background
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);

        // Auto Hide on Scroll
        bottomNavigationBar.setAutoHideEnabled(false);

        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_action_a, "A").setActiveColorResource(R.color.active).setInActiveColor(R.color.inactive))
                .addItem(new BottomNavigationItem(R.drawable.ic_action_b, "Mon B").setActiveColorResource(R.color.active).setInActiveColor(R.color.inactive))
                .addItem(new BottomNavigationItem(R.drawable.ic_action_c, "C").setActiveColorResource(R.color.active).setInActiveColor(R.color.inactive))
                .addItem(new BottomNavigationItem(R.drawable.ic_action_d, "D").setActiveColorResource(R.color.active).setInActiveColor(R.color.inactive))
                .addItem(new BottomNavigationItem(R.drawable.ic_action_e, "E").setActiveColorResource(R.color.active).setInActiveColor(R.color.inactive))
                .initialise();

        bottomNavigationBar.setTabSelectedListener(this);
    }

Strange behavior when I try my app in android 4.1.2 , Am notice when I begin touch inside tab something black line around tab appear..when I finish disappear

How can I change the color of the text below the icon?

I'm using vectors in my drawable folder and the app crashes when I try setting a vector as a drawable of an BottomNavigationItem like so:

bottomNavigationBar.addItem(new BottomNavigationItem(getResources().getDrawable(R.drawable.ic_categories), R.string.navigation_categories)).initialise();

My vector drawable is a normal svg which was converted by AS to the default compiling format:

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0"> <path android:fillColor="#FF000000" android:pathData="M3,5L3,7L5,7L5,5L3,5zM7,5L7,7L21,7L21,5L7,5zM3,9L3,11L5,11L5,9L3,9zM7,9L7,11L17,11L17,9L7,9zM3,13L3,15L5,15L5,13L3,13zM7,13L7,15L19,15L19,13L7,13zM3,17L3,19L5,19L5,17L3,17zM7,17L7,19L15,19L15,17L7,17z" /> </vector>

The shadow being cast by the bottom navigation bar is a normal shadow (like on a button) - the problem is that if you look at the bottom navigation bar material design guidelines and Google Photos you'll notice that the shadow for bottom bars is supposed to be reversed - being cast upwards.

I'm not sure what the "right" way to do this is.

Here's a couple stack overflows that show techniques to make it happen (I'm not suggesting that these ways be used since they feel like hacks).

http://stackoverflow.com/questions/27741567/androidelevation-only-have-shadow-effects-on-the-bottom-side-how-to-make-the-s

http://stackoverflow.com/questions/33577720/how-to-y-offset-the-android-5-lollipop-shadow-direction

The current shadow is much better than no shadow at all.

I'm opening this issue to track a long-term fix for the shadow issue - since this doesn't feel like it will be easy to fix.

I've opened an issue with Google to try to get an answer:
https://code.google.com/p/android/issues/detail?id=209303

help me.

Scroll sample app down so that bottom bar disappears, click toggle hide (bar re-appears), scroll down again - bar does not disappear. If you scroll up and then down again it fixes itself.

When you unhide the bar you should be able to scroll down and have it hide again.

Seems like the bar gets into the wrong state in BottomVerticalScrollBehavior (Appears calling hide and unhide doesn't update the current state of the behavior?)

When I look at how other behaviors are implemented (like FAB) they check the current visibility of the childview - which gets rid of the need to try to track the state of hidden vs showing and trying to keep that in sync.

Use Case: User scrolls to the bottom of the screen (bar is hidden), then does something that programatically scrolls to the top of the screen - programmatic scrolling doesn't affect coordinator layout so you call unhide to show the bottom bar (and call setexpanded() on appbarlayout). Now the user scrolls down - the appbarlayout correctly scrolls to hidden, and the bottom bar should also scroll to hidden again.

Sometimes, the items title is cut off like in this example:
https://goo.gl/photos/aQz2fQ5qHw7aq67S9

The code which has been used is exactly the same as in the previous issue with the missing ripple.

Not selected in the Tab can set the drawable and textcolor himself?

enable to navigate tab programmatically....i want to navigate one tab to another (without touching on my device) click on some view/ want to change activate tab , deselect previous tab without touching on it

Hi, there, I use gradle to compile it, and I can't figure out how to change the text beneath each icon.

After screen rotating sometimes I get normal bottom navigation colors (as defined in XML or programmatically) and sometimes active color becomes background and background color becomes active (basically, they get swapped). Additional info: I use AppCompat NoActionBar theme with overrode colors and number of tabs changes dynamically (it's important because color changes occur after number of tabs was changed and followed by config changes, like rotating)

Hi
thanks for this great lib
i think i found a bug, when i put 2 floating action bar in page , and set them as fab , the top button behaviour very strange and getting a large margin from bottom button when bottom bar is showing

`

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:layout_gravity="bottom|end"
app:backgroundTint="@color/blue"
android:src="@drawable/new_program_icon" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/edit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginEnd="@dimen/fab_margin"
    android:layout_marginLeft="@dimen/fab_margin"
    android:layout_marginRight="0dp"
    android:layout_marginStart="@dimen/fab_margin"
    android:layout_marginTop="0dp"
    android:layout_gravity="top|end"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="top"
    app:backgroundTint="@color/yellow"
    android:src="@drawable/edit_icon" />

`

or android:allowBackup="false"

Is it possible to add a badge for a specific tab, when the BottomBar is already created?

Made a pull request #13 with the following changes:

Changed OnTabSelectedListener to be called after the internal change has been made (like ViewPager and TabLayout implementations)

Added SimpleOnTabSelectedListener

Hi there - Thanks for the library. I am not able to set custom color to the bottom bar background and icons when active/inactive. The background always is white and the unselect color is always grey.

bottomNavigation
.addItem(new BottomNavigationItem(R.drawable.ic_home, "Home"))
.addItem(new BottomNavigationItem(R.drawable.ic_search, "Search"))
.addItem(new BottomNavigationItem(R.drawable.ic_settings, "Settings"))
.initialise();

    bottomNavigation
            .setMode(BottomNavigationBar.MODE_FIXED);
    bottomNavigation
            .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);

    bottomNavigation
            .setActiveColor(R.color.turquoise)
            .setInActiveColor(R.color.white)
            .setBarBackgroundColor(R.color.teal);

    private void initScrollTabs(boolean isReFresh) {
    scrollingTabs.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
    scrollingTabs.setMode(BottomNavigationBar.MODE_FIXED);
    if (!isReFresh) {
        for (BottomNavigationItem item : bottom_list) {
            item.setActiveColor(MainApplication.APP_THEME_COLOR).setInActiveColorResource(R.color.text_color_323232);
            scrollingTabs.addItem(item);
        }
    } else {
        for (BottomNavigationItem item : scrollingTabs.getItems()) {
            item.setActiveColor(MainApplication.APP_THEME_COLOR).setInActiveColorResource(R.color.text_color_323232);

        }
    }
    if (isFirstPage) {
        scrollingTabs.setFirstSelectedPosition(X_tab_position);
        viewPager.setCurrentItem(X_tab_position);
    } else {
        scrollingTabs.setFirstSelectedPosition(0);
        viewPager.setCurrentItem(0);
    }
    scrollingTabs.initialise();
}

when I initialise the second time , the item's active icon will dismiss only the inactive icon .I debug and check the code but I can't figure out that.

Sometimes it is required to unselect selected item without selecting new one. As a option it may be realized by using index = -1 in selectTab

Hi, how do I change textsize?

How to programatically click on a tab?

Hi Bro , great work and really like your library , only one request to you is it possible to update library for more than 5 items and if more than 5 then arrow key appear and we can press arrow key or swipe RTL to view other options

Per the material design spec this component should have a default elevation of 8dp and cast a shadow upwards on to the content above it - it doesn't seem to do that currently regardless of elevation being set in the layout or in code.

This library is cool but it is too narrow.For example, I can't define the active icon,text color and image color can't be defined different, or the users hope only change the text color. Hope can update in the future.

In the documentation you accidentally put a [ symbol in the code it should be } in the Add TabChangeListener section of the readme.

I'm not sure if we have this feature or not. But it would be nice if we can save state like sliding tab bar when rotating device. Currently, when I rotate the device, it still shows the correct fragment. But the selected tab is always in 0 position whenever rotating device.

Would it be possible to add a cross-fade animation when switching views, like it is stated in Material guidelines?

I have 4 fragments and use BottomNavigation to switch between them.
In some fragments, I don't want to use fab, so I try to call mFAB.hide() to hide it.
No matter I call this method in activity or fragment, it just doesn't work, the button still there.

But if I remove the line,
mBottomNavigationBar.setFab(mFAB),
the button will show/hide as expected when switching between tabs.

When I add this library I get a ClassDefNotFoundError in another library, if I don't use this library everything works. How's it possible? Only with preLollipop devices

Hi
i updated support design and other google view libs , now before dismissing the snackbar app throw an error
java.lang.IndexOutOfBoundsException: Invalid index 6, size is 6 at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255) at java.util.ArrayList.get(ArrayList.java:308) at android.support.design.widget.CoordinatorLayout.onChildViewsChanged(CoordinatorLayout.java:1280) at android.support.design.widget.CoordinatorLayout$HierarchyChangeListener.onChildViewRemoved(CoordinatorLayout.java:2863) at android.view.ViewGroup.onViewRemoved(ViewGroup.java:3856) at android.view.ViewGroup.removeViewInternal(ViewGroup.java:4238) at android.view.ViewGroup.removeViewInternal(ViewGroup.java:4193) at android.view.ViewGroup.removeView(ViewGroup.java:4124) at android.support.design.widget.Snackbar.onViewHidden(Snackbar.java:646) at android.support.design.widget.Snackbar.access$300(Snackbar.java:72) at android.support.design.widget.Snackbar$9.onAnimationEnd(Snackbar.java:588) at android.support.v4.view.ViewPropertyAnimatorCompatJB$1.onAnimationEnd(ViewPropertyAnimatorCompatJB.java:47) at android.view.ViewPropertyAnimator$AnimatorEventListener.onAnimationEnd(ViewPropertyAnimator.java:1116) at android.animation.ValueAnimator.endAnimation(ValueAnimator.java:1171) at android.animation.ValueAnimator.cancel(ValueAnimator.java:1073) at android.view.ViewPropertyAnimator.animatePropertyBy(ViewPropertyAnimator.java:967) at android.view.ViewPropertyAnimator.animateProperty(ViewPropertyAnimator.java:923) at android.view.ViewPropertyAnimator.translationY(ViewPropertyAnimator.java:634) at android.support.v4.view.ViewPropertyAnimatorCompatICS.translationY(ViewPropertyAnimatorCompatICS.java:38) at android.support.v4.view.ViewPropertyAnimatorCompat$ICSViewPropertyAnimatorCompatImpl.translationY(ViewPropertyAnimatorCompat.java:384) at android.support.v4.view.ViewPropertyAnimatorCompat.translationY(ViewPropertyAnimatorCompat.java:757) at com.ashokvarma.bottomnavigation.behaviour.BottomVerticalScrollBehavior.updateSnackBarPosition(BottomVerticalScrollBehavior.java:79) at com.ashokvarma.bottomnavigation.behaviour.BottomVerticalScrollBehavior.updateSnackBarPosition(BottomVerticalScrollBehavior.java:74) at com.ashokvarma.bottomnavigation.behaviour.BottomVerticalScrollBehavior.onDependentViewChanged(BottomVerticalScrollBehavior.java:66) at android.support.design.widget.CoordinatorLayout.onChildViewsChanged(CoordinatorLayout.java:1302) at android.support.design.widget.CoordinatorLayout$OnPreDrawListener.onPreDraw(CoordinatorLayout.java:1812) at android.view.ViewTreeObserver.dispatchOnPreDraw(ViewTreeObserver.java:944) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1970) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1061) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5885) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:767) at android.view.Choreographer.doCallbacks(Choreographer.java:580) at android.view.Choreographer.doFrame(Choreographer.java:550) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:753) 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)

Is there any way by which I can set selected any item of bottom navigation. Please help

Per the material design spec:
The bottom navigation bar can appear and disappear dynamically upon scrolling:

Scrolling downward hides the bottom navigation bar
Scrolling upward reveals it

Should work like the FAB or toolbar where you can set an attribute and have it translate itself in and out of the view.