using a FragmentTabHost with a ViewPager

Question

I want to create a swipe tab interface using a FragmentTabHost with a ViewPager. So far I got the Fragments to slide. The only thing that's happening is that the fragments are able slide behind the tabs which are disabled/stuck and not working. How can I make the FragmentTabHost tabs work with the ViewPager for swiping between tabs?

I tried using FragmentTabHost without the viewpager, it works fine, but its just not working with the viewpager.

here's a screenshot of what it looks like:

Main Java source code:

import java.util.List;
import java.util.Vector;

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.app.FragmentTabHost;
import android.support.v4.view.ViewPager;



public class MainActivity extends FragmentActivity {
 private FragmentTabHost mTabHost;
 private ViewPager pager;
 private MyPagerAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
     mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);

        pager = (ViewPager) findViewById(R.id.viewpager);                                   
        List<Fragment> fragments = new Vector<Fragment>();
        fragments.add(Fragment.instantiate(this, BatteryFragment.class.getName()));
        fragments.add(Fragment.instantiate(this, DeviceFragment.class.getName()));
        fragments.add(Fragment.instantiate(this, NetworkFragment.class.getName()));         
        adapter = new MyPagerAdapter(getSupportFragmentManager(),       fragments);

        pager.setAdapter(adapter);

        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        mTabHost.addTab(mTabHost.newTabSpec("battery").setIndicator("Battery",
                getResources().getDrawable(R.drawable.ic_battery_tab)),
                BatteryFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("network").setIndicator("Network",
                getResources().getDrawable(R.drawable.ic_network_tab)),
                   NetworkFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("device").setIndicator("Device",
                getResources().getDrawable(R.drawable.ic_device_tab)),
                DeviceFragment.class, null);




}


public class MyPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;

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

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return this.fragments.get(arg0);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return this.fragments.size();
    }

}


}

XML code:

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

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

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

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp" />

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

</LinearLayout>

</android.support.v4.app.FragmentTabHost>

Answer 1

add the following to your code:

              pager.setOnPageChangeListener(new OnPageChangeListener() {

                @Override
                public void onPageSelected(int arg0) {
                    // TODO Auto-generated method stub
                    mTabHost.setCurrentTab(arg0);
                }

                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                    // TODO Auto-generated method stub

                }

                @Override
                public void onPageScrollStateChanged(int arg0) {
                    // TODO Auto-generated method stub

                }
            });

the problem is when you are swiping the fragments there is no way for tabs to know it,by specifying so through the above code,you can make this work. i had the same problem but solved through this.Hope this helps.