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

Ratan

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]);
          }
      }
  }
}

Christlike

but every time adding view is right ? and prev view is not removed – Ratan

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

Therapist

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

Aardwolf

This is a fantastic answer. This will solve the issue of adding >1 tab where the other views do not load. – Voltammeter

this great but how do we set tab title.how to get index of the new tab create so we can set title – Beanstalk

Answer 4

I was facing the same issue, and I fix it by setting TabLayout.setupWithViewPager(viewPager,false) when setup (I'm currently using the version 24.1.0).

For more detailed, honestly I just take a look at the TabLayout class and realize that the call that removed tabs came from PagerAdapterObserver. That one is set when autoRefresh is true witch is the default value of TabLayout.setupWithViewPager(ViewPager viewPager).

Then a quick look on the documentation say :

If autoRefresh is true, any changes in the PagerAdapter will trigger this layout to re-populate itself from the adapter's titles.

So either the documentation should be updated saying that autoRefresh should be false for custom view or they failed to take care of custom views.

https://developer.android.com/reference/android/support/design/widget/TabLayout.html#setupWithViewPager(android.support.v4.view.ViewPager, boolean)

Interpolate

Tried setting it to false but still get the same result :( I only get this issue when I updated from version 22 to 25 – Sofko

Answer 5

The height of the tabs is fixed to 48dp. The material guidelines uses 48dp when you have text only but if you want an icon the height is 72dp (Tab guidelines). So to solve it I subclassed the TabLayout and overriden onMeasure method in this way:

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); super.setMeasuredDimension(widthMeasureSpec, MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec), MeasureSpec.EXACTLY)); }

And you need to set height of the tab also in xml.

android:layout_height="72dp"

So that it will work fine.

Monitory