Android AHBottomNavigation Bar - Tabs with GridViews

April 12, 2018 Oclemy Android BottomNavigation, Android GridView 6 minutes, 6 seconds

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.

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.

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.

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

Best Regards.

Comments