Android

Android GridView Example
Author : Ishtek

Using Android API Level : 7 
In this tutorial we shall be covering Android's GridView API with the help
of an example.

Final screen of this GridView example would look like the below image:



In the following section I shall be covering through various files I coded/used
to get this example working. This example has only two views such as Main Layout and
various other Layouts containing buttons for laying out on the main screen.

Following is the main layout of this example.

main.xml
<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF" android:numColumns="3"> </GridView>
This main layout is having a simple GridView. This layout is having a white color background. start_button.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FF0000"> <Button android:id="@+id/startbutton" android:text="Start Preview" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
stop_button.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00FF00"> <Button android:id="@+id/stopbutton" android:text="Stop Preview" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
preview_button.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#0000FF"> <Button android:id="@+id/picbutton" android:text="Take Picture" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout>
GridViewExample.java
/** * This code is provided on "AS IS" basis * @Author: Ishtek */ package com.techienjoy.example; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.LinearLayout; import android.widget.Toast; public class GridViewExample extends Activity { private LayoutInflater infLayout; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridView = (GridView) findViewById(R.id.gridView); CustomGridAdapter customGridAdapter = new CustomGridAdapter(this); gridView.setAdapter(customGridAdapter); gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { Toast.makeText(GridViewExample.this, arg0+" "+arg1+" " +arg2+" "+arg3, arg2).show(); } }); } class CustomGridAdapter extends BaseAdapter { private Context context; public CustomGridAdapter(Context context) { this.context = context; } @Override public View getView(int position, View convertView, ViewGroup parent) { LinearLayout view = null; if(infLayout == null) infLayout = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if(position == 0) { view = (LinearLayout) infLayout.inflate(R.layout.start_button, null); } if(position == 1) { view = (LinearLayout) infLayout.inflate(R.layout.stop_button, null); } if(position == 2) { view = (LinearLayout) infLayout.inflate(R.layout.preview_button, null); } return view; } @Override public int getCount() { return 3; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int arg0) { return 0; } } }
Above source code is just to accomplish this example and to get it working as soon as possible. This example code compiles well, runs well but fails when it comes to achieve a button/item click event. On click of any button laid out on GridView UI widget, appropriate listener onItemClick overridden method should be called, but in this example code this is not happening. onItemClick method is not getting invoked even after clicking any of those three buttons on Grid View is clicked. As of 24th Feb 2012 : I found one interesting fact about this example while solving the issue of button click event. By replacing Button with TextView with the change for the start_button.xml file as follows: <TextView android:id="@+id/startbutton" android:text="Start Preview" android:layout_width="wrap_content" android:layout_height="wrap_content"/> I don't have any clue as to why the button click is not captured while text view click event is captured within the item click event listener.
    Following section is updated as of 26 Nov 2013:
A very basic Grid view with four different surface views added to each cell of a GridView. Output looks as follows:
ExampleGridView/.classpath

<?xml version="1.0" encoding="UTF-8"?> <classpath> <classpathentry kind="src" path="src"/> <classpathentry kind="src" path="gen"/> <classpathentry kind="con" path="com.android.ide.eclipse.adt.ANDROID_FRAMEWORK"/> <classpathentry kind="con" path="com.android.ide.eclipse.adt.LIBRARIES"/> <classpathentry kind="output" path="bin/classes"/> </classpath>


ExampleGridView/.project

<?xml version="1.0" encoding="UTF-8"?> <projectDescription> <name>ExampleGridView</name> <comment></comment> <projects> </projects> <buildSpec> <buildCommand> <name>com.android.ide.eclipse.adt.ResourceManagerBuilder</name> <arguments> </arguments> </buildCommand> <buildCommand> <name>com.android.ide.eclipse.adt.PreCompilerBuilder</name> <arguments> </arguments> </buildCommand> <buildCommand> <name>org.eclipse.jdt.core.javabuilder</name> <arguments> </arguments> </buildCommand> <buildCommand> <name>com.android.ide.eclipse.adt.ApkBuilder</name> <arguments> </arguments> </buildCommand> </buildSpec> <natures> <nature>com.android.ide.eclipse.adt.AndroidNature</nature> <nature>org.eclipse.jdt.core.javanature</nature> </natures> </projectDescription>


ExampleGridView/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.techiecommunity.examplegridview" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/title_activity_main" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>


ExampleGridView/project.properties

# This file is automatically generated by Android Tools. # Do not modify this file -- YOUR CHANGES WILL BE ERASED! # # This file must be checked in Version Control Systems. # # To customize properties used by the Ant build system edit # "ant.properties", and override values to adapt the script to your # project structure. # # To enable ProGuard to shrink and obfuscate your code, uncomment this (available properties: sdk.dir, user.home): #proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt:proguard-project.txt # Project target. target=android-7


ExampleGridView/res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <GridView android:id="@+id/gridView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:numColumns="2" android:listSelector="#55ff55" > </GridView> </RelativeLayout>


ExampleGridView/res/layout/child_view1.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#FF5555" > <SurfaceView android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#FF5555" /> </LinearLayout>


ExampleGridView/res/layout/child_view2.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#FFFF55" > <SurfaceView android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#FFFF55" /> </LinearLayout>


ExampleGridView/res/layout/child_view3.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#5555FF" > <SurfaceView android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#5555FF"/> </LinearLayout>


ExampleGridView/res/layout/child_view4.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#FF55FF" > <SurfaceView android:layout_width="200dp" android:layout_height="200dp" android:orientation="vertical" android:background="#FF55FF" /> </LinearLayout>


ExampleGridView/res/menu/activity_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_settings" android:title="@string/menu_settings" android:orderInCategory="100" /> </menu>


ExampleGridView/res/values/strings.xml

<resources> <string name="app_name">ExampleGridView</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string> </resources>


ExampleGridView/res/values/styles.xml

<resources> <style name="AppTheme" parent="android:Theme.Light" /> </resources>


ExampleGridView/src/net/techiecommunity/examplegridview/MainActivity.java

/** * @author Ishteak * @Contact reaching@techiecommunity.net * THESE SOURCE CODE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESE * SOURCE CODE. */ package net.techiecommunity.examplegridview; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.LinearLayout; public class MainActivity extends Activity { private LayoutInflater infLayout; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); GridView gridView = (GridView) findViewById(R.id.gridView1); CustomGridAdapter customGridAdapter = new CustomGridAdapter(this); gridView.setAdapter(customGridAdapter); gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_main, menu); return true; } class CustomGridAdapter extends BaseAdapter { private Context context; public CustomGridAdapter(Context context) { this.context = context; } @Override public View getView(int position, View convertView, ViewGroup parent) { LinearLayout view = null; if(infLayout == null) infLayout = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if(position == 0) { view = (LinearLayout) infLayout.inflate(R.layout.child_view1, null); } if(position == 1) { view = (LinearLayout) infLayout.inflate(R.layout.child_view2, null); } if(position == 2) { view = (LinearLayout) infLayout.inflate(R.layout.child_view3, null); } if(position == 3) { view = (LinearLayout) infLayout.inflate(R.layout.child_view4, null); } return view; } @Override public int getCount() { return 4; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int arg0) { return 0; } } }


If interested in commenting related to Android GridView Example
Click Here

Name (To be shown on this Page:*

Email (Not to be shown):*

Website (To be shown on this Page)

Your Comments here (To be shown on this Page):*

(You can use <a> Tag in your comments)

Please enter same number as shown here 224

Name: yamlaDated: 2013-10-29 09:30:36
nice tutorial...thanks
how about creating gridview with animation for a grid cell on click.. like rotating a view inside a cell of an grid
before changing the content of the cell to a different view/activity.    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 672

Name: UsingframeworksDated: 2013-11-25 00:05:16
I am looking for a solution/help for creating a GRID look /screen for an application on Android Platform.
This grid would have various layouts for each grid item, and for each grid item, separate layout with different 
images.

Grid will have 2 columns and multiple rows for this application screen. Each box would auto-adjust so as to occupy complete screen.    
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 672

Name: vinodhDated: 2016-03-09 13:25:13
very useful for number of buttons passes in grid view.       
Reply
Click Here

Name (To be shown on Page):*

Email (Optional): (never shown)

Website (To be shown on this Page)

Your Comments here (To be shown on Page):*

Please enter same number as shown here 672




Android Thread Example

REST Interview Questions

JAX-WS Webservice Example

Android Overlap SurfaceView Example

Spring3 Integration of File Endpoint

JAXWS Webservice Example

Android WebView Example

Android Context Menu Example

Setting up Eclipse for Android App Development

Android SensorEvent Orientation Example

Android ImageSwitcher Example

REST API Design for Android App

Android ExpandableListView Example

Singleton Serializable on Android

Android GPS with Google MAP Example

Android Project With Example

Android Project Manageing Files

Project Ideas for App on Android Platform

Android EditText with Background

Android SQLite Database Example

Android AutoCompleteTextView Example

Android Tester

Android Interview Questions

Android ListView Example

Android Intent Notification Example

Android Intent Broadcast Example

Android TextView Link Example

Android Sensor List

Android Sensor Orientation Example

Android Intent Broadcast Receiver

Android Gallery SurfaceViews Example

Android Location Example

Android Text to Speech Example

Android Intent Example

Android Layout Example

Android Download File Example

Android Expandable ListView Example

Android Tab Example

Android RelativeLayout Example

Android Intent Example

Android Text to Speech Example

Android SQLite Example

Android CustomView Example

Android Canvas Example

Android SharedPreferences Example

Android Shape Background Example

Android ShapeButton Example

Android ViewFlipper Example

Android Gallery Example

Android TimePickerDialog Example





If interested commenting on this Page :

comments powered by Disqus
Any source code found on any of the page(s) in Techiecommunity.net is associated with following notice: 
   /*
     * TECHIECOMMUNITY.NET MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE SUITABILITY OF
     * THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
     * TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
     * PARTICULAR PURPOSE, OR NON-INFRINGEMENT. TECHIECOMMUNITY.NET SHALL NOT BE LIABLE FOR
     * ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, MODIFYING OR
     * DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
     *
     * THIS SOFTWARE IS NOT DESIGNED OR INTENDED FOR USE OR RESALE AS ON-LINE
     * CONTROL EQUIPMENT IN HAZARDOUS ENVIRONMENTS REQUIRING FAIL-SAFE
     * PERFORMANCE, SUCH AS IN THE OPERATION OF NUCLEAR FACILITIES, AIRCRAFT
     * NAVIGATION OR COMMUNICATION SYSTEMS, AIR TRAFFIC CONTROL, DIRECT LIFE
     * SUPPORT MACHINES, OR WEAPONS SYSTEMS, IN WHICH THE FAILURE OF THE
     * SOFTWARE COULD LEAD DIRECTLY TO DEATH, PERSONAL INJURY, OR SEVERE
     * PHYSICAL OR ENVIRONMENTAL DAMAGE ("HIGH RISK ACTIVITIES"). TECHIECOMMUNITY.NET
     * SPECIFICALLY DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY OF FITNESS FOR
     * HIGH RISK ACTIVITIES.
     */
   
The content provided in this page is NOT warranted and/or NOT guaranteed by techiecommunity.net .
techiecommunity.net is not liable for any negative consequences that may result/arise from 
implementing directly/indirectly any information covered in these pages/articles/tutorials.

For any of the content, if you would like to bring it to notice for removal from this web site, 
please write to this web site administrator @ EMAIL-ID (please remove space before and after @),
with appropriate concern and supporting proof(s). After thorough review and if found genuine concern,
we would take appropriate action and remove disputed content from this web site within 24 hours 
starting from the time it has brought to techiecommunity.net Administrator notice.

This website uses cookies and third party cookies to improve the user experience. 
And to provide more relevant ads. 
In case of continued use of this website implies that you accept the use of cookies on this website.
		
While using this web site, you agree to have read and accepted techiecommunity.net terms of use and privacy policy.