Android Inflating Views of Tab View

Question

I want to implement this feature in my app as shown below.

1. Activity with Action bar and Action Items
2. Tabs Below the actionbar
3. Each of the Tabs will have content.

I used Tab fragments and TabListeners to code. Now when i run the app i am getting tab view but the view pager and indicator are missing. i am getting an activity as shown below.

My code is as shown below.

TabViewActivity .java

public class TabViewActivity extends SherlockFragmentActivity {
    public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);

            copyPrivateRawResuorceToPubliclyAccessibleFile();

            ActionBar actionBar = getSupportActionBar();
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
            // add tabs
            Tab tab1 = actionBar
                    .newTab()
                    .setText("Details")
                    .setTabListener(
                            new TabListener<TabFragment>(this, "tab1",
                                    TabFragment.class));
            actionBar.addTab(tab1);

            Tab tab2 = actionBar
                    .newTab()
                    .setText("Maps")
                    .setTabListener(
                            new TabListener<TabFragment>(this, "tab2",
                                    TabFragment.class));
            actionBar.addTab(tab2);

            // check if there is a saved state to select active tab
            if (savedInstanceState != null) {
                getSupportActionBar().setSelectedNavigationItem(
                        savedInstanceState.getInt(ACTIVE_TAB));
            }
        }

TabListener.java

public class TabListener<T extends SherlockFragment> implements
        ActionBar.TabListener {
    private SherlockFragment mFragment;
    private final SherlockFragmentActivity mActivity;
    private final String mTag;
    private final Class<T> mClass;

    public TabListener(Activity activity, String tag, Class<T> clz) {
        mActivity = (SherlockFragmentActivity) activity;
        mTag = tag;
        mClass = clz;
    }


    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // Check if the fragment has already been initialised
        SherlockFragment preInitializedFragment = (SherlockFragment) mActivity
                .getSupportFragmentManager().findFragmentByTag(mTag);
        if (mFragment != null) {
            // If it exists, simply attach it in order to show it
            ft.attach(mFragment);
        } else if (preInitializedFragment != null) {
            mFragment = preInitializedFragment;
            ft.attach(mFragment);
        } else {
            // Not found, so instantiate and add it to the activity
            mFragment = (SherlockFragment) SherlockFragment.instantiate(
                    mActivity, mClass.getName());
            ft.add(android.R.id.content, mFragment, mTag);
        }
    }

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        if (mFragment != null) {
            // Detach the fragment, because another one is being attached
            ft.detach(mFragment);
        }
    }

    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // User selected the already selected tab. Usually do nothing.
    }

TabFragment.java

public class TabFragment extends SherlockFragment {
      // your member variables here
      @Override
      public View onCreateView(LayoutInflater inflater, 
                     ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.main, container, false);
        // do your view initialization here
        return view;
      }

    }

I have two different classes for each tab click named details.java and maps.java. please help me where to place this code. I have also implemented view pager. this is my view pager code for details tab.

DetailsActivity.java

public class DetailsActivity extends BaseSampleActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.place_details_layout);

        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);


    }
}

BaseSampleActivity.java

public abstract class BaseSampleActivity extends FragmentActivity {
    private static final Random RANDOM = new Random();

    TestFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    //FragmentTabHost mTabHost;


    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
    {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.random:
                final int page = RANDOM.nextInt(mAdapter.getCount());
                Toast.makeText(this, "Changing to page " + page, Toast.LENGTH_SHORT);
                mPager.setCurrentItem(page);
                return true;

            case R.id.add_page:
                if (mAdapter.getCount() < 10) {
                    mAdapter.setCount(mAdapter.getCount() + 1);
                    mIndicator.notifyDataSetChanged();
                }
                return true;

            case R.id.remove_page:
                if (mAdapter.getCount() > 1) {
                    mAdapter.setCount(mAdapter.getCount() - 1);
                    mIndicator.notifyDataSetChanged();
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Answer 1

I don't see any code in there for a ViewPager, check out the example code from Jake Wharton's FragmentTabsPager