Tab layout slips after page change and swipe in dynamic tab layout

Question

Tablayout slips and get center after page scroll. I want to resolve this slip after page change. Dynamic Tab layout with viewpager. Its working fine when Tab indicator size set as per the tab but when i set tab indicator wrap respect to title its getting issue.I appreciate your support and help. getting issue in my app check link https://i.sstatic.net/jZYe6.gif

<android.support.design.widget.TabLayout
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/tab_layout"
                style="@style/MyCustomTabLayout"
                android:layout_width="wrap_content"
                android:layout_height="34.3dp"
                android:layout_below="@+id/iv_logo"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5.5dp"
                app:tabBackground="@android:color/transparent"
                app:tabContentStart="0dp"
                app:tabIndicatorColor="@color/colorGreen"
                app:tabIndicatorHeight="1.4dp"
                app:tabSelectedTextColor="@color/colorGreen"
                app:tabTextColor="#e13d3833"
                app:tabMode="scrollable"
                app:tabGravity="center"/>

            <View
                android:id="@+id/top_line"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_below="@+id/tab_layout"
                android:background="@color/colorEditLine" />


            <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" />



 <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
            <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
        </style>

        <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
            <item name="android:textSize">11.5sp</item>
            <item name="textAllCaps">true</item>
        </style>






     private void setupTabs(final List<Categories> list) {
                tabLayout.addTab(tabLayout.newTab().setText(Constant.POPULAR));
                tabLayout.addTab(tabLayout.newTab().setText(Constant.SPECIAL));
         ViewPagerAdapter adapter = new ViewPagerAdapter(getFragmentManager(), getActivity());
                for (int i = 0; i < tabLayout.getTabCount(); i++) {
                    Bundle bundle = new Bundle();
                    bundle.putString("name", tabLayout.getTabAt(i).getText().toString());
                    if (i > 1) {
                        bundle.putSerializable("category", list.get(i - 2));
                    }
                    Fragment fragment = new Home();
                    fragment.setArguments(bundle);
                    adapter.addFrag(fragment, tabLayout.getTabAt(i).getText().toString());
                }

                viewpager.setOffscreenPageLimit(3);
                viewpager.setAdapter(adapter);
                tabLayout.setupWithViewPager(viewpager);

                wrapTabIndicatorToTitle(tabLayout, 30, 30);
                }


                class ViewPagerAdapter extends FragmentPagerAdapter {
                private final List<Fragment> mFragmentList = new ArrayList<>();
                private final List<String> mFragmentTitleList = new ArrayList<>();

                private Context context;
                private LayoutInflater layoutInflater;
                public ViewPagerAdapter(FragmentManager manager, Context context) {
                    super(manager);
                    this.context = context;
                }
                @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);
                }
            }



public void wrapTabIndicatorToTitle(TabLayout tabLayout, int externalMargin, int internalMargin) {
        View tabStrip = tabLayout.getChildAt(0);
        if (tabStrip instanceof ViewGroup) {
            ViewGroup tabStripGroup = (ViewGroup) tabStrip;
            int childCount = ((ViewGroup) tabStrip).getChildCount();
            for (int i = 0; i < childCount; i++) {
                View tabView = tabStripGroup.getChildAt(i);
                //set minimum width to 0 for instead for small texts, indicator is not wrapped as expected
                tabView.setMinimumWidth(0);
                // set padding to 0 for wrapping indicator as title
                tabView.setPadding(0, tabView.getPaddingTop(), 0, tabView.getPaddingBottom());
                // setting custom margin between tabs
                if (tabView.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                    ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) tabView.getLayoutParams();
                    if (i == 0) {
                        // left
                        setMargin(layoutParams, externalMargin, internalMargin);
                    } else if (i == childCount - 1) {
                        // right
                        setMargin(layoutParams, internalMargin, externalMargin);
                    } else {
                        // internal
                        setMargin(layoutParams, internalMargin, internalMargin);
                    }
                }
            }

            tabLayout.requestLayout();
        }
    }

Answer 1

As below is code to change indicator for tabs wise you need to change in it as per your requirement where you can give different(For different you need to change in method params and inside method) or same padding to each tabs as well. Thus you can make different size indicator for each.If you need to change width of indicator for specific or each as given sized only then this sample method will helpful to you.

public void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
        Class<?> tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("mTabStrip");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }

        tabStrip.setAccessible(true);
        LinearLayout llTab = null;
        try {
            llTab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
        int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());

        for (int i = 0; i < llTab.getChildCount(); i++) {
            View child = llTab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }