Click here to Skip to main content
0 members
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

15.8K views
3 bookmarked
Posted 25 Nov 2016
Licenced CPOL

Android Navigation Bar Menu Tutorial using Bottom Bar Library

, 25 Nov 2016
Rate this:
Please Sign up or sign in to vote.
How to create Android Navigation Bar Menu 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Andy Point
Software Developer (Senior)
India India
Hello Developer!

As a co-founder, I would like to welcome you to the Android Tutorial Point community!. I hope you get the best possible value at of our platform. Stick with us for a while, and we promise you will become an $$Android Rockstar$$!

Android Tutorial Point is the right platform if you want to learn about android development. We have a broad collection of tutorials on different aspects of Android Development and it is growing rapidly. Here at Android Tutorial Point we thrive to deliver the best tutorials. In this direction, we are trying to create a community that will cater to your needs, whether you are a beginner or a seasoned veteran. For the beginners that are getting started on Android Development
journey, we would suggest you to begin with our Android Basics Tutorial available at http://www.androidtutorialpoint.com/category/basics/ . Here, we feature articles on how to start with Android programming.


All the best from the Android Tutorial Point team. Don't forget to subscribe our blog for latest android tutorials. You can reach out to us at our Facebook page https://www.facebook.com/androidtutorialpoint/ or Add us on Twitter https://twitter.com/androidtutpoint/ . Any ideas or suggestions? Shoot us an email at androidtutorialspoint@gmail.com

You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190419.4 | Last Updated 25 Nov 2016
Article Copyright 2016 by Andy Point
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid