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

Question

I've created a tab and trying to put icons and text in my tab layout but it always display text only. I tried displaying icons only as well but i'm having problem regarding getResource().getDrawable() and tried putting Context as well for the getDrawable() but i'm still having 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 display icons only but like i said above i'm having 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 so much...

Answer 1

Create a custom layout like below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

<ImageView
    android:id="@+id/tabIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingTop="2dp" />

<TextView
    android:id="@+id/tabText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:textColor="#FFFFFF" />

</LinearLayout>

Set custom layout to action bar tab

Tab tab = actionBar.newTab().setCustomView(R.layout.yourView)