TabHost tabs are not horizontally scrolling when swiping using ViewPager

Question

I am writing an app that uses many fragments. I have used ActionBarSherlock (with ActionBar). To work-around bug #240, I've decided to switch a functionally working implementation to use ActionBarSherlock with TabHost. After half a few hours of work, it is working fine, except for when I am swiping between pages: The correspondent tab is selected, but is not centered and often not even visible so the user can't see which tab is selected.

In the picture you can see the visible fragment ("WEEKLY S..") but the tab is only half visible. The next swipe will only make "WEEKLY S..." look like "CALENDAR EVENTS" and I won't know which Tab is selected unless I swipe the TabWidget manually.

Here is my activity_main.xml:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <HorizontalScrollView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:scrollbars="none" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:tabStripEnabled="true"
                android:orientation="horizontal" />

        </HorizontalScrollView>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="0"/>

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

    </LinearLayout>

</TabHost>

And my TabsAdapter is the same as Jake Wharton's example of FragmentTabsPager.

Any suggestions are welcome!

Answer 1

I added the code below inside the onPageChangeListener to solve the issue.

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {


        @Override
        public void onPageSelected(int position) {
            // on changing the page make respected tab selected
            //actionBar.setSelectedNavigationItem(position);
            mTabHost.setCurrentTab(position);
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            View tabView = mTabHost.getTabWidget().getChildAt(position);
            View mHorizontalScroll = (HorizontalScrollView) findViewById(R.id.mHorizontalScroll);
            if (tabView != null)
            {
                int width = mHorizontalScroll.getWidth();
                int scrollPos = tabView.getLeft() - (width - tabView.getWidth()) / 2;
                mHorizontalScroll.scrollTo(scrollPos, 0);
            } else {
                mHorizontalScroll.scrollBy(positionOffsetPixels, 0);
            }
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    });

Answer 2

Thanks to this post, and to jucas in particular, I managed to get it to work. Here is the code:

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    View tabView = mTabHost.getTabWidget().getChildAt(position);
    if (tabView != null)
    {
        final int width = mHorizontalScroll.getWidth();
        final int scrollPos = tabView.getLeft() - (width - tabView.getWidth()) / 2;
        mHorizontalScroll.scrollTo(scrollPos, 0);
    } else {
        mHorizontalScroll.scrollBy(positionOffsetPixels, 0);
    }
}

Of course I had to get mHorizontalScroll initialized in several places. (If someone isn't sure how to do it, I'll be happy to post the full code.)