TabLayout Icon not showing

Question

I'm trying to make tab with tablayout following this https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-custom-view-to-tablayout

Now I'm trying to show icon instead of text using the imagespan. But without luck, can anyone help point out what is missing from this tutorial?

Here's the code

public class HomeActivity extends FragmentActivity {

//Fragments List
public ArrayList <Fragment> fragmentList;

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

    setUpFragmentList();

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.home_viewpager);
    viewPager.setAdapter(new HomeFragmentPagerAdapter(getSupportFragmentManager(), HomeActivity.this, fragmentList));

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    //start this 2 are to set the tab to fill entire screen
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    //end this 2 are to set the tab to fill entire screen

    tabLayout.setupWithViewPager(viewPager);
    tabLayout.getTabAt(1).setIcon(R.drawable.ic_tab_down_activity);

}

private void setUpFragmentList() {
    fragmentList = new ArrayList<>();

    fragmentList.add(new MyActivitesFragment());
    fragmentList.add(new ChatListFragment());
    fragmentList.add(new QuickMatchFragment());
    fragmentList.add(new FilterMatchFragment());
}
}


public class HomeFragmentPagerAdapter extends FragmentPagerAdapter {
private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" ,"Tab4"};
private Context context;

private ArrayList <Fragment> fragmentList;

private int[] imageResId = {
        // unclicked
        R.drawable.ic_tab_down_activity,
        R.drawable.ic_tab_down_chat,
        R.drawable.ic_tab_down_find,
        R.drawable.ic_tab_down_filter
};

public HomeFragmentPagerAdapter(FragmentManager fm, Context context, ArrayList <Fragment> fragmentList) {
    super(fm);
    this.context = context;
    this.fragmentList = fragmentList;
}

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

@Override
public Fragment getItem(int position) {
    return fragmentList.get(position);
}

@Override
public CharSequence getPageTitle(int position) {

    Drawable image = context.getResources().getDrawable(imageResId[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;
}
}

Answer 1

In your custom tab layout file, just make textAllCaps to false. It will work :) Reason, the image is being converted to characters, then if it is true, then converting them to capital will not render the image.

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">?android:textColorSecondary</item>
    <item name="textAllCaps">false</item>
</style>