astuetz / PagerSlidingTabStrip

An interactive indicator to navigate between the different pages of a ViewPager
139 stars 44 forks source link

SpannableString on tabs text #254

Open octavianmiu opened 8 years ago

octavianmiu commented 8 years ago

How can i set Spannable String or HTML.fromHtml string on tabs text?

saqlainmediasoft commented 8 years ago

Hi Octavianmiu, Go to ViewPageAdapter / Or what ever your Adapter name and find the Function getPageTitle or the Function which is return the Tab Title and replace it with the below code:

 // This method return the titles for the Tabs in the Tab Strip
    @Override
    public CharSequence getPageTitle(int position) {
        //return Titles[position];
        Drawable image = mContext.getResources().getDrawable(imageResId[position]);
        image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
        //image.setBounds(0, 0, 64, 64);
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        SpannableString sb = new SpannableString(" ");
        sb.setSpan(imageSpan, 0, sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        return sb;
    }

but you still need to create a Custom xml Layout Under the layout folder

you can copy the below xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/custom_bg"
    android:padding="8dp">

        <ImageView
            android:id="@+id/tabImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tabText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom|center" />

</LinearLayout>

Just Left the ImageView icon empty or may be you can make it android:visibility="GONE", So then only the TEXT will be display.

Hope it answer the Question.