Tablayout with Custom view Broken on 23.4.0 design lib

Question

i am setting tablayout to my viewpager . but when i use notifyDataSetChanged then it removing my customview and showing default title view my code

 ViewPager viewPager = findView(R.id.view_pager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), getResources(), getFragments());
    viewPager.setAdapter(adapter);

    tabs.setupWithViewPager(viewPager);
    for (int i = 0; i < tabs.getTabCount(); i++) {
        TabLayout.Tab tab = tabs.getTabAt(i);
        tab.setCustomView(getTabView(i));

    }
    t.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            adapter.notifyDataSetChanged();
        }
    });


   public View getTabView(int position) {
    View v = LayoutInflater.from(this).inflate(R.layout.pager_tab, null);
    RelativeLayout linearLayout = (RelativeLayout) v.findViewById(R.id.view);



    return v;
}

so its working properly but when i call adapter.notifyDataSetChanged(); then my tablayout not showing customview which i have already added prev . it only showing default title .. this same code is working if i use compile "com.android.support:design:23.1.1"

but if i change this to newer version this is not working please can any one help me i trying this but havnt got ans or any other alternative lib or method where i can add customView in tab view

Answer 1

I think i found a kind of solution : Listen to layout change, and if customView is null, set it again :

viewPager.addOnLayoutChangeListener(new ViewPager.OnLayoutChangeListener() {
  @Override
  public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
      for (int i = 0; i < tabLayout.getTabCount(); i++) {
          if (tabLayout.getTabAt(i).getCustomView() == null) {
              tabLayout.getTabAt(i).setCustomView(tabs[i]);
          }
      }
  }
}

Answer 2

This might be a bug! and I'm still facing this on latest 25.2.0 support SDK.

By default, tablayout is assigned with auto refresh when viewpager is updated. This can be fixed (Workaround) by turning off auto refresh like in below code,

viewPager = (ViewPager) findViewById(R.id.viewpager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);

 setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager,false); // Do like this to disable auto refresh of tabs

Answer 3

In order to set the custom view when the tabs are created or recreated, we need a callback when that happens.
The class TabLayout does not allow a listener to be called in this case but it exposes the method TabLayout.newTab().

Create a class that extends from TabLayout and overwrite newTab() as follows.

public class TabLayoutWithCustomTabView extends TabLayout {
    public TabLayoutWithCustomTabView(Context context) {
        super(context);
    }

    public TabLayoutWithCustomTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TabLayoutWithCustomTabView(Context context, AttributeSet attrs,
                                      int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @NonNull
    @Override
    public Tab newTab() {
        final Tab tab = super.newTab();
        tab.setCustomView(inflate(getContext(), R.layout.custom_layout, null));
        return tab;
    }
}

In your layout, use the the new class where you had TabLayout.

<com.example.TabLayoutWithCustomTabView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />