Add Icons to SlidingTabLayout instead of Text

by

The key to this is to return a SpannableString, containing your icon in an ImageSpan, from your PagerAdapter’s getPageTitle(position) method:

private int[] imageResId = {
        R.drawable.ic_tab_notifications,
        R.drawable.ic_tab_weather,
        R.drawable.ic_tab_calendar
};

@Override
public CharSequence getPageTitle(int position) {
    Drawable image = 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;
}

Normally this be would be enough, but the default tab created by SlidingTabLayout makes a call to TextView#setAllCaps(true) which effectively disables all ImageSpans, so you’ll have to use a custom tab view instead:

res/layout/custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp"
    android:textStyle="bold"
    android:background="?android:selectableItemBackground"
    android:padding="16dp"
    />

and where ever you setup/bind to your ViewPager:

SlidingTabLayout slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);
slidingTabLayout.setViewPager(viewPager);

(make sure to call setCustomTabView before setViewPager)

More Related Contents:

  1. How to customize individual tabs? (changing background color, indicator color and text color)
  2. Android SlidingTabLayout with icons
  3. How to make animation for app icon in android?
  4. ViewPager and fragments — what’s the right way to store fragment’s state?
  5. Getting the current Fragment instance in the viewpager
  6. Getting the error “Java.lang.IllegalStateException Activity has been destroyed” when using tabs with ViewPager
  7. ViewPager.setOffscreenPageLimit(0) doesn’t work as expected
  8. Remove Fragment Page from ViewPager in Android
  9. TabWidget current tab bottom line color
  10. dynamically add and remove view to viewpager
  11. ViewPager with previous and next page boundaries
  12. Is it possible to disable scrolling on a ViewPager
  13. Fragment in ViewPager using FragmentPagerAdapter is blank the second time it is viewed
  14. How to do circular scrolling on ViewPager?
  15. onClick on ViewPager not triggered
  16. Android ViewPager get the current View
  17. Android ViewPager setCurrentItem not working after onResume
  18. IllegalStateException: The application’s PagerAdapter changed the adapter’s content without calling PagerAdapter#notifyDataSetChanged
  19. Adding Tab inside Fragment In Android?
  20. android.content.res.Resources$NotFoundException: Unable to find resource ID #0xffffffff
  21. How can we work-around the blank title in PagerTitleStrip and PagerTabStrip?
  22. Android ViewPager padding/margin between page fragments
  23. ViewPager with fragments – onPause(), onResume()?
  24. How to customize android tabs or background change?
  25. Prevent ViewPager from destroying off-screen views
  26. What’s the correct size icon for drawable-xxhdpi?
  27. How to style the divider between Ice Cream Sandwich tabs?
  28. View pager and fragment lifecycle
  29. How do I implement swiping between tabs on Android?
  30. ExpandableListView with ViewPager combination as its child

Leave a Comment