TabLayout with viewpager not smooth scrolling

Question

Edit

I have followed these tutorials to fix this problem.

http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/ https://guides.codepath.com/android/google-play-style-tabs-using-tablayout http://www.voidynullness.net/blog/2015/08/16/android-tablayout-design-support-library-tutorial/

But its annoying that problem still persists after trying several solutions. Here is demo for the problem i am facing.Its been weeks since i am stuck on this problem.

Link for demo.

Devices i am using for the testing are Nexus 4 and Nexus 5.

TabLayout with ViewPager isn't scrolling smooth. I need to swipe twice to shift on next tap. I have looked around the web but couldn't find any solution. I am using latest support design library. Here is gradle file

apply plugin: 'com.android.application'  android { compileSdkVersion 23 buildToolsVersion "23.0.3"  defaultConfig {     applicationId "com.softoven.ultron"     minSdkVersion 15     targetSdkVersion 23     versionCode 1     versionName "1.0" } buildTypes {     release {         minifyEnabled false         proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'     } } }  dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.3.0' compile 'com.android.support:design:23.3.0' compile 'org.jsoup:jsoup:1.6.1' compile 'com.mikhaellopez:circularimageview:3.0.0' compile 'com.android.support:recyclerview-v7:23.3.0' compile 'com.mcxiaoke.volley:library:1.0.19' compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5' compile 'com.google.code.gson:gson:2.5' } 

Here is Activity code.

private DrawerLayout drawerLayout; private ViewPager viewPager; private TabLayout tabLayout; private NavigationView navigationView; private CategoriesDTO categoriesDTO;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     initToolbar();     initUi();     loadCategories(); }  private void initToolbar() {     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);     setSupportActionBar(toolbar);     getSupportActionBar().setDisplayHomeAsUpEnabled(true);     getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_action_menu); }  private void initUi() {     drawerLayout = (DrawerLayout) findViewById(R.id.drawer);     navigationView = (NavigationView) findViewById(R.id.navigation);     viewPager = (ViewPager) findViewById(R.id.viewPager);     tabLayout = (TabLayout) findViewById(R.id.tab);  }  private void loadCategories() {     StringRequest request = new StringRequest(Constants.URL_GET_CATEGORIES, new Response.Listener<String>() {         @Override         public void onResponse(String response) {             categoriesDTO = Constants.gson.fromJson(response, CategoriesDTO.class);             ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());             viewPager.setOffscreenPageLimit(1);             viewPager.setAdapter(adapter);             setTabLayout();         }     }, new Response.ErrorListener() {         @Override         public void onErrorResponse(VolleyError error) {          }     });      ApplicationController.getmInstance().addToRequestQueue(request); }  private void setTabLayout() {      tabLayout.setupWithViewPager(viewPager);  }   @Override public boolean onCreateOptionsMenu(Menu menu) {     MenuInflater menuInflater = getMenuInflater();     menuInflater.inflate(R.menu.home_side_menu, menu);     return true; }  @Override public boolean onOptionsItemSelected(MenuItem item) {     int id = item.getItemId();     switch (id) {         case android.R.id.home:             drawerLayout.openDrawer(GravityCompat.START);             return true;     }     return super.onOptionsItemSelected(item); }  private class ViewPagerAdapter extends FragmentPagerAdapter {      public ViewPagerAdapter(FragmentManager fm) {         super(fm);     }      @Override     public Fragment getItem(int position) {         return new ContentFragment();     }      @Override     public int getCount() {         return 10;     }      @Override     public CharSequence getPageTitle(int position) {         String title = categoriesDTO.getCategories().get(position).getTitle();         return (CharSequence) title;     } } 

And xml file

<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.CoordinatorLayout     android:layout_width="match_parent"     android:layout_height="match_parent">       <android.support.design.widget.AppBarLayout         android:id="@+id/app_bar"         android:layout_width="match_parent"         android:layout_height="wrap_content">          <include             android:id="@+id/toolbar"             layout="@layout/toolbar"             app:layout_scrollFlags="scroll|enterAlways"             app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />          <android.support.design.widget.TabLayout             android:id="@+id/tab"             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:tabTextColor="#fff"             app:tabGravity="fill"             app:tabMode="scrollable"             >          </android.support.design.widget.TabLayout>     </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.v4.view.ViewPager> </android.support.design.widget.CoordinatorLayout>  <android.support.design.widget.NavigationView     android:id="@+id/navigation"     android:layout_width="wrap_content"     android:layout_height="match_parent"     android:layout_gravity="start"     app:menu="@menu/home_drawer_menu">  </android.support.design.widget.NavigationView> 

Here is the screenshot you can see the indicator is partially divided.

Any solution?

Answer 1

I just went through your code. The problem is that you are not providing any layout to inflate inside ContentFragment.java.

I changed your method to

    @Nullable     @Override     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {         //return super.onCreateView(inflater, container, savedInstanceState);         return  inflater.inflate(R.layout.feed_item, container, false);      } 

After making these changes your tabs were scrolling smoothly. I don't know the reason behind this behaviour but this thing made it work

Answer 2

Change this line in your Activity:

ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());