Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: android-bottom-navigation-bar-example

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: android-bottom-navigation-bar-example
Showing posts with label android-bottom-navigation-bar-example. Show all posts
Showing posts with label android-bottom-navigation-bar-example. Show all posts

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.

android studio

Step 2 : Select SDK version and Api Level

android api level


Step 3 : Now Select BottomNaviagtion Activity.

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

android home fragment

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

android homefragment

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.
android navigation menu

 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.

android activity_main

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 :

android project


App Screenshots :

bottom navigation bottom navigation bottom navigation


Complete Source Code: Source Code