Cannot add modified custom View as different Tab Layout custom View

Question

I want to add tabs dynamically into TabLayout. I can add different objects as different custom Views.

The problem is that I have to dynamically add various number of custom Views and I do not want to create different instance of view for each tab if it is possible.

    TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabs);
    TextView textView = (TextView)getLayoutInflater ().inflate ( R.layout.simple_text_layout,null,false );
    textView.setText ( "HIM" );
    mTabLayout.addTab(mTabLayout.newTab().setCustomView ( textView).setTag ( "0" ));
    TextView textView1 = (TextView)getLayoutInflater ().inflate ( R.layout.simple_text_layout,null,false );
    textView1.setText ( "HER" );
    mTabLayout.addTab(mTabLayout.newTab().setCustomView ( textView1).setTag ( "1" ));
    textView1  = (TextView)getLayoutInflater ().inflate ( R.layout.simple_text_layout,null,false );
    textView1.setText ( "OTHERS" );
    mTabLayout.addTab(mTabLayout.newTab().setCustomView ( textView1).setTag ( "2" ));

If I attach custom views like above then I get this result.

        TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabs);
        TextView textView = (TextView)getLayoutInflater ().inflate ( R.layout.simple_text_layout,null,false );
        textView.setText ( "HIM" );
        mTabLayout.addTab(mTabLayout.newTab().setCustomView ( textView).setTag ( "0" ));
        TextView textView1 = (TextView)getLayoutInflater ().inflate ( R.layout.simple_text_layout,null,false );
        textView1.setText ( "HER" );
        mTabLayout.addTab(mTabLayout.newTab().setCustomView ( textView1).setTag ( "1" ));
        textView1  = (TextView)getLayoutInflater ().inflate ( R.layout.simple_text_layout,null,false );
        textView1.setText ( "OTHERS" );
        mTabLayout.addTab(mTabLayout.newTab().setCustomView ( textView1).setTag ( "2" ));
        textView1.setText ( "ACCESS.." );

         mTabLayout.addTab(mTabLayout.newTab().setCustomView (     textView1).setTag ( "3" ));

If I attach items like above into my tabLayout I get this result .

Can anyone point out at what wrong I am doing by trying to to use same object of view for multiple custom view for tabLayout with altered values?

Answer 1

I have been used SmartTabLayout. You can customized it with your needs.

initialize layouts:

   viewPager.setOffscreenPageLimit(tabContent.size());
   final SmartTabLayout viewPagerTab = (SmartTabLayout) view.findViewById(R.id.viewpagertab);
   setUpTab(viewPagerTab, viewPager.getContext());
   viewPagerTab.setViewPager(viewPager);

then,

create list of tabs.

List<String> tabContent= new ArrayList<>();

SetupTab function Below:

     private void setUpTab(final SmartTabLayout layout, Context context) {
    final LayoutInflater inflater = LayoutInflater.from(context);
    layout.setCustomTabView(new SmartTabLayout.TabProvider() {
        @Override
        public View createTabView(ViewGroup container, int position, PagerAdapter adapter) {
            @SuppressLint("InflateParams") View view = inflater.inflate(R.layout.custom_tab, null);
            TextView customtextView = (TextView) view.findViewById(R.id.txtCustomTab);
            String tab= tabContent.get(position);
            customtextView.setText(tab);                
            return customtextView;
        }

    });
}

set pager Adapter:

   pagerAdapter = new TabPagerAdapter(getChildFragmentManager(), tabContent);
    viewPager.setAdapter(pagerAdapter);

TabPagerAdapter class

  public class TabPagerAdapter extends FragmentStatePagerAdapter {


List<String> list;
private Context context;

public TabPagerAdapter(FragmentManager fm, List<String> list) {
    super(fm);
    this.list = list;
}


public void setContext(Context context) {
    this.context = context;
}


@Override
public Fragment getItem(int position) {
    return setListItems(position);
}

private Fragment setListItems(int pos) {
    YourCustomFragment fragment = new YourCustomFragment();
    fragment.setData(list.get(pos));
    return fragment;
}

@Override
public int getCount() {
    return list.size();
}

public TabPagerAdapter setTitle(boolean hasTitle) {
    return this;
}
  }