FragmentTransaction replace not actually replacing but drawing the two on top of each other

Question

I've been following http://developer.android.com/training/implementing-navigation/nav-drawer.html to set up a navigation drawer in my app. Once an item in the drawer has been selected, the current fragment should be removed and replaced with a new ListFragment. However, both remain and are drawn on top of each other.

mainpage.xml:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light">
    <!-- The main content view -->
    <RelativeLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <fragment
                android:id="@+id/mainListFragment"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:name="com.example.SpeakEasy.MainPageListFragment"
                android:layout_alignParentLeft="true"
                android:layout_margin="2dp">

        </fragment>
    </RelativeLayout>

    <!-- The navigation drawer -->
    <ListView
            android:id="@+id/left_drawer"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:choiceMode="singleChoice"
            android:divider="@android:color/darker_gray"
            android:dividerHeight="0dp"
            android:background="@android:color/background_light">
    </ListView>


</android.support.v4.widget.DrawerLayout>

MainPage.java:

public class MainPage extends SherlockFragmentActivity {

    public static AmazonClientManager clientManager = null;
    protected UiLifecycleHelper uiHelper;

    private String[] categoryTitles;
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        clientManager = new AmazonClientManager(getSharedPreferences("speakeasySDB", Context.MODE_PRIVATE));
        uiHelper = new UiLifecycleHelper(this, null);
        uiHelper.onCreate(savedInstanceState);
        setTitle("Main Feed");
        setContentView(R.layout.mainpage);

        categoryTitles = getResources().getStringArray(R.array.navigationDrawerCategories);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getSupportActionBar().setTitle(getTitle());
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getSupportActionBar().setTitle(getTitle());
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

        // Set the adapter for the list view
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.activity_list_item, android.R.id.text1, categoryTitles));
        // Set the list's click listener
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());


    }
private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView parent, View view, int position, long id) {
            selectItem(position);
        }
    }

    /**
     * Swaps fragments in the main content view
     */
    private void selectItem(int position) {
        android.support.v4.app.FragmentManager fragmentManager = getSupportFragmentManager();
        android.support.v4.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        Fragment fragment = null;
        // Create a new fragment and specify the planet to show based on position
        switch (position) {
            case 0:
                Toast.makeText(this, "Following not yet implemented", Toast.LENGTH_SHORT).show();
                break;
            case 1:
                fragment = new HomePageListFragment();
                fragmentTransaction.replace(R.id.mainListFragment, fragment).commit(); //R.id.content_frame didn't work either
                break;
        }

        // Highlight the selected item, update the title, and close the drawer
        mDrawerList.setItemChecked(position, true);
        getSupportActionBar().setTitle(categoryTitles[position] + "Quotes");
        mDrawerLayout.closeDrawer(mDrawerList);
    }

}

Any ideas what could be happening?

Answer 1

I see that you have fragment declared in the layout file but you are trying to use it in a dynamic way. Replace the fragment with FrameLayout/LinearLayout.

Then you can do transaction.replace(id,fragment,tag).commit();

Hope this helps.