Android – Button Listener for button in fragment in android

I am new to Android and trying to learn on my own. But I am having a tough time with Fragments. I am creating a simple application to learn fragments. I think it may seem silly but I really can't get this to work.

All I want to do is on the click of a button (buttonSayHi) in Fragment_One, Fragment_One should be replaced by Fragment_Two.

I am not sure when the Fragment code is called and where am I supposed to write my code to call the second fragment. I get the error: Unable to start Activity component.

However, the code works fine if I discard the listener for button and the fragment is displayed within the activity.

I have done considerable research, read the fragments tutorial on developer.android.com and also the tutorial by Lars Vogella. I think my concepts are not clear.

Any help will be appreciated.

The following is the code:

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/frameLayoutFragmentContainer"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</FrameLayout>

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editTextPersonName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/buttonSayHi"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Say Hi" 
        android:onClick="onButtonClicked"/>

</LinearLayout>

fragment_two.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textViewResult"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="I will say Hi!" />

</LinearLayout>

MainActivity.java

package com.example.fragmenttutorial;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;

public class MainActivity extends Activity{

    View view;
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

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

        Fragment fragmentOne = new FragmentOne();

        fragmentTransaction.add(R.id.frameLayoutFragmentContainer, fragmentOne);
        fragmentTransaction.addToBackStack(null);

        fragmentTransaction.commit();
    }

    protected void onButtonClicked()
    {
        if(view.getId() == R.id.buttonSayHi){
            Fragment fragmentTwo = new FragmentTwo();

            fragmentTransaction.replace(R.id.frameLayoutFragmentContainer, fragmentTwo);
            fragmentTransaction.addToBackStack(null);

            fragmentTransaction.commit();   

        }

    }
}

FragmentOne.java

package com.example.fragmenttutorial;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentOne extends Fragment{

    View view;
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_one, container, false);
        return view;
    }

//  protected void onButtonClicked()
//  {
//      if(view.getId() == R.id.buttonSayHi){
//          Fragment fragmentTwo = new FragmentTwo();
//
//          fragmentTransaction.replace(R.id.frameLayoutFragmentContainer, fragmentTwo);
//          fragmentTransaction.addToBackStack(null);
//
//          fragmentTransaction.commit();   
//
//      }
//
//  }
}

I have commented out the on click code in the fragment. I have also tried implementing the onClickListener in the fragment.

FragmentTwo.java

package com.example.fragmenttutorial;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentTwo extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_two, container, false);
        return view;    
    }
}

EDIT: I have removed the line android:onClick="onButtonClicked" from my code in XML. And edited the following files but it still does not work. Can you guys provide me a working example without the android:onClick="onButtonClicked" line.

MainActivity.java

package com.example.fragmenttutorial;

import android.os.Bundle;
import android.view.View;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;

public class MainActivity extends Activity{

    View view;
    Fragment fragmentOne;
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

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

        fragmentOne = new FragmentOne();

        fragmentTransaction.add(R.id.frameLayoutFragmentContainer, fragmentOne);
        fragmentTransaction.addToBackStack(null);

        fragmentTransaction.commit();       
    }
}

FragmentOne.java

package com.example.fragmenttutorial;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;

public class FragmentOne extends Fragment implements OnClickListener{

    View view;
    Fragment fragmentTwo;
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_one, container, false);
        Button buttonSayHi = (Button) view.findViewById(R.id.buttonSayHi);
        buttonSayHi.setOnClickListener(this);
        return view;
    }

    @Override
    public void onClick(View v) {

        fragmentTwo = new FragmentTwo();

        fragmentTransaction.replace(R.id.frameLayoutFragmentContainer, fragmentTwo);
        fragmentTransaction.addToBackStack(null);

        fragmentTransaction.commit();   

    }
}

Thank you for your valuable suggestions.