Android: Bottom Navigation with Viewpager

Bottom Navigation with Viewpager

Bottom navigation bars make it easy for users to explore and switch between top-level views in a single tap. It should be used when application has three to five top-level destinations.

Bottom navigation provides quick navigation between top-level views of an app. It is primarily designed for use on mobile. It can be used when there are three to five top-level navigation. If there are only 2 destinations, then usage of tabs is advised. When there are more than 5 destinations, then you can make use of Navigation Drawer.

Now i will showing to you "how to create Viewpager and add it with Bottom Navigation View"

Create A new Project Called "GreenHub BNV"


Add this code to your activity_main.xml file

[<?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:layout_width="match_parent"
        android:id="@+id/viewpager"
        android:layout_marginBottom="?attr/actionBarSize"
        android:layout_height="match_parent"/>
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="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>]


Creating new Fragment Adapter


Create three fragment named fragment_one ,fragment_two, fragment_three
Now create new java class and give name FragmentAdapter.java

[public class FragmentAdapter extends FragmentPagerAdapter {
private List Fragment = new ArrayList<>(); //Fragment List
private List NamePage = new ArrayList<>(); // Fragment Name List
public FragmentAdapter(FragmentManager manager) {
super(manager);
}
public void add(Fragment Frag, String Title) {
Fragment.add(Frag);
NamePage.add(Title);
}
@Override
public Fragment getItem(int position) {
return Fragment.get(position);
}
@Override
public CharSequence getPageTitle(int position) {
return NamePage.get(position);
}
@Override
public int getCount() {
return 3;
}
}]

3.In your MainActivity.java class add this code in the bottom

[public class PageChange implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageSelected(int position) {
            switch (position) {
                case 0:
                    navigation.setSelectedItemId(R.id.navigation_home);
                    break;
                case 1:
                    navigation.setSelectedItemId(R.id.navigation_dashboard);
                    break;
                case 2:
                    navigation.setSelectedItemId(R.id.navigation_notifications);
                    break;
            }
        }
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    }]


This code below is shown fully of MainActivity.java class, you can learn by this code

[package com.greenhub.aariz;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;
import net.clipcodes.Page.PageOne;
import net.clipcodes.Page.PageTree;
import net.clipcodes.Page.PageTwo;
import net.clipcodes.PageAdapter.FragmentAdapter;
public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
BottomNavigationView navigation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
navigation = findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
viewPager = findViewById(R.id.viewpager); //Init Viewpager
setupFm(getSupportFragmentManager(), viewPager); //Setup Fragment
viewPager.setCurrentItem(0); //Set Currrent Item When Activity Start
viewPager.setOnPageChangeListener(new PageChange()); //Listeners For Viewpager When Page Changed
}
public static void setupFm(FragmentManager fragmentManager, ViewPager viewPager){
FragmentAdapter Adapter = new FragmentAdapter(fragmentManager);
//Add All Fragment To List
Adapter.add(new PageOne(), "Page One");
Adapter.add(new PageTwo(), "Page Two");
Adapter.add(new PageTree(), "Page Three");
viewPager.setAdapter(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(2);
return true;
}
return false;
}
};
public class PageChange implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
switch (position) {
case 0:
navigation.setSelectedItemId(R.id.navigation_home);
break;
case 1:
navigation.setSelectedItemId(R.id.navigation_dashboard);
break;
case 2:
navigation.setSelectedItemId(R.id.navigation_notifications);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}]

I hope this tutorials will help in your android development.

No comments:

Powered by Blogger.