Calling addToBackStack() on a Fragment that is added via ActionBar

Issue

So basically, I have a simple Fragment that uses an AsyncTask to download a bitmap from a URL and then displays it inside an ImageView.

This is the Fragment's code:

public class TestFragment extends Fragment {

public TestFragment () {}

private String pictureUrl = "https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/532762_10150739418088211_1186720820_n.jpg";

private TextView sampleText;
private ImageView sampleImage;

public View onCreateView(LayoutInflater inflater, ViewGroup container, 
        Bundle savedInstanceState) {

    View root = inflater.inflate(R.layout.fragment_view, container, false); 
    String textToSet = "Section Three";

    sampleText = (TextView) root.findViewById(R.id.textView1);
    sampleText.setText(textToSet);

    sampleImage = (ImageView) root.findViewById(R.id.imageView1);
    DownloadImageTask task = new DownloadImageTask(pictureUrl, root, sampleImage.getId());
    task.execute();

    return root;   
}       
}

This same fragment is displayed three times, one per each tab inside an ActionBar. The problem I am having is that each time the user selects a different tab, the previous one is destroyed, and when the user navigates back to the original tab, the content needs to be redownloaded. I want to make sure that the least amount of resources are consumed (saving both Data, and valuable overHead processing).

Here is the Fragment Container activity:

public class LayoutContainer extends Activity{

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_layout_container);      

    if (savedInstanceState != null) {
        return;
    }

    final ActionBar actionBar = getActionBar();
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    Tab tab = actionBar.newTab()
            .setText(R.string.title_section1)
            .setTabListener(new TabListener<TestFragment>(
                    this, "one", TestFragment.class));
    actionBar.addTab(tab);

    tab = actionBar.newTab()
            .setText(R.string.title_section2)
            .setTabListener(new TabListener<TestFragment>(
                    this, "two", TestFragment.class));
    actionBar.addTab(tab);

    tab = actionBar.newTab()
            .setText(R.string.title_section3)
            .setTabListener(new TabListener<TestFragment>(
                    this, "three", TestFragment.class));
    actionBar.addTab(tab);

}

public static class TabListener<T extends Fragment> implements ActionBar.TabListener {

    private Fragment 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) {
        if (mFragment == null) {
            mFragment = Fragment.instantiate(mActivity, mClass.getName());
        }
        ft.replace(android.R.id.content, mFragment, mTag);
    }

    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        ft.addToBackStack(null);
        ft.commit();
    }

    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }
}

I currently have it set to call ft.replace() on the OnTabSelected() method, but I had previously tried with ft.add(). Same goes for my current ft.addToBackStack() call inside OnTabUnselected(), I initially had it set for simply calling ft.detach() but that was doing the same thing I described as being my problem. It loads that way, but it has to download the image every single time.

Now, I have tried calling addToBackStack() but the app force closes stating the FragmentTransaction CANNOT be added to the back stack. I also tried in the past to cache the image offline, to avoid data consumption, the app would still need to parse the image from a local URI and use processing power.

Any ideas I can try?

FYI, Yes, I know that the same fragment is loading the same image on all three tabs. This is merely a test project that is intended to help me better understand the lifecycle of Fragments.

Solution

So After a lot of reading I realized that the important code block is not done on your TabListener but in fact done on each Fragment that you use.

The fragment WILL be detached when navigating away from it, but that does not mean I cannot retain it state using onSaveInstanceState(...).

Here is simple implementation of what was needed to retain the Fragment's state after it being detached.

public class TimelineFragment extends ListFragment{
...

public TimelineFragment () {}

public void onSaveInstanceState(Bundle outState){
    getActivity().getFragmentManager().putFragment(outState, TAG, this);        
}

public void onRetoreInstanceState(Bundle inState){
    getActivity().getFragmentManager().getFragment(inState, TAG);
}
...
}

We are saving the Fragment by calling putFragment(), and restoring it by calling getFragment(). Pretty darn simple, and I never thought of it.

Answered By - daniel_c05