Save fragment changes in navigation drawer

Question

I am currently developing an android app that uses a navigation drawer with fragments, each containing ImageButtons. The user can change the background image of these ImageButtons.

However, when I make a change, switch to a different fragment, and then switch back to the initial fragment, the changes are reset (the ImageButton backgrounds are reset to default).

I understand that my current code recreates the fragment each time they are selected; how can I simply reopen the fragments in the state I left them?

PS. A solution that allows me to save these changes even when the app is closed and reopened would be great. Thanks!

Here is my main drawer activity method:

public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();
        android.app.FragmentManager fragmentManager = getFragmentManager();

        if (id == R.id.nav_agni) {
            fragmentManager.beginTransaction().replace(R.id.content_frame, new FragmentAgni()).commit();
        } else if (id == R.id.nav_ah_muzen_cab) {
            fragmentManager.beginTransaction().replace(R.id.content_frame, new FragmentAhMuzenCab()).commit();
        } else if (id == R.id.nav_ah_puch) {
            fragmentManager.beginTransaction().replace(R.id.content_frame, new FragmentAhPuch()).commit();
        } else if (id == R.id.nav_amaterasu) {
            fragmentManager.beginTransaction().replace(R.id.content_frame, new FragmentAmaterasu()).commit();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

And here is one of my fragments (they are all nearly the same):

public class FragmentAhMuzenCab extends Fragment {

    View myView;

    public FragmentAhMuzenCab() {
    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        myView = inflater.inflate(R.layout.god_ah_muzen_cab, container, false);

        //ImageButtons
        //Starter Item + Relics
        final ImageButton starter = (ImageButton) myView.findViewById(R.id.imageStarterItem);
        final ImageButton relic1 = (ImageButton) myView.findViewById(R.id.imageRelic1);
        final ImageButton relic2 = (ImageButton) myView.findViewById(R.id.imageRelic2);

        //Full Build
        final ImageButton item1 = (ImageButton) myView.findViewById(R.id.imageItem1);
        final ImageButton item2 = (ImageButton) myView.findViewById(R.id.imageItem2);
        final ImageButton item3 = (ImageButton) myView.findViewById(R.id.imageItem3);

        final ImageButton item4 = (ImageButton) myView.findViewById(R.id.imageItem4);
        final ImageButton item5 = (ImageButton) myView.findViewById(R.id.imageItem5);
        final ImageButton item6 = (ImageButton) myView.findViewById(R.id.imageItem6);

        starter.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysStarterFragment dialog = ItemPhysStarterFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysStarterFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        starter.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "starterDialog");
            }
        });

        relic1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemRelicFragment dialog = ItemRelicFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemRelicFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        relic1.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "relic1Dialog");
            }
        });

        relic2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemRelicFragment dialog = ItemRelicFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemRelicFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        relic2.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "relic2Dialog");
            }
        });

        item1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysFragment dialog = ItemPhysFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        item1.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "item1Dialog");
            }
        });

        item2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysFragment dialog = ItemPhysFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        item2.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "item2Dialog");
            }
        });

        item3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysFragment dialog = ItemPhysFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        item3.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "item3Dialog");
            }
        });

        item4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysFragment dialog = ItemPhysFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        item4.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "item4Dialog");
            }
        });

        item5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysFragment dialog = ItemPhysFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        item5.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "item5Dialog");
            }
        });

        item6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysFragment dialog = ItemPhysFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        item6.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "item6Dialog");
            }
        });

        return myView;
    }
}

Answer 1

Yes, the fragments are recreated, I suggest you store the resource id for the image in the SharedPreferences:

starter.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                ItemPhysStarterFragment dialog = ItemPhysStarterFragment.newInstance();
                dialog.setOnListItemSelectedListener(new ItemPhysStarterFragment.OnListItemClickedListener() {
                    public void onListItemClick(int resourceId) {
                        ...store the resourceId for this image in the Shared Preferences
                        starter.setImageResource(resourceId);
                    }
                });
                dialog.show(getFragmentManager(), "starterDialog");
            }
        });

then in your Fragment's onCreate you can do something like:

starter.setImageResource(...get resource id from shared prefs);