Android show images in GridView

In this tip, I am going to show how to display multiple images in a grid layout by using the Android' GridView widget. Now create a new Android project. Then modify the activity_main.xml file to add the GridView widget.

<LinearLayout 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="vertical"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >
  
   <GridView
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:gravity="center"
android:horizontalSpacing="10dip"
android:verticalSpacing="10dip"

/>
  
</LinearLayout>


The GridView widget can have its own layout file. In its layout, you can define an ImageView  to display images. Here is the gridview_layout.xml file defined for the GridView.

<?xml version="1.0" encoding="utf-8"?>

<!-- Single Item Design -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
    >

<ImageView
   android:id="@+id/image"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:contentDescription="icon"
   android:adjustViewBounds="true"
  />

</RelativeLayout>


After you define the GridView in the activity_main.xml file and create its layout file, you need to customize the getView method of the BaseAdapter class to supply the images to the GridView. The code below is the content of the AdapterGridView class. The AdapterGridView class extends the BaseAdapter class and the getView method is overridden to supply the images to the GridView. The drawable resource ids of the images that are stored in the res/drawable folder are in the imgs array.

  package com.example.andtip;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class AdapterGridView extends BaseAdapter{
int groupid;
Context context;

private Integer[] imgs={R.drawable.photo1, R.drawable.photo2,R.drawable.photo3, R.drawable.photo4};
public AdapterGridView(Context context, int vg){
this.context=context;
groupid=vg;

}
public int getCount(){
return imgs.length;
}
public long getItemId(int position) { return 0; }
public Object getItem(int position) { return null;}

public View getView(int position, View convertView, ViewGroup parent) {
     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     View itemView = inflater.inflate(groupid, parent, false);
     ImageView imageView = (ImageView) itemView.findViewById(R.id.image);
     imageView.setImageResource(imgs[position]);
     return itemView;
    
}



}


In the onStart method of the MainActivity class, you need to create a reference to the GridView widget and attache the object of the AdapterGridView class to the GridView by using the setAdapter method.

public void onStart(){
   super.onStart();
  
   GridView gridview = (GridView) findViewById(R.id.gridview);
   gridview.setAdapter(new AdapterGridView(this, R.layout.gridview_layout));
   gridview.setOnItemClickListener(new OnItemClickListener(){
   public void onItemClick(AdapterView<?> parent, View v, int pos, long id) {
   Toast.makeText(context,"Image position="+pos, Toast.LENGTH_LONG).show();
   }
  
   });
}

Android-show-images-in-GridView

Posted by: Dara | post date: 06-02-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.