Android Bottom Navigation Bar – Display Simple Fragments

Android Bottom Navigation Bar – Display Simple 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;
/**
 * Created by Oclemmy on 5/10/2016 for ProgrammingWizards Channel and http://www.Camposha.com.
 */
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;
/**
 * Created by Oclemmy on 5/10/2016 for ProgrammingWizards Channel and http://www.Camposha.com.
 */
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;
/**
 * Created by Oclemmy on 5/10/2016 for ProgrammingWizards Channel and http://www.Camposha.com.
 */
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>

 

Otherwise just design your layouts as you wish.

Or check the complete source above.



Rating :

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    17 + seventeen =

    COMMENTS