Question

I am using http://viewpagerindicator.com/ library. I would like to create a TitlePageIndicator like the below image on Gmail app:

I exactly want to achieve the same thing where first title is ‘Newer’, last title is ‘Older’ and center title is ‘[page position] of [total pages]’. Is it possible to achieve this with the library I am using or should I modify it?

Answer 1

I had the same issue. Solved like this with the help from Matthieu. Based this on the samples that come with the ViewPagerIndicator.

Basically listening when the page change and change the adapter to give a different page title depending on the current position. The code given below simply works for me.

If you have those samples working and you just replace those two files, then try this sample

Changed the code for TestFragmentAdapter like this:

class TestFragmentAdapter extends FragmentPagerAdapter implements IconPagerAdapter {
    protected static final String[] CONTENT = new String[] { "This", "Is", "stack", "overflow"  };
    protected static final int[] ICONS = new int[] {
        R.drawable.perm_group_calendar,
        R.drawable.perm_group_camera,
        R.drawable.perm_group_device_alarms,
        R.drawable.perm_group_location
};

private int mCount = CONTENT.length;

// CHANGE START HERE
private int current_position=0;

public void set_current_position(int i) {
    current_position = i;
}
// CHANGE ENDS HERE

public TestFragmentAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    return TestFragment.newInstance(CONTENT[position % CONTENT.length]);
}

@Override
public int getCount() {
    return mCount;
}

@Override
public CharSequence getPageTitle(int position) {
    // CHANGE START HERE
    if (position == current_position-1) {
        return "Previous";
    } else if (position == current_position+1) {
        return "Next";
    }
    // CHANGE ENDS HERE
    return TestFragmentAdapter.CONTENT[position % CONTENT.length];
}

@Override
public int getIconResId(int index) {
  return ICONS[index % ICONS.length];
}

public void setCount(int count) {
    if (count > 0 && count <= 10) {
        mCount = count;
        notifyDataSetChanged();
    }
}
}

the code for SampleTitlesDefault like this (added the OnPageChangeListener)

public class SampleTitlesDefault extends BaseSampleActivity implements ViewPager.OnPageChangeListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.simple_titles);

    mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

    mPager = (ViewPager)findViewById(R.id.pager);
    mPager.setAdapter(mAdapter);

    mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
    mIndicator.setViewPager(mPager);
    // CHANGE START HERE
    mIndicator.setOnPageChangeListener(this);
    // CHANGE ENDS HERE
}

// CHANGE START HERE
@Override
public void onPageScrolled(int i, float v, int i1) {
}

@Override
public void onPageSelected(int i) {
    mPager = (ViewPager)findViewById(R.id.pager);
    ((TestFragmentAdapter)mPager.getAdapter()).set_current_position(i);
}

@Override
public void onPageScrollStateChanged(int i) {
}
// CHANGE ENDS HERE
}