Android: 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 ListFragment = new ArrayList<>(); //Fragment List
private ListNamePage = 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: