Alternative Layouts in Android

Alternative Layouts: 1 2 3 4

Android devices come in lots of different screen sizes and screen densities. You can design different layouts for your app, depending on the device. First, let's design one layout for when the screen is in portrait mode and another for when it's in landscape mode.

Suppose you had an app for great bridges of the world. One of your bridge pages might look like this in portrait view:

Android Emulator running an app

However, when the device is rotated, you may find that your page design looks terrible in landscape view:

Emulator running in landscape mode

In this tutorial, you'll learn how to create a different layout for landscape view.

Create a new project for this. Give it the application name of Famous Bridges. As usual, make sure you're creating an Empty Activity. When the project loads, copy and paste the following two images to your res > drawable folder:

Tower Bridge small image

Tower bridge wide

We'll use the wide image for portrait view and the other one for landscape view.

If you have a look at your Project Explorer, you'll see there is a folder in the res directory called layout.:

Android Studio project explorer showing the layout directory

So far, you've been placing all your XML layouts in this folder. However, in Android, you can create different folders to hold different-sized layouts. The different folders you can create are these:

layout
layout-land
layout-large
large-layout-land

You then place XML layouts in these folders. (Large is for big screens.) Let's see how it works.

To create a landscape folder, right click on the layout folder. From the menus that appear, select New > Layout resource file. You'll then see the following dialogue box:

Adding a new XML resource file in Android Studio

In the Directory name box, type layout-land. In the File name box at the top, type activity_main. Your dialogue box will then look like this:

New Resource File dialogue box

Before clicking OK, notice that the Root element says LinearLayout. We don't want this kind of layout, but you'll see a quick way to change it later.

When you click OK, your Project Explorer will look like this:

The res > layout folder with two activity_main xml files

So we have two files called activity_main. And that's the key to different layouts - each alternate layout needs to have the same file name. The default is portrait. If you need a landscape layout, you create an XML file with the same name as the portrait one, and place it in a folder called layout-land. If you need a layout for big screen then you would create a third activity_main XML file and place it in a folder called layout-large, or layout-large-land.

But where is the layout-land folder? At the top of the Project Explorer window, click on the blue area to see a dropdown list:

Android Studio explorer dropdown list

Select Project Files from the list (or Project). Your Explorer will then turn into this:

Project Explorer highlighting two  layout folders

The Project Files view shows your all the files and folders more clearly, with our new layout-land folder and our second activity_main XML file.

You can switch back to Android view, if you like. But if you prefer the Project Files view, keep it on that.

Notice in the main code area, at the top, you have two activity_main XML tabs open:

XML and code tabs in Android Studio

The portrait one is layout\activity_main; the landscape one is land\activity_main.

When your app runs, though, this line is executed from MainActivity.java:

setContentView(R.layout.activity_main);

Android is clever enough to see that you have a layout-land folder. When the device is rotated, it will grab the activity_main XML file from this folder rather than the one in the layout folder. You don't have to write a single line of code to display the landscape version!

The same is true if you had a second Activity. Suppose you create one called GoldenGateBridge, and that the XML file associated with this class was called bridge_golden_gate. The layout would be loaded with this line, in the onCreate method of GoldenGateBridge:

setContentView(R.layout.bridge_golden_gate);

You would create a second XML file called bridge_golden_gate, and place it in the layout-land folder. Your Explorer window would then look like this:

Explorer showing two files in the layout-land folder

Android would then know to grab the correct file from the layout-land folder when the device is rotated.

Let's design the portrait layout, now. We'll do that in the next lesson below.