Skip to content Skip to sidebar Skip to footer
Home / Android / Android Fragmentactivity / Android Fragments / Android Viewpager / Java

How Can I Put Titles In Viewpager Using Fragments?

Post a Comment
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 ja

Solution 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

    <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><com.viewpagerindicator.TabPageIndicatorandroid:id="@+id/titles"android:layout_height="wrap_content"android:layout_width="match_parent"/><android.support.v4.view.ViewPagerandroid: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 adapterViewPagerpager= (ViewPager)findViewById(R.id.pager);
pager.setAdapter(newCustomAdapter(getSupportFragmentManager()));

//Bind the title indicator to the adapterTitlePageIndicatortitleIndicator= (TitlePageIndicator) findViewById(R.id.titles);
titleIndicator.setViewPager(pager);

  3. Implement a CustomFragmentAdapter

    publicstaticclassCustomFragmentAdapterextendsFragmentPagerAdapterimplementsTitleProvider {

        publicstaticfinalintPOSITION_PAGE_1=0;
        publicstaticfinalintPOSITION_PAGE_2=1;
        publicstaticfinalintPOSITION_PAGE_3=2;

        privatestaticfinal String[] TITLES = newString[] { 
            "Title 1", 
            "Title 2", 
            "Title 3" 
        };

        publicstaticfinalintNUM_TITLES= TITLES.length;

        publicCustomFragmentAdapter(FragmentManager fm) {      
            super(fm);
        }

        @Overridepublic 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();         
            }
            returnnull;
        }

        @OverridepublicintgetCount() {
            return NUM_TITLES;
        }

        @Overridepublic String getTitle(int position) {
            return TITLES[position % NUM_TITLES].toUpperCase();
        }
    }

Edit:

The ViewPagerIndicator library supports the titling features:

  1. TitlePageIndicator

    TitlePageIndicator

  2. TabPageIndicator

    TabPageIndicator

  3. CirclePageIndicator

    CirclePageIndicator

Solution 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:

publicstaticclassMyAdapterextendsFragmentPagerAdapter  {
    ...
    @Overridepublic CharSequence getPageTitle(int position) {
        return String.valueOf(position);
    }
}

You can access for xml element from code like this:

protectedvoidonCreate(Bundle savedInstanceState) {
    setContentView(R.layout.pager);
    ...
    mAdapter = newMyAdapter(getSupportFragmentManager());
    // Add custom adapter
    mPager = (ViewPager)findViewById(R.id.pager);
    mPager.setAdapter(mAdapter);

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

I hope it will helps for someone

Solution 3:

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

publicclassPollingextendsSherlockFragmentActivityimplementsOnMenuItemClickListener {
    private ViewPager mViewPager;
    private TabsAdapter mTabsAdapter;

    publicvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mViewPager = newViewPager(this);
        mViewPager.setId(R.id.pager);
        setContentView(mViewPager);
        bar = getSupportActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        bar.setDisplayShowTitleEnabled(false);
        bar.setDisplayShowHomeEnabled(false);
        mTabsAdapter = newTabsAdapter(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); 
    }

    publicstaticclassTabsAdapterextendsFragmentPagerAdapterimplementsActionBar.TabListener, ViewPager.OnPageChangeListener {
        privatefinal Context mContext;
        privatefinal ActionBar mActionBar;
        privatefinal ViewPager mViewPager;
        privatefinal ArrayList<TabInfo> mTabs = newArrayList<TabInfo>();

        staticfinalclassTabInfo {
            privatefinal Class<?> clss;
            privatefinal Bundle args;

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

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

        publicvoidaddTab(ActionBar.Tab tab, Class<?> clss, Bundle args) {
            TabInfoinfo=newTabInfo(clss, args);
            tab.setTag(info);
            tab.setTabListener(this);
            mTabs.add(info);
            mActionBar.addTab(tab);
            notifyDataSetChanged();
        }

        publicintgetCount() {
            return mTabs.size();
        }

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

        publicvoidonPageSelected(int position) {
            mActionBar.setSelectedNavigationItem(position);
        }
        publicvoidonPageScrollStateChanged(int state) {}
        publicvoidonPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

        publicvoidonTabSelected(Tab tab, FragmentTransaction ft) {
            mViewPager.setCurrentItem(tab.getPosition());
            //Log.v(TAG, "clicked");Objecttag= tab.getTag();
            for (int i=0; i<mTabs.size(); i++) {
                if (mTabs.get(i) == tag) {
                    mViewPager.setCurrentItem(i);
                }
            }
        }
        publicvoidonTabUnselected(Tab tab, FragmentTransaction ft) {}
        publicvoidonTabReselected(Tab tab, FragmentTransaction ft) {}
        publicvoidonTabReselected(Tab tab, android.app.FragmentTransaction ft) {}
        publicvoidonTabUnselected(Tab tab, android.app.FragmentTransaction ft) {}
    }
}

Solution 4:

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

lcmeter.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="fill_parent"android:layout_height="fill_parent" ></android.support.v4.view.ViewPager><com.viewpagerindicator.TitlePageIndicatorandroid: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;

publicclassViewPagerFragmentextendsFragmentActivity{

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

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

        initialisePaging(); //inicializo las paginas
    }

    privatevoidinitialisePaging() {

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

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

        //Agrega los titulosTitlePageIndicatortitleIndicator= (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
    ****************************************************************************************************/publicclassPagerAdapterextendsFragmentPagerAdapterimplementsTitleProvider {

        private List<Fragment> fragments;

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

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

        @OverridepublicintgetCount() {
            returnthis.fragments.size();
        }

        @Overridepublic 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();
            }
            returnthis.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;

publicclassFragmentPrueba1extendsFragment {

    FragmentPrueba1 (){

    }

    @Overridepublic 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"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="#FF0000" ><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Numero 1 !!" /><Buttonandroid: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"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="fill_parent"android:layout_height="fill_parent" ></android.support.v4.view.ViewPager><com.viewpagerindicator.TitlePageIndicatorandroid: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 :)

You may like these posts

Post a Comment for "How Can I Put Titles In Viewpager Using Fragments?"