Android Scroll to Tabs

Question

EDIT2: I'm going to be more clear so everybody understands my question. I hope more people can help me out!

What I made is an app wich contains fragments and tabs to switch between the fragments. I also made it possible to scroll/slide between the fragments using ViewPager.

The only problem now is that the tabs are not scrolling along with the fragments. So when I slide to the last fragment, I can't see the selected tab because it's out of viewingrange.

How can I make it possible to Scroll to the Tabs when I slide between the fragments?

I think I have to do something with this part of the code:

public void onPageSelected(int position) {
    // TODO Auto-generated method stub
    this.mTabHost.setCurrentTab(position);
}

But I don't have any clue and everything I tried doesn't work. To make is easier here are two important parts of the code. I hope there's someone that can help me!!

My main code:

public class MainActivity extends FragmentActivity implements TabHost.OnTabChangeListener, ViewPager.OnPageChangeListener {

    private TabHost mTabHost;
    private ViewPager mViewPager;
    private HashMap<String, TabInfo> mapTabInfo = new HashMap<String, MainActivity.TabInfo>();
    private PagerAdapter mPagerAdapter;

    private class TabInfo {
         private String tag;
         TabInfo(String tag, Class<?> clazz, Bundle args) {
             this.tag = tag;
         }
    }

    class TabFactory implements TabContentFactory {
        private final Context mContext;

        public TabFactory(Context context) {
            mContext = context;
        }

        public View createTabContent(String tag) {
            View v = new View(mContext);
            v.setMinimumWidth(0);
            v.setMinimumHeight(0);
            return v;
        }
    }

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabs_layout);
        this.initialiseTabHost(savedInstanceState);
        if (savedInstanceState != null) {
            mTabHost.setCurrentTabByTag(savedInstanceState.getString("tab"));
        }
        this.intialiseViewPager();
    }

    protected void onSaveInstanceState(Bundle outState) {
        outState.putString("tab", mTabHost.getCurrentTabTag());
        super.onSaveInstanceState(outState);
    }

    private void intialiseViewPager() {
        List<Fragment> fragments = new Vector<Fragment>();
        fragments.add(Fragment.instantiate(this, TabFragment1.class.getName()));
        fragments.add(Fragment.instantiate(this, TabFragment2.class.getName()));
        fragments.add(Fragment.instantiate(this, TabFragment3.class.getName()));
        fragments.add(Fragment.instantiate(this, TabFragment4.class.getName()));
        fragments.add(Fragment.instantiate(this, TabFragment5.class.getName()));
        this.mPagerAdapter  = new PagerAdapter(super.getSupportFragmentManager(), fragments);
        //
        this.mViewPager = (ViewPager)super.findViewById(R.id.viewpager);
        this.mViewPager.setAdapter(this.mPagerAdapter);
        this.mViewPager.setOnPageChangeListener(this);
    }

    private void initialiseTabHost(Bundle args) {
        mTabHost = (TabHost)findViewById(android.R.id.tabhost);
        mTabHost.setup();
        TabInfo tabInfo = null;
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab1").setIndicator("Home"), ( tabInfo = new TabInfo("Tab1", TabFragment1.class, args)));
        this.mapTabInfo.put(tabInfo.tag, tabInfo);
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab2").setIndicator("Messages"), ( tabInfo = new TabInfo("Tab2", TabFragment2.class, args)));
        this.mapTabInfo.put(tabInfo.tag, tabInfo);
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab3").setIndicator("Search"), ( tabInfo = new TabInfo("Tab3", TabFragment3.class, args)));
        this.mapTabInfo.put(tabInfo.tag, tabInfo);
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab4").setIndicator("Profile"), ( tabInfo = new TabInfo("Tab4", TabFragment4.class, args)));
        this.mapTabInfo.put(tabInfo.tag, tabInfo);
        MainActivity.AddTab(this, this.mTabHost, this.mTabHost.newTabSpec("Tab5").setIndicator("Settings"), ( tabInfo = new TabInfo("Tab5", TabFragment5.class, args)));
        this.mapTabInfo.put(tabInfo.tag, tabInfo);
        mTabHost.setOnTabChangedListener(this);
    }

    private static void AddTab(MainActivity activity, TabHost tabHost, TabHost.TabSpec tabSpec, TabInfo tabInfo) {
        tabSpec.setContent(activity.new TabFactory(activity));
        tabHost.addTab(tabSpec);
    }

    public void onTabChanged(String tag) {
        int pos = this.mTabHost.getCurrentTab();
        this.mViewPager.setCurrentItem(pos);
    }

    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        // TODO Auto-generated method stub
    }

    public void onPageSelected(int position) {
        // TODO Auto-generated method stub
        this.mTabHost.setCurrentTab(position);
    }

    public void onPageScrollStateChanged(int state) {
        // TODO Auto-generated method stub
    }
}

WHAT I DID SO FAR CAUSES THE TABS TO DISAPEAR AND REAPEAR WHEN I CLICK THEM:

public void onPageSelected(int position) {
    // TODO Auto-generated method stub
    this.mTabHost.setCurrentTab(position);

    this.hScrollView = (HorizontalScrollView)super.findViewById(R.id.scroller);
    this.hScrollView.scrollTo(((int)(mTabHost.getWidth() * (position / ((double)(mTabHost.getChildCount() - 1))))), 0);
}

Answer 1

I don't know the answer, but this guy implemented an open source library for what you're doing. Hope that helps!

Answer 2

I fixed it thanks to Josh (see the comments on his answer!). Thank you very much Josh!

It's now working fine, this is the code I used for it:

public void onPageSelected(int position) {
    // TODO Auto-generated method stub
    this.mTabHost.setCurrentTab(position);
    this.hScrollView = (HorizontalScrollView)super.findViewById(R.id.scroller);
    this.hScrollView.scrollTo(((int)(mTabHost.getWidth() * (position / ((double)(4 - 1))))), 0);
}