TabLayout removes unnecessary scrolling

Question

I ran into a difficult problem with the TabLayout Android website

import android.support.design.widget.TabLayout; 

When I select the first tab on the left, and then scroll the tabs to the right and select the first tab on the right, TabLayout first shows me the left tab again, and then scrolls it to the selected tab to the right. Here is my installation code

  void setupTabs(ViewPager viewPager, TabLayout tabLayout) { ProductsPagerAdapter adapter = new ProductsPagerAdapter(getChildFragmentManager(), rootCategory.getChildCategories()); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); setStartingSelection(viewPager, adapter); } private void setStartingSelection(ViewPager viewPager, ProductsPagerAdapter adapter) { for(int i = 0 ; i < adapter.getCount(); i++){ String title = (String) adapter.getPageTitle(i); if(title.equals(selectedCategory.getName())){ viewPager.setCurrentItem(i); break; } } } 

And the layout

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/toolbar_color" app:navigationIcon="@drawable/ic_back_white" app:title="@string/title_transport" app:titleTextColor="@color/title_color"/> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" app:tabTextColor="@color/white" app:tabIndicatorColor="@color/tab_indicator" app:tabGravity="fill"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout> 

Answer 1

After a lot of searching, I realized that I needed another component that would look like TabLayout but not TabLayout. Therefore, I used ViewPagerIndicator .

It is very similar to TabLayout, although it lacks the interesting selection animations and selected tab indicator animations that are present in TabLayout. It also does not resize the text to fit the tabs, which is good, and it does not resize the tabs to fit the text, which is bad (tried all the style options that I know could not make it wrap the text).

But he selects the tabs just fine and without additional scrolling. Unfortunately, AndroidArsenal does not contain solutions that are better than this (at least it was not when I searched).

Answer 2

you can try this code

  tabLayout.setupWithViewPager(viewPager); // little hack to prevent unnecessary tab scrolling tabLayout.clearOnTabSelectedListeners(); tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition(), false); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); 

or you can also do it directly for the last line

 tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) { @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition(), false); } }); 

Answer 3

You are actually dealing with a scroll problem. Yes. The fact is that TabLayout extends HorizontalScrollView. try something like this.

 public class CustomTabLayout extends TabLayout { public CustomTabLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context); } public CustomTabLayout(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public CustomTabLayout(Context context) { super(context); init(context); } void init(Context ctx){ } @Override public boolean onTouchEvent(MotionEvent ev) { // Do not allow touch events. return false; } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { // Do not allow touch events. return false; } } 

Answer 4

Change your method as shown below:

 private void setStartingSelection(ViewPager viewPager, ProductsPagerAdapter adapter) { int tabPosition=0; for(int i = 0 ; i < adapter.getCount(); i++){ String title = (String) adapter.getPageTitle(i); if(title.equals(selectedCategory.getName())){ tabPosition=i; break; } } viewPager.setCurrentItem(tabPosition); } 

Hope this helps you.

Answer 5

You can use this custom ViewPager, maybe it can help you :)

 public class NonSmoothViewPager extends ViewPager { private boolean mIsEnabledSwipe = true; public NonSmoothViewPager(Context context) { super(context); } public NonSmoothViewPager(Context context, AttributeSet attrs) { super(context, attrs); } public void setEnabledSwipe(boolean isEnabledSwipe) { mIsEnabledSwipe = isEnabledSwipe; } @Override public boolean onTouchEvent(MotionEvent event) { return mIsEnabledSwipe && super.onTouchEvent(event); } @Override public boolean onInterceptTouchEvent(MotionEvent event) { return mIsEnabledSwipe && super.onInterceptTouchEvent(event); } @Override public void setCurrentItem(int item) { super.setCurrentItem(item, false); } @Override public void setCurrentItem(int item, boolean smoothScroll) { super.setCurrentItem(item, false); } }