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

About the developer

roughike
8.4K Stars 1.6K Forks Apache License 2.0 770 Commits 291 Opened issues

Description

(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

Services available

!
?

Need anything else?

Contributors list

No Data

BottomBar (Deprecated)

I don't have time to maintain this anymore. I basically wrote the whole library in a rush, without tests, while being a serious expert beginner at the time. As a result, there's a lot of unpredictable moving parts and the tests probably aren't that great either. Don't really know, since I haven't touched this in ages.

I'd recommend you to use the official BottomNavigationView from Google and urge them to implement the features you need. Or use another 3rd party library.

Build Status Coverage Status Download

Version 2.0 released!

The latest version before that can be found in the v1 branch

  • Cleaner code and better APIs
  • No more unnecessary stuff or spaghetti mess
  • Now the look, feel and behavior is defined in XML, as it should be
  • No more nasty regressions, thanks to the automated tests
  • Everything is a little different compared to earlier, but it's for the greater good!

How to contribute

Changelog

What?

A custom view component that mimics the new Material Design Bottom Navigation pattern.

Does it work on my Grandpa Gary's HTC Dream?

Nope. The minSDK version is API level 11 (Honeycomb).

Gimme that Gradle sweetness, pls?

compile 'com.roughike:bottom-bar:2.3.1'

Maven:

xml

  com.roughike
  bottom-bar
  2.3.1
  pom

How?

You can add items by writing a XML resource file.

Creating the icons

The icons must be fully opaque, solid black color, 24dp and with no padding. For example, with Android Asset Studio Generic Icon generator, select "TRIM" and make sure the padding is 0dp. Here's what your icons should look like:

Sample icons

Adding items from XML resource

Define your tabs in an XML resource file.

res/xml/bottombar_tabs.xml:

    
    
    

Then, add the BottomBar to your layout and give it a resource id for your tabs xml file.

layout/activity_main.xml

<!-- This could be your fragment container, or something -->
<framelayout android:id="@+id/contentContainer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottomBar"></framelayout>

<com.roughike.bottombar.bottombar android:id="@+id/bottomBar" android:layout_width="match_parent" android:layout_height="60dp" android:layout_alignparentbottom="true" app:bb_tabxmlresource="@xml/bottombar_tabs"></com.roughike.bottombar.bottombar>

Setting up listeners

By default, the tabs don't do anything unless you listen for selection events and do something when the tabs are selected.

MainActivity.java:

public class MainActivity extends Activity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
    bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
        @Override
        public void onTabSelected(@IdRes int tabId) {
            if (tabId == R.id.tab_favorites) {
                // The tab with id R.id.tab_favorites was selected,
                // change your content accordingly.
            }
        }
    });
}

}

If you want to listen for reselection events, here's how you do it:

bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
    @Override
    public void onTabReSelected(@IdRes int tabId) {
        if (tabId == R.id.tab_favorites) {
            // The tab with id R.id.tab_favorites was reselected,
            // change your content accordingly.
        }
    }
});

Intercepting tab selections

If you want to conditionally cancel selection of any tab, you absolutely can. Just assign a

TabSelectionInterceptor
to the BottomBar, and return true from the
shouldInterceptTabSelection()
method.
bottomBar.setTabSelectionInterceptor(new TabSelectionInterceptor() {
    @Override
    public boolean shouldInterceptTabSelection(@IdRes int oldTabId, @IdRes int newTabId) {
        if (newTabId == R.id.tab_pro_feature && !userHasProVersion()) {
          startProVersionPurchaseFlow();
          return true;
        }

    return false;
}

});

Changing icons based on selection state

If you want to have different icon when a specific tab is selected, just use state list drawables.

res/drawable/mytabicon.xml

    
    

res/xml/bottombar_tabs.xml

...


...

Those color changing tabs look dope. Howdoidodat?

Just add

barColorWhenSelected
to each tab. When that tab is selected, the whole BottomBar background color is changed with a nice animation.

res/xml/bottombar_tabs.xml

    
    

How do I draw it under the navbar?

First, define a style that is a child of your main application theme:

res/values-v21/styles.xml


You'll also have to make a stub version of the same theme to avoid crashes in previous API levels than Lollipop:

res/values/styles.xml


Also include the same stub in your

values-land-v21.xml
to avoid transparent navbar and weird behavior on landscape.

res/values-land-v21.xml:


Apply the theme in

AndroidManifest.xml
for your Activity.

AndroidManifest.xml:


Finally, set

bb_behavior
to include the
underNavbar
flag and you're good to go!

activitymyawesome.xml:


What about Tablets?

Specify a different layout for your activity in

res/layout-sw600dp
folder and set
bb_tabletMode
to true.

res/layout-sw600dp/activity_main.xml:

<com.roughike.bottombar.bottombar android:id="@+id/bottomBar" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignparentleft="true" app:bb_tabxmlresource="@xml/bottombar_tabs_three" app:bb_tabletmode="true"></com.roughike.bottombar.bottombar>

<!-- This could be your fragment container, or something -->
<framelayout android:id="@+id/contentContainer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_torightof="@+id/bottomBar"></framelayout>

How do I hide it automatically on scroll?

Easy-peasy!

activity_main.xml:

<android.support.v4.widget.nestedscrollview android:id="@+id/myScrollingContent" android:layout_width="match_parent" android:layout_height="match_parent">

    <!-- Your loooooong scrolling content here. -->

</android.support.v4.widget.nestedscrollview>

<com.roughike.bottombar.bottombar android:id="@+id/bottomBar" android:layout_width="match_parent" android:layout_height="60dp" android:layout_gravity="bottom" app:bb_tabxmlresource="@xml/bottombar_tabs_three" app:bb_behavior="shy"></com.roughike.bottombar.bottombar>

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

Badges

You can easily add badges for showing an unread message count or new items / whatever you like.

BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);

// Remove the badge when you're done with it. nearby.removeBadge/();

All customization options

For the BottomBar


bb_tabXmlResource
the XML Resource id for your tabs, that reside in values/xml/
bb_tabletMode
if you want the BottomBar to behave differently for tablets. There's an example of this in the sample project!
bb_behavior
shifting: the selected tab is wider than the rest. shy: put the BottomBar inside a CoordinatorLayout and it'll automatically hide on scroll! underNavbar: draw the BottomBar under the navBar!
bb_inActiveTabAlpha
the alpha value for inactive tabs, that's used in the tab icons and titles.
bb_activeTabAlpha
the alpha value for active tabs, that's used in the tab icons and titles.
bb_inActiveTabColor
the color for inactive tabs, that's used in the tab icons and titles.
bb_activeTabColor
the color for active tabs, that's used in the tab icons and titles.
bb_badgeBackgroundColor
the background color for any Badges in this BottomBar.
bb_badgesHideWhenActive
whether badges should be hidden for active tabs, defaults to true.
bb_titleTextAppearance
custom textAppearance for the titles
bb_titleTypeFace
path for your custom font file, such as fonts/MySuperDuperFont.ttf. In that case your font path would look like src/main/assets/fonts/MySuperDuperFont.ttf, but you only need to provide fonts/MySuperDuperFont.ttf, as the asset folder will be auto-filled for you.
bb_showShadow
controls whether the shadow is shown or hidden, defaults to true.

For the tabs


inActiveColor
the color for inactive tabs, that's used in the tab icons and titles.
activeColor
the color for active tabs, that's used in the tab icons and titles.
barColorWhenSelected
the color that the whole BottomBar should be when selected this tab.
badgeBackgroundColor
the background color for any Badges in this tab.
badgeHidesWhenActive
whether or not the badge should be hidden when this tab is selected, defaults to true.

Apps using BottomBar

  • Nearby : A location-based social networking app with over 5 million users.
  • FragNav : An Android Library for managing multiple stacks of Fragments. BottomBar is used in the sample app.
  • BottomNavigationBar : BottomBar ported to C# for Xamarin developers
  • KyudoScoreBookTeam : BottomBar is used in the KyudoScoreBookTeam app.
  • memeham : BottomBar is used in the memeham app.
  • NewsCatchr : A newsreader app, which uses this BottomBar library.
  • GitSkarios : A Github android App, to visit your repositories, gists and more!

Send me a pull request with modified README.md to get a shoutout!

Contributions

Feel free to create issues and pull requests.

When creating pull requests, more is more: I'd like to see ten small pull requests separated by feature rather than all those combined into a huge one.

License

BottomBar library for Android
Copyright (c) 2016 Iiro Krankka (http://github.com/roughike).

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

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.