dcsimg
December 10, 2016
Hot Topics:

Working with Fragments in Android Applications

  • December 30, 2015
  • By Vipul Patel
  • Send Email »
  • More Articles »

Introduction to Android Fragments

Fragment is an Android programming aspect that represents a portion of the user interface of what a user sees on the application window. The Android documentation describes Fragment as a portion of user interface in an Activity Object.

In layman's terms, this means an Activity object can be composed of one or more fragments, each having its own user interface definition.

In this Android fragment tutorial, we will learn how to use fragments in Android with code.

The Basics of Android Fragments

Developers can combine one or more fragments to build a single activity or even reuse fragments across multiple activities.

Fragments were introduced in Android 3.0 to improve the user experience. Classically, developers would have to build a new Activity whenever the user interacted with the application. With Fragments, developers now can update another portion of the UI on the screen that corresponds to the user selection,, without needing to move the user to another screen.

A classic example is a news application that allows a user to select the headline on the left side of the application and it then displays the details of the story on the right side corresponding to user selection.

Fragments can be used in the following scenarios:

  • Fragments can be used to build flexible user interfaces across different screen sizes.
  • Fragments can be used to provide Fixed/Scrolling/swipe tab displays.
  • Fragments can be used where dialog boxes are needed.
  • Fragments can be used to build action bar customization with the list and tab modes.

Fragment have the following characteristics

  • A fragment is always embedded in an activity. It does not have existence outside of one.
  • It has its own lifecycle; however, it is directly impacted by the host activity lifecycle.
  • A fragment object processes its own events.
  • Fragments can be dynamically added or removed from an Activity, based on user interaction with the application. This can happen when the host Activity is in the "running" state.
  • Fragments support transaction with an Activity. In other words, you can click the "Back" button and undo a fragment activity when you perform a fragment transaction.

A fragment lives in the ViewGroup of the host Activity's view hierarchy.

Creating a Fragment in Android

Creating a fragment is simple and involves four steps:

  1. Extend Fragment class.
  2. Provide appearance in XML or Java.
  3. Override onCreateView to link the appearance.
  4. Use the Fragment in your activity.

There are three methods, at a minimum, that we need to implement for a fragment.

  • onCreate(): This method is called when the fragment is created by Android System. Use this method to initialize necessary components of the fragment that you want to keep when the fragment is paused/stopped and then resumed.
  • onCreateView(): This method is called when the user interface for the fragment needs to be drawn for the first time. This method returns a view.
  • onPause(): This method is called when the user is leaving the fragment. In this method, tthe app developer needs to commit any pending changes that need to be brought back when the user resumes.

Besides the base Fragment class, the Android platform offers the following three fragment classes:

  • DialogFragment: This class displays a floating dialog.
  • ListFragment: This class displays a list of items managed by an adapter.
  • PreferenceFragrment: This class offers functionality similar to the "Settings" experience.

Let us create a simple application that demonstrates working with Fragment.

Hands On with Android Fragments

Let's create a simple Android application that demonstrates working with Activities.

Fire up Android Studio and Start a new Android Studio Project.

Frag01
Figure 1: Starting a new Android Studio project

Provide FragmentDemo as the Application Name and click Next.

Frag02
Figure 2: Naming the application FragmentDemo

On the next screen, leave the default values and click Next.

Frag03
Figure 3: Leaving the default values in place

On the "Add an activity to Mobile" page, choose "Blank Activity with Fragment." This creates an application with a single activity and a Fragment.

Frag04
Figure 4: Adding a new blank activity

We then are prompted to customize the activity. We will leave the default values unchanged.

Frag05
Figure 5: Again, leaving the default values in place

Click Finish to creating the project files.

Let's look at how Android Studio creates the default application. Open up Project Explorer and expand the /java node and /res node.

Frag06
Figure 6: Expanding the /java and /res nodes

We can see the following:

  • There are two Java files: One for the activity and one for the fragment.
  • There are two layout files: One for the activity and one for the fragment.

The fragment_main.xml file (layout file for the fragment) contains the following. Update the layout file to include the highlighted text. This text will make our fragment stand out when it's loaded into the MainActivity.

<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:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MainActivityFragment"
   android:background="#33FF00">

   <TextView android:text="@string/hello_world"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>
</RelativeLayout>

We can see that it has a very similar content compared to the activity file.

Next, we observe the Activity file, activity_main.xml.

<fragment xmlns:android=
      "http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/fragment"
   android:name="com.example.vipul.fragmentdemo.MainActivityFragment"
   tools:layout="@layout/fragment_main"
   android:layout_width="match_parent"
  android:layout_height="match_parent" />

You can see from the activity layout file that it refers to the fragment layout.

The Java file for Fragment (MainActivityFragment.java) contains the following template code:

package com.example.vipul.fragmentdemo;

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


/**
 * A placeholder fragment containing a simple view.
 */
public class MainActivityFragment extends Fragment {

   public MainActivityFragment() {
   }
   @Override
   public View onCreateView(LayoutInflater inflater,
                            ViewGroup container,
                            Bundle savedInstanceState) {
      return inflater.inflate(R.layout.fragment_main,
         container, false);
   }
}

We can see that the onCreateView method has been implemented as an override and it calls the helper inflater class to create the view.

Let's make one change in /res/values/strings.xml to update "Hello World!" to "Hello from fragment!" because this text is being used in the fragment.

When we run our application, we will see the following when the application loads:

Frag07
Figure 7: The application's output

We can see that the fragment was loaded (the string helps us correlate).

Now, we will create another simple application where we will demo creating a Fragment in a different manner (without using Android Studio support for Fragments).

Create a new project called FragmentDemo2 and this time choose the template for a blank activity.

Frag08
Figure 8: Creating a second new project

Frag09
Figure 9: Choosing the "Phone and Tablet" option

Frag10
Figure 10: Selecting a blank activity

Frag11
Figure 11: Naming this "MainActivity"

Click Finish to create the project.

Now, on the Project Explorer, add a new class.

Frag12
Figure 12: Adding a new class from Project Explorer

Frag13
Figure 13: Naming the new class "MyFragment"

We will see that a new Java file, MyFragment.java, is created with the following content:

package com.example.vipul.fragmentdemo2;

import android.app.Fragment;

/**
 * Created by Vipul on 11/21/2015.
 */
public class MyFragment {

}

As you recall from the basics mentioned before, we need to extend the Fragment class to create an Android fragment.

Make the following highlighted change in your MyFragment class.

package com.example.vipul.fragmentdemo2;

import android.app.Fragment;

/**
 * Created by Vipul on 11/21/2015.
 */
public class MyFragment extendsFragment {

}

Next, we need to create a layout file for the fragment. Right-click the /res/layout node and select New -> Layout resource file.

Frag14
Figure 14: Creating a new Layout resource file

Let's name it my_fragment_layout and click Ok.

The layout is generated. Here are the contents of the layout file.

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

</LinearLayout>

To help with identifying the fragment clearly, we will add an EditText and have a background color for our fragment.

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

   <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/editText"
      android:layout_gravity="center_horizontal"
      android:text="This is a fragment"/>
</LinearLayout>

Next, we need associate the fragment layout with the fragment class file. Open the MyFragmet.java class and implement the onCreateView method:

//myfragment.java
public class MyFragment extends Fragment {

   @Override
   public View onCreateView(LayoutInflater inflater,
         ViewGroup container, Bundle savedInstanceState) {
      return inflater.inflate(R.layout.my_fragment_layout,
         container, false);

   }
}

Lastly, we need to imbibe the fragment into the Activity.

We can use Android Studio support in the Design view for the MainActivity layout file to select a fragment from inside the Custom choices.

Frag15
Figure 15: Selecting a fragment from the Design view

Open the activity_main layout file in design view and, inside the Palete, click Fragment under the "Custom" section. You will be prompted to select a fragment.

Frag16
Figure 16: You're prompted to select a fragment

Now, our application is complete. When we run our application, you will see what's depicted in Figure 17.

Frag17
Figure 17: The application, running and displaying its text

We now have fragments in action.

Summary

Today, in this Android Fragment tutorial with examples, we learned the basics of fragments, and creating fragments in Android applications. I hope you have found this information useful. You can download the sample code from the link at the end of this article.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.


Tags: Java, Android, android studio, Fragments, Activity object, Fragment class, override




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel