In this tutorial you will learn how to make make a two pane layout in Android and thus making your application responsive in design. Be it on phone or tablet, your application should look flawless, one of the commonly used design pattern when on tablet is two pane also known master-detail pattern.

In this tutorial you will code an application that looks a certain way on phone and a different way on tablet. The complete code is available on this GitHub Repo.

two pane

Layout on Phone

two pane

Layout on Tablet

You will be developing a mock settings application that has 3 options, “Network”, “Storage” and “Display”. On a normal phone you will show list of these options which when clicked will open the details for that option. On a tablet you will be showing the two pane layout in which when an option is clicked in the left pane will update the content in right pane.

First you will be developing the layout for a mobile device and then you will tweak it to adapt on tablets.

Setup

There is no special dependencies required for making a two pane layout so the setup is very simple.

  1. Create a new Android Studio Project. Now you have a MainActivity.
  2. Done!

The main_Activity.xml layout file contains the following code.

Creating the Options Layout

Create a new file named fragment_settings_options_view.xml. This will be our layout file for the 3 setting options that we have.

Now create a Fragment class for the same called SettingOptionsFragment.

Load this fragment!

Now if you run the application it will look like this.

two pane

Lets show a new activity when any of the option is clicked.

Creating Detail Layout

Create a new Activity named SettingsDetailActivity. Below is the layout file of this activity.

Now create three fragment files for each option, “network”, “display” and “storage”.

Network Settings

fragment_network_settings.xml

NetworkSettingsFragment

Display Settings

fragment_display_settings.xml

DisplaySettingsFragment

Storage Settings

fragment_storage_settings.xml

StorageSettingsFragment

Before loading this fragment in SettingDetailsActivity, we first have to determine which option the user selected in the MainActivity.

Fragment-Activity Communication

Lets go back to the MainActivity and SettingOptionsFragment. In SettingOptionsFragment you have to determine which option did the user clicked on and notify it to MainActivity. You will do this by using callbacks.

Update your SettingOptionsFragment by adding an interface OnOptionClickListener that contains one method onOptionSelected(String).

MainActivity will implement this interface.

Now the SettingOptionsFragment needs to get an instance to the MainActivity that implements OnOptionClickListener. You can grab the Activity in the onAttach method of a fragment.

Lets add click listener on the options and notify Activity about the click.

In the MainActivity launch an Intent to start SettingDetailsActivity.

Update the SettingDetailsActivity to load the required fragment.

Now launch the app and select an option to open the detail activity.

Two Pane Layout

Let’s do the main thing that you are here for, adding two pane functionality when in tablet mode.

First you will have to create a layout folder for devices with size minimum of width 600dp. So whenever a devices is greater than 600dp in width, the layout files in this folder will be used over the general layout files. Let’s first create this folder.

  1. Right click on res -> New -> Android Resource Directory.two pane
  2. A dialog will open. Select the Resource Type to be ‘layout’.
  3. Select the ‘Smallest Screen Width’ and set the value to 600.two pane
  4. Now a new folder named layout-sw600dp will be created.

In the created folder create a new layout file named activity_main.xml. When on a device greater than width 600 this layout file will be used by the MainActivity.

two pane

The layout in this file will be different from the original activity_main.xml.

If you compare with the original file you will find that this layout has a new FrameLayout added with id detailContainer.

How to know when the app is on a tablet?

So you want to know when the application is loaded on tablet. As I told you when on a device with width greater than 600 the 2nd activity_main.xml file will be loaded. So you will check the presence of the new FrameLayout added only in the 2nd layout file, if it is present then the app in on a tablet if not then it is on a phone.

All that is remaining is to behave differently when you know you are dealing with a tablet i.e. rather than starting an Intent when an option is selected, change the fragment in the right hand side.

This is the final code for MainActivity.

That is it for this tutorial. You can find the complete code on this GitHub repo.

Just enough Dart for Flutter.

Guide to Notifications in Android.

How to make Bottom Sheet in Android.

Guide to Integrating AdMob in your Android App.


Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

2 Comments

Kyrillos Gaitanis · August 4, 2018 at 1:21 am

Just found your blog and:

1) The content is amazing. Android Architecture Components, Kotlin, Retrofit, and many more. I am a begginer Android developer and I really like your guides and your writing style. Can’t wait for articles articlesing Dagger, Glide, or more stuff on Room, or any other Android Pattern/Library/Fundamental.

2) I like both techno and coffee.

    Gurleen Sethi · August 4, 2018 at 8:55 am

    Really appreciate your comments. Means a lot. New content coming every week!

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 5 =