Fragment replaced still visible on background

Question

I'm trying to replace one fragment with another one using new navigation drawer pattern. It seems to work but when I choose another option from drawer the new fragment is loaded but both fragments are visible. I'm not using static fragment layout so I don't know where is the problem.

Fragments are loaded through onItemClick method implementing AdapterView.OnItemClickListener on my activity.

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    Fragment fragmentToShow = null;
    // Load desired fragment
    switch (position) {
        case 0: // Authors
            if (fragmentAuthors == null) fragmentAuthors = new FragmentAuthors();
            fragmentToShow = fragmentAuthors;
            break;
        case 1: // Books
            if (fragmentBooks == null) fragmentBooks = new FragmentBooks();
            fragmentToShow = fragmentBooks;
            break;
    }
    FragmentTransaction ft = fragmentManager.beginTransaction();
    ft.replace(R.id.ActivityMain_Drawer_FrameMain, fragmentToShow);
    ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
    ft.commit();
    mDrawerLayout.closeDrawers();
}

Layout

<!-- The main content view -->
<FrameLayout
    android:id="@+id/ActivityMain_Drawer_FrameMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light" />

<!-- The navigation drawer -->
<FrameLayout
    android:id="@+id/ActivityMain_Drawer_FrameMenu"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/background_light">
    <ListView
        android:id="@+id/ActivityMain_Drawer_FrameMenu_List"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</FrameLayout>

Screenshots

https://dl.dropboxusercontent.com/u/1763308/Screenshots/device-2013-05-27-113128.png https://dl.dropboxusercontent.com/u/1763308/Screenshots/device-2013-05-27-113139.png

Answer 1

Try to change the android:background="@android:color/background_light" color to some other color.May be this solves your problem.

Answer 2

I have same issue with some fragments. To solve it I simple set background color for all fragment layouts, for example:

android:background="?android:attr/colorBackground"

Answer 3

I tried a lot of suggested answers here on SO and after expending hours I finally could solve my problem without having to specify a background color on my fragment's layout.

My solution is to override the onBackPressed method on the Activity holding the fragment container, so every time the back button is pressed I will remove the current shown fragment and bring back the previous one:

@Override
public void onBackPressed() {
    List<Fragment> fragments = getSupportFragmentManager().getFragments();
    if (fragments.size() > 1) {

        final Fragment currentFragment = getSupportFragmentManager().findFragmentById(R.id.my_framelayout);
        if (currentFragment != null) {
            getSupportFragmentManager().beginTransaction().remove(currentFragment).commit();
            getSupportFragmentManager().popBackStack();
        }
    } else {
        super.onBackPressed();
    }
}

Hope this helps.