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
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:
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
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:
The single pane layout file with the fragment container
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:
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
Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.