Android Bottom Navigation Bar with Swipping

Android Bottom Navigation Bar with Swipping

Today We See How To Create Bottom Navigation View in Android With Swipping gesture.

So Why We Use Bottom Navigation instead of Tabbed Activity which had Already Swipping Gesture.?

We use here Bottom navigation because its easy to access for user. You think there is a long data and you keep scrolling but if need to change page you have to click on top to change page in tabbed activity so you have to up your finger and click on top. but in case of bottom navigation you just have to click on bottom no need to your finger that is the main advantage of using bottom navigation.

Now let's start.

Step 1: Start Android Studio and Click on Start New Studio Project.

Step 2 : Select SDK version and Api Level

Step 3 : Now Select BottomNaviagtion Activity.

Step 4 : Give Your Activity name Default is MainActivity.

Step 5 : After All The Above Done You Get Two Page 1st is layout file activity_main.xml and 2nd is MainActivity.java

Step 6 : Let's Start Our Coding.

Our App had Three Pages 1.Home, 2. Chat, 3. Status So i will Create Three Fragments.

Fragments : A Fragment represents a behavior or a portion of user interface in a FragmentActivity. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. 

So i am Going To Creating my Fragment in fragment package it look like this.

 

Now Creating Fragments. 

Click on File -> Fragement -> Fragment Blank

  

Then Write Your Fragment Name. 

I am creating three Fragments : 

1.) HomeFragment, 2.) ChatFragment, 3.) StatusFragment.

 

After that do some changes in HomeFragment.java, Remove Some unnecessary Codes.

Same Create Two More Fragments ChatFragment and StatusFragment.

After That is Look like this.

Now Rename the Menu name in Bottom So We have to open

res -> menu -> navigation.xml

and change the menu name.

 Now Let's create a new Java Class inside adapter Package class name "ViewPagerAdapter.java"

package bottomnavigation.supercoders.in.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }
    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);
    }
}

Now open acitivity_main.xml and write this code. i just remove textview and add a viewpager.

Code : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

Now Open MainActivity.java and write the codes.

package bottomnavigation.supercoders.in;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.MenuItem;
import android.widget.TextView;

import bottomnavigation.supercoders.in.adapter.ViewPagerAdapter;
import bottomnavigation.supercoders.in.fragment.ChatFragment;
import bottomnavigation.supercoders.in.fragment.HomeFragment;
import bottomnavigation.supercoders.in.fragment.StatusFragment;

public class MainActivity extends AppCompatActivity {

    private TextView mTextMessage;
    MenuItem prevMenuItem;

    //============Handle Bottom Navgigation Click and Change Page on ViewPager Adapter============
    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    viewPager.setCurrentItem(0);
                    return true;
                case R.id.navigation_dashboard:
                    viewPager.setCurrentItem(1);
                    return true;
                case R.id.navigation_notifications:
                    viewPager.setCurrentItem(3);
                    return true;
            }
            return false;
        }
    };

    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTextMessage = (TextView) findViewById(R.id.message);
        final BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                if (prevMenuItem != null) {
                    prevMenuItem.setChecked(false);
                }
                else
                {
                    navigation.getMenu().getItem(0).setChecked(false);
                }
                navigation.getMenu().getItem(position).setChecked(true);
                prevMenuItem = navigation.getMenu().getItem(position);

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        setPager(viewPager);

    }



    //====setting Pages in viewpager==============
    private void setPager(ViewPager viewPager)
    {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new HomeFragment());
        adapter.addFragment(new ChatFragment());
        adapter.addFragment(new StatusFragment());
        viewPager.setAdapter(adapter);
    }

}

After That Our Final Project Structure :

App Screenshots :

Complete Source Code: Source Code