How to make TabPagerIndicator move while ViewPager is scrolling

Question

Heu guys i am building an app and i have implemented scrollable tabs. i would like to make it google play style like when the viewpager is scrolling i want the tabpagerindicator to move with it. is this possible?? i have tried to use this example but i failed.

Make TabPagerIndicator Like Google Play

My code so far.

public class TabsActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager mViewPager;
    private ActionBar actionBar;

    @SuppressLint({ "NewApi" })
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabs);
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager
                .setAdapter(new TabsPagerAdapter(getSupportFragmentManager()));
        mViewPager
                .setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

                    @Override
                    public void onPageSelected(int arg0) {
                        actionBar.setSelectedNavigationItem(arg0);
                    }

                    @Override
                    public void onPageScrolled(int arg0, float arg1, int arg2) {
                    }

                    @Override
                    public void onPageScrollStateChanged(int arg0) {
                    }
                });


        actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.Tab tab1 = actionBar.newTab();
        ActionBar.Tab tab2 = actionBar.newTab();
        tab1.setText(R.string.info);
        tab1.setTabListener(this);
        tab2.setText(R.string.graph);
        tab2.setTabListener(this);

        actionBar.addTab(tab1);
        actionBar.addTab(tab2);

    }

    class TabsPagerAdapter extends FragmentPagerAdapter {
        public TabsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int arg0) {
            Fragment fragment = null;
            if (arg0 == 0) {
                fragment = new InfoFragment();
            }
            if (arg0 == 1) {
                fragment = new GraphFragment();
            }
            return fragment;
        }

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

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        mViewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

}

Answer 1

I'm a little confuse by your words: "the tabs activity has 2 fragments inside which everyone of them extends FragmentActivity". They (the Fragments) should extends Fragment and not FragmentActivity..

The right way to have this library is to create (in your case) one FragmentActivity (extends FragmentActivity) and two Fragments (extends Fragment). Your FragmentActivity will have an FragmentPagerAdapter setting with your ViewPager and your PagerTabStrip to display the two Fragments.

All is explain on the GitHub page in Usage section:

Firstly, include the library as local library project:

• Download the zip > Copy/paste the Library to your application (PagerSlidingTabStrip Library: you will need PagerSlidingTabStrip.java and also the res folder as everything in attrs file, the background_tab.xml drawable, etc. copy/paste it to yours).

Then, your layout with ViewPager will be:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myappname="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.mypackagename.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        android:background="@drawable/background_tabs" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tabs"
        tools:context=".TabsActivity" />

</RelativeLayout>  

Finally, your FragmentActivity will be:

import com.mypackagename.PagerSlidingTabStrip;

public class TabsActivity extends FragmentActivity {

    private ActionBar actionBar;
    private ViewPager pager;
    private PagerSlidingTabStrip tabs;
    private MyPagerAdapter adapter;

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

        // ActionBar settings
        actionBar = getActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeButtonEnabled(true);

        // ViewPager, Tab, Adapter init
        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pager = (ViewPager) findViewById(R.id.pager);
        adapter = new MyPagerAdapter(getSupportFragmentManager());

        // Adapter settings
        pager.setAdapter(adapter);
        tabs.setViewPager(pager);

    }

    public class MyPagerAdapter extends FragmentPagerAdapter {

        private final String[] tab_titles = { "InfoFragment", "GraphFragment" };

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

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

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

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = null;
            if (position == 0) {
                fragment = new InfoFragment();
            } else {
                fragment = new GraphFragment();
            }
            return fragment;
        }

}

}  

You don't need to implements ActionBar.TabListener, to set NavigationMode to MODE_TABS and adding Tab dynamically with actionBar.addTab.
As you can read on the project page: compatible with the ViewPager from the Android Support Library, this is not related with the ActionBar but with the ViewPager. Your tabs are added in the Adapter..

Finally, you can customize your Tabs with xml attributes. These attributes are handled via your attrs file and all are visible in Customization section on home page:

<com.mypackagename.PagerSlidingTabStrip
    myappname:pstsIndicatorColor="#FFFF0000"
    myappname:pstsUnderlineColor="#FFFF0000"
    myappname:pstsIndicatorHeight="2dp"
    ... />

Hope this helps.