title: FragmentTransaction not doing anything
body: <p>I am learning fragments and below given is my first fragment program. A simple project where I have 2 screens. When I click the next button of first screen, second button needs to be shown. </p>
  
  <p><img src="https://i.stack.imgur.com/F8HyP.png" alt="enter image description here"></p>
  
  <p>I am targeting Android 2.1 and above and <strong>using compatibility package</strong></p>
  
  <h2>AppMainFragmentActivity.java</h2>
  
  <pre><code>public class AppMainFragmentActivity extends FragmentActivity {
    @Override
    protected void onCreate(Bundle arg0) {
      super.onCreate(arg0);
      setContentView(R.layout.app_main_layout);
    }
  }
  </code></pre>
  
  <h2>app_main_layout.xml</h2>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical" android:id="@+id/fragment_container"&gt;
  
     &lt;fragment class="com.research.fragmentstudy.FirstFragment"     
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        android:id="@+id/id_first_fragment"/&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <h2>FirstFragment.java</h2>
  
  <pre><code>public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState) {
       View view = inflater.inflate(R.layout.first_fragment_layout
                   , container,false);
  
       Button nextButton =(Button) view.findViewById(R.id.button);
       nextButton.setOnClickListener(nextListener);
       return view;
    }
  
    private OnClickListener nextListener  =   new OnClickListener() {
       @Override
       public void onClick(View v) {
          FragmentManager fm = ((AppMainFragmentActivity)FirstFragment.this
                             .getActivity()).getSupportFragmentManager();
          SecondFragment fragment = new SecondFragment();
          FragmentTransaction ft = fm.beginTransaction();
          ft.add(R.id.fragment_container, fragment);
          ft.commit();
       }
    };
  }
  </code></pre>
  
  <h2>first_fragment_layout.xml</h2>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent" android:layout_height="fill_parent"
     android:orientation="vertical" android:id="@+id/first_fragment_root"&gt;
  
     &lt;TextView android:layout_height="wrap_content" 
         android:layout_width="fill_parent"
         android:text="Fragment 1" android:gravity="center_horizontal" /&gt;
  
     &lt;Button android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal"
         android:layout_width="wrap_content" android:id="@+id/button"
         android:text="Next" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <h2>SecondFragment.java</h2>
  
  <pre><code>public class SecondFragment extends Fragment {
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.second_fragment_layout,
                       container,false);
        return view;
     }
  }
  </code></pre>
  
  <h2>second_fragment_layout.xml</h2>
  
  <pre><code>&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent" android:layout_height="fill_parent"
     android:orientation="vertical" android:id="@+id/first_fragment_root"&gt;
  
     &lt;TextView android:layout_height="wrap_content" 
        android:layout_width="fill_parent"
        android:text="Fragment 2" android:gravity="center_horizontal" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>Well I am getting the first screen alright. Now,</p>
  
  <h3>What I expected, from my understanding of fragment</h3>
  
  <ul>
  <li>When I click the Next button in screen 1, SecondFragment is created,
  its <code>onCreate()</code> and <code>onCreateView()</code> gets called.</li>
  <li>SecondFragment is shown, and FirstFragment gets destroyed (since I am
  not adding it to backstack). There won't be any animation since
  default fragment transaction doesn't have animation.</li>
  </ul>
  
  <h3>What is happening</h3>
  
  <ul>
  <li>SecondFragment is getting created alright, its <code>onCreate()</code> and <code>onCreateView()</code> gets called.</li>
  <li>But FirstFragment remains on the screen, and second one never showing.</li>
  </ul>
  
  <p>Now my understanding of fragment can be wrong. But I believe when we commit() a fragment transaction, first fragment should be replaced by second one (first one either gets hidden or destroyed). Well nothing seems to be happening. Why is that? Should we manually destroy/hide first fragment?</p>
  
  <p>Note : I know it is a long question for such a basic thing. But I put my entire code since I am not sure where I messed it up. </p>