Replacing Fragment : Didn't work

I have a Button in Fragment. If Button is clicked it has to replace the Fragment with another Fragment. The Fragments in activity_main.xml is created statically.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#efefef"
android:orientation="vertical"
tools:context=".MainActivity" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3" >

    <Button
        android:id="@+id/bHome"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:background="#000000"
        android:padding="3dp"
        android:text="Home"
        android:textColor="#ffffff" />

    <Button
        android:id="@+id/bEvents"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:background="#f8bd0e"
        android:padding="3dp"
        android:text="Events" />

    <Button
        android:id="@+id/bNearby"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:background="#f8bd0e"
        android:padding="3dp"
        android:text="Nearby" />
</LinearLayout>

<LinearLayout
    android:id="@+id/llFragment"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <fragment
        android:id="@+id/fHome"
        android:name="com.example.fragmentstack.Home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />

    <fragment
        android:id="@+id/fEvents"
        android:name="com.example.fragmentstack.Events"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />

    <fragment
        android:id="@+id/fNear"
        android:name="com.example.fragmentstack.NearBy"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </FrameLayout>
</LinearLayout>

The output of activity_main.xml is

Main Activity:

public class MainActivity extends FragmentActivity implements OnClickListener {
Button home, events, near;
Fragment f1, f2, f3, f4;
FragmentManager manager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    home = (Button) findViewById(R.id.bHome);
    events = (Button) findViewById(R.id.bEvents);
    near = (Button) findViewById(R.id.bNearby);

    home.setOnClickListener(this);
    events.setOnClickListener(this);
    near.setOnClickListener(this);

    manager = getSupportFragmentManager();
    f1 = manager.findFragmentById(R.id.fHome);
    f2 = manager.findFragmentById(R.id.fEvents);
    f3 = manager.findFragmentById(R.id.fNear);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
    case R.id.bHome:
        if (home.isPressed()) {
            home.setBackgroundColor(Color.BLACK);
            home.setTextColor(Color.WHITE);
            events.setBackgroundResource(R.color.Yellow);
            near.setBackgroundResource(R.color.Yellow);
            events.setTextColor(Color.BLACK);
            near.setTextColor(Color.BLACK);
            FragmentTransaction transaction = getSupportFragmentManager()
                    .beginTransaction();

            transaction.hide(f2);
            transaction.hide(f3);
            transaction.show(f1);
            transaction.commit();
        }
        break;
    case R.id.bEvents:
        if (events.isPressed()) {
            events.setBackgroundColor(Color.BLACK);
            events.setTextColor(Color.WHITE);
            home.setBackgroundResource(R.color.Yellow);
            near.setBackgroundResource(R.color.Yellow);
            home.setTextColor(Color.BLACK);
            near.setTextColor(Color.BLACK);
            FragmentTransaction transaction1 = getSupportFragmentManager()
                    .beginTransaction();
            transaction1.hide(f1);
            transaction1.hide(f3);
            transaction1.show(f2);
            transaction1.commit();
        }
        break;
    case R.id.bNearby:
        if (near.isPressed()) {
            near.setBackgroundColor(Color.BLACK);
            near.setTextColor(Color.WHITE);
            home.setBackgroundResource(R.color.Yellow);
            events.setBackgroundResource(R.color.Yellow);
            home.setTextColor(Color.BLACK);
            events.setTextColor(Color.BLACK);
            FragmentTransaction transaction2 = getSupportFragmentManager()
                    .beginTransaction();
            transaction2.hide(f1);
            transaction2.hide(f2);
            transaction2.show(f3);
            transaction2.commit();
        }
        break;
    }
}

  }

Now Home extends Fragment. the xml layout of home has one Button and one TextView.Here onClicking Button I'm replacing the Home Fragment with new Update Profile Fragment.

public class Home extends Fragment {
Button btn;
View view;  


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    view = inflater.inflate(R.layout.home, container, false);
    init();

    return view;
}

private void init() {
    btn = (Button) view.findViewById(R.id.bUpdate);
    btn.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            Fragment fg = new UpdateProfile();
            FragmentTransaction fragmentTransaction = getFragmentManager()
                    .beginTransaction();
            fragmentTransaction.replace(R.id.fragment_container, fg);
            fragmentTransaction.addToBackStack(null);
            fragmentTransaction.commit();
        }
    });

}

  }

R.id.fragment_container is present in activity_main.xml. Now the problem I'm facing is when clicking the button it is not replacing the fragment with new Fragment.

Now the problem I'm facing is when clicking the button it is not replacing the fragment with new Fragment.

The transaction does occur but it's not visible as you add that fragment to a container that will be pushed out of the screen(all of your layout's fragments have width set to match_parent so they will fill the LinearLayout's width and the FrameLayout will be pushed out of the screen). Also you do the replace transaction on a container that doesn't hold the previous fragments, this means that the old fragments will still be visible on the screen(plus the new added fragment).

The system you setup is not the proper way to handle your scenario. From the images it seems you have a tab like layout and in this case you should have only one container in which all of your fragments will reside(to avoid the extra work of showing/hiding the proper fragment and also provide a decent BACK button experience).

Secondly if you're going to work(do transactions) with those fragments you should really add them programmatically as replace will not go well with a static fragments. There are a lot of tutorials out there on how to make a tab like layout with fragments.