Android Actionbar Sherlock with Tabs

Question

I am trying to implement ActionBar Sherlock with Tabs below that as shown in the above wire-frame.

Should i use TabActivity ? - since i saw that it is deprecated. Which is the best way to achieve the same.

Answer 1

I implemented this functionality with a SherlockFragmentActivity as tabview container and with SherlockFragment as tabs. Here is a sketch (I omitted the usual Android activity stuff):

This is the tabview activity with two tabs:

public class TabViewActivity extends SherlockFragmentActivity {
  // store the active tab here
  public static String ACTIVE_TAB = "activeTab";

  @Override
  public void onCreate(Bundle savedInstanceState) {
    ..
    final ActionBar actionBar = getSupportActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    // add the first tab which is an instance of TabFragment1
    Tab tab1 = actionBar.newTab()
              .setText("TabTitle1")
              .setTabListener(new TabListener<TabFragment1>(
               this, "tab1", TabFragment1.class));
    actionBar.addTab(tab1);

    // add the second tab which is an instance of TabFragment2
    Tab tab2 = actionBar.newTab()
           .setText("TabTitle2")
           .setTabListener(new TabListener<TabFragment2>(
                this, "tab2", TabFragment2.class));
    actionBar.addTab(tab2);

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

  @Override
  protected void onSaveInstanceState(Bundle outState) {
    // save active tab
    outState.putInt(ACTIVE_TAB,
            getSupportActionBar().getSelectedNavigationIndex());
    super.onSaveInstanceState(outState);
  }
}

And this is the TabFragment that holds a tab's content:

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.fragment_va_esh, container, false);
    ... // do your view initialization here
    return view;
  }

}

And finally this is the TabListener that handles tab switches:

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

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

  public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // Check if the fragment is already initialized
    if (mFragment == null) {
      // If not, instantiate and add it to the activity
      mFragment = (TabFragment) Fragment.instantiate(
                        mActivity, mClass.getName());
      mFragment.setProviderId(mTag); // id for event provider
      ft.add(android.R.id.content, mFragment, mTag);
    } else {
      // If it exists, simply attach it in order to show it
      ft.attach(mFragment);
    }

  }

  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.
  }
}