How can I put titles in ViewPager using fragments?

Question

I am using ViewPager to allow user to swipe between fragments.

How can I add a the title of each fragment to the screen?

package com.multi.andres;

import java.util.List;
import java.util.Vector;

import com.viewpagerindicator.TitlePageIndicator;
import com.viewpagerindicator.TitleProvider;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class ViewPagerFragment extends FragmentActivity{

    private PagerAdapter mPagerAdapter; //contiene el pager adapter
    private static String[] titulosPaginas = { "APP 1", "APP 2" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.lcmeter); //layout que contiene el ViewPager

        initialisePaging(); //inicializo las paginas
    }

    private void initialisePaging() {

        List<Fragment> fragments = new Vector<Fragment>();
        fragments.add(Fragment.instantiate(this, FragmentPrueba1.class.getName()));
        fragments.add(Fragment.instantiate(this, FragmentPrueba2.class.getName()));
        this.mPagerAdapter  = new PagerAdapter(super.getSupportFragmentManager(), fragments);

        ViewPager pager = (ViewPager)super.findViewById(R.id.pager);
        pager.setAdapter(this.mPagerAdapter);

        //Agrega los titulos
        TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById(R.id.titulos);    //layout XML
        titleIndicator.setViewPager(pager);
    }

    /** *************************************************************************************************
    /** Clase:   public class PagerAdapter extends FragmentPagerAdapter implements TitleProvider
    /** Notas:   extends FragmentPagerAdapter permite el uso de las paginas de ViewPager pero con Fragments
    /**          implements TitleProvider permite el uso de los titulos en las paginas
    /** Funcion: crea paginas por las cuales deslizarse horizontalmente las cuales son usadas
    ****************************************************************************************************/
    public class PagerAdapter extends FragmentPagerAdapter implements TitleProvider {

        private List<Fragment> fragments;

        public String getTitle(int position) {
            // TODO Auto-generated method stub
            return titulosPaginas[position];    // titulo de la pagina
        }

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

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

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

    }

}

But it doesn't show the titles of ViewPager and I don't know why. I used ViewPager with titles before but not with fragments and I cannot get titles working now.

Answer 1

You can also use Jake Wharton's ViewPagerIndicator library to get the desired effect. Davek804's answer works too, but it requires you to reference the entire ActionBarSherlock library, which isn't as preferable if you only need a ViewPager that supports custom/styled titles.

Setting it up to work correctly is simply a matter of writing a tiny bit of XML, initializing your ViewPager in your Activity, and implementing a FragmentAdapter (which extends FragmentPagerAdapter implements TitleProvider) to specify which pages hold which Fragments.

1. XML layout

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <com.viewpagerindicator.TabPageIndicator
           android:id="@+id/titles"
           android:layout_height="wrap_content"
           android:layout_width="match_parent"/>
   
       <android.support.v4.view.ViewPager
           android:id="@+id/pager"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="1"/>
   
   </LinearLayout>
   

2. Initialize in your Activity

   //Set the pager with an adapter
   ViewPager pager = (ViewPager)findViewById(R.id.pager);
   pager.setAdapter(new CustomAdapter(getSupportFragmentManager()));
   
   //Bind the title indicator to the adapter
   TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById(R.id.titles);
   titleIndicator.setViewPager(pager);
   

3. Implement a CustomFragmentAdapter

   public static class CustomFragmentAdapter extends FragmentPagerAdapter 
           implements TitleProvider {
   
           public static final int POSITION_PAGE_1 = 0;
           public static final int POSITION_PAGE_2 = 1;
           public static final int POSITION_PAGE_3 = 2;
   
           private static final String[] TITLES = new String[] { 
               "Title 1", 
               "Title 2", 
               "Title 3" 
           };
   
           public static final int NUM_TITLES = TITLES.length;
   
           public CustomFragmentAdapter(FragmentManager fm) {      
               super(fm);
           }
   
           @Override
           public Fragment getItem(int position) {     
               switch (position) {
               case POSITION_TITLE_1:              
                   return PageOneFragment.newInstance();
               case POSITION_TITLE_2: 
                   return PageTwoFragment.newInstance();
               case POSITION_TITLE_3:
                   return PageThreeFragment.newInstance();         
               }
               return null;
           }
   
           @Override
           public int getCount() {
               return NUM_TITLES;
           }
   
           @Override
           public String getTitle(int position) {
               return TITLES[position % NUM_TITLES].toUpperCase();
           }
       }
   

---

Edit:

The ViewPagerIndicator library supports the titling features:

1. TitlePageIndicator

   

2. TabPageIndicator

   

3. CirclePageIndicator

   

Answer 2

Or if you don't like to use from third-part library, you can use support v4 PagerTabStrip class. For example:

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0px"
    android:layout_weight="1">
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pts_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>

and in PagerAdapter override getPageTitle method:

public static class MyAdapter extends FragmentPagerAdapter  {
    ...
    @Override
    public CharSequence getPageTitle(int position) {
        return String.valueOf(position);
    }
}

You can access for xml element from code like this:

protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.pager);
    ...
    mAdapter = new MyAdapter(getSupportFragmentManager());
    // Add custom adapter
    mPager = (ViewPager)findViewById(R.id.pager);
    mPager.setAdapter(mAdapter);

    // Get PagerTabStrip
    PagerTabStrip strip = (PagerTabStrip) findViewById(R.id.pts_main);
    strip.setDrawFullUnderline(false);
    ...

I hope it will helps for someone

Answer 3

Where mine says SherlockFragmentActivity, you can just have FragmentActivity. getSupportActionBar can be getActionBar().

public class Polling extends SherlockFragmentActivity implements OnMenuItemClickListener {
    private ViewPager mViewPager;
    private TabsAdapter mTabsAdapter;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mViewPager = new ViewPager(this);
        mViewPager.setId(R.id.pager);
        setContentView(mViewPager);
        bar = getSupportActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        bar.setDisplayShowTitleEnabled(false);
        bar.setDisplayShowHomeEnabled(false);
        mTabsAdapter = new TabsAdapter(this, mViewPager);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.login),
                LoginFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.economics),
                EconFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.elections),
                ElectionsFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.politics),
                PoliticsFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.science),
                ScienceFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.finance),
                FinanceFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.religion),
                ReligionFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.military),
                MilitaryFragment.class, null);
        mTabsAdapter.addTab(bar.newTab().setText(R.string.international),
                InternationalFragment.class, null); 
    }

    public static class TabsAdapter extends FragmentPagerAdapter
    implements ActionBar.TabListener, ViewPager.OnPageChangeListener {
        private final Context mContext;
        private final ActionBar mActionBar;
        private final ViewPager mViewPager;
        private final ArrayList<TabInfo> mTabs = new ArrayList<TabInfo>();

        static final class TabInfo {
            private final Class<?> clss;
            private final Bundle args;

            TabInfo(Class<?> _class, Bundle _args) {
                clss = _class;
                args = _args;
            }
        }

        public TabsAdapter(SherlockFragmentActivity activity, ViewPager pager) {
            super(activity.getSupportFragmentManager());
            mContext = activity;
            mActionBar = activity.getSupportActionBar();
            mViewPager = pager;
            mViewPager.setAdapter(this);
            mViewPager.setOnPageChangeListener(this);
        }

        public void addTab(ActionBar.Tab tab, Class<?> clss, Bundle args) {
            TabInfo info = new TabInfo(clss, args);
            tab.setTag(info);
            tab.setTabListener(this);
            mTabs.add(info);
            mActionBar.addTab(tab);
            notifyDataSetChanged();
        }

        public int getCount() {
            return mTabs.size();
        }

        public SherlockFragment getItem(int position) {
            TabInfo info = mTabs.get(position);
            return (SherlockFragment)Fragment.instantiate(mContext, info.clss.getName(), info.args);
        }

        public void onPageSelected(int position) {
            mActionBar.setSelectedNavigationItem(position);
        }
        public void onPageScrollStateChanged(int state) {}
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            mViewPager.setCurrentItem(tab.getPosition());
            //Log.v(TAG, "clicked");
            Object tag = tab.getTag();
            for (int i=0; i<mTabs.size(); i++) {
                if (mTabs.get(i) == tag) {
                    mViewPager.setCurrentItem(i);
                }
            }
        }
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {}
        public void onTabReselected(Tab tab, FragmentTransaction ft) {}
        public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {}
        public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {}
    }
}

Answer 4

@Alex Lockwood Thanks you :) I still have a problem :/ It is my XML:

lcmeter.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.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/titulos"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Whit my original code in the first post if a put "TitlePageIndicator" before "android.support.v4.view.ViewPager" i can see the titles but i cannot swype only clicking the titles change the pages and my fragments are not showed but whit the XML on that way i can swype through my fragments but i cannot see the titles :/. I tried whit constructors on this way:

package com.multi.andres;

import java.util.List;
import java.util.Vector;

import com.viewpagerindicator.TitlePageIndicator;
import com.viewpagerindicator.TitleProvider;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class ViewPagerFragment extends FragmentActivity{

    private PagerAdapter mPagerAdapter; //contiene el pager adapter
    String[] titulosPaginas = { "APP 1", "APP 2" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.lcmeter); //layout que contiene el ViewPager

        initialisePaging(); //inicializo las paginas
    }

    private void initialisePaging() {

        List<Fragment> fragments = new Vector<Fragment>();
        fragments.add(Fragment.instantiate(this, FragmentPrueba1.class.getName()));
        fragments.add(Fragment.instantiate(this, FragmentPrueba2.class.getName()));
        this.mPagerAdapter  = new PagerAdapter(super.getSupportFragmentManager(), fragments);

        ViewPager pager = (ViewPager)super.findViewById(R.id.pager);
        pager.setAdapter(this.mPagerAdapter);

        //Agrega los titulos
        TitlePageIndicator titleIndicator = (TitlePageIndicator) findViewById(R.id.titulos);    //layout XML
        titleIndicator.setViewPager(pager);
    }

    /** *************************************************************************************************
    /** Clase:   public class PagerAdapter extends FragmentPagerAdapter implements TitleProvider
    /** Notas:   extends FragmentPagerAdapter permite el uso de las paginas de ViewPager pero con Fragments
    /**          implements TitleProvider permite el uso de los titulos en las paginas
    /** Funcion: crea paginas por las cuales deslizarse horizontalmente las cuales son usadas
    ****************************************************************************************************/
    public class PagerAdapter extends FragmentPagerAdapter implements TitleProvider {

        private List<Fragment> fragments;

        public String getTitle(int position) {
            // TODO Auto-generated method stub
            return titulosPaginas[position];    // titulo de la pagina
        }

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

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

        @Override
        public Fragment getItem(int position) {
            try {
                FragmentPrueba1.class.newInstance();
            } catch (InstantiationException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IllegalAccessException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            return this.fragments.get(position);
        }

    }

}

But i have a FC when i open the application. Here is my fragment both are equal:

package com.multi.andres;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class FragmentPrueba1 extends Fragment {

    FragmentPrueba1 (){

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return (LinearLayout)inflater.inflate(R.layout.prueba1, container, false);

    }

}

It is fragments 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:background="#FF0000" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Numero 1 !!" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Esto es un boton XD" />

</LinearLayout>

I have read about Fragments but i cannot get working Fragments whit titles and it doesnt make sense :/ I am new at this but i am learning and is pretty complicated to me this kind of things thank you very much for your help i really appreciate it :)

EDIT:

I think i have founded the problem, it is not on Java code, the problem is on XML file ViewPager:

<?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.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/titulos"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

That seems to "get over" the titles because if i use XML file of Google example which adds android:layout_weight="1" on android.support.v4.view.ViewPager, i can see the titles on the bottom of the screen, not on top instead but is a progress :)