Android Bottom Navigation Bar - Fragments with RecyclerViews

September 4, 2017 Oclemy Android BottomNavgationBar, Android Fragment, Android RecyclerView 7 minutes, 24 seconds
  • 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

Comments