PreferenceFragment shows up with a transparent background

In an android app that I'm currently working on, I wanted use Android's Preference API to provide an interface to modify some app specific settings. I didn't want to create another Activity or PreferenceActivity for that, and hence I thought of simply using a PreferenceFragment.

Now, in my project I already had a MainActivity (extends ActionBarActivity) which had a MainFragment wired up to it somewhat like this in it's onCreate method:


getSupportFragmentManager().beginTransaction()
 .add(R.id.container, new MainFragment())
 .commit();

And because of that I knew that I had to replace the existing MainFragment with my new SettingsFragment which extended PreferenceFragment. With that in mind, I went ahead and added the following to my MainActivity's onOptionsItemSelected :


getFragmentManager().beginTransaction()
 .replace(R.id.container, new SettingsFragment())
 .addToBackStack(null)
 .commit();

When I saw this work in the emulator, it looked somewhat like this:

Needless to say, I was disappointed with how it looked. I spent a couple of hours trying various other approaches to fix this, which ultimately led me to notice that I was adding the MainFragment using a SupportFragmentManager from the Android v4 support API (android.support.v4.app.FragmentManager), while I was trying to replace the MainFragment with a SettingsFragment using a FragmentManager from android.app.FragmentManager.

The solution was to use any one of the two FragmentManagers and not both of them. I had to choose to use android.app.FragmentManager since I wanted to show a PreferenceFragment which is not supported by the v4 API. That meant, I had to go and change the MainFragment to extend from android.app.Fragment instead of android.support.v4.app.Fragment, which in turn allowed me to do this in my MainActivity's onCreate method:

getFragmentManager().beginTransaction()
 .add(R.id.container, new MainFragment())
 .commit();

As you would expect, that solved the issue for me!