How to get fragment to be viewed correctly

Question

I am currently doing a lab and I am getting a strange error. Everything compiles fine and the app runs fine but when I click on a name, It shows the twitter feed but also still shows the Names of the people as in overlaying one view on top of another.

Here is my code for MainActivity:

package course.labs.fragmentslab;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.util.Log;

public class MainActivity extends Activity implements
    FriendsFragment.SelectionListener {

private static final String TAG = "Lab-Fragments";

private FriendsFragment mFriendsFragment;
private FeedFragment mFeedFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_activity);

    // If the layout is single-pane, create the FriendsFragment 
    // and add it to the Activity

    if (!isInTwoPaneMode()) {

        mFriendsFragment = new FriendsFragment();

        //TODO 1 - add the FriendsFragment to the fragment_container
        FragmentManager fragM = getFragmentManager();
        FragmentTransaction fragT = fragM.beginTransaction();
        fragT.add(R.id.fragment_container, mFriendsFragment);
        fragT.commit();



    } else {

        // Otherwise, save a reference to the FeedFragment for later use

        mFeedFragment = (FeedFragment) getFragmentManager()
                .findFragmentById(R.id.feed_frag);
    }

}

// If there is no fragment_container ID, then the application is in
// two-pane mode

private boolean isInTwoPaneMode() {

    return findViewById(R.id.fragment_container) == null;

}

// Display selected Twitter feed

public void onItemSelected(int position) {

    Log.i(TAG, "Entered onItemSelected(" + position + ")");

    // If there is no FeedFragment instance, then create one

    if (mFeedFragment == null)
        mFeedFragment = new FeedFragment();

    // If in single-pane mode, replace single visible Fragment

    if (!isInTwoPaneMode()) {

        //TODO 2 - replace the fragment_container with the FeedFragment

        FragmentManager fragM = getFragmentManager();
        FragmentTransaction fragT = fragM.beginTransaction();
        fragT.add(R.id.fragment_container ,mFeedFragment);
        fragT.commit(); 



        // execute transaction now
        getFragmentManager().executePendingTransactions();

    }

    // Update Twitter feed display on FriendFragment
    mFeedFragment.updateFeedDisplay(position);

 }
}

Here is the relevant xml file:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" /

As I said before, everything runs fine, However the activity is retaining one fragment view and then display the other fragment view over it.

I have no idea why.

Answer 1

You need to replace the fragment, not add a new one. This should be done in onItemSelected

fragT.replace(R.id.fragment_container ,mFeedFragment);

I made the same mistake myself initially;-) Good luck!