Landscape Layout for the GridView

GridView Project: 1 2 3 4 5 6 7 8 9

n the previous lesson, you attached your Custom Adapter to the GridView. You saw that it worked OK in portrait mode. In landscape mode, however, it still had two columns. What we'd like is to have four columns in landscape mode.You'll see how to do that in this lesson.

Return to Android Studio.We'll create a layout-land folder under res. It's easier to go to Project Files, for this:

Android Studio Explorer window

Click on app in the Explorer window, then expand src. Under the src folder, expand main. Now click on res:

The res folder in the Android Studio explorer

Now right-click res. From the menus that appear, select New > Android resource directory:

Menu for the Android resource directory item

From the dialogue box that appears, select layout from the Resource type dropdown list. Then type layout-land for the Directory name: (Don't forget the hyphen between layout and land.)

The New Resource Directory dialogue box

Click OK and you should see a new folder under res:

A layout-land directory

Right-click the layout-land folder and select New > Layout resource file. You'll see a small dialogue box appear. Type activity_main as the File name: (We explained about having two activity_main.xml files in a previous section.)

New Layout Resource File dialogue box

You should see a new layout appear in the Design view of Android Studio. Notice that your second activity_main file already appears in landscape form, so you don't have to do anything to rotate it:

A blank layout in landscape view

Have a look at the Component Tree and you'll see that we have a LinearLayout:

Component Tree showing a LinearLayout

Right-click LinearLayout. From the menu that appears, select Convert LinearLayout to ConstraintLayout: (A ConstraintLayout makes it easier to get the design you want.)

Menu showing Convert LinearLayout to ConstraintLayout: item

In the Palette area, click on the Containers category, then locate GridView:

Palette with the GridView item highlighted

Drag a GridView onto either the white layout or the Component Tree. Click the button in the layout toolbar again for Infer Constraints (the yellow plus symbol, remember). This will fix the GridView to the edges of the screen with a default margin of 8dp. As the ID for your GridView, type petsGrid. This is the same name as the original GridView, the one for portrait view:

ID property in Android

We now need to set the number of columns to four. At the bottom of the properties area, click the link for View all properties. Locate the numColumns property and type 4 for this (we typed 2 last time):

Setting the numColumns property to 4

Another property you can set here is for stretchMode. Set it to columnWidth:

The stretchMode property

If you have a look at your layout, you should see this:

A layout with a four column grid

And that's it - we're done with the landscape layout for activity_main. Run your app again. Rotate the device to see four columns of grid items:

A GridView app in landscape mode

 

In the next lesson, we'll start on the WebView, which is where we want to go when a grid item is tapped. We need to create an assets folder to store the HTML pages.