Add icons to tabs adapter which extends FragmentPagerAdapter

Question

how can i add icons in tabs instead of title in tabs adapter which extends FragmentPagerAdapter in android ? i don't want to use action bar in my project

any help please ??

 public class TabsPagerAdapter extends FragmentPagerAdapter {

    public TabsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    private final int[] icons = {R.drawable.home,R.drawable.buddies,R.drawable.notification,R.drawable.history};

    @Override
    public CharSequence getPageTitle(int position) {
        if(position == 0)
            return "Home";
        else if(position == 1)
            return "Buddies";
        else if(position == 2)
            return "History ";
        else
            return "Notifications";
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
            case 0:
                HomeFragment home = new HomeFragment();
                return home;
            case 1:
                return new BuddiesFragment();
            case 2:
                return new HistoryFragment();
            case 3:
                return new NotificationsFragment();
        }

        return null;
    }


    @Override
    public int getCount() {
        return 4;
    }

}

also i tried this methods but doesn't work

@Override public int getPageIconResId(int position) { return icons[position]; }

    @Override
    public boolean isViewFromObject(View view, Object o) {
        return o == view;
    }

Answer 1

I am using vector drawables as my tab images, this only works on API >21. But I'm sure you can just use image drawables the same way.

Here's my code:

class MyPagerAdapter extends FragmentPagerAdapter {

    private String[] tabText = getResources().getStringArray(R.array.tabs);

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
        tabText = getResources().getStringArray(R.array.tabs);

    }

    @Override
    public Fragment getItem(int position) {

        Fragment fragment=null;

        if (position == 0)
            fragment = new FragmentA();
        if (position == 1)
            fragment = new FragmentB();
        if (position == 2)
            fragment=new FragmentC();

        return fragment;
    }




    @Override
    public CharSequence getPageTitle(int position) {

        SpannableString spannableString = null;

        if (position == 0) {
            //use the MrVector library to inflate vector drawable inside tab
            Drawable drawable = MrVector.inflate(getResources(), R.drawable.vector_add);
            //set the size of drawable to 36 pixels
            drawable.setBounds(0, 0, 36, 36);
            ImageSpan imageSpan = new ImageSpan(drawable);
            //to make our tabs icon only, set the Text as blank string with white space
            spannableString = new SpannableString(" ");
            spannableString.setSpan(imageSpan, 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        if (position == 1) {
            //use the MrVector library to inflate vector drawable inside tab
            Drawable drawable = MrVector.inflate(getResources(), R.drawable.vector_list);
            //set the size of drawable to 36 pixels
            drawable.setBounds(0, 0, 36, 36);
            ImageSpan imageSpan = new ImageSpan(drawable);
            //to make our tabs icon only, set the Text as blank string with white space
            spannableString = new SpannableString(" ");
            spannableString.setSpan(imageSpan, 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        if (position == 2) {
            //use the MrVector library to inflate vector drawable inside tab
            Drawable drawable = MrVector.inflate(getResources(), R.drawable.vector_settings);
            //set the size of drawable to 36 pixels
            drawable.setBounds(0, 0, 36, 36);
            ImageSpan imageSpan = new ImageSpan(drawable);
            //to make our tabs icon only, set the Text as blank string with white space
            spannableString = new SpannableString(" ");
            spannableString.setSpan(imageSpan, 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        return spannableString;
    }

    @Override
    public int getCount() {
        return 3;
    }

With pictures:

 @Override
    public CharSequence getPageTitle(int position) {

        SpannableStringBuilder sb = new SpannableStringBuilder(" ");

        if (position == 0) {
            Drawable drawable = getDrawable(R.drawable.ic_action_add);
            drawable.setBounds(0, 0, 48, 48);
            ImageSpan imageSpan = new ImageSpan(drawable);
            //to make our tabs icon only, set the Text as blank string with white space
            sb.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        if (position == 1) {
            Drawable drawable = getDrawable(R.drawable.ic_action_list_2);
            drawable.setBounds(0, 0, 48, 48);
            ImageSpan imageSpan = new ImageSpan(drawable);
            //to make our tabs icon only, set the Text as blank string with white space
            sb.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        }

        return sb;
    }

MrVector liabrary: https://github.com/telly/MrVector
A tool I use to convert SVG to VectorDrawable: http://inloop.github.io/svg2android/

Answer 2

I used this library https://github.com/pizza/MaterialTabs to add tabs with text and icons in my project.

Here is an example that shows how to use only icons in tab titles: https://github.com/pizza/MaterialTabs/blob/master/sample/src/io/karim/materialtabs/sample/MainActivity.java#L397

The extent of the changes is to have your FragmentPagerAdapter class implement the MaterialTabs.CustomTabProvider interface. This adds the getCustomTabView method where you can set the icon in your tab.

@Override
public View getCustomTabView(ViewGroup parent, int position) {
    ImageView imageView = new ImageView(context);
    imageView.setImageDrawable(getResources().getDrawable(ICONS[position]));
    return imageView;
}