How to set icons on Android Viewpager With TabLayout

Question

I want to show icons and Title on my Viewpager. activity_main.xml

<android.support.v4.view.ViewPager android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/pageViewer"
xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.design.widget.TabLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content" />

</android.support.v4.view.ViewPager>

CustomPagerAdapter.java

 public class TabsAdapter extends FragmentPagerAdapter {

    public TabsAdapter(FragmentManager fg){
        super(fg);
    }
    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 1:
                return new TabBlueFragments();
            case 0:
                return new TabGreenFragment();
            case 2:
                return new TabRedFragment();
        }
        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 1:
                return "Blue";
            case 0:
                return "Green";
            case 2:
                return "Red";
        }
        return "";
    }

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

Section of MainActivity.java where i call adapter.

viewPager=(ViewPager)findViewById(R.id.pageViewer);

TabsAdapter adapter = new TabsAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);

I missed a method of returning icons. But titles are displayed properly.

Check this [answer](https://stackoverflow.com/a/12837635/5308778) hope it solves your problem — yashkal, Dec 12 '17 at 09:59
this will help you https://www.androidhive.info/2015/09/android-material-design-working-with-tabs/ — AskNilesh, Dec 12 '17 at 09:59
Possible duplicate of [android: How to add icons/drawables to the PagerTabStrip from the Android Support Lib version 4?](https://stackoverflow.com/questions/11839031/android-how-to-add-icons-drawables-to-the-pagertabstrip-from-the-android-suppor) — ADM, Dec 12 '17 at 09:59
You can try this : https://mobikul.com/make-custom-tabs-icons-android/ — Saurabh Kataria, Dec 12 '17 at 10:02
The provided solution is for PagerTabStrip, it doesn't work if you are using TabLayout inside viewpager — BYISHIMO Audace, Dec 12 '17 at 10:47

score 1 · Accepted Answer · answered Dec 12 '17 at 10:47

You can use SpannableStringBuilder to create an Icon with text UI for the page title. Refer below code:

 @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 1:
                SpannableStringBuilder blue = new SpannableStringBuilder("Blue 
                "); 
                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), 
                myDrawable.getIntrinsicHeight()); 
                ImageSpan span = new ImageSpan(myDrawable, 
                ImageSpan.ALIGN_BASELINE); 
                blue.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); 

                return blue;
            case 0:
                SpannableStringBuilder green = new SpannableStringBuilder("Green 
                "); 
                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), 
                myDrawable.getIntrinsicHeight()); 
                ImageSpan span = new ImageSpan(myDrawable, 
                ImageSpan.ALIGN_BASELINE); 
                green.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); 

                return green;
            case 2:
                SpannableStringBuilder red = new SpannableStringBuilder("Red 
                "); 
                myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(), 
                myDrawable.getIntrinsicHeight()); 
                ImageSpan span = new ImageSpan(myDrawable, 
                ImageSpan.ALIGN_BASELINE); 
                red.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); 

                return red;
        }
        return "";
    }

How to set icons on Android Viewpager With TabLayout

1 Answers1