Android GridLayout


Download Android GridLayout Sample

Android GridLayout, places its children in a rectangular grid. At first glance it may seem like a TableLayout but it is much more convenient and functional. Android GridLayout was introduced with Android os 4.0 (Api level 14) and layout_columnWeight and layout_rowWeight etc. was introduced in api level 21.

We can consider Android LinearLayout as an special case of GridLayout. An Android gridLayout with columnCount equal to 1, will behave like a LinearLayout with vertical orientation and Android GridLayout with rowCount equals to 1 will behave like a LinearLayout with horizontal orientation.

In Android GridLayout, one child can be placed in a cell like Android TableLayout. In TableLayout, only column span is available, while in Android GridLayout both row and column span are available. In GridLayout, we can add a view by specifying row and column index which is not possible in Android TableLayout.

If minimum sdk version of our app is less than 14 and we want to use GridLayout, then we should use support library.

The min sdk of this sample is 8, so I used v7 support library. To use gridlayout support library add compile "com.android.support:gridlayout-v7:24.1.0" in dependency section of build.gradle. After this change, build.gradle will look like...

Click on "Sync project with Gradle files" toolbar icon to sync the dependencies.


Xml attributes of android grid layout

Xml attributes Description
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 maxmimum 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 maxmimum 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

Android Grid Layout Example

Let's move on to our demo. Result of this sample is represented in the screenshow below. When user click on any image, I am showing full size image in a dialog.

Note: Please don't be confuse with screenshot and layout xml. I wanted to column span and row span properties in the screenshot thats why scrolled 1 row up.

Android GridLayout


Step 1: Create a new project in Android Studio and name it Android Grid Layout.

Step 2: Open res -> layout -> activity_main.xml and add following code

activity_main.xml

Step 3: To add round corner border in ImageView, I am using round_shape.xml. Create a xml file inside res -> drawable and named it round_shape.xml. Add below given code in your round_shape.xml

round_shape.xml

Step 4: Now, open your MainActivity.java and place below given code.

MainActivity.java

Step 5: Now clean and run your program to see the result.


I tried to demonstrate all commonly used features of gridLayout, hopefully, you have enjoyed it. Thanks.

Share & Like

Tutorial topics

About ApnaTutorials.com

ApnaTutorials.com is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.