如何使用TabLayout在Android Viewpager上设置图标

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.

Answer 1

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