Friday 10 February 2012

Fragments

Fragments are very useful in modularizing the code and UI. Fragment's use increases reusability in the project.

In this tutorial:

1.  How to use fragments with activity.
2.  Getting click events in the activity from fragments.
3.  Passing data from activity to fragments and fragments to fragments.
4.  Replacing fragments from activity and from fragment to fragment.

Note:
Here we will create one activity MainActivity and 3 fragments MainFragment, InputFragment, DetailFragment.
We will take some input from user in one fragments and will show the entered values in another fragments.

Let's start:

1.  Create a android project.
2.  Create a MainActivity.

MainActivity.java
public class MainActivity extends FragmentActivity implements ActivityListener{
    /** Called when the activity is first created.
     *  ActivityListener is the interface which is used
     *  to get callback from fragment.
     */

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //Fragments are added programmatically here...
        MainFragment fragment = new MainFragment();
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.frameLayout, fragment);
        transaction.commit();

    }

    public void getData(Bundle bundle) {
        if ( bundle != null ) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            DetailFragment detailFragment = new DetailFragment();
            detailFragment.setArguments(bundle);
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            transaction.replace(R.id.frameLayout, detailFragment);
            transaction.commit();
        }
    }

}

main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/frameLayout" >

</FrameLayout>

Note: To add fragments inside xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/frameLayout" >

<fragment 
  android:name="com.fragmentdemo.fragment.MainFragment"
  android:id="@+id/fragment"
  android:layout_weight="1"
  android:layout_width="0dp"
  android:layout_height="fill_parent" />

</FrameLayout>

3.  Create MainFragment.

MainFragment.java

public class MainFragment extends Fragment{

    private Button mInput;
   /**
     * Define Click listener for the button.
     */
    private OnClickListener inputClickListener = new OnClickListener() {
        public void onClick(View v) {
            FragmentManager fragmentManager = getFragmentManager();
            InputFragment inputFragment = new InputFragment();
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            transaction.replace(R.id.frameLayout, inputFragment);
            transaction.addToBackStack(null);
            transaction.commit();
        }
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View contentView = inflater.inflate(R.layout.main_frag, null);
        contentView.setDrawingCacheEnabled(false);

        mInput = (Button)contentView.findViewById(R.id.btnInput);

        return contentView;
    }

    @Override
    public void onStart() {
        super.onStart();
        mInput.setOnClickListener(inputClickListener);
    }

}

main_frag.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:gravity="center"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btnInput"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Add User Details"
        android:textSize="20dp" />

</LinearLayout>

4.  Create InputFragment.

InputFragment.java

public class InputFragment extends Fragment{

    private ActivityListener mListener;
    private Button mSubmit;
    private EditText mName, mOccupation, mDesignation;

    private OnClickListener submitClickListener = new OnClickListener() {
        public void onClick(View v) {
            if (mName.getText().toString().trim().length() == 0|| mOccupation.getText().toString().trim().length() == 0 || mDesignation.getText().toString().trim().length() == 0 ) {
            Toast.makeText( getActivity(), "Field can not be left empty.", Toast.LENGTH_SHORT).show();
            }
            else {
                Bundle bundle = new Bundle();
                bundle.putString("name", mName.getText().toString());
                bundle.putString("occupation", mOccupation.getText().toString());
                bundle.putString("designation", mDesignation.getText().toString());

        //Method1: Pass data to activity and then to fragment.
                if ( mListener != null )
                    mListener.getData(bundle);

        //Method2: pass data to fragment directly.
        FragmentManager fragmentManager = getFragmentManager();
        DetailFragment detailFragment = new DetailFragment();
        detailFragment.setArguments(bundle);
        FragmentTransaction transaction = fragmentManager.beginTransaction();
                transaction.replace(R.id.frameLayout, detailFragment);
        transaction.remove(InputFragment.this);
        transaction.commit();
            }
        }
    };

    //Check for interface if activity has implemented it or not.
    @Override
    public void onAttach(Activity activity) {
        // TODO Auto-generated method stub
        super.onAttach(activity);
        try {
            mListener = (ActivityListener)activity;
        }catch (ClassCastException e) {
            Toast.makeText( activity, "Activity must implement this interface.", Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View contentView = inflater.inflate(R.layout.input_frag, null);
        contentView.setDrawingCacheEnabled(false);

        mSubmit = (Button)contentView.findViewById(R.id.btnSubmit);
        mName = (EditText)contentView.findViewById(R.id.editName);
        mOccupation = (EditText)contentView.findViewById(R.id.editOccupation);
        mDesignation = (EditText)contentView.findViewById(R.id.editDesignation);

        Bundle bundle = getArguments();
        if ( bundle != null ) {
            mName.setText(bundle.getString("name"));
            mOccupation.setText(bundle.getString("occupation"));
            mDesignation.setText(bundle.getString("designation"));
        }
        return contentView;
    }

    @Override
    public void onStart() {
         super.onStart();
        mSubmit.setOnClickListener(submitClickListener);
    }

    //Define Interface for callback to activity.
    public interface ActivityListener {
        public void getData (Bundle bundle);
    }

}

input_frag.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"
    android:padding="20dp" >

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name"
        android:textSize="20dp" />

    <EditText
        android:id="@+id/editName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name"
        android:textSize="20dp"
        android:padding="10dp"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/occupation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Occupation"
        android:textSize="20dp"
        android:layout_marginTop="20dp" />

    <EditText
        android:id="@+id/editOccupation"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your Occupation"
        android:textSize="20dp"
        android:padding="10dp"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/designation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Designation"
        android:textSize="20dp"
        android:layout_marginTop="20dp" />

    <EditText
        android:id="@+id/editDesignation"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your Designation"
        android:textSize="20dp"
        android:padding="10dp"
        android:layout_marginTop="20dp" />

    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:textSize="20dp"
        android:layout_marginTop="20dp" />

</LinearLayout>

5.  Create DetailFragment.

DetailFragment.java

public class DetailFragment extends Fragment{

    private TextView mInfo;
    private Button mEditDetail, mClose;
    private Bundle mBundleData;

    private OnClickListener editClickListener = new OnClickListener() {
        public void onClick(View v) {
            InputFragment inputFragment = new InputFragment();
            inputFragment.setArguments(mBundleData);
            getFragmentManager().beginTransaction().
            replace(R.id.frameLayout, inputFragment).addToBackStack(null).commit();
        }
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View contentView = inflater.inflate(R.layout.detail_frag, null);
        contentView.setDrawingCacheEnabled(false);

        mInfo = (TextView)contentView.findViewById(R.id.detail);
        mEditDetail = (Button)contentView.findViewById(R.id.btnEdit);
        mBundleData = getArguments();
        if ( mBundleData != null ) {
            mInfo.setText("Name:  " + mBundleData.getString("name") + "\n"
                    + "Occupation:  " + mBundleData.getString("occupation") + "\n"
                    + "Designation:  " + mBundleData.getString("designation") + "\n" );
        }
        return contentView;
    }

    @Override
    public void onStart() {
        super.onStart();
        mEditDetail.setOnClickListener(editClickListener);
    }

}

detail_frag.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"
    android:gravity="center" >

    <TextView
        android:id="@+id/detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp" />

    <Button
        android:id="@+id/btnEdit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Edit User Details"
        android:textSize="20dp" />

</LinearLayout>

Source:

profile for Vineet Shukla at Stack Overflow, Q&A for professional and enthusiast programmers

9 comments:

  1. Its really nice. Thanks for the tutorial.
    Im a new bie.. my task is on onClick of a list in one fragment ,i should get the content of the row of the list in the other fragment..
    How can i do that.. plz help

    ReplyDelete
    Replies
    1. Hi Kiran, It was nice to hear that this tutorial helped you.
      I have mentioned in the tutorial: "Passing data from activity to fragments and fragments to fragments."

      I hope you are able to get the data from the list. If you still feel any issue then you can share your code, I will help you then.

      Delete
  2. Vineet, It's a good tutorial. What if fragment A doesn't have any event handler like button to pass data from A to B, but we need to pass data from fragment A to fragment B with just a swipe? Is it necessary to implement swipe gestures or any other way? Thanks!!

    ReplyDelete
    Replies
    1. Hi Sandeep, there is no need to implement swipe gestures. You can use the fragment lifecycle's methods onPause(), onStop() etc for this.
      Refer this link: http://developer.android.com/guide/topics/fundamentals/fragments.html#Creating

      Delete
  3. I am getting the error that FragmentActivity and ActivityListener can't be resolved.
    Please help me with it.

    Thanks

    ReplyDelete
  4. Hi, I am using fragment.EditText display in fragment ui screen but I am not able to enter any Text in EditText . I want to use The value of editText in fragment.

    ReplyDelete
  5. Awesome Tutorial simple and smart..Thanks vineet

    ReplyDelete