TabLayout with viewpager not smooth scrolling
Solution 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
Solution 2
Change this line in your Activity:
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
Solution 3
If You are going to create TabLayout within a fragments then use getChildFragmentManager()
instead of getSupportFragmentManager()
as a parameter.
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
Solution 4
I think you need to use
override
methodsetUserVisibleHint
.You need to add this in your
Fragment
.
@Override
public void setUserVisibleHint(boolean isVisibleToUser) {
super.setUserVisibleHint(isVisibleToUser);
if (isVisibleToUser) {
// load data here
}else{
// fragment is no longer visible
}
}
Make your
offScreenPageLimit
to NUMBER OF TABS you have.
Read more about setUserVisibleHint
here.
Solution 5
Please Set viewPager.setOffscreenPageLimit(1); to viewPager.setOffscreenPageLimit(5);
Zeeshan Shabbir
A Mobile Application developer who is passionate about learning app development and best practices and wants to improve and prove his skills by questioning and answering the questions. Always curious, learning and practicing. I love android & iOS development. I'd love to explore react native someday. Java Kotlin Swift Python Reactive programming <3
Updated on March 02, 2020Comments
-
Zeeshan Shabbir about 4 years
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
withViewPager
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 fileapply 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?