Designing an XML layout for landscape view

Alternative Layouts: 1 2 3 4

Now that we have a portrait layout designed, let's tackle the landscape layout.

Load up your activity_main.xml file, the one in the layout-land folder. You'll know when you have the right one because it looks like this in Android Studio:

Android Studio layout in landscape view

Now have a look at the Component Tree. You'll see that the parent layout is a LinearLayout:

A LinearLayout showing in the Component Tree

However, we don't want this type of layout. We'd like a ConstraintLayout, just like our other activity_main.xml file. You can easily convert it.

Right-click LinearLayout (vertical) in the Component Tree. From the menu that appears, select Convert LinearLayout to ConstraintLayout:

Android Studio menu showing the Convert option highlighted

You'll probably get a warning box popping up when you try to convert your layout:

Convert layout warning message

Click OK on this warning, as we really don't have any other layouts, views, or code to worry about.

Your Component Tree should now look like this:

A LinearLayout converted to a ConstraintLayout

In the Images section of the Palette, drag an ImageView onto the Component Tree, or onto the white layout canvas. When you get the Resources dialogue box up, select your bridge image:

Resources dialogue box with a Drawable selected

Click OK to add the image. The ImageView on the white layout might be in the upper left corner. Drag it out and down a bit to give yourself some room to add the constraints:

A Layout with an ImageView

Hold your mouse over the left middle white circle, and the circle will turn green. Drag to the left edge of the screen. Now do the same for the top middle white circle and the bottom middle white circle. Your ImageView should look like this:

An ImageView with constraints added

Have a look at the properties area on the right:

Properties area for an ImageView

You can set a bigger left margin, if you like. We've set ours to 16.

For the contentDescription property, set that to your tower_bridge_landscape string resource:

A string resource being added for the contentDescription property

Now we can add the TextView. We'll do that in the next lesson below.