Android Programming

Landscape Layout for the GridView

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.

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 in earlier versions of Android Studio, click on
the Containers category, then locate GridView:

Palette with the GridView item highlighted

In later versions, the GridView has moved to the Legacy category:

The GridView in Android Studio 3

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, in earleir versions of Android studio, and
the wand in later versions). 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

Android Studio 3 setting contraints

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 in
earlier versions of Android Studio. In later versions, expand the All
Attributes item. Locate the numColumns property and type 4 for
this (we typed 2 last time):

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 (later Android
Studio versions will see just a plain white screen):

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.

Back to the Android Contents Page

Yorum Yap