I am implementing an viewpager with icons,i have implemented as below:
public class JobDetailTabbedActivity extends AppCompatActivity {
private int tabPositionToDisplay=0;
private String productId="";
private JobDetailPagerAdapter mJobDetailPagerAdapter;
private ViewPager mViewPager;
private TabLayout tabLayout;
private int[] tabIcons = {
R.drawable.ic_emoji_objects_light_normal,
R.drawable.ic_emoji_objects_light,
R.drawable.ic_cast_disabled_light,
R.drawable.ic_cast_disabled_light
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_job_detail_tabbed);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mJobDetailPagerAdapter = new JobDetailPagerAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.tab_anim_viewpager);
mViewPager.setAdapter(mJobDetailPagerAdapter);
mViewPager.setCurrentItem(tabPositionToDisplay);
tabLayout = (TabLayout) findViewById(R.id.tab_anim_tabs);
tabLayout.setupWithViewPager(mViewPager);
}
public class JobDetailPagerAdapter extends FragmentPagerAdapter {
public JobDetailPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
// Return a PlaceholderFragment (defined as a static inner class below).
switch (position){
case 0:
return JobDetailInfoFragment.newInstance();
case 1:
return JobDetailServiceFragment.newInstance();
case 2:
return JobDetailChatFragment.newInstance();
case 3:
return JobDetailNotesFragment.newInstance();
default:
return JobDetailInfoFragment.newInstance();
}
}
@Override
public int getCount() {
return 4;
}
@Override
public CharSequence getPageTitle(int position) {
Drawable image = ContextCompat.getDrawable(JobDetailTabbedActivity.this, tabIcons[position]);
image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
SpannableString sb = new SpannableString(" ");
ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return sb;
}
}
}
I'm able to get icons at tabs, but how do i set tint color to the selected icon of tab?
I have searched in google, but none if the tutorials available(whatever i have seen) are telling about setting tint for icon anyone please help me.
Finally i have solved the problem like this:
Create a custom widget:
public class TintableImageView extends ImageView {
private ColorStateList tint;
public TintableImageView(Context context) {
super(context);
}
public TintableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public TintableImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
TypedArray a =
context.obtainStyledAttributes(attrs, R.styleable.TintableImageView, defStyle, 0);
tint = a.getColorStateList(R.styleable.TintableImageView_tintSelector);
a.recycle();
}
@Override
protected void drawableStateChanged() {
super.drawableStateChanged();
if (tint != null && tint.isStateful()) updateTintColor();
}
public void setColorFilter(ColorStateList tint) {
this.tint = tint;
super.setColorFilter(tint.getColorForState(getDrawableState(), 0));
}
private void updateTintColor() {
int color = tint.getColorForState(getDrawableState(), 0);
setColorFilter(color);
}
}
add this value to attrs.xml:
<declare-styleable name="TintableImageView">
<attr name="tintSelector" format="reference|color" />
</declare-styleable>
create a selector for the tab image you want to change in color directory(repeating again selector file inside color directory not colors.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="#FFFFFF"
android:state_pressed="true" />
<item android:color="#FFFFFF"
android:state_selected="true" />
<item android:color="#5F9EA0" />
</selector>
create an xml layout with only the custom widget in it:
<?xml version="1.0" encoding="utf-8"?>
<TintableImageView xmlns:custom="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom:tintSelector="@color/selector_tab" />
Thats it you are good to go, you have to implement tabs like this(showing only the changed done to my posted code):
public class JobDetailTabbedActivity extends AppCompatActivity {
private JobDetailPagerAdapter mJobDetailPagerAdapter;
private ViewPager mViewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
//old code which i have posted
mJobDetailPagerAdapter = new JobDetailPagerAdapter(getSupportFragmentManager());
mViewPager = (ViewPager) findViewById(R.id.tab_anim_viewpager);
mViewPager.setAdapter(mJobDetailPagerAdapter);
mViewPager.setCurrentItem(tabPositionToDisplay);
tabLayout = (TabLayout) findViewById(R.id.tab_anim_tabs);
tabLayout.setupWithViewPager(mViewPager);
setUpViewPagerIcons(tabLayout);
}
private void setUpViewPagerIcons(TabLayout tabLayout) {
for(int i=0;i<tabLayout.getTabCount();i++){
int iconId=-1;
switch (i){
case 0:
iconId = R.drawable.ic_cast_on_0_light;
break;
case 1:
iconId = R.drawable.ic_cast_on_0_light;
break;
case 2:
iconId = R.drawable.ic_cast_on_0_light;
break;
case 3:
iconId = R.drawable.ic_cast_on_0_light;
break;
}
TintableImageView tab1 = (TintableImageView) LayoutInflater.from(this).inflate(R.layout.tint_layout, null);
tab1.setImageResource(iconId);
tabLayout.getTabAt(i).setCustomView(tab1);
}
}
/**
* A {@link FragmentPagerAdapter} that returns a fragment corresponding to
* one of the sections/tabs/pages.
*/
public class JobDetailPagerAdapter extends FragmentPagerAdapter {
// old code
@Override
public CharSequence getPageTitle(int position) {
return "";
}
}
}
I hope it will be helpful to someone, i have wasted one day for it.