AHBottomNavigation Tutorial and Examples


Android AHBottomNavigation Tutorial and Examples
.

AHBottomNavigation is a library allowing us reproduce the behavior of the Bottom Navigation guidelines from Material Design. In this tutorial we want to examine this important library and how to use it.

===

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;
    }
});

AHBottomNavigation Full Examples

Here's a full example.

Simple AHBottomNavigation Tabs 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


2. AHBottomNavigation - Bottom Tabs and Fragments

Hello friends,am sharing the source for a Android Bottom Navigation tutorial we did in our YouTube channel.The simple examples consists of three navigation items at the bottom section. You select a single item and it takes you to the corresponding fragment.

Bottom Navigation Bar

  • They make it easy to explore and switch between top-level views with one single tap.
  • You simply tap an icon and it takes you directly to the corresponding views.
  • If it was the current view then it refreshes.
  • They are primarily for mobile devices.
  • They should be used with three to five top level destinations. As long as they require direct access.

For more details check the Google Material Design Specifications . In this tutorial we are using an example with the help of a third party library written by Aurel Hubert, AHBottomNavigation.

He describes the library as A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design. Please for demo and step by setp ,you can have a look at our video tutorial we covered this here :  http://www.youtube.com/watch?v=cOVwg3zitwg Leave us a big like there.

SECTION 1 : Our MainActivity

  • Reference AHBottomNavigation from our layout.
  • Create navigation items using AHBottomNavigationItem class,passing in text and drawable to be shown.
  • Implement OnTabSelectedListener Interface,hence overriding onTabSelected() method.
  • Inside this method we check for the selected navigation item using the position passed to as as a parameter.
  • We show appropriate Fragment.
package com.tutorials.hp.bottomnav;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
import com.tutorials.hp.bottomnav.mFragments.CrimeFragment;
import com.tutorials.hp.bottomnav.mFragments.DocumentaryFragment;
import com.tutorials.hp.bottomnav.mFragments.DramaFragment;

public class MainActivity extends AppCompatActivity implements AHBottomNavigation.OnTabSelectedListener{

   AHBottomNavigation bottomNavigation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        bottomNavigation= (AHBottomNavigation) findViewById(R.id.myBottomNavigation_ID);
        bottomNavigation.setOnTabSelectedListener(this);
        this.createNavItems();
    }

    private void createNavItems()
    {
        //CREATE ITEMS
        AHBottomNavigationItem crimeItem=new AHBottomNavigationItem("Crime",R.drawable.cr);
        AHBottomNavigationItem dramaItem=new AHBottomNavigationItem("Drama",R.drawable.ac);
        AHBottomNavigationItem docstem=new AHBottomNavigationItem("Crime",R.drawable.dr);

        //ADD THEM to bar
        bottomNavigation.addItem(crimeItem);
        bottomNavigation.addItem(dramaItem);
        bottomNavigation.addItem(docstem);

        //set properties
        bottomNavigation.setDefaultBackgroundColor(Color.parseColor("#FEFEFE"));

        //set current item
        bottomNavigation.setCurrentItem(0);

    }

    @Override
    public void onTabSelected(int position, boolean wasSelected) {
        //show fragment
        if (position==0)
        {
            CrimeFragment crimeFragment=new CrimeFragment();
            getSupportFragmentManager().beginTransaction().replace(R.id.content_id,crimeFragment).commit();
        }else  if (position==1)
        {
            DramaFragment dramaFragment=new DramaFragment();
            getSupportFragmentManager().beginTransaction().replace(R.id.content_id,dramaFragment).commit();
        }else  if (position==2)
        {
            DocumentaryFragment documentaryFragment=new DocumentaryFragment();
            getSupportFragmentManager().beginTransaction().replace(R.id.content_id,documentaryFragment).commit();
        }
    }
}

SECTION 2 : OUR FRAGMENTS

Fragments that shall be shown when our navigation items are clicked.

(a) Crime Fragment

  • We inflate and show crime fragment when crime navigation item is clicked.
package com.tutorials.hp.bottomnav.mFragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.tutorials.hp.bottomnav.R;

public class CrimeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView=inflater.inflate(R.layout.crime_fragment,container,false);

        return rootView;
    }
}

(b) Drama Fragment

  • We inflate and show drama fragment when drama navigation item is clicked.
package com.tutorials.hp.bottomnav.mFragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.tutorials.hp.bottomnav.R;

public class DramaFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View rootView=inflater.inflate(R.layout.drama_frgament,container,false);

        return rootView;
    }
}

(c) Documentary Fragment

  • We inflate and show documentary fragment when documentary navigation item is clicked.
package com.tutorials.hp.bottomnav.mFragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.tutorials.hp.bottomnav.R;

public class DocumentaryFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView=inflater.inflate(R.layout.documentary_fragment,container,false);

        return rootView;
    }
}

SECTION 3 : OUR LAYOUTS

Add this to your ActivityMain.xml layout

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

(a) ActivityMain.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.tutorials.hp.bottomnav.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

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

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

(b) ContentMain.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="2dp"
    android:paddingRight="2dp"
    android:paddingTop="2dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.tutorials.hp.bottomnav.MainActivity"
    android:id="@+id/content_id"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

(c) DramaFragment.xml

  • Drama Fragment Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#c36188"
    android:layout_height="match_parent">
    <TextView
        android:text="Drama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

(d) CrimeFragment.xml

  • Crime Fragment Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#009688"
    android:layout_height="match_parent">
    <TextView
        android:text="Crime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

(e) DocumentaryFragment.xml

  • Documentary Fragment Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="#2f9bc1"
    android:layout_height="match_parent">
    <TextView
        android:text="Documentary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout></pre>

  Otherwise just design your layouts as you wish. Or check the complete source above.

</ hr>

3. Android AHBottomNavigation Bar - Tabs with GridViews

In this tutorial we switch through various tabs in our AHBottottomNavigation. Each Tab will show a GridView with different set of data.

Android AHBottomNavigation GridViews

AHBottomNavigationBar allows us to implement material design bottom navigation features in an easy manner.

A GridView on the other hand allows us display items in a scrollable 2 dimensional manner.

Our data will exist in different categories and the users will be able to switch through that data via the AHBottomNavigation Tabs.

These tabs will have icons and text and different colors.

1. Build.gradle

We'll need to fetch AHBottomNavigation via gradle so add the following in your app level build.gradle under dependencies closure.

implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'

2. Colors.xml

We'll use some colors in our tabs so lets define them in colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="color_tab_1">#455C65</color>
    <color name="color_tab_2">#00886A</color>
    <color name="color_tab_3">#8B6B62</color>
    <color name="color_tab_4">#6C4A42</color>
    <color name="color_tab_5">#F63D2B</color>
</resources>

3. strings.xml

We'll have our bottom navigation items or tabs titles in strings.xml resource file.

<resources>
    <string name="app_name">AHBottomNavigation GridView</string>
    <string name="tab1">Planets</string>
    <string name="tab2">Stars</string>
    <string name="tab3">Galaxies</string>
</resources>

4. activity_main.xml

We add our ahbottomnavigation and align it to the bottom of the screen. On top of it we add a GridView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.camposha.ahbottomnavigationgridview.MainActivity">

    <TextView
        android:id="@+id/headerLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:fontFamily="casual"
        android:text="Cosmic Bodies"
        android:textAllCaps="true"
        android:textSize="24sp"
        android:textStyle="bold" />
    <GridView
        android:id="@+id/myGridview"

        android:padding="5dp"
        android:layout_below="@id/headerLabel"
        android:numColumns="auto_fit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

</RelativeLayout>

5. MainActivity.java

Here's our main activity code.

package info.camposha.ahbottomnavigationgridview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;

import java.util.ArrayList;

public class MainActivity extends Activity {

    /*
    Instance Fields
     */
    AHBottomNavigation bottomNavigation;
    TextView headerTxt;
    GridView myGridView;
    ArrayAdapter<String> adapter;
    private int cosmicCategory = 0;

    /*
    when activity is created, setContentView, initializeViews and create navigationitems
    */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.initializeViews();
        this.createNavigationItems();
    }
    /*
    Initialize AHBottomNavigation, TextView and Spinner
    */
    private void initializeViews()
    {
        bottomNavigation=findViewById(R.id.bottom_navigation);
        headerTxt=findViewById(R.id.headerLabel);
        myGridView=findViewById(R.id.myGridview);

        //gridview item selection events
        myGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                Toast.makeText(MainActivity.this, getCosmicBodies().get(position), Toast.LENGTH_SHORT).show();
            }
        });

    }
    /*
    Bind data to spinner using an ArrayAdapter
     */
    private void bindData()
    {
        adapter= new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getCosmicBodies());
        myGridView.setAdapter(adapter);
    }
    /*
    Populate an arraylist that will act as our data source.
     */
    private ArrayList<String> getCosmicBodies()
    {
        ArrayList<String> data=new ArrayList<>();
        data.clear();
        switch (cosmicCategory) {
            case 0:
                headerTxt.setText("Planets");
                data.add("Mercury");
                data.add("Venus");
                data.add("Earth");
                data.add("Mars");
                data.add("Jupiter");
                data.add("Saturn");
                data.add("Uranus");
                data.add("Neptune");
                break;
            case 1:
                headerTxt.setText("Stars");
                data.add("VY Canis Majos");
                data.add("UY Scuti");
                data.add("Beattleguse");
                data.add("Aldebaran");
                data.add("Epsilon Canis Majos");
                data.add("Dhube");
                data.add("Sun");
                data.add("Alpha Centauri");
                break;
            case 2:
                headerTxt.setText("Galaxies");
                data.add("IC 1011");
                data.add("Andromeda");
                data.add("Large Magellonic Cloud");
                data.add("Centaurus A");
                data.add("StarBust");
                data.add("Whirlpool");
                data.add("Cartwheel");
                data.add("Sombrero");
                break;
            default:
                break;

        }
        return data;
    }
    /*
    Create AHBottonNavigationItems, add them to BottomNavigation, setBackgroundColor, Listen to tab events
    */
    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(0);
    bindData();

        // set On TabSelectedListener
        bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
            @Override
            public boolean onTabSelected(int position, boolean wasSelected) {
                cosmicCategory = position;
                bindData();
                return true;
            }
        });
    }
}

Result

AHBottomNavigation with GridView


4. Android Java AHBottomNavigationBar - Tabs with ListView

In this tutorial we want to see how to switch through data in ListViews via BottomNavigationItems.

We specifically use AHBottomNavigation library to create flexible tabs that are awesome and easy to customize and work with.

When user clicks a Tab or BottomNavigation Item we show different set of category of data in ListView.

Here this tutorial in video version:

Project Structure

Kotlin Android BottomNavigation with ListViews

Build.gradle

Our app level build.gradle.

We add AHBottomNavigation implementation statement:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    testImplementation 'junit:junit:4.12'
    implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'
}

activity_main.xml

Our xml layout. It will contain a ListView and AHBottomNavigation xml view at the bottom of our layout.

First we specify a RelativeLayout as our root tag.

The add a textview as our header label. We will be switching the data in this TextView as the selected tab changes.

We also add a ListView, which will render a given category that is selected in our bottom navigation tabs.

Lastly we will add the AHBottomNavigation element and align it to the bottom of the parent. In this case the parent is the RelativeLayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.camposha.javabottomnavigationlistview.MainActivity">

    <TextView
        android:id="@+id/headerLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:fontFamily="casual"
        android:text="Cosmic Bodies"
        android:textAllCaps="true"
        android:textSize="24sp"
        android:textStyle="bold" />
    <ListView
        android:id="@+id/myListView"
        android:padding="5dp"
        android:layout_below="@id/headerLabel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

strings.xml

In the strings.xml resource, under the resource specify our three bottom navigation items or tabs add the following:

<resources>
    ....
    <string name="tab1">Planets</string>
    <string name="tab2">Stars</string>
    <string name="tab3">Galaxies</string>
    ....
</resources>

Those strings will represent our bottom navigation tab titles.Placing them in strings.xml allows us for their easy translation to other languages as well.

colors.xml

We also need some custom colors so add the below colors under the resource in your colors.xml:

<resources>
    ....
    <color name="color_tab_1">#455C65</color>
    <color name="color_tab_2">#00886A</color>
    <color name="color_tab_3">#8B6B62</color>
    <color name="color_tab_4">#6C4A42</color>
    <color name="color_tab_5">#F63D2B</color>
    ....
</resources>

These colors will be used to color our bottom navigation tabs.

MainActivity.java

Our main and only activity. Our launcher activity as well.

1. Specify Imports

We specify the package name then add our imports:

package info.camposha.javabottomnavigationlistview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;

import java.util.ArrayList;

Among our imports include our adapterview ListView, our adapter ArrayAdapter, our AHBottomNavigation which represents our bottom navigation bar, then our AHBottomNavigationItem which represents our bottom navigation tab.

2. Create our Class

The class is MainActivity and inherits from android.app.Activity, and has probably been added to you by android studio.

public class MainActivity extends Activity {..}

3. Define Instance Fields

These instance fields include AHBottomNavigation, a TextView, a ListView, an ArrayAdapter and an integer that reprsents a cosmicCategory:

    AHBottomNavigation bottomNavigation;
    TextView headerTxt;
    ListView myListView;
    ArrayAdapter<String> adapter;
    private int cosmicCategory = 0;

4. Define and Return a Given Category Data

Our data in this case is cosmic bodies. We will be swicthing through various categories and populating an arraylist based on the current category.

That arraylist will later be used to populate a ListView via an adapter.

    private ArrayList<String> getCosmicBodies()
    {
        ArrayList<String> data=new ArrayList<>();
        data.clear();
        switch (cosmicCategory) {
            case 0:
                headerTxt.setText("Planets");
                data.add("Mercury");
                data.add("Venus");
                data.add("Earth");
                data.add("Mars");
                data.add("Jupiter");
                data.add("Saturn");
                data.add("Uranus");
                data.add("Neptune");
                break;
            case 1:
                headerTxt.setText("Stars");
                data.add("VY Canis Majos");
                data.add("UY Scuti");
                data.add("Beattleguse");
                data.add("Aldebaran");
                data.add("Epsilon Canis Majos");
                data.add("Dhube");
                data.add("Sun");
                data.add("Alpha Centauri");
                break;
            case 2:
                headerTxt.setText("Galaxies");
                data.add("IC 1011");
                data.add("Andromeda");
                data.add("Large Magellonic Cloud");
                data.add("Centaurus A");
                data.add("StarBust");
                data.add("Whirlpool");
                data.add("Cartwheel");
                data.add("Sombrero");
                break;
            default:
                break;

        }
        return data;
    }

5. Bind Data

First we instantiate an ArrayAdapter, which is our adapter. Then we set it to our ListView via the setAdapter() method.

    private void bindData()
    {
        adapter= new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getCosmicBodies());
        myListView.setAdapter(adapter);
    }

6. Create BottonNavigation Items

We instantiate them passing in the tab title reference from the strings.xml, then the drawable image resource and color resource as well. In this case our bottom navigation tabs will show titles, drawable images and also have custom colors.

        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);

7. Add BottomNavigation Items

We add our bottom navigation items to our bottomNavigation bar.

        bottomNavigation.addItem(item1);
        bottomNavigation.addItem(item2);
        bottomNavigation.addItem(item3);

Listen to Bottom Navigation Tab Selection events

When a bottom navigation item or tab is selected, we will assign the value of the position of that tab as our category.

Then we bind the data via the bindData() method.

        bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
            @Override
            public boolean onTabSelected(int position, boolean wasSelected) {
                cosmicCategory = position;
                bindData();
                return true;
            }
        });

Here's the full code.

Full Code

Our main activity java code:

package info.camposha.javabottomnavigationlistview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;

import java.util.ArrayList;

public class MainActivity extends Activity {

    /*
    Instance Fields
     */
    AHBottomNavigation bottomNavigation;
    TextView headerTxt;
    ListView myListView;
    ArrayAdapter<String> adapter;
    private int cosmicCategory = 0;

    /*
    when activity is created, setContentView, initializeViews and create navigationitems
    */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.initializeViews();
        this.createNavigationItems();
    }
    /*
    Initialize AHBottomNavigation, TextView and Spinner
    */
    private void initializeViews()
    {
        bottomNavigation=findViewById(R.id.bottom_navigation);
        headerTxt=findViewById(R.id.headerLabel);
        myListView=findViewById(R.id.myListView);

        //gridview item selection events
        myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                Toast.makeText(MainActivity.this, getCosmicBodies().get(position), Toast.LENGTH_SHORT).show();
            }
        });

    }
    /*
    Bind data to spinner using an ArrayAdapter
     */
    private void bindData()
    {
        adapter= new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, getCosmicBodies());
        myListView.setAdapter(adapter);
    }
    /*
    Populate an arraylist that will act as our data source.
     */
    private ArrayList<String> getCosmicBodies()
    {
        ArrayList<String> data=new ArrayList<>();
        data.clear();
        switch (cosmicCategory) {
            case 0:
                headerTxt.setText("Planets");
                data.add("Mercury");
                data.add("Venus");
                data.add("Earth");
                data.add("Mars");
                data.add("Jupiter");
                data.add("Saturn");
                data.add("Uranus");
                data.add("Neptune");
                break;
            case 1:
                headerTxt.setText("Stars");
                data.add("VY Canis Majos");
                data.add("UY Scuti");
                data.add("Beattleguse");
                data.add("Aldebaran");
                data.add("Epsilon Canis Majos");
                data.add("Dhube");
                data.add("Sun");
                data.add("Alpha Centauri");
                break;
            case 2:
                headerTxt.setText("Galaxies");
                data.add("IC 1011");
                data.add("Andromeda");
                data.add("Large Magellonic Cloud");
                data.add("Centaurus A");
                data.add("StarBust");
                data.add("Whirlpool");
                data.add("Cartwheel");
                data.add("Sombrero");
                break;
            default:
                break;

        }
        return data;
    }
    /*
    Create AHBottonNavigationItems, add them to BottomNavigation, setBackgroundColor, Listen to tab events
    */
    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(0);
        bindData();

        // set On TabSelectedListener
        bottomNavigation.setOnTabSelectedListener(new AHBottomNavigation.OnTabSelectedListener() {
            @Override
            public boolean onTabSelected(int position, boolean wasSelected) {
                cosmicCategory = position;
                bindData();
                return true;
            }
        });
    }
}

Result

Android Java BottomNavigationBar with ListView

Android Java BottomNavigationBar with ListView

Android Java BottomNavigationBar with ListView

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


Previous Post Next Post