Introduction to AHBottomNavigation

android ahbottomnavigation

What is Bottom Navigation?

Bottom Navigation is a type of navigation within applications implemented by BottomNavigationBars.

These bottom navigation bars make it easy to explore and switch between top-level views just within a single tap.

You just tap a bottom navigation icon and there you go directly to the associated view. If you are already in that view then it just gets refreshed.

Bottom navigation is mainly used on mobile devices as with desktops it's normally preferable to use side navigation.

We are Building a Vibrant YouTube Community

We have a fast rising YouTube Channel of friends. So far we've accumulated more than 2.6 million agreggate views and more than 10,000 subscribeers. Here's the Channel: ProgrammingWizards TV.

Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.

When to use Bottom Navigation.

  1. Three to Five top-level destinations. If your to-leve navigation has more than six destinations, then you can provide access to destinations not covered in the bottom navigation through alternative locations like NavigationDrawer.
  2. Destinations requiring direct access.

More bottom navigation guidelines can be found at Material.io

What is AHBottomNavigation?

AHBottomNavigation is a library to reproduce the behavior or Bottom navigation guidelines.

This library is open source and freely available here in github.

Features of AHBottomNavigation

  1. It does implement the material guidlines defined for bottom navigation.
  2. It allows you to add 3-5 items( with title,color and icon).
  3. Styles are choosable, classic or colored.
  4. You can listen to OnTabSelection events so as to detect tab selection.
  5. Supports icon font color.
  6. You can manage notifications individually for bottom navigation items.
  7. It allows you to enable or disable state.

How is AHBottomNavigation installed?

Well AHBottomNavigation can be installed into a project via Gradle:

You just add the implementation statement in your dependencies inside the app level build.gradle:

implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'

Please make sure to check the latest version here.

Which Layouts do we add?

It depends on the project template you chose in your android studio.

1. Empty Activity

This activity normally has one layout: activity_main.xml. Add this code:

<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

2. Basic Activity

If you chose the layout that has an appbar with a toolbar. It normally has two layoust: activity_main.xml and content_main.xml.

Inside the activity_main.xml add code in the following manner:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    ...

    <com.aurelhubert.ahbottomnavigation.AHBottomNavigation
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />

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

Creating Items

Then inside you fragment or activity you can create navigation items:

AHBottomNavigation bottomNavigation = (AHBottomNavigation) findViewById(R.id.bottom_navigation);

// Create items
AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.tab_1, R.drawable.ic_maps_place, R.color.color_tab_1);
AHBottomNavigationItem item2 = new AHBottomNavigationItem(R.string.tab_2, R.drawable.ic_maps_local_bar, R.color.color_tab_2);
AHBottomNavigationItem item3 = new AHBottomNavigationItem(R.string.tab_3, R.drawable.ic_maps_local_restaurant, R.color.color_tab_3);

// Add items
bottomNavigation.addItem(item1);
bottomNavigation.addItem(item2);
bottomNavigation.addItem(item3);

You can listen to tab selection events:

// Set listeners
bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
    @Override
    public boolean onTabSelected(int position, boolean wasSelected) {
        // Do something cool here...
        return true;
    }
});

Here's a full example.

Full Example

package info.camposha.ahbotttomnavigater;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Toast;
import android.widget.TextView;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
/*
Our Main Activity
*/
public class MainActivity extends Activity {

    AHBottomNavigation bottomNavigation;
    TextView headerTxt;
    /*
    when activity is created
    */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.initializeViews();
        this.createNavigationItems();
    }
    /*
    Initialize views
    */
    private void initializeViews()
    {
        bottomNavigation=findViewById(R.id.bottom_navigation);
        headerTxt=findViewById(R.id.headerLabel);
    }
    /*
    Create AHNavigationItems
    */
    private void createNavigationItems()
    {
        // Create AHNavigationItems
        AHBottomNavigationItem item1 = new AHBottomNavigationItem(R.string.tab1, R.drawable.ic_maps_place, R.color.color_tab_1);
        AHBottomNavigationItem item2 = new AHBottomNavigationItem(R.string.tab2, R.drawable.ic_maps_local_bar, R.color.color_tab_2);
        AHBottomNavigationItem item3 = new AHBottomNavigationItem(R.string.tab3, R.drawable.ic_maps_local_restaurant, R.color.color_tab_3);

        // Add AHNavigationItems
        bottomNavigation.addItem(item1);
        bottomNavigation.addItem(item2);
        bottomNavigation.addItem(item3);

        // Set default background color for AHBottomNavigation
        bottomNavigation.setDefaultBackgroundColor(Color.parseColor("#FEFEFE"));

        // Change colors for AHBottomNavigation
        bottomNavigation.setAccentColor(Color.parseColor("#F63D2B"));
        bottomNavigation.setInactiveColor(Color.parseColor("#747474"));

       // Force to tint the drawable (useful for font with icon for example)
        bottomNavigation.setForceTint(true);

        // Manage titles for AHBottomNavigation
        //bottomNavigation.setTitleState(AHBottomNavigation.TitleState.SHOW_WHEN_ACTIVE);
        bottomNavigation.setTitleState(AHBottomNavigation.TitleState.ALWAYS_SHOW);
        //bottomNavigation.setTitleState(AHBottomNavigation.TitleState.ALWAYS_HIDE);

        // Use colored navigation with circle reveal effect
        bottomNavigation.setColored(true);

        // Set current item programmatically
       bottomNavigation.setCurrentItem(1);

        // set On TabSelectedListener
        bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
            @Override
            public boolean onTabSelected(int position, boolean wasSelected) {
                switch (position) {
                    case 0:
                        headerTxt.setText("Planets");
                        break;
                    case 1:
                         headerTxt.setText("Stars");
                        break;
                    case 2:
                        headerTxt.setText("Galaxies");
                        break;
                    default:
                        break;
                }
                return true;
            }
        });
    }
}

AHBottomNavigation

Best regards.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think

Dear readers drop us your comments below. We are building a community of students and learners. Start by dropping us your suggestions below. What tutorials do you want us to do for example? Where can we improve? What are some awesome resources out there? Do you have any code you want to share with us?
By the way that example or snippet you have lying in your computer can really help beginner programmers. We can share it here with other students.

Previous Post Next Post