Android Navigation Bar Menu Tutorial using Bottom Bar Library

In this post, we will discuss how to create Android Navigation Bar Menu using Bottom bar Library. Android Navigation Bar Menu or Bottom Bar is a secondary menu above the Android navigation bar used for providing quick navigation to the user to widely used pages of an app as shown in the image below.

We will be using Android Bottom Bar Library for this tutorial which mimics the Google Material Design Bottom Navigation pattern. So let’s get started.

Create Android Navigation Bar Menu App

Gradle will configure your project and resolve the dependencies, Once it is complete, proceed with the next steps.

1. Go to File → New → New Project and enter your Application Name.
2. Enter company domain, this is used to uniquely identify your App’s package worldwide.
3. Choose project location and minimum SDK and on the next screen, choose Empty Activity, since we would be adding most of the code ourselves. Then click on Next.
4. Choose an Activity Name. Make sure Generate Layout File check box is selected, otherwise we have to generate it ourselves. Then click on Finish. We have used the Activity Name as MainActivity since this will be the default screen when the user opens the app for the first time.
5. Now open your project’s build.gradle from the project’s home directory and add the following dependency.

build.gradle

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

Add BottomBar in the App Layout

Open activity_main.xml and add the following code. We have two text views, one for displaying the Name and another for displaying the Email of the Logged in user.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <FrameLayout
        android:id="@+id/contentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomBar">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="300dp"
        android:textStyle="bold"
        android:gravity="center_horizontal"/>
    </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/navigation_bar_menu"
        app:bb_behavior="underNavbar"/>
</RelativeLayout>

Create Tabs, Drawable Resources and Styles for the Bottom Bar

navigation_bar_menu.xml

<tabs>
    <tab
        id="@+id/tab_calls"
        icon="@drawable/ic_calls"
        title="Calls"
        activeColor="@color/colorAccent"
        />
    <tab
        id="@+id/tab_groups"
        icon="@drawable/ic_groups"
        title="Groups"
        activeColor="@color/colorAccent" />
    <tab
        id="@+id/tab_chats"
        icon="@drawable/ic_chats"
        title="Chats"
        activeColor="@color/colorAccent"/>
</tabs>

We have used the following drawables for the three menu options:

1. Create a new XML resource file navigation_bar_menu.xml and add the following.
2. Download the source code for this Android Navigation Bar Menu App and add the drawables from the source code into your drawable folders.
3. Define a style that is a child of your main application theme:

   res/values-v21/styles.xml

   <style name="AppTheme.TransNav" parent="AppTheme">
       <item name="android:navigationBarColor">@android:color/transparent</item>
       <item name="android:windowTranslucentNavigation">true</item>
       <item name="android:windowDrawsSystemBarBackgrounds">true</item>
   </style>

   To avoid crashes in previous API levels than Lollipop, create a stub version of the same theme.

   res/values/styles.xml

   <style name="AppTheme.TransNav" parent="AppTheme" />

   Apply the theme in AndroidManifest.xml for your Activity.

   AndroidManifest.xml

   <activity android:name=".MainActivity" android:theme="@style/AppTheme.TransNav" />

Adding Functionality to MainActivity

    private TextView textView;
    private BottomBar bottomBar;

   @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView)findViewById(R.id.textView);

        bottomBar = (BottomBar) findViewById(R.id.bottomBar);
        bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(@IdRes int tabId) {
                if (tabId == R.id.tab_calls) {
                    // The tab with id R.id.tab_calls was selected,
                    // change your content accordingly.
                    textView.setText("Your Calls");
                } else if (tabId == R.id.tab_groups) {
                    // The tab with id R.id.tab_groups was selected,
                    // change your content accordingly.
                    textView.setText("Your Groups");
                } else if (tabId == R.id.tab_chats) {
                    // The tab with id R.id.tab_chats was selected,
                    // change your content accordingly.
                    textView.setText("Your Chats");
                }
            }
        });
    }

Now, run the app and click on choose options on the Android Navigation Bar Menu or the Bottom bar. It will reflect the selected menu option in the TextView.