A (175)

272 CHAPTER 8: Android UI Design: Using Advanced ViewGroup Layout Containers

As you can more clearly ascertain in landscape mode, the GridLayout engine, using only default
parameters, is going to arrange your child UI elements in a single-row grid, with a number of
columns which matches up with the number of widgets defined inside of the parent GridLayout
layout container structure. This is why I made the analogy to a parent tag with an
android:orientation=“horizontal” layout orientation or direction configuration parameter.

It is important to note that you can always get a better view of how a UI class will align UI elements
in different screen orientations if you put the GLE into landscape mode, by clicking this icon at the
top of the GLE.

Be sure and take the time to experiment with the drop-down menu, as well as the sub-menu
hierarchy of options, which will allow you to control the orientation, UI mode (the normal, car dock,
desk dock, television, and appliance options), and Night Mode (daytime or nighttime option).

This menu is also shown in Figure 8-4, with the “Switch to Portrait” toggle option highlighted, and
current landscape mode icon highlighted. This is indeed a handy menu for all of you UI designers!

GridLayout Parent Parameters: Let’s Experiment!

Experimentation is a fantastic way to ascertain what any given Android class, and its attributes or
properties (in the form of XML parameters, in this case), are going to do. For this reason, I am going
to add parent (first), and child (later) parameters, and then observe what these do by using the GLE
after each major parameter addition.

The GLE has a lot of interesting functionality regarding GridLayout UI design, so it will be good to
experiment with using some of these as well. We’ll also experiment with the order that child (widget)
tags take inside of the container, since the GridLayout has an “automatic” layout feature. For this
reason, we’ll create a UI design using only parent parameters, and then we will add in
child widget GridLayout.LayoutParams class parameters, such as layout_row or layout_column, to
show you a more memory-efficient way to define a UI layout grid.

We know the android:layout_width and android:layout_height parameters will be set to a
wrap_content default value by the GridLayout engine for any of your child widget tags,
as we saw in Table 8-4, which outlines default values that the GridLayout uses for cells in your grid.

However, layout_width and layout_height parameters in the parent tag instruct
the GridLayout engine how to expand to fit a View (layout), which is above it. This is usually
the display screen itself, as it is in this particular case. Since you want the grid to fill this entire
space (the entire application screen), we will leave the match_parent constant that we used for
your parent tag as the setting for the required layout_width and layout_height
parameters for this parent container tag configuration.

Next, we’ll add in your ID and grid configuration parent tag parameters.

GridLayout Parameters: Configuring Your Grid

First, let’s add in an android:id parameter named gridLayout, so we can control the GridLayout
from our Java code, and add android:rowCount and android:columnCount parameters,
defining the rows and columns for the grid which we are creating, which initially will replicate the
RelativeLayout design that we created during Chapter 7.