Adding titles to ViewPager

Question

I have set up a ViewPager for swipeable tabs and now I want to add titles at the top of the page to indicate what fragment is being shown.

This is the code so far:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+android:id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

MainActivity.java

public class MainActivity extends FragmentActivity {

    private PagerAdapter mPagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_main);

        this.initialisePaging();
    }

    private void initialisePaging() {

        List<Fragment> fragments = new Vector<Fragment>();

        // Add fragments here
        fragments.add(Fragment.instantiate(this, PickerFragment.class.getName()));
        fragments.add(Fragment.instantiate(this, DisplayFragment.class.getName()));

        this.mPagerAdapter  = new PageAdapter(super.getSupportFragmentManager(), fragments);
        ViewPager pager = (ViewPager)super.findViewById(R.id.viewpager);
        pager.setAdapter(this.mPagerAdapter);
    }

}

PageAdapter.java

public class PageAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public PageAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }

    @Override
    public int getCount() {
        return this.fragments.size();
    }
}

This works and I am able to swipe between the two tabs but there are no titles.

I want to end up with something that looks like this:

Google play

I would appreciate any help on how I could set this up.

You want a http://developer.android.com/reference/android/support/v4/view/PagerTitleStrip.html (google it for a tutorial, it's pretty easy to setup). Have a look at https://github.com/JakeWharton/Android-ViewPagerIndicator if you want something fancier. — user, Dec 29 '12 at 15:12

score 35 · Accepted Answer · edited Jun 20 '14 at 21:38

35

After looking PagerTitleStrip, as suggested in the comments, I did the following:

I added a PagerTitleStrip in activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+android:id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <android.support.v4.view.PagerTitleStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" />
    </android.support.v4.view.ViewPager>

</LinearLayout>

Then in PageAdapter.java I added the following method:

@Override
public CharSequence getPageTitle(int position) {
    return "Title Here";
}

edited Jun 20 '14 at 21:38

Alex Lockwood

83,063
39
206
250

answered Dec 29 '12 at 15:22

Dan

3,879
5
36
50

Any idea on how to change the color of the titles? I want a different color per page and I have only figured out how to apply style which changes color for all. Thanks. – cjayem13 Aug 28 '14 at 22:39
@cjayem13 You can just use "setTabIndicatorColor" I think. Thing is, I don't know how to do other things with it, such as making it look like the contacts app of Lollipop: http://stackoverflow.com/q/27621425/878126 – android developer Dec 23 '14 at 13:40
How do you change the titles for the individual views? – Martin Erlic Nov 23 '15 at 06:59
@bluemunch You could have a list of strings containing all the different tab titles and then use `titlesList.get(position)` or something similar. – Dan Nov 23 '15 at 22:56

score 8 · Answer 2 · answered Feb 01 '17 at 06:01

Since Android Support Design library 22.2.0, you can use TabLayout class. It's very similar to PagerTitleStrip, you just need to specify title on ViewPagerAdapter.

@Override
public CharSequence getPageTitle(int position) {
    return titleList.get(position);
}

and add it in anywhere in your 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"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

and lastly, tie your ViewPager and TabLayout together.

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);

In my opinion, it looks nicer than PagerTitleStrip. TabLayout also suitable for Google Play-like tabs. If you want to do customization like @cjayem13 said (change tab color, text color, selected color etc.), it's very easy to achieve.. see official docs or CodePath's guide for further detail.

Thanks, this is way nicer visually out of the box! – William Reed Oct 03 '18 at 00:03 — William Reed, Oct 03 '18 at 00:03

score 2 · Answer 3 · answered Apr 21 '15 at 18:51

2

The main trics is that nested viewpager. A good and descrptive discussion on viewpager and title. https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

answered Apr 21 '15 at 18:51

Milon

2,221
23
27

score -3 · Answer 4 · edited May 23 '17 at 12:02

You do not need to implement the adapter by yourself. Simple do following:

mPagerAdapter  = new PageAdapter(super.getSupportFragmentManager() );

mPagerAdapter.addFragment(Fragment.instantiate(this, "Title that you want");

And your layout is lacking of PagerTitleStrip, see this Link

The ViewPager is only the container. The PagerTitleStrip should be included in the ViewPager layout, thats for the title.

Adding titles to ViewPager

4 Answers4