Fragments Tutorial. Part 1: The basics

  • Written by  Clive

fragmentsTut part1 icon

Our tutorial app has one activity and two fragments. One fragment contains a list and the other an image.

Running the app on a small device in portrait mode, displays the list fragment. Selecting an item in the list displays the second fragment containing an image.

Flipping the device to landscape displays both fragments side by side.

Running the app on a tablet displays the fragments side by side in both portrait and landscape mode.

Fragments Tutorial screenshot

On the phone, the list fragment is on the left and the image fragment is in the middle. On the right is a screenshot of a tablet in portrait mode

Fragments tutorial screenshots

On top, a phone in landscape mode and at the bottom a tablet in landscape mode

How’s it done?

First off, if you haven't already done so, you may want to look at Dynamic layouts using fragments where we discuss the basics of using fragments.

Running the app starts the parent activity that will host the fragments.

There are two fragments. One contains a list and the other an image.

There are two ways that we add the fragments to the activity:

  • The static way. We define the two fragments in an xml layout file and then simply inflate the layout into the activity. The fragments are static and are never swopped. When the user selects an item, images are swopped in the image fragment. We’ll use this approach to display the fragments side by side

Here’s the Static layout file:

Fragment dual pane layout

Our dual pane fragment layout file

Note the following:

  • name attribute, this is our fragment class. The name is made up from the package name plus the fragment name: <package name>. <fragment name>
  • id – each fragment needs an id so that it can be restored if the host activity is restarted. You’ll also need the id if you want to perform transactions on the fragment

Fragments tutorial dynamic Fragments diagram

Swopping content using static fragments

  • The dynamic way. We define an empty container layout which is then set as the activity’s layout. Then we fill it with a fragment. We can swop fragments in and out of this container at any time. We’re going to use this approach for small screens where we can only fit one fragment on the screen at a time

Here’s the Dynamic layout file:

Fragments tutorial layout Files Placeholder

The single pane layout file with the fragment container

Fragments tutorial swop Fragments diagram

Use a container to dynamically swop fragments

So which layout file is used when the app runs?

The Android system determines the size and orientation of the device. This information is used to choose the correct layout file when the app runs.

You have to supply the different layout file options and put them in the correct folder.

Here are our layout files in their folders:

Fragment tutorial layoutFiles folders

Our layout files which we use for the fragments

Why three layout folders?

We decided that we want to offer three layout options:

  • an option for a small device in portrait mode that can only display one fragment at a time
  • an option for a small device that can display two fragments, side by side but only when it is in landscape mode
  • an option for tablets where two fragments can be displayed side by side in either portrait or landscape mode

We place these layout files in the three layout folders:

  • res/layout – this will be used by default
  • res/layout-land – this will be used if the device is in landscape mode
  • res/layout-large – this will be used by tablets

We use the same file in the res/layout-land and res/layout-large folders.

Note that ALL the layout files have the same name, fragment_container.xml.

When setContentView() is called, the system automatically selects the correct layout.

In either case, we’re going to need fragments.

Have a look at the 2nd part in the series of Fragment Tutorials, Building the fragments.

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.