Tab.setCustomView() adding new views instead replacing them

Question

Hello i have a tabLayout where trying to refresh customViews of Tabs for each scrolling by this method

private void updateTabs() {
        for (int i = 0; i < 3; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            ImageView image = new ImageView(this);
            image.setImageResource(
                    tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i]
            );
            tab.setCustomView(image);
        }
    }

But i have this when scrolling

This works correctly when i using setIcon instead setCustomView, but icons are to small so i trying to use setCustomView

Activity

public class MainActivity extends AppCompatActivity {

private Toolbar mToolbar;
private TabLayout tabLayout;

private int[] darkTabIcons = {
        R.drawable.ic_tab_list_dark,
        R.drawable.ic_tab_balance_dark,
        R.drawable.ic_tab_add_dark };

private int[] whiteTabIcons = {
        R.drawable.ic_tab_list_white,
        R.drawable.ic_tab_balance_white,
        R.drawable.ic_tab_add_white };


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);

    SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    final AppBarLayout appBar = (AppBarLayout) findViewById(R.id.appbar);

    ViewPager viewPager = (ViewPager) findViewById(R.id.container);
    tabLayout = (TabLayout) findViewById(R.id.tab_layout);


    viewPager.setAdapter(mSectionsPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            appBar.setExpanded(true, true);
            updateTabs();
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}

public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case 0 :
                fragment =  MoneyTransferListFragment.newInstance();
                break;
            case 1 :
                fragment =  MainFragment.newInstance();
                break;
            case 2 :
                fragment =  MoneyTransferFragment.newInstance();
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return 3;
    }
}

private void updateTabs() {
    for (int i = 0; i < 3; i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        ImageView image = new ImageView(this);
        image.setImageResource(
                tab.isSelected() ? whiteTabIcons[i] : darkTabIcons[i]
        );
        tab.setCustomView(image);
    }
}

XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.lol.mycash.activities.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="2.5dp"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

UPD :

The decision is : 1)I made selector for each icon like this

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tab_list_white" android:state_selected="true" />
    <item android:drawable="@drawable/ic_tab_list_dark" />
</selector>

2)Made array with selectors :

private int[] tabSelectors = {
            R.drawable.ic_tab_list_selector,
            R.drawable.ic_tab_balance_selector,
            R.drawable.ic_tab_add_selector
    };

3)Rewrote method for init tabs and use it only once

 private void initTabs() {
        for (int i = 0; i < 3; i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            ImageView image = new ImageView(this);
            image.setImageResource(tabSelectors[i]);
            tab.setCustomView(image);
        }
    }

Answer 1

You should use onPageSelected():

tabLayout.getTabAt(position).setIcon(R.drawable.my_selected_icon);

If the icon is too small thats because you have your field set to wrap_contentin both your width and height of the image, and the image sizes don't match each other