Search code examples
androidandroid-viewpagerandroid-tablayout

android.support.design.widget.TabLayout not working properly with ViewPager


android.support.design.widget.TabLayout not working properly with ViewPager If I set tabLayout.setupWithViewPager(viewPager); then tablayout view not showing please find attached screen shots.

enter image description here

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="false"
android:orientation="vertical"
tools:context=".home.HomeActivity"
tools:showIn="@layout/activity_home">

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/tab_layout"/>

Fragment Code :

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);       tabLayout.addTab(tabLayout.newTab().setText(getActivity().getResources().getText(R.string.feeds)));        tabLayout.addTab(tabLayout.newTab().setText(getActivity().getResources().getText(R.string.following)));        tabLayout.addTab(tabLayout.newTab().setText(getActivity().getResources().getText(R.string.you)));
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    final ViewPager viewPager = (ViewPager) view.findViewById(R.id.pager);
    final PageAdapter adapter = new PageAdapter(getChildFragmentManager(), 3);
    viewPager.setOffscreenPageLimit(3);
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);

When remove "tabLayout.setupWithViewPager(viewPager);" the view is working fine. But I need navigate respective fragment when click on respective tab.

enter image description here


Solution

  • In my case I solved this by replacing,

    tabLayout.setupWithViewPager(viewPager);
    

    By,

    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(
                            tabLayout));
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    viewPager.setCurrentItem(tab.getPosition());
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
    
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
    });
    

    I hope this will help you out.