Ah-bottomnavigation-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.

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