Easiest Android Fragments Tutorial

In this tutorial, we will go through the following topics

• What is a Fragment?
• Why should we go for Fragment?
• Different Approaches for creating a Fragment

What is a Fragment ?

• A Fragment is a piece of an application's user interface or behavior that can be placed in an Activity.
• A Fragment enables more modular Activity design. Its a kind of Sub-Activity.It has its own LifeCycle.
• A Fragment represents a portion of a user interface or an operation that runs within an Activity.

Why should we go for Fragment?

• The main reason why one should go for Fragments is  the convenience of reusing the components in different layouts. 
• With the fragments we have more flexibility and can remove the limitation of having a single activity on the screen at a time. 
• Now we can have a single activity but each activity can comprise of multiple fragments which will have their own layout, events and complete life cycle.

Different Approaches for creating a Fragment:

There are 2 different approaches for calling a Fragment from an Activity.

1. Calling it from Activity's XML [Layout]
2. Calling it from Java code [MainActivity]

Type 1: Creating a Fragment and Calling it from Activitys XML Layout

1.1 Create a Layout for the Fragment.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"    // Height is given as wrap_content so as to distinguish between Fragment and Acivity

    android:background="#00bbff"                // To distinguish between Fragment and Acivity

    tools:context="in.blogspot.easyandroidtutorial.workouts.FirstFragment">

    <TextView

        android:padding="70dp"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="@string/hello_blank_fragment" />

</FrameLayout>

1.2 Create your FirstFragment class that extends Fragment class.

package in.blogspot.easyandroidtutorial.workouts;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class FirstFragment extends Fragment {

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_first, container, false);

    }

}

 

1.3 Create your MainActivity

package in.blogspot.easyandroidtutorial.workouts;

import android.app.Activity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

public class MyActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_my);

}

1.4 Modify your MainAcivity's layout to call the fragment created in 1.1

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:id="@+id/myact"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:background="#ffbb00"    // To distinguish between Fragment and Acivity

    tools:context="in.blogspot.easyandroidtutorial.workouts.MyActivity">

    <fragment

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:name="in.blogspot.easyandroidtutorial.workouts.FirstFragment"

        android:id="@+id/fragment"

        android:layout_alignParentTop="true"

        android:layout_alignParentRight="true"

        android:layout_alignParentEnd="true" />

</RelativeLayout>

Type 2: Creating a Fragment and Calling it from MainActivity's Java code  

Here the Steps 1.1, 1.2 are same.

2.3 Create your MainActivity's Layout

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:id="@+id/myact"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:background="#ffbb00"

    tools:context="in.blogspot.easyandroidtutorial.workouts.MyActivity">

</RelativeLayout>

2.4 Modify your MainActivity to call your FirstFragment

package in.blogspot.easyandroidtutorial.workouts;

import android.app.Activity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

public class MyActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_my);

       // Getting the FragmentManager instance associated with this class

        FragmentManager fm = getFragmentManager(); 

        FragmentTransaction ft = fm.beginTransaction();

        FirstFragment firstFragment = new FirstFragment();

      // Add the FirstFragment instance to your MainActivitys Layout

        ft.add(R.id.myact, firstFragment);

        ft.commit();

    }

That's it. Done. 

Output:

Your comments on this tutorial are most Welcome. Please help improving this blog by your valuable comments. Thanks. Happy Coding