Android Programming

Android Bottom Navigation - Fragments With ListViews

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

(a) Crime Fragment

  • Shown when Crime navigation item is clicked.
  • Inflates Crime Layout.
  • Shall contain listview with Crime tvshows.
    package com.tutorials.hp.bottomnavlistview.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 android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.Toast;

    import com.tutorials.hp.bottomnavlistview.R;

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

            ListView lv= (ListView) rootView.findViewById(R.id.crimeListView);
            ArrayAdapter adapter=new ArrayAdapter(this.getActivity(),android.R.layout.simple_list_item_1,crime);
            lv.setAdapter(adapter);

            lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(getActivity(),crime[position],Toast.LENGTH_SHORT).show();
                }
            });
            return rootView;
        }
    }

(b) Documentary Fragment

  • Shown when documentary navigation item is clicked.
  • Inflates Documentary Layout.
  • Shall contain listview with documentry tvshows.
    package com.tutorials.hp.bottomnavlistview.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 android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.Toast;

    import com.tutorials.hp.bottomnavlistview.R;


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

            ListView lv= (ListView) rootView.findViewById(R.id.docsListView);
            ArrayAdapter adapter=new ArrayAdapter(this.getActivity(),android.R.layout.simple_list_item_1,docs);
            lv.setAdapter(adapter);

            lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(getActivity(), docs[position], Toast.LENGTH_SHORT).show();
                }
            });
            return rootView;
        }
    }

(c) Drama Fragment

  • Shown when drama navigation item is clicked.
  • Inflates Drama Layout.
  • Shall contain listview with drama tvshows.
    package com.tutorials.hp.bottomnavlistview.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 android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.Toast;

    import com.tutorials.hp.bottomnavlistview.R;

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

            ListView lv= (ListView) rootView.findViewById(R.id.dramaListView);
            ArrayAdapter adapter=new ArrayAdapter(this.getActivity(),android.R.layout.simple_list_item_1,drama);
            lv.setAdapter(adapter);

            lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(getActivity(), drama[position], Toast.LENGTH_SHORT).show();
                }
            });
            return rootView;
        }
    }

Section 3 : 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.bottomnavlistview;

    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.bottomnavlistview.mFragments.CrimeFragment;
    import com.tutorials.hp.bottomnavlistview.mFragments.DocumentaryFragment;
    import com.tutorials.hp.bottomnavlistview.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("Darama",R.drawable.ac);
            AHBottomNavigationItem docsItem=new AHBottomNavigationItem("Crime",R.drawable.dr);

            //ADD ITEMS TO BAR
            bottomNavigation.addItem(crimeItem);
            bottomNavigation.addItem(dramaItem);
            bottomNavigation.addItem(docsItem);

            //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 4 : Our layouts.

  • Rememder each fragment is going to have a listview.
  • So we include listviews in our fragment 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.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>

(a) Crime Layout

  • To be inflated to Crime Fragment.

    <?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">
    
        <ListView
            android:id="@+id/crimeListView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></ListView>
    
    </LinearLayout>
    

    (b) Documentary Layout

  • To be inflated to Documentary Fragment.

    <?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">
    
        <ListView
            android:id="@+id/docsListView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></ListView>
    
    </LinearLayout>
    

    (c) Drama Layout

  • To be inflated to Drama Fragment.

    <?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">
    
        <ListView
            android:id="@+id/dramaListView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></ListView>
    
    </LinearLayout>
    

Source Code Reference

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