Fragments Tutorial. Part 2: Building the fragments

  • Written by  Clive

fragment tut part2 icon

We'll build the two fragments in this part of the tutorial.

If you haven't already done so, have a look at :

A tale of two fragments

We need to create the two fragment classes, one for the list and the other for the image.

Their User Interface will be displayed by the host activity at run time.

Put it on the list: The List Fragment

We’re using the Support Library so we must make sure that we import the correct class.

List fragment class imports

Import the support library’s list fragment class

We’re going to display a list in this fragment so we need to extend the ListFragment class

Extend the FragmentList class

Import the support library and extend the ListFragment class

Note the following:

  • imageItemsArray – our array of items that are displayed in the list
  • OnImageItemSelectedListener – this is our interface to communicate back to the activity. It lets us notify the activity about a selected item
  • mCallback – the interface member that contains a reference to the parent activity’s implementation of the interface

List fragment onCreate method

Initialize the fragment in onCreate

Note the following:

  • this is where we do the initial creation of the fragment. It is not visible at this stage
  • Build.Version.SDK_INT – we get the version of Android that the device is using
  • layout – we’re going to display a list and need a layout to display each item in the list. We could define our own layout in xml but we have gone the easy route and chose to use one of the system’s layouts. The problem is that the first layout is only available since Honeycomb. This is why we need to check which version the device is running and then choose the correct list item layout
  • setListAdapter – we set the adapter to provide the items for the list
  • ArrayAdapter – links the array of items to the list view

There is no onCreateView() as we're using a list fragment. The list fragment provides its own ListView layout in which the list items are displayed.


List fragment onStart method

Set the choice mode in onStart

Note the following:

  • setChoiceMode(ListView.CHOICE_MODE_SINGLE) - we set the choice mode for the list to single. The user will only be able to select one item at a time

We’ve created the OnImageItemSelectedListener interface so that the list fragment can notify the parent activity when an item in the list has been selected. The activity can then ask the image fragment to display the correct image.

Now we must make sure that the parent activity actually implements this interface. We do this in onAttach:

List Fragment onAttach method

Check that the host activity implements the interface

Note the following:

  • onAttach – is called when the fragment is attached to the parent activity
  • try – we try to instantiate an instance of our OnImageItemSelectedListener interface, casting the parent activity that’s passed as a parameter to onAttach
  • mCallback – holds a reference to the parent activity’s implementation of the interface, if it has implemented it
  • catch – an exception is thrown if the parent activity has not implemented the interface

List fragment onListItemClick method

onListItemClick is called when an item in the list is clicked

Note the following:

  • this method is triggered when the user selects an item in the list
  • we use the interface to pass the selected item’s position on to the parent activity. The parent activity will then use it to display the correct image in the image fragment

Get the picture? The image Fragment

We’ll use the image fragment to display an image.

Make sure that you’re importing the support library class:

Import support library fragment class

Import the support fragment class

We create the fragment by extending the Fragment class.

Then we create an array of drawable resource ID’s. The drawables are images in the res/drawable-mdpi folder. One of these images will be displayed when the user selects an item.

Extending the Fragment class

We create our fragment by extending the Fragment class


We use onCreateView to create the fragment’s User Interface.

Fragment UI created in onCreateView

Create the fragment’s User interface in onCreateView

Note the following:

  • at this point, the fragment would have been created and could be used without a User Interface. Since we need a UI, we need to inflate one
  • we have defined an xml layout file (image_layout.xml) containing an image view
  • container – the parent activity’s view group contained in its layout file
  • inflate – we inflate our image_layout file into the host activity’s view group container
  • we need to return the view for the fragment’s UI

The fragment is now visible so we can display the image.

Image fragment's onStart method

Use onStart to display the image

Note the following:

  • position – this is the position of the selected item in the list. It also corresponds to the image’s index in the drawables array
  • getArguments() – the MainActivity requests an image to be displayed in the image fragment. The image is identified by position which may have been passed to the fragment as an argument inside a Bundle object. We use getArguments() to extract any arguments that may be inside the bundle
  • getInt() – if the bundle contains an argument, then we get the position integer out of the bundle and use it to display the selected image
  • updateImage() – displays the image identified by the position parameter
  • mCurrentPosition – this field is originally set to -1. Each time an image is updated, it is set to the value of the position variable. So we check to see if it is -1, in which case we do nothing. If it is not -1 then we update the image using the value of mCurrentPosition to identify which image to display

Here’s the code for the updateImage() method:

updateImage method in image fragment

Use updateImage to display the correct image

Note the following:

  • imageView – we get an instance of the image view
  • getActivity() – used to get access to the image view which is now contained by the activity’s view group
  • setImageResource() – we set the image view to display the appropriate image. The parameter is a resource ID item in the image array identified by position

Have look at the last tutorial in the series of Fragement Tutorials, part 3: The parent activity.

Want to convert your Activities to Fragments? Check out this tutorial, Converting Android Activities to Fragments

I hope that you have found this tutorial helpful.

Please consider subscribing to our notification email. We’ll send you one email on Friday with links to our latest tutorials. That way you won’t miss out. If we didn’t publish any then we won’t send any email. No spam. 

This tutorial was created using Android Studio. You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.