Android GridView

Android GridView

What is GridView?

Android GridView shows items in two-dimensional scrolling grid (rows & columns) and the grid items are not necessarily predetermined but they automatically inserted to the layout using a ListAdapter

An adapter actually bridges between UI components and the data source that fill data into UI Component. Adapter can be used to supply the data to like spinner, list view, grid view etc.

The ListView and GridView are subclasses of AdapterView and they can be populated by binding them to an Adapter, which retrieves data from an external source and creates a View that represents each data entry.

We had learn Android ListView in last tutorial, this tutorial is similar as ListView tutorial.

GridView Attributes

Following are the important attributes specific to GridView:

AttributeAttribute
android:idThis is the ID which uniquely identifies the layout.
android:columnWidthThis specifies the fixed width for each column. This could be in px, dp, sp, in, or mm.
android:gravitySpecifies the gravity within each cell. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.
android:horizontalSpacingDefines the default horizontal spacing between columns. This could be in px, dp, sp, in, or mm.
android:numColumnsDefines how many columns to show. May be an integer value, such as "100" or auto_fit which means display as many columns as possible to fill the available space.
android:stretchModeDefines how columns should stretch to fill the available empty space, if any. This must be either of the values −

-> none: Stretching is disabled.

-> spacingWidth: The spacing between each column is stretched.

-> columnWidth: Each column is stretched equally.

-> spacingWidthUniform: The spacing between each column is uniformly stretched.
android:verticalSpacingDefines the default vertical spacing between rows. This could be in px, dp, sp, in, or mm.

Example

In this example i will be demonstrating how to build simple Android GridView and Custom GridView. This article is about creating simple GridView with textViews and CustomGridView with textViews and Images.

VIDEO DEMO

Let’s get start by creating a project in Eclipse IDE.

Simple GridView

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)

2. Open your your AndroidManifest.xml file and make your “MainActivity” as Launcher activity.

3. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. This will be your first launching activity layout.

4. Add the following code in MainActivity.java activity. In this following code we make a ArrayList and use Adapter for manages the data model and adapts it to the individual entries in the widget as done in ListView.

5. Run the application and you will get the output as shown in video.

Custom GridView

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)

2. Open your your AndroidManifest.xml file and make your  MainActivity as Launcher activity and SingleImageActivity is second activity.

3. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. This will be your first launching activity layout.

4. Create a layout file for custom views for gridview under res ⇒ layout folder. I named the layout file as customview.xml. This will be your custom layout for gridview.

5. Create a Items.java class for setting and getting gridview items from it. This class works as getter and setter for gridview items.

6. Create a CustomGridViewAdapter.java class for custom gridview adapter for inflating custom view over gridView.

7. Add the following code in MainActivity.java activity. In this following code we learn how to use custom adapter in gridview and set custom gridview over adapter.

8. Create a layout file for single imageview under res ⇒ layout folder. I named the layout file as singleimageactivity.xml.

9. Create a SingleImageActivity.java class for showing single image in activity and add the following code to it.

10. Run the application and you will get the output as shown in video and you are done.

Thanks. 🙂

Download Source Code for both Projects – >

 

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)