How to show tabs one by one while swiping in a view pager in android

Question

I need a TabLayout which shows only two tabs on it's initial stage.
After swiping active tab will be in center, next tab will be in left side and previous tab will be on right side.
How can I do that?

Below are the exact scenario snapshots: pls anyone advice me.?

Answer 1

Insert this in your code where you are customizing your tabLayout:

 tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Answer 2

Add this coad in .xml

   <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        android:id="@+id/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
  </android.support.design.widget.CoordinatorLayout>

if you want to change tabmode you can do the app:tabMode="fix"

java code is

public class Tabmenu extends AppCompatActivity {
 private TabLayout tabLayout;
  private ViewPager viewPager;
   Toolbar toolbar;

 //  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
     protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_tabmenu);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("Menus Item");
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    viewPager.setCurrentItem(item);
           }

    private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new 
    ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFrag(new Norththalis(), "NORTH INDIAN THALIS");
    adapter.addFrag(new Northmenu(), "NORTH INDIAN MENU");
    adapter.addFrag(new Biryani(), "BIRYANI");
    adapter.addFrag(new Packs(), "PACKS");
    adapter.addFrag(new Roles(), "ROLES");
    adapter.addFrag(new Sides(), "SIDES");
    adapter.addFrag(new Sweets(), "SWEETS");
    adapter.addFrag(new Beverages(), "BEVERAGES");

    viewPager.setAdapter(adapter);
          }

   class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = 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 addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
        }

           }

Answer 3

After long time search got the solution by using the library PagerSlidingTabStrip.

app:pstsPaddingMiddle="true" app:pstsTabPaddingLeftRight="80dp"

This made the trick.

Answer 4

Use

<android.support.v4.view.PagerTabStrip
   android.support.v4.view.PagerTabStrip
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

in xml with ViewPager

Answer 5

Works like charm

your tab xml

  <com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_gravity="center_horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

add this after set viewpager adapter

  for (int i = 0; i < tabLayout.getTabCount(); i++) {
        View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
        ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
        if (i == 0) {
            p.setMargins(400, 0, 200, 0);
        } else {
            p.setMargins(0, 0, 200, 0);
        }

        tab.requestLayout();
    }