How to replace a Fragment in an ActionBar in mode NAVIGATION_MODE_TABS

In the post Tab Layout in Android with ActionBar and Fragment I wrote an example about tabs in an action bar where each label open a fragment that you can not change at runtime.
In this post I explain how to replace a fragment with an other using a button.

1. follow every step of the post Tab Layout in Android with ActionBar and Fragment
2. add the following rows to the file values/strings.xml
   
   XHTML

   <string name="body1b">an other body one</string> <string name="button">open tab 1 bis</string> <string name="tag_bis">bis</string>

   1 2 3

   <string name="body1b">an other body one</string>     <string name="button">open tab 1 bis</string>     <string name="tag_bis">bis</string>

3. insert a button in the linear layout in the file res/layout/tab1.xml
   
   XHTML

   <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button" />

   1 2 3 4 5

   <Button         android:id="@+id/button1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/button" />

4. create the file layout/tab1b.xml
   
   XHTML

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab1b" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <TextView android:id="@+id/textView1b" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/body1b" /> </LinearLayout>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/tab1b"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:gravity="center">       <TextView         android:id="@+id/textView1b"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:text="@string/body1b" />   </LinearLayout>

5. edit the file eu/lucazanini/Tab1Fragment.java
   
   Java

   package eu.lucazanini; import android.app.Fragment; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.LinearLayout; public class Tab1Fragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { LinearLayout ll = (LinearLayout) inflater.inflate(R.layout.tab1, container, false); Button button = (Button) ll.findViewById(R.id.button1); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Fragment fragment = new Tab1bFragment(); FragmentTransaction ft = getFragmentManager() .beginTransaction(); ft.add(android.R.id.content, fragment, getResources() .getString(R.string.tag_bis)); ft.hide(getFragmentManager().findFragmentByTag( getResources().getString(R.string.label1))); ft.commit(); } }); return ll; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

   package eu.lucazanini;   import android.app.Fragment; import android.app.FragmentTransaction; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.LinearLayout;   public class Tab1Fragment extends Fragment {       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,     Bundle savedInstanceState) {   LinearLayout ll = (LinearLayout) inflater.inflate(R.layout.tab1, container, false);   Button button = (Button) ll.findViewById(R.id.button1); button.setOnClickListener(new OnClickListener() {       @Override     public void onClick(View v) { Fragment fragment = new Tab1bFragment(); FragmentTransaction ft = getFragmentManager() .beginTransaction(); ft.add(android.R.id.content, fragment, getResources() .getString(R.string.tag_bis)); ft.hide(getFragmentManager().findFragmentByTag( getResources().getString(R.string.label1))); ft.commit();     } }); return ll;     } }

   
   the button adds the fragment with the tag “bis” and layout tab1b.xml and hides the fragment with tag “one” and layout tab1.xml
6. create the file eu/lucazanini/Tab1bFragment.java
   
   Java

   package eu.lucazanini; import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; public class Tab1bFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return (LinearLayout) inflater .inflate(R.layout.tab1b, container, false); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   package eu.lucazanini;   import android.app.Fragment; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout;   public class Tab1bFragment extends Fragment {       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,     Bundle savedInstanceState) {   return (LinearLayout) inflater .inflate(R.layout.tab1b, container, false);     }   }

7. replace the following methods of thew inner class TabListener in the file eu/lucazanini/TabActionBarActivity.java
   • onTabSelected
     
     Java

     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); } // if a fragment with tag "bis" exists, detach it and show the // fragment of the selected tab Fragment f = getFragmentManager().findFragmentByTag( getResources().getString(R.string.tag_bis)); if (f != null) { ft.detach(f); ft.show(mFragment); } }

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

     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);     }     // if a fragment with tag "bis" exists, detach it and show the     // fragment of the selected tab     Fragment f = getFragmentManager().findFragmentByTag(     getResources().getString(R.string.tag_bis));     if (f != null) { ft.detach(f); ft.show(mFragment);     } }

   • onTabReselected
     
     Java

     public void onTabReselected(Tab tab, FragmentTransaction ft) { // User selected the already selected tab. Fragment f = getFragmentManager().findFragmentByTag( getResources().getString(R.string.tag_bis)); if (f != null) { ft.detach(f); ft.show(mFragment); } }

     1 2 3 4 5 6 7 8 9

     public void onTabReselected(Tab tab, FragmentTransaction ft) {     // User selected the already selected tab.     Fragment f = getFragmentManager().findFragmentByTag(     getResources().getString(R.string.tag_bis));     if (f != null) { ft.detach(f); ft.show(mFragment);     } }

   if you select or reselect a tab and if the fragment with tag “bis” exists then this fragment is removed and it is shown that with tag “one”

8. launch the app
   • tab “ONE” selected
     
   • tab “ONE” selected + button
     
   • tab “TWO” selected