This chapter is from the book
This chapter is from the book
This chapter is from the book
GridLayout Layout
GridLayout lays out views in a two-dimensional grid pattern, that is, in a series of rows and columns. The intersection of row and column is known as a grid cell, and it is the place where child views are placed. It is easier to use GridLayout when compared to TableLayout. Without specifying intermediate views, we can flexibly place the views randomly in the grid by specifying their row and column positions. More than one view can be placed in a grid cell. Besides this, views can span multiple grid cells too.
Specifying Row and Column Position
The two attributes that are used to specify the row and column position of the grid cell for inserting views are android:layout_row and android:layout_column. Together, they specify the exact location of the grid cell for placing the view. For example, the following statements place the view at the first row and column position of the grid:
android:layout_row="0" android:layout_column="0"
When either or both of the preceding attributes are not specified, GridLayout uses the next grid cell by default for placing the view.
Spanning Rows and Columns
Views can span rows or columns if desired. The attributes used for doing so are android:layout_rowSpan and android:layout_columnSpan. For example, the following statement spans the view to two rows:
android:layout_rowSpan="2"
Similarly, the following statement spans the view to three columns:
android:layout_columnSpan="3"
Inserting Spaces in the GridLayout
For inserting spaces, a spacing view called Space is used. That is, to insert spaces, the Space view is inserted as a child view. For example, the following statements insert a space at the second row in the GridLayout. The width and height of the blank space are 50dp and 10dp:
<Space
android:layout_row="1"
android:layout_column="0"
android:layout_width="50dp"
android:layout_height="10dp" />
Similarly, the following statements insert a space at the third row in the GridLayout that spans three columns:
<Space android:layout_row="3" android:layout_column="0" android:layout_columnSpan="3" android:layout_gravity="fill" />
Let’s apply the knowledge gained so far in arranging controls in a GridLayout. The application has controls arranged in the same way as we saw in TableLayout (see Figure 3.14) but in GridLayout instead. So, let’s create a new Android project called GridLayoutLayoutApp. Make its layout file, activity_grid_layout_app.xml, appear as shown in Listing 3.14.
){kind=link}
Listing 3.14. The Layout File activity_grid_layout_app.xml on Arranging Controls in a GridLayout Container
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:rowCount="7"
android:columnCount="2" >
<TextView
android:layout_row="0"
android:layout_column="0"
android:text="New Product Form"
android:typeface="serif"
android:layout_columnSpan="2"
android:layout_gravity="center_horizontal"
android:textSize="20dip" />
<Space
android:layout_row="1"
android:layout_column="0"
android:layout_width="50dp"
android:layout_height="10dp" />
<TextView
android:layout_row="2"
android:layout_column="0"
android:text="Product Code:" />
<EditText
android:id="@+id/prod_code"
android:layout_width="100dip" />
<TextView
android:text="Product Name:" />
<EditText
android:layout_row="3"
android:layout_column="1"
android:id="@+id/prod_name"
android:layout_width="200dip" />
<TextView
android:layout_row="4"
android:layout_column="0"
android:text="Product Price:" />
<EditText
android:layout_row="4"
android:layout_column="1"
android:id="@+id/prod_price"
android:layout_width="100dip" />
<Space
android:layout_row="5"
android:layout_column="0"
android:layout_width="50dp"
android:layout_height="20dp" />
<Button
android:layout_row="6"
android:layout_column="0"
android:id="@+id/add_button"
android:text="Add Product" />
<Button
android:id="@+id/cancel_button"
android:text="Cancel" />
</GridLayout>
In the preceding code, the GridLayout is defined as consisting of seven rows and two columns. The orientation of GridLayout is set to horizontal; that is, controls are placed in rows. It means that while specifying the grid location of a view, if we don’t specify the column number, the next available column is assigned to it. As said earlier, the layout_width and layout_height attributes are not specified for any of the views laid in GridLayout because the default value wrap_content is considered for them. Remember, the row and column numbers are zero-based. In Listing 3.14, the controls are positioned in the grid as follows:
- A TextView with the text New Product Form is set to appear at the first row and column position of the grid. The text appears in serif font and in 20dip size. The text spans two columns and appears at the center of the row.
- A blank space is inserted at the second row and first column position. The width and height of the blank space are 50dp and 10dp, respectively.
- A TextView with the text Product Code: is set to appear at the third row and first column position of the grid.
- An EditText control with the ID prod_code of width 100dip is set to appear at the third row and second column position of the grid, that is, to the right of the text Product Code:. The question is even though we didn’t specify row and column position for the EditText control, how it will appear at the third row and second column position? The answer is because the orientation of the GridLayout is horizontal, the current row (if it is not full) and the next column (if available) are considered the default location for the control to be inserted.
- A TextView with the text Product Name: is set to appear at the fourth row and first column position of the grid. Because both columns of the third row are full, the fourth row is considered the location for this view.
- An EditText control with the ID prod_name of width 200dip is set to appear at the fourth row and second column of the grid, that is, to the right of the text Product Name:.
- A TextView with the text Product Price: is set to appear at the fifth row and first column of the grid.
- An EditText control with the ID prod_price of width 100dip is set to appear at the fifth row and second column position of the grid, that is, to the right of the text Product Price:.
- A blank space is inserted at the sixth row and first column position. The width and height of the blank space are 50dp and 20dp, respectively.
- A Button control with the caption "Add Product" is set to appear at the seventh row and first column of the grid.
- A Button control with the caption "Cancel" is set to appear at the seventh row and second column of the grid.
There is no need to write any code in the Java activity file GridLayoutAppActivity.java. When the application is run, the controls are laid out in the grid pattern as shown in Figure 3.15.
)
Figure 3.15. Controls organized in the GridLayout