Search code examples
javaandroidandroid-viewpagerhorizontalscrollview

TabWidget wrapped in HorizontalScrollView doesn't scroll with ViewPager


I'm having to use TabHost in place of ActionBarTabs and to make them scroll-able I've wrapped my TabWidget in a HorizontalScrollView, but the HorizontalScrollView doesn't scroll itself in accordance with ViewPager. I've tried using scrollTo and fullScroll in a couple of different ways, but it doesn't change anything. What do I need to do to get this working correctly?

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

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

    <HorizontalScrollView
        android:id="@id/horizontalScrollView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:scrollbars="@null" >

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

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

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

</LinearLayout>

        @Override
    public void onTabChanged(String tabId) {
        int position = mTabHost.getCurrentTab();
        mViewPager.setCurrentItem(position);
        mHorizontalScrollView.scrollTo(position, 0);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        mHorizontalScrollView.scrollTo(position, 0);
    }

Solution

  • The horizontal scroll view will change when you call .refreshDrawableState() after calling the .scrollTo(x,y) method.

    Another thing to watch out for is that .scrollTo(x,y) scrolls such that x is positioned on the left side of the screen. You may need to do some math with the coordinates of your tabs and the width of the horizontal scroll view to position things correctly. You can't call .scrollTo(position,0) and have it work the way you'd like (unless your tabs are 1 pixel wide).