How to set icons and text on tabs instead of text only android

I have created a tab and am trying to put icons and text in the tab layout, but it always only displays text. I tried to display only icons, but I got a problem with getResource (). GetDrawable () and tried to put a Context for getDrawable () as well, but I still have a problem.

Here is my code for my ViewPagerAdapter

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

CharSequence Titles[]; 
int NumbOfTabs;

Context mContext;

private int[] icons = {
        R.drawable.abouttab,
        R.drawable.programmetab,
        R.drawable.speakerstab,
        R.drawable.mapstab,
        R.drawable.twittertab
};

public ViewPagerAdapter(FragmentManager fm,CharSequence mTitles[], int mNumbOfTabsumb, Context context) {
    super(fm);

    this.Titles = mTitles;
    this.NumbOfTabs = mNumbOfTabsumb;
    this.mContext = context;

}

@Override
public Fragment getItem(int position) {

    if(position == 0)
    {
        Tab_About tab_about = new Tab_About();
        return tab_about;
    }
    else if(position == 1)        
    {
        Tab_one tab_one = new Tab_one();
        return tab_one;

    }else if(position == 2){
        Tab_two tab_two = new Tab_two();
        return tab_two;
    }else if(position == 3){
        Tab_three tab_three = new Tab_three();
        return tab_three;
    }else{
        Tab_four tab_four = new Tab_four();
        return tab_four;
    }

}

@Override
public CharSequence getPageTitle(int position) {
    return Titles[position];
}

// This method return the Number of tabs for the tabs Strip

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

      

        
        
        
      

    

}

for the getPageTitle () function I also tried this code to only display icons, but as I said, I have a problem with getDrawable ()

    @Override
public CharSequence getPageTitle(int position) {
    Drawable image = mContext.getResources().getDrawable(icons[position], null);
    image.setBounds(0, 0, 48, 48);
    SpannableString sb = new SpannableString(" ");
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

      

        
        
        
      

    

In my MainActivity

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private ViewPager mPager;
private ViewPagerAdapter adapter;
private SlidingTabLayout mTabs;
private Context mContext;

CharSequence Titles[] = {"One", "Two", "Three", "Four", "Five"};
int Numboftabs = 5;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    toolbar = (Toolbar) findViewById(R.id.tool_bar); 
    setSupportActionBar(toolbar);
    getSupportActionBar().setElevation(0); 

    adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs, mContext);

    // Assigning ViewPager View and setting the adapter
    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setAdapter(adapter);

    // Assigning the Sliding Tab Layout View
    mTabs = (SlidingTabLayout) findViewById(R.id.tabs);
    mTabs.setDistributeEvenly(true); // To make the Tabs Fixed set this true, This makes the tabs Space Evenly in Available width

    // Setting Custom Color for the Scroll bar indicator of the Tab View
    mTabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
        @Override
        public int getIndicatorColor(int position) {
            return getResources().getColor(R.color.tabsIndicator);
        }
    });

      

        
        
        
      

    

mTabs.setSelectedIndicatorColors (GetResources () GetColor (R.color.tabsIndicator).); mTabs.setViewPager (mPager); }

Can anyone help me? thank you very much...