Working with Fragments in Android

Now that you have understood what fragments are, it’s time for a practical example. To create a fragment you have to define a fragment class and in which extends the class Fragment and overrides the necessary function to create the fragment.


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.ViewGroup;

public class ExampleFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) 
    {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_view, container, false);
    }
}

In the code above, fragment_view layout is the layout of the fragment which is generally separate XML file with name fragment_view.xml

To add a fragment to any android activity, we can follow any of the following 2 approach:

Specify the fragment directly in the main layout folder in XML file and Basic fragment code in XML looks like:


<fragment
    android:name="com.salesforcedriller.android.fragments.ExampleFragment"
    android:id="@+id/fragments"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Where the attribute android:name can hold the fully qualified name of the fragment class.

Or, we can use a FrameLayout to add the fragment at runtime to your activity. You will discuss this approach in detail and first, we will learn how to implement a basic fragment in our android app.

Basic Implementation of Fragment

In this example you will see how to add a fragment to an activity, by adding the fragment directly in our app’s main layout XML file and we will create 2 fragments and will add them to our main activity.


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" > 
    
    <fragment  
        android:id="@+id/fragmentOne"  
        android:name="com.salesforcedriller.fragmentexample.FragmentOne"  
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1" /> 
  
    <fragment  
        android:id="@+id/fragmentTwo"  
        android:name="com.salesforcedriller.fragmentexample.FragmentTwo"  
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_below="@id/fragmentOne" />
  
</RelativeLayout>

Below is the code for our activity_main.xml file in XML file:


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    android:background="#2c2e43" >  
  
    <TextView  
        android:id="@+id/textViewOne"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content" 
        android:textColor="#FFFFFF"
        android:gravity="center_horizontal"
        android:text="First Fragment" />
  
</LinearLayout>

And the corresponding fragment class FragmentOne can be:


import android.app.Fragment;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
public class FragmentOne extends Fragment {  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) 
    {  
        // TODO Auto-generated method stub  
        return inflater.inflate(R.layout.fragment_one, container, false);  
    }  
  
}

Similarly, the layout XML file and the class for the second fragment can be:

fragment_two.xml


<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical"  
    android:background="#ff9100" >  
  
    <TextView  
        android:id="@+id/textViewTwo"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:gravity="center_horizontal"
        android:text="Second Fragment" />
  
</LinearLayout>

FragmentTwo.java


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) 
    {  
        // TODO Auto-generated method stub  
        return inflater.inflate(R.layout.fragment_two, container, false);  
    }  
  
}

Finally, the code for the main activity class MainActivity.java can be as follows:

import android.os.Bundle;  
import android.app.Activity;  
import android.view.Menu;  
public class MainActivity extends Activity {  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
    }  
}

Once everything is in place and run the android app to see the output.

Output Screen

Learn Android

Working with Fragments in Android