Fill and Change Images of Gridview from Outside

Gridview is a viewgroup that displays items in a two-dimensional and scrollable grid. The grid items are automatically inserted to the layout using a adapter. Today we will try to fill or change images to gridview childs from outside imageview. This gridview base on Android sites example codes, we just need little modification on ImageAdapter (see codes). 

Create new android project and then put these 3 images (or use your owns) to drawable-mdpi folder. These images will be set as image resources of 3 imageview. We will fill gridview with these 3 images whichever you choose.

 

 

Lets start with activity_main.xml, in this layout set one gridview and three imageview. In gridview attibutes set numColumn = 3 because we will make 3x3 gridview and place this object on top-center of the screen. Place three imageview below this gridview.

In MainActivity.java, inside onCreate inflate gridview and three imageviews, use above three images as image resources for three imageview. Set onClickListener for all imageview to define onClick callback methode to set data1 with image resource in that clicked imageview. 

Before set adapter for gridview, make an integer array named grida with length 9, it will be used to fill gridview childs and inisialize all value with 0 (zero) means that all gridview child will be empty (no image) at first. Then set adapter to gridview named ImageAdaper with two argument : Context (this) and integer array (grida).Create a new class called ImageAdapter.java that extent BaseAdapter. This adapter class is similar with Android websites example except that constructor have two parameter rather than one, they are Context and integer array. Also instantiate integer array wih length 9 called gride at beginning of class.In MainActivity class, to display images to gridview when clicked set onItemClickListener to define onItemClick callback methode. In this methode fill integer array grida with data1 and to make gridview refresh to display latest data use invalidateView. Additionally to set width of gridview child use DisplayMetrics.withPixels to get screen width and then devided by three.

This project need android API 8 or above and already tested with emulator.

activity_main.xml

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <GridView
        android:id="@+id/gview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="3"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />
    
    <ImageView
    	android:id="@+id/iview1"
    	android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/gview"
        android:layout_alignParentLeft="true" />"
        
    <ImageView
    	android:id="@+id/iview2"
    	android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/gview"
        android:layout_alignParentRight="true" />"
        
    <ImageView
    	android:id="@+id/iview3"
    	android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/gview"
        android:layout_centerHorizontal="true" />"

</RelativeLayout>

MainActivity.java

package com.example.ndsc;

import android.os.Bundle;
import android.app.Activity;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;

public class MainActivity extends Activity 
{
	private GridView gview;
	public static int gwidth;
	private ImageView iview1,iview2,iview3;
	private int data1;
	private int[] grida ={0,0,0,0,0,0,0,0,0};
		
	
	@Override
	protected void onCreate(Bundle savedInstanceState) 
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//this codes to get screen width/height
		DisplayMetrics dmetrics = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dmetrics);
		//gridview column width
		gwidth = dmetrics.widthPixels/3;
		
		gview = (GridView) findViewById(R.id.gview);
		// set custom imageadapter with 2 argument (Context,array int)
		gview.setAdapter(new ImageAdapter(this,grida));
		
		iview1= (ImageView) findViewById(R.id.iview1);
		iview1.setImageResource(R.drawable.kartukid114);
		iview1.setOnClickListener(new OnClickListener() 
		{
			@Override
			public void onClick(View view) 
			{
				data1=R.drawable.kartukid114;
			}
			
		});
		iview2= (ImageView) findViewById(R.id.iview2);
		iview2.setImageResource(R.drawable.kartukid119);
		iview2.setOnClickListener(new OnClickListener() 
		{
			@Override
			public void onClick(View view) 
			{
				data1=R.drawable.kartukid119;
			}
			
		});
		iview3= (ImageView) findViewById(R.id.iview3);
		iview3.setImageResource(R.drawable.kartukid11);
		iview3.setOnClickListener(new OnClickListener() 
		{
			@Override
			public void onClick(View view) 
			{
				data1=R.drawable.kartukid11;
			}
			
		});
		
		gview.setOnItemClickListener(new OnItemClickListener() 
                {
    	            @Override
    	            public void onItemClick(AdapterView<?> parent, View v,
                                                       int position, long id) 
    	            {
    		  	//fill gridview child with data1
    		  	grida[position]=data1;
                        //invalidate view to refresh gridview
    		  	gview.invalidateViews();
    	            }

                });
	}
	
}

ImageAdapter.java

package com.example.ndsc;

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

public class ImageAdapter extends BaseAdapter 
{
	private Context mcontext;
	private ImageView imageView;
	private int[] gride=new int[9]; //set gridview size 3x3
	private int gwidth = MainActivity.gwidth; //gridview column width
	
	// custom constructor with 2 parameter (Context,array int)
	public ImageAdapter(Context context, int[] gridarray)
	{
		mcontext = context;
		gride=gridarray;
	}
	
	@Override
	public int getCount() 
	{
		return gride.length;
	}

	@Override
	public Object getItem(int arg0) 
        {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int arg0)
        {
		// TODO Auto-generated method stub
		return 0;
	}
		
	public View getView(int position, View convertView, ViewGroup parent) 
	{
	      if (convertView == null) 
	      {  
	         imageView = new ImageView(mcontext);
	         imageView.setLayoutParams(new GridView.LayoutParams(gwidth,gwidth));
	         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
	         imageView.setPadding(3,3,3,3);
	      } 
	      else {imageView = (ImageView) convertView;}
	      //set foreground image 
	      imageView.setImageResource(gride[position]);
	      
	      return imageView;
	   }

}