Settings tab titles with SmartTabLayout using custom adapter and extending PagerAdapter

Question

I have a custom adapter for my ViewPager and I was wondering if there was any way to the set title of each tab using SmartTabLayout ? I've opened an ticket with them there, but I was hoping someone would know how to do this. The following is my custom adapter:

public class CustomPagerAdapter extends PagerAdapter {

    private int[] image_resources = {
            R.drawable.image1,
            R.drawable.image2,
            R.drawable.image3,
            R.drawable.image4,
            R.drawable.image5,
    };

    private Context ctx;
    private LayoutInflater layoutInflater;
    public CustomPagerAdapter(Context ctx) {
        this.ctx = ctx;
    }

    @Override
    public int getCount() {
        return image_resources.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object o) {
        return (view == (RelativeLayout) o);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        layoutInflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View item_view = layoutInflater.inflate(R.layout.pager_item, container, false);
        ImageView imageview = (ImageView) item_view.findViewById(R.id.image_view);
        imageview.setImageResource(image_resources[position]);
        container.addView(item_view);
        return item_view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((RelativeLayout) object);
    }
}

This is how I set up my ViewPager, and also where I initiate SmartTabLayout:

 final ViewPager viewPager;
        CustomPagerAdapter adapter;
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        adapter = new CustomPagerAdapter(context);
        viewPager.setAdapter(adapter);

        SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab);
        viewPagerTab.setViewPager(viewPager);

I suppose I should include the relevant portions of my XML as well:

<com.ogaclejapan.smarttablayout.SmartTabLayout
    android:id="@+id/viewpagertab"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="#fff"
    app:stl_indicatorAlwaysInCenter="false"
    app:stl_indicatorWithoutPadding="false"
    app:stl_indicatorInFront="false"
    app:stl_indicatorInterpolation="smart"
    app:stl_indicatorGravity="bottom"
    app:stl_indicatorColor="#33ffcc"
    app:stl_indicatorThickness="4dp"
    app:stl_indicatorCornerRadius="2dp"
    app:stl_overlineColor="#4D000000"
    app:stl_overlineThickness="0dp"
    app:stl_underlineColor="#4D000000"
    app:stl_underlineThickness="1dp"
    app:stl_dividerColor="#4D000000"
    app:stl_dividerThickness="1dp"
    app:stl_defaultTabBackground="?attr/selectableItemBackground"
    app:stl_defaultTabTextAllCaps="true"
    app:stl_defaultTabTextColor="#FC000000"
    app:stl_defaultTabTextSize="12sp"
    app:stl_defaultTabTextHorizontalPadding="16dp"
    app:stl_defaultTabTextMinWidth="0dp"
    app:stl_distributeEvenly="false"
    app:stl_clickable="true"
    app:stl_titleOffset="24dp"
    app:stl_drawDecorationAfterTab="false"
    />

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:clickable="false"
    android:layout_below="@id/viewpagertab"
    android:scaleType="centerCrop" />

It actually works fine, but I can't set the titles in the standard way using getPageTitle() so they come up blank. I would like to continue to use SmartTabLayout because of how aesthetically appealing it is. The default pager titles are horrendous!

Answer 1

As far as I understand the documentation, you need a FragmentPagerItemAdapter and call .add("title", class) :

FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
     getSupportFragmentManager(), FragmentPagerItems.with(this)
     .add(R.string.titleA, PageFragment.class) // I assume titles are set here.
     .add(R.string.titleB, PageFragment.class)
     .create());

So, you simply would need to call adapter.add(...) ?

Edit: Looked into the demo app - I think you'll need to extend FragmentPagerItemAdapter instead of simple PagerAdapter

Answer 2

Apparently it does work by extending PagerAdapter alone. So the correct answer in this context is to override getPageTitle() in the custom pager adapter class, CustomPagerAdapter:

@Override
public CharSequence getPageTitle(int position) {
    return title_resources[position];
}

You can return a String[] array in order to provide titles to each tab. Just make sure your number of titles are equal to the number of images or views in your ViewPager:

private String[] title_resources = {
        "Title 1",
        "Title 2",
        "Title 3",
        "Title 4",
        "Title 5",
};