|Using Fragments to Build User Interfaces in Android|
Aug 7, 2012
About This Article
This article provides information about how to use Fragments to build User Interfaces in Android applications. Android application developers can use this article as reference to implement the UI in their applications from Android 3.0(Honeycomb).
This article is intended for Android developers wishing to develop mobile applications. It assumes basic knowledge of Android and Java programming languages.
To find out more about Android, please refer to the Knowledge Base under Samsung Developers.
The Fragment API introduced in Android 3.0, allows developers to more easily design dynamic user interfaces. It helps to organize user interface components in a reusable manner across Activities.
A Fragment represents a portion of user interface in an Activity. Multiple fragments can be used in a single activity to build a multi-pane UI, and reuse it as a single fragment in multiple activities. In simple terms, a Fragment is a chunk of user interface with its own life cycle. This article discusses the use of fragments and its implementation in projects.
Redesigning the Screens
Consider a news application which lists headlines and articles in brief. If user selects one of the headlines, the application shows the article in detail. The design of the screen before Android 3.0 is as follows:
Starting with Android 3.0, the Fragments API is available to design the screens. On larger screens, Listview can help to design a more effective user interface to display the detailed article beside the list on the same screen. When the user clicks a specific ListView element, the detailed article view on the right side updates to display the appropriate content. The following figure illustrates such a redesign:
A Fragment has its own life cycle similar to any other application components in Android. Create a fragment by creating a subclass of the Fragment class. The Fragment class contains few callback methods like an Activity. A few of them are onCreate (), onStart(), onPause() and onStop().
Almost all applications should implement at least three methods for every fragment: onCreate(), onCreateView(), onPause(). There are several other callback methods to handle various stages of the fragment lifecycle. For more details regarding Fragment lifecycle see: http://developer.android.com/reference/android/app/Fragment.html#Lifecycle Following is example code for creating an application with two fragments that shows one listview on the left side and one detailed view on right side as shown in above figure.
Create two Java classes to represent the two fragments: the ListView and the DetailedView screens. Name them FragmentA and FragmentB. FragmentA extends the ListFragment class and FragmentB extends the Fragment class. The following code snippet shows the skeleton of both classes.
Let us explore the FragmentA class first that uses list widget to show some elements.
Now implement onCreate() method and onListItemClick() methods in FragmentA class
Next, look at the FragmentB class to receive the color sent from the FragmentA. Implement an onCreateView() method in the FragmentB class.
In the FragmentB class, use an xml file to show the color for the selection from FragmentA. Following is the viewer.xml file:
Adding Fragments to Activities
After creating both fragments and its functionalities, now add these fragments to activities. Implement two activities for showing the fragments, one for each. Before implementing activities, create xml files for both of the fragments. The following code snippets show the fragments declaration in xml files:
Now create two activities to host these two fragments. Let us name it as TitleActivity and DetailActivity for FragmentA and FragmentB, respectively.
When you run the application you observe the same result as if you had used two different activities. However, here the same functionality is implemented with fragments.
Working in Landscape mode
Now modify the code to use the fragments feature in landscape mode. Copy the fragmenta xml file and place it in the /res/layout-land folder. Modify the fragmenta.xml file as shown below:
the fragmenta.xml file under /res/layout remains unchanged.
Change the code snippet shown below for onListItemClick() method in FragmentA class to achieve the fragment functionality.
Now run the application and the following output appears in landscape mode. In portrait mode it remains unchanged.
One of the most important features of fragment is fragment transactions. By using fragment transactions, developers can add, remove and replace the fragments in response to end user interaction. Each set of operations that are performed is called a transaction. Developers can also save each transaction to a back stack managed by the activity for future use. To implement the fragment transactions in the sample, modify the fragmenta.xml file in layout-land folder.
Add one more fragment to the existing linear layout when the user clicks the "Blue" item. For this, a FragmentC class is necessary.
When user clicks the "Blue" item, the fragment c will be added to the existing activity. To do this, modify the onListItemClick() in the FragmentA class.
If you run the application now, you will get the following screens.