Пользовательские вкладки с использованием SlidingTabLayout?

И вот мой код

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

private static int[] ICONS = new int[] {
        R.drawable.image_back_icon,
        R.drawable.image_category_icon,
        R.drawable.activated,
        R.drawable.image_cart_icon,
        R.drawable.image_profile_icon
};

// Build a Constructor and assign the passed Values to appropriate values in the class
public ViewPagerAdapter(FragmentManager fm,CharSequence mTitles[], int mNumbOfTabsumb) {
    super(fm);

}

//This method return the fragment for the every position in the View Pager
@Override
public Fragment getItem(int position) {

    switch (position) {
        case 0: Tab1 tab1 = new Tab1();
                return tab1;
        case 1: Tab2 tab2 = new Tab2();
            return tab2;
        case 2: Tab3 tab3 = new Tab3();
            return tab3;
        case 3: Tab4 tab4 = new Tab4();
            return tab4;
        case 4: Tab5 tab5 = new Tab5();
            return tab5;
        default: return null;
    }
}

// This method return the titles for the Tabs in the Tab Strip

@Override
public CharSequence getPageTitle(int position) {
    return null;
}


// This method return the Number of tabs for the tabs Strip

@Override
public int getCount() {
    return ICONS.length;
}

public int getDrawableId(int position) {
    return ICONS[position];
}
}

public class MainActivity extends AppCompatActivity {

//Toolbar toolbar;
ViewPager pager;
ViewPagerAdapter adapter;
SlidingTabLayout tabs;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    adapter =  new ViewPagerAdapter(getSupportFragmentManager(),Titles,Numboftabs);

    pager = (ViewPager) findViewById(R.id.pager);
    pager.setAdapter(adapter);

    tabs = (SlidingTabLayout) findViewById(R.id.tabs);
    tabs.setDistributeEvenly(true); 
    tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
       @Override
       public int getIndicatorColor(int position) {
            return getResources().getColor(R.color.primary);
        }
    });

    // Setting the ViewPager For the SlidingTabsLayout
    tabs.setViewPager(pager);



}

}

Я дошел до рис. 1, хочу добиться эффекта, показанного на рис. 2.

Я хочу, чтобы они были отзывчивыми, но имели эффект, как показано на рис. 2.

Я попытался использовать пользовательский рисунок, но, похоже, это не сработало. Как я могу активировать значки, меняющие цвет, а также чтобы значок поиска имел цвет фона?

Как мне этого добиться, чтобы он работал на всех устройствах и размерах экрана.

Благодарю вас.