Fragment overlaying an Activity layout

Question

I'm having problems working with fragments. The problem is: I have a layout in my activity with a ListView. When i select an item in this ListView, instantiates a fragment replacing the activity layout. My result is both fragment and activity contents are showing on screen, overlaying each other. What can I fix that (the fragment just replacing the activity content)? Here is the codes:

activityLayout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:id="@+id/activity" 
android:orientation="vertical">

   <FrameLayout android:id="@+id/fragment_to_replace"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:orientation="vertical"
        android:layout_gravity="center" >

       <TextView android:id="@+id/textView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:text="@string/textView_select_table"
            android:textSize="30dp"/>

       <ListView android:layout_marginTop="20dp"
         android:layout_width="fill_parent"
         android:layout_height="200dp"
         android:id="@+id/listView"
         android:visibility="visible" 
         android:paddingTop="40dp" />

   </FrameLayout>

</LinearLayout>

Activity.java

 public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity);

    View view = findViewById(R.id.activity);    

    //Getting the ListView
    ListView listView = (ListView) view.findViewById(R.id.listView);
    listView.setTextFilterEnabled(true);

    //Setting the adapter
    listView.setAdapter(new Adapter(this));

    listView.setOnItemClickListener(new OnItemClickListener() {

            @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
                long id) {

              //Creates a fragment 
              addFragment();
        }

    });

}

 public void addFragment(){

     MyFragment newFragment;

     FragmentTransaction newFragmentTransaction = getSupportFragmentManager().beginTransaction();

     newFragment = (MyFragment) getSupportFragmentManager()
            .findFragmentById(R.id.fragment);

      if (newFragment == null){
               newFragment = new MyFragment(this, getSupportFragmentManager());
           newFragmentTransaction.replace(R.id.fragment_to_replace, 
                new SelectDrinkFragment(this,   getSupportFragmentManager()));
           newFragmentTransaction.addToBackStack(null);
           newFragmentTransaction.commit();

      }
 }

fragmentLayout.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView  
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:visibility="visible"
     android:text="@string/textView_two"
     android:textSize="20dp"/>

     <LinearLayout android:layout_marginTop="10dp"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">

        <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:text="@string/textView" />

        <TextView android:id="@+id/textView_two"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:visibility="visible"/>

    </LinearLayout>

    <TextView 
      android:id="@+id/textView_three"
      android:layout_marginTop="10dp"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:visibility="visible"
      android:text="@string/textView_three"/>

     <ListView 
   android:layout_width="fill_parent"
   android:layout_height="0dp"
   android:layout_weight="1" 
   android:id="@+id/listView_two"
   android:visibility="visible" 
   android:paddingTop="40dp" />

 </LinearLayout>

Fragment.java

 public View onCreateView(final LayoutInflater inflater, final ViewGroup container,      Bundle saveInstanceState){


    View view = inflater.inflate(R.layout.fragment, container, false);  

    final ListView listView = (ListView) view.findViewById(R.id.listView_two); 

    CharSequence [] list = getResources().getStringArray(R.array.array);

    listView.setAdapter(new ListAdapter(getContext(), list));

    return view;

 }

ListAdapter.java

 public class ListAdapter extends BaseAdapter{

      private Context context;
      private CharSequence[] drinkArraySize;

      public ListAdapter(Context context, CharSequence[] array){
          super();
          this.context = context;
          this.array= array;
      }

      @Override
      public int getCount() {
        return array.length;
      }

      @Override
      public Object getItem(int position) {
        return null;
      }

     @Override
     public long getItemId(int position) {
       return 0;
     }

     public Context getContext(){
          return context;
     }

     @Override
     public View getView(int position, View convertView, ViewGroup parent) {

        LinearLayout linearLayout = new LinearLayout(getContext());

        RadioButton radioButton = new RadioButton(getContext());
        radioButton.setText(array[position]);

        linearLayout.addView(radioButton);

        return linearLayout;
     }

}

Answer 1

FragmentTransaction.replace() looks like it only replaces another fragment (and not just any View), so I'm pretty sure this is expected behavior (or at least, I know I've had this happen to me before). I suppose you have a few options:

1. I don't see in your code anything that would make the fragment's background opaque. You could try that first and see if it helps. If it does, that might be the simplest.

2. You could just set the other items' visibilities to View.GONE at the same time you perform your transaction, but that has some issues as far as backstack goes.

3. You could replace the ListView and TextView with a ListFragment instead. This is probably the "best" way to do it, but also is probably the most work.