And here is my code
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);
}
}
I have reached till Fig 1, I want to achieve the effect shown in Fig 2
I want them to be responsive but have the effect as shown in fig 2.
I have tried using a custom drawable, but it didn't seem to work. How can I have the icons change colour active as well as have the search icon have a background colour?
How should I achieve this, to make it work in all devices and screen sizes.
Thank You.
