Understanding Grid Layout in android

Understanding Grid Layout in android

We are going to learn about Grid layout and how it can be used in android application development. If you are new to android layout you can read some of our previous tutorials on android linear and relative layout here.

Grid layout was introduced in API level 14, and was backported in the Support Library. Its main purpose is to solve alignment and performance problems in other layouts

Grid layout is mainly used to align its child views in cells which are the horizontal and vertical intercepts of an invisible line. Each view child is place in a cell and the cells are numbered with the horizontal and vertical indexes.

Throughout the API, grid lines are referenced by grid indices. A grid with N columns has N + 1 grid indices that run from 0 through N inclusive. Regardless of how Grid Layout is configured, grid index 0 is fixed to the leading edge of the container and grid index N is fixed to its trailing edge (after padding is taken into account).

Grid layout just like other android layouts we have covered can be created programmatically or through xml layout. We are going to focus on the xml layout interface. If you want to learn more about how you can create this layout programmatically I will suggest you read our tutorial on Linear Layout in android.

There are many properties or attributes of the Grid layout we will emphasis on before we move further to show some examples on how to use a Grid layout in android. One other important fact to know is that Grid layout is not the same with GridView. GridView is a two dimensional scrolling grid that uses data from a list adapter. GridView is a sub-class of AdapterView.

Let’s look at how Grid layout positions its child views. If a child view in a Grid layout does not specify its row and column indexes of the cell it wishes to take-up, the layout will automatically assign a cell to the view by using the following properties orientation, rowCount and ColumnCount.

The spacing between the cells or child views can be accomplished with the use of space view or layout margin parameters. The space class can be use in any cell or group of cell. Another important property of the child view positioning in a cell is view gravity. The gravity of a view can be used to define the particular position you may want the view to appear or to fill all the available space in a cell.

It is also possible to span a row of cells to a specified number of cells. This is also applicable to columns.

The following list below itemizes the different attributes present in a Grid layout and what they can be used for.

android:alignmentMode – When set to alignMargins, causes alignment to take place between the outer boundary of a view, as defined by its margins.

android:columnCount – The maximum number of columns to create when automatically positioning children.

android:columnOrderPreserved – When set to true, forces column boundaries to appear in the same order as column indices.

android:orientation – The orientation property is not used during layout.

android:rowCount – The maximum number of rows to create when automatically positioning children.

android:rowOrderPreserved – When set to true, forces row boundaries to appear in the same order as row indices.

android:useDefaultMargins – When set to true, tells GridLayout to use default margins when none are specified in a view’s layout parameters.

Now that we are a bit familiar with Grid layout, we will go ahead and create a new project that will demonstrate real life usage of a Grid layout in android. In this example we are going to create an android application project that uses a Grid layout to align its child views in cells. We will also demonstrate how we can implement the space and span properties within our code.

Create a new android project by following the steps listed below.

Go to file menu

Click on New menu

Click on Android Application

Enter Project name: GridLayout

Package: com.inducesmile.gridlayout

Keep other default selections

Continue to click on next button until Finish button is active

Then click on Finish Button

Once you are done with your project, head over to the resource > layout folder and open the file called activity_main.xml. In your IDE the graphical layout view will be open. Click on the TextView in your layout to select it and click on the delete button to delete the text from your layout.

Now right click on your layout and select change layout and change the current layout from Relative layout to Grid layout.

After you must have done with this your layout code will look more or less like the code shown below. You can copy and paste this code in your activity_main.xml file.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context="com.inducesmile.gridlayouttutorial.MainActivity" >
</GridLayout>

 Add Views to Grid Layout

Since we have created a skeleton of our Grid layout, we are going to add child Views to our Grid layout. In your IDE, this can be achieved in two different ways. We can either use the code view to edit our layout file or we can use the drag and drop graphical interface.

We will move ahead to add five button view controls to your layout. You can update the code you have in your activity_main.xml file with the current code below.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="3"
    android:rowCount="3"
    android:orientation="horizontal"
    tools:context="com.inducesmile.gridlayouttutorial.MainActivity" >
    <Space />

    <Button
        android:id="@+id/button1"
        android:layout_gravity="left|top"
        android:text="@string/button_name" />

    <Button
        android:id="@+id/button3"
        android:layout_gravity="left|top"
        android:text="@string/button_name" />

    <Button
        android:id="@+id/button2"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="0"
        android:text="@string/button_name" />

    <Button
        android:id="@+id/button4"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="2"
        android:text="@string/button_name" />

     <Button
        android:id="@+id/button5"
        android:layout_column="1"
        android:layout_row="2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="@string/button_name" />

</GridLayout>

The graphical presentation of the xml layout code is shown below.

gridlayout

In the code above, we started off with a Grid layout as the root View for our layout file. Grid layout is a viewGroup and ViewGroup is a subclass of the View class.

Inside the Grid layout, when you drag a child view into the Grid layout, the IDE will atomically append an indicator of the indexes that the view is currently sitting above. We have added five button views to our grid layout and the entire button Views are arranged in cells.

You will see that the fifth button uses the android:layout_columnSpan=”2″ to span another column and the android:layout_gravity=”fill” is used to fill the space created from spanning two columns.

This brings us to the end of this tutorial. You can run your application now. If everything works, your interface will be similar to the image displayed above.

Finally, if you have a question or suggestion kindly use our comment box. You can download the source code for this tutorial below.

Add a Comment