Tab layout middle tabs not scrolling smooth

Question

Tab layout middle tabs recenter on page scroll with jerk. Dynamic tab layout with tab mode scrollable and tab gravity center. On Viewpager page scroll and tab select middle tab get jerk after or before page change. you can check issue on this link

XML file

<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.xml

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

Home.java

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();
        }
    }

https://stackoverflow.com/a/44983608/1029110 this helped me fix it — Rahul Kahale, Jul 07 '20 at 18:26
bro any chance you can tell how to fix the selector in the middle ? — Fahad-Android, Mar 10 '22 at 14:43

score 0 · Answer 1 · answered May 31 '18 at 05:36

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@android:id/tabhost"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >

            <HorizontalScrollView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <RadioGroup
                    android:id="@+id/payment_mode"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:padding="6dp"
                    android:orientation="horizontal">


                    <RadioButton
                    android:id="@+id/pizza"
                    style="@style/LinkButton"

                    android:text="pizza" />


                    <RadioButton
                    android:id="@+id/pasta"
                    style="@style/LinkButton"
                    android:text="pasta" />

                    <RadioButton
                    android:id="@+id/cheese"
                    style="@style/LinkButton"
                    android:text="cheese" />

                    <RadioButton
                    android:id="@+id/burger"
                    style="@style/LinkButton"
                    android:text="burger" />


                    <RadioButton
                    android:id="@+id/lasagne"
                    style="@style/LinkButton"
                    android:text="lasagne" />

                    <RadioButton
                    android:id="@+id/pasta"
                    style="@style/LinkButton"
                    android:text="Credited" />
                    <RadioButton
                        android:id="@+id/pasta"
                        style="@style/LinkButton"
                        android:visibility="gone"
                        android:text="OrderBalance" />

                </RadioGroup>
            </HorizontalScrollView>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="1" >
            </FrameLayout>
        </LinearLayout>
        </TabHost>

style.xml

 <style name="LinkButton">
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">wrap_content</item>
            <item name="typeface">roboto_condensed_light</item>
            <item name="android:textSize">12sp</item>
            <item name="android:paddingTop">2dp</item>
            <item name="android:paddingBottom">2dp</item>
            <item name="android:paddingLeft">6dp</item>
            <item name="android:paddingRight">6dp</item>
            <item name="android:layout_margin">4dp</item>
            <item name="android:textColor">@color/registration_button_color</item>
            <item name="android:buttonTint">@color/registration_button_color</item>
        </style>

Tabhost not possible because on Viewpager page scroll also need to change Tab Indicator respect to next Tab. — smpatel, May 31 '18 at 12:38

Tab layout middle tabs not scrolling smooth

1 Answers1