is there any-way to use SpannableString in TabLayout?

TabLayout's default style for its TextViews uses a TextAppearance with the textAllCaps attribute set to true. The transformation method for this handles the CharSequence as a flat String, so any Spannable info is lost.

To prevent this, we can create a style for the TabLayout that disables textAllCaps. For example:

<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
</style>

Setting this as the tabTextAppearance on the TabLayout will allow your SpannableString to work as expected.

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextAppearance="@style/TabTextAppearance" />

---

As mentioned in comments, using a custom View for the tabs is another option here, since that wouldn't have the problematic attribute setting by default.

Another approach is to use SpannableString text to TabLayout:

@Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        SpannableString sb = new SpannableString( tabTitles[position]);
        sb.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size
        sb.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color

        return sb;
    }

For more information check Add Icons+Text to TabLayout