title: Android Action Bar tabs - inner fragment transaction issues
body: <p>I have successfully set up tabs in the Action Bar using the following example from Google themselves at <a href="http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/app/FragmentTabs.html" rel="nofollow noreferrer">http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/app/FragmentTabs.html</a> as a bases. My code looks like so:</p>
  
  <pre><code>public class Main extends SherlockFragmentActivity {
  
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);        
  
      getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
  
      ActionBar.Tab tab1 = getSupportActionBar().newTab();
      tab1.setIcon(R.drawable.ic_tab_example_selected);
      tab1.setTabListener(new TabListener&lt;Tab1&gt;(this, "A", Tab1.class));
      getSupportActionBar().addTab(tab1);
  
      ActionBar.Tab tab2 = getSupportActionBar().newTab();
      tab2.setIcon(R.drawable.ic_tab_example_selected);
      tab2.setTabListener(new TabListener&lt;Tab2&gt;(this, "B", Tab2.class));
      getSupportActionBar().addTab(tab2);
  
      ActionBar.Tab tab3 = getSupportActionBar().newTab();
      tab3.setIcon(R.drawable.ic_tab_example_selected);
      tab3.setTabListener(new TabListener&lt;Tab3&gt;(this, "C", Tab3.class));
      getSupportActionBar().addTab(tab3);
  
      ActionBar.Tab tab4 = getSupportActionBar().newTab();
      tab4.setIcon(R.drawable.ic_tab_example_selected);
      tab4.setTabListener(new TabListener&lt;Tab4&gt;(this, "D", Tab4.class));
      getSupportActionBar().addTab(tab4);     
  }
  
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      MenuInflater inflater = getSupportMenuInflater();
      inflater.inflate(R.menu.menu, menu);
      return true;
  }
  
  public class TabListener&lt;T extends Fragment&gt; implements ActionBar.TabListener {
      private Fragment mFragment;
      private final SherlockFragmentActivity mActivity;
      private final String mTag;
      private final Class&lt;T&gt; mClass;
  
      /** Constructor used each time a new tab is created.
        * @param activity  The host Activity, used to instantiate the fragment
        * @param tag  The identifier tag for the fragment
        * @param clz  The fragment's Class, used to instantiate the fragment
        */
      public TabListener(SherlockFragmentActivity activity, String tag, Class&lt;T&gt; clz) {
          mActivity = activity;
          mTag = tag;
          mClass = clz;
      }       
  
      /* The following are each of the ActionBar.TabListener callbacks */
  
      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 = Fragment.instantiate(mActivity, mClass.getName());
              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.
      }
  }
  }
  </code></pre>
  
  <p>With this I have multiple tabs that switch between the different fragments in each tab. However, my problem starts when in a tab and changing fragments from within a tab. This is the problem:</p>
  
  <p>When I am in <strong>Tab 1</strong>, I swap the initial fragment loaded in the tab with a new fragment. I then go to <strong>Tab 2</strong> which shows it's initial fragment. However, the view of the fragment swapped to in <strong>Tab 1</strong> still shows behind <strong>Tab 2</strong> fragment:</p>
  
  <p><img src="https://i.stack.imgur.com/KxkYn.png" alt="Tab 1, Fragment 2">
  <img src="https://i.stack.imgur.com/c8jS2.png" alt="Tab2, Fragment 1"></p>
  
  <p>This is code I am currently using to change the fragment from within <strong>Tab 1</strong>:</p>
  
  <pre><code>// Create new fragment and transaction
      FragmentTransaction transaction = ctx.getFragmentManager().beginTransaction();
      transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right);
  
      // Replace whatever is in the fragment_container view with this fragment,
      // and add the transaction to the back stack
      transaction.replace(container, fragment, tag);
  
      if(addToBackStack)
          transaction.addToBackStack(tag);
  
      // Commit the transaction
      transaction.commit();
  </code></pre>
  
  <p>All this is being accomplished via ActionBar Sherlock and Google v4 support library.</p>