You can add TabLayout
with PagerView
by following step:
Step 1:
Add layout into you main xml like
<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:tabStripEnabled="true"
app:tabBackground="@drawable/tab_color_selector"// make a xml selector
app:tabPaddingEnd="0dp"
app:tabIndicatorColor="#ff727272"
app:tabPaddingStart="0dp"
app:tabSelectedTextColor="#ffffff"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>
</RelativeLayout>
Step 2:
Find these into your Activity
and set FragmentPagerAdapter into PagerView and set other properties like this
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Artcles"));
tabLayout.addTab(tabLayout.newTab().setText("Dicussion"));
tabLayout.addTab(tabLayout.newTab().setText("News"));
ViewPager mViewPager = (ViewPager) findViewById(R.id.container);
ArrayList<Fragment> fragments = new ArrayList<>();
fragments.add(new ArtclesFragment());// create an ArtclesFragment
fragments.add(new DicussionFragment());// Create a DicussionFragment
fragments.add(new NewsFragment()); //Create a NewsFragment
mViewPager.setAdapter(new FragPagerAdaptor(getSupportFragmentManager(), fragments););
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
tabLayout.getTabAt(position).select();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
FragPagerAdaptor look like:
public class FragPagerAdaptor extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
public FragPagerAdaptor(FragmentManager fm, ArrayList<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments == null ? 0 : fragments.size();
}
}
Note: You have to create separate fragemet
for each tab.
Hope it help you understand basic implementation of Tab and PagerView
TabLayout
.