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;
}
}

Agitator

That part looks fine, show all of your tabs code. – Kookaburra

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>

Abvolt

Thanks for your help, it solved my problem! Added MyCustomTabTextAppearance in styles.xml and set up app:tabTextAppearance="@style/MyCustomTabTextAppearance" attribute on android.support.design.widget.TabLayout view under activity xml. – Berkelium

Answer 2

Apparently i've found out the solution by using TabLayout.getTabAt(i).setIcon(imageResId[i]);

at first my intention is to be able to set all the icon from viewpager adapter. but since i got no idea nor time to find the solution. i would instead use this other trick i found out.

and also to switch image around i use TabLayout.TabLayoutOnPageChangeListener

hope this helps someone who needed this too. =]

Agitator

Answer 3

well I guess you are missing the main point in your xml. Set text Appearance style for your tab layout. i.e textAllCaps = false otherwise image span won't work.

Clemmieclemmons

Answer 4

You haven't add any tab.

Add a tab like this: tabLayout.addTab(tabLayout.newTab().setText("Tab One"));.

Morna