jpardogo / PagerSlidingTabStrip

An interactive indicator to navigate between the different pages of a ViewPager
2.19k stars 353 forks source link

example of custom tab #87

Closed sirvon closed 9 years ago

sirvon commented 9 years ago

Can anyone give an example of using icons in replace of text for the text.

I need an example/implementation of custom tabs.

Thanks

squeeish commented 9 years ago

Define a layout for your tab images:

tab_layout.xml:

<?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"
    >

<ImageView
    android:id="@+id/tabImage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:adjustViewBounds="true"/>

 </LinearLayout>

Implement CustomTabProvider and override getcustomTabView in YourFragmentPagerAdapter:

public class YourFragmentPagerAdapter
    extends FragmentStatePagerAdapter
    implements PagerSlidingTabStrip.CustomTabProvider {

    .... 

    private final int[] ICONS = {R.drawable.page6_tab1_icon, R.drawable.page6_tab2_icon,
        R.drawable.page6_tab3_icon, R.drawable.page6_tab4_icon};

    @Override
    public View getCustomTabView(ViewGroup viewGroup, int position) {

        LinearLayout imageView = (LinearLayout) LayoutInflater.from(mContext)
                .inflate(R.layout.tab_layout, null, false);

        ImageView tabImage = (ImageView) imageView.findViewById(R.id.tabImage);
        Picasso.with(mContext)
                .load(ICONS[position])
                .fit()
                .centerInside()
                .into(tabImage);

        return imageView;
    }
}
sirvon commented 9 years ago

thanks