title: how to set text with icon in tablayout android
body: <p>I want to show icons and text both in my tabs fragment, i tried few things as shown below in my code but its showing only text. Please someone help me out as i am new to fragments.
  Here is my java code:</p>
  
  <pre><code>public class DashboardFragment extends Fragment {
  public static TabLayout tabLayout;
  public static ViewPager viewPager;
  public static int int_items = 3 ;
  private String tabTitles[] = new String[] { "Schedule", "Payments", "Judgements" };
  private int[] imageResId = {
          R.drawable.schedule_active,
          R.drawable.payment_summary_active,
          R.drawable.judgements_active
  };
  
  
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
      /**
       *Inflate tab_layout and setup Views.
       */
      if (container != null) {
          container.removeAllViews();
      }
      View x =  inflater.inflate(R.layout.tab_layoutdash,null);
      tabLayout = (TabLayout) x.findViewById(R.id.tabs);
      viewPager = (ViewPager) x.findViewById(R.id.viewpager);
      tabLayout.setSelectedTabIndicatorHeight(0);
  
      Toolbar toolbar = (Toolbar) x.findViewById(R.id.toolbar);
   toolbar.setTitle("                Dashboard");
      toolbar.setTitleTextColor(Color.WHITE);
  
  
      /**
       *Set an Apater for the View Pager
       */
      viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));
  
      /**
       * Now , this is a workaround ,
       * The setupWithViewPager dose't works without the runnable .
       * Maybe a Support Library Bug .
       */
  
      tabLayout.post(new Runnable() {
          @Override
          public void run() {
              tabLayout.setupWithViewPager(viewPager);
  
          }
      });
     createTabIcons();
      return x;
  
  }
  
  
  class MyAdapter extends FragmentPagerAdapter {
  
      public MyAdapter(FragmentManager fm) {
          super(fm);
      }
  
      /**
       * Return fragment with respect to Position .
       */
  
      @Override
      public Fragment getItem(int position)
      {
          switch (position){
              case 0 : return new Schedule();
              case 1 : return new Payment();
              case 2 : return new Judgement();
          }
          return null;
      }
  
      @Override
      public int getCount() {
  
          return int_items;
  
      }
  
      /**
       * This method returns the title of the tab according to the position.
       */
  
      @Override
      public CharSequence getPageTitle(int position) {
  
       Drawable image =  getView().getResources().getDrawable(imageResId[position]);
          image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
          // Replace blank spaces with image icon
          SpannableString sb = new SpannableString(" " + tabTitles[position]);
          ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
          sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
          return sb;
  
  
      }
  }
  
  
  }
  </code></pre>
  
  <p>And here's xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout
  android:layout_marginTop="60dp"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:orientation="vertical"
  android:layout_height="wrap_content"
  &gt;
  &lt;android.support.v7.widget.Toolbar
      android:layout_marginLeft="40dp"
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="?attr/colorPrimaryDark"/&gt;
  
  &lt;android.support.design.widget.TabLayout
      android:theme="@style/tab"
      android:tabStripEnabled="false"
      android:id="@+id/tabs"
      app:tabGravity="fill"
      app:tabMode="fixed"
      android:background="#343434"
      app:tabSelectedTextColor="#ffffff"
      app:tabTextColor="@color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"&gt;
  
  &lt;/android.support.design.widget.TabLayout&gt;
  
  &lt;android.support.v4.view.ViewPager
  
      android:id="@+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
  
  &lt;/android.support.v4.view.ViewPager&gt;
  
  
  &lt;/LinearLayout&gt;
  </code></pre>