Getting Started

Contents

• Project setup
• Hello World!
• Attaching to layout & specifying items

Project setup

First you have to import the BottomBar library to your Android project. Add this to your application-level (the one inside your app module) build.gradle:

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

Sync your project and you're ready! The wonderful BottomBar is ready to use.

Hello World!

To attach the BottomBar to your layout, you call one of the attach() methods. This alone only prepares the BottomBar, but nothing will appear on screen before you provide items (tabs) for it.

Here's the basic example for you to copy-paste, because nobody likes incomplete code examples.

Menu items

The recommended way is inflate the menu items from a menu resource. Here's how define the menu items by XML.

res/menu/bottombar_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bb_menu_recents"
        android:icon="@drawable/ic_recents"
        android:title="Recents" />
    <item
        android:id="@+id/bb_menu_favorites"
        android:icon="@drawable/ic_favorites"
        android:title="Favorites" />
    <item
        android:id="@+id/bb_menu_nearby"
        android:icon="@drawable/ic_nearby"
        android:title="Nearby" />
    <item
        android:id="@+id/bb_menu_friends"
        android:icon="@drawable/ic_friends"
        android:title="Friends" />
    <item
        android:id="@+id/bb_menu_food"
        android:icon="@drawable/ic_restaurants"
        android:title="Food" />
</menu>

Attaching to layout & specifying items

When you've defined the items, you simply call the attach() method, and give the BottomBar the resource id for actually showing the item on screen as tabs. You also set up a listener for reacting to touch events in the tabs.

MainActivity.java

public class MainActivity extends AppCompatActivity {
    private BottomBar mBottomBar;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBottomBar = BottomBar.attach(this, savedInstanceState);
        mBottomBar.setItems(R.menu.bottombar_menu);
        mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {
            @Override
            public void onMenuTabSelected(@IdRes int menuItemId) {
                if (resId == R.id.bb_menu_recents) {
                    // The user selected the "Recents" tab.
                }
            }

            @Override
            public void onMenuTabReSelected(@IdRes int menuItemId) {
                if (resId == R.id.bb_menu_recents) {
                    // The user reselected the "Recents" tab. React accordingly.
                }
            }
        });
    }
    
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        
        // Necessary to restore the BottomBar's state, otherwise we would
        // lose the current tab on orientation change.
        mBottomBar.onSaveInstanceState(outState);
    }
}