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

Question

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.

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

Chifforobe

look out my this answer Click here I am sure it will help you out. – Jade

@vrund, Thanks! Its worked – Chifforobe

Answer 1

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.

Chifforobe

This is a deprecated class. You should use "''tabLayout.setupWithViewPager(viewPager);'''' only. Just in your Adapter you need to override ''''method public CharSequence getPageTitle(int position)''''' – Sacring

Answer 2

Incase if you are using tabLayout inside fragment try this answer

Possible mistake

you need to pass getChildFragmentManager() to FragmentPagerAdapter

not getSupportFragmentManager() or getFragmentManager()

//wrong one
ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager()); 
//correct one
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());

ViewPagerAdapter is FragmentPagerAdapter

public class ViewPagerAdapter extends FragmentPagerAdapter {

}

Campbellbannerman

I already added getChildFragmentManager() in code please look at the code, This is not an exact answer for this question. – Chifforobe

@NaveenKumarM pls read ans once again. Incase if anybody mistakenly using getFragmentManager() or getSupportFragmentManager() Tab layout not working in fragments. Thats why I am answer. If you are already using getChildFragmentManager() --> this ans not for you. Please refer other answers. – Campbellbannerman

Answer 3

Short version of solution (Naveen Kumar M):

viewPager.addOnPageChangeListener(
    new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(
    new TabLayout.ViewPagerOnTabSelectedListener(viewPager));

Eward

This is best and compact solution for this problem. – Idonna

Answer 4

try this
add this to viewpager.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Also keep to parent as Coordinator layout then only scrolling will work fine

Refer here:http://coderzpassion.com/working-appbarlayout-like-whatsapp/

Quartic

Answer 5

Check the getCount(). DON'T RETURN IT TO NULL! RETURN TO blankFragment.

package my.package;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

public class tabPagers extends FragmentStatePagerAdapter {

    String[] titles = new String[]{"Home", "Campus", "Course"};

    public tabPagers(FragmentManager fm) {
        super(fm);
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public Fragment getItem(int position) {
        BlankFragment blankFragment = new BlankFragment();
        Blank2Fragment blank2Fragment = new Blank2Fragment();
        Blank3Fragment blank3Fragment = new Blank3Fragment();
        switch (position) {
            case 0:
                return blankFragment;
            case 1:
                return blank2Fragment;
            case 3:
                return blank3Fragment;

        }
        return  blankFragment; //This one is important
    }

    @Override
    public int getCount() {
        return titles.length; //This one is important too
    }
}

Mainsheet

Answer 6

https://developer.android.com/reference/com/google/android/material/tabs/TabLayout#viewpager-integration

<androidx.viewpager.widget.ViewPager
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <com.google.android.material.tabs.TabLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="top" />

</androidx.viewpager.widget.ViewPager>

Dunseath