Android Bottom Navigation Bar - Fragments with RecyclerViews tutorial.

  • 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.

What we Do

  1. Simple bottom navigation example with three fragments.
  2. We use Icon Navigation items to switch among fragments.
  3. Each fragment contains a RecyclerView with its own data.

Section 1 : Dependencies

  • Add these to your build.gradle(Module:app)

    dependencies {
        compile 'com.aurelhubert:ahbottomnavigation:1.3.3'
    }

    Section 2 : Our Fragments

  • These are the fragments we shall be switching through when navigation items are clicked.
  • Each fragment is containing a recyclerview.

(a) Crime Fragment

    package com.tutorials.hp.bottomnavrecycler.mFragments;

    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import com.tutorials.hp.bottomnavrecycler.R;
    import com.tutorials.hp.bottomnavrecycler.mRecycler.MyAdapter;

    public class CrimeFragment extends Fragment {

        String[] crime={"Blacklist","Crisis","Gotham","Banshee","Breaking Bad"};

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

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

            RecyclerView rv= (RecyclerView) rootView.findViewById(R.id.crimeRV);
            rv.setLayoutManager(new LinearLayoutManager(this.getActivity()));

            MyAdapter adapter=new MyAdapter(this.getActivity(),crime);
            rv.setAdapter(adapter);

            return rootView;
        }
    }

(b) Documentary Fragment

    package com.tutorials.hp.bottomnavrecycler.mFragments;

    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import com.tutorials.hp.bottomnavrecycler.R;
    import com.tutorials.hp.bottomnavrecycler.mRecycler.MyAdapter;

    public class DocumentaryFragment extends Fragment {

        String[] docs={"Death of The sun","Through the Warmhole","How to make a Jet Engine","Are we Real?"};

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

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

            RecyclerView rv= (RecyclerView) rootView.findViewById(R.id.docsRV);
            rv.setLayoutManager(new LinearLayoutManager(this.getActivity()));

            MyAdapter adapter=new MyAdapter(this.getActivity(),docs);
            rv.setAdapter(adapter);

            return rootView;
        }
    }

(c) Drama Fragment

    package com.tutorials.hp.bottomnavrecycler.mFragments;

    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import com.tutorials.hp.bottomnavrecycler.R;
    import com.tutorials.hp.bottomnavrecycler.mRecycler.MyAdapter;

    public class DramaFragment extends Fragment {

        String[] drama={"Blindspot","The Player","Silicon Valley","Hannibal","XIII"};

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

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

            RecyclerView rv= (RecyclerView) rootView.findViewById(R.id.dramaRV);
            rv.setLayoutManager(new LinearLayoutManager(this.getActivity()));

            MyAdapter adapter=new MyAdapter(this.getActivity(),drama);
            rv.setAdapter(adapter);

            return rootView;
        }
    }

Section 3 : Our ViewHolder class

  • Holds our view items for recycling
    package com.tutorials.hp.bottomnavrecycler.mRecycler;

    import android.support.v7.widget.RecyclerView;
    import android.view.View;
    import android.widget.TextView;
    import com.tutorials.hp.bottomnavrecycler.R;

    public class MyHolder extends RecyclerView.ViewHolder {

        TextView nametxt;

        public MyHolder(View itemView) {
            super(itemView);

            nametxt= (TextView) itemView.findViewById(R.id.nameTxt);
        }
    }

Section 4 : Our Adapter class

  • We inflate our model layout here.
  • We also bind data to views.
    package com.tutorials.hp.bottomnavrecycler.mRecycler;

    import android.content.Context;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import com.tutorials.hp.bottomnavrecycler.R;

    public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

        Context c;
        String[] movies;

        public MyAdapter(Context c, String[] movies) {
            this.c = c;
            this.movies = movies;
        }

        @Override
        public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.model,parent,false);

            return new MyHolder(v);
        }

        @Override
        public void onBindViewHolder(MyHolder holder, int position) {
            holder.nametxt.setText(movies[position]);

        }

        @Override
        public int getItemCount() {
            return movies.length;
        }
    }

Section 5 : Our MainActivity

  • Launcher activity.
  • Where we create our navigation items.
  • We also handle Tab selection listeners and switch to appropriate fragment.
    package com.tutorials.hp.bottomnavrecycler;

    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
    import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
    import com.tutorials.hp.bottomnavrecycler.mFragments.CrimeFragment;
    import com.tutorials.hp.bottomnavrecycler.mFragments.DocumentaryFragment;
    import com.tutorials.hp.bottomnavrecycler.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 docsItem=new AHBottomNavigationItem("Docs",R.drawable.dr);

            //ADD PROPERTIES
            bottomNavigation.addItem(crimeItem);
            bottomNavigation.addItem(dramaItem);
            bottomNavigation.addItem(docsItem);

            //SET PROPERTIES
            bottomNavigation.setDefaultBackgroundColor(Color.parseColor("#fefefe"));

            bottomNavigation.setCurrentItem(0);

        }

        @Override
        public void onTabSelected(int position, boolean wasSelected) {
            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 6 : Our layouts.

  • Rememder each fragment is going to have a RecyclerView.
  • So we include RecyclerViews in our fragment layouts.

(a) Crime 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:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/crimeRV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

    </LinearLayout>

(b) Documentary 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:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/docsRV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

    </LinearLayout>

(c) Drama 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:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/dramaRV"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

    </LinearLayout>

(c) Model Layout

  • The model layout for our RecyclerView.
  • This is the layout that shall be inflated to each particular view item in our RecyclerView.

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="match_parent"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_margin="10dp"
        card_view:cardCornerRadius="5dp"
        card_view:cardElevation="5dp"
    
        android:layout_height="150dp">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Name"
                android:id="@+id/nameTxt"
                android:padding="10dp"
    
                android:layout_alignParentLeft="true"
                 />
    
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    (d) ActivityMain.xml

  • Make sure you add as below to your activitymain.xml layout.
    <?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.bottomnavlistview.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>

Source Code Reference

No. Link
1. GitHub : Browse
2. Direct : Download

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