Android gridview tutorial

Well this time i would like to show you a simple tutorial about gridview, looking back we can see the gridview is fully implemented especially in (android froyo phones) you can see that in the gallery which the pictures are being displayed in a gridview and you may able to scroll to the bottom and click the desired picture...

However this time, i'll teach only some simple yet crazy tutorials on how they implement gridview especially in galleries.

Well not only that after we finish this lesson we will go again to the another deeper tutorials especially in gridview..
Agree?

Okay so lets start!:

Okay in your layout folder,
Make an xml file and name it (gridview_item):

gridview_item.xml

as you notice we have call the SquareImageView activity into our xml...
And then for your activity file make one and name it (SquareImageView).
SquareImageView.java

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class SquareImageView extends ImageView
{
    public SquareImageView(Context context)
    {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet 

attrs)
    {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet 

attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int 

heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), 

getMeasuredWidth()); //Snap to width
    }
}

if you notice the code, the code seemingly defines the pictures height and width..
And then make another .xml file and named it (activity_main) somehow this is automatically generated and then you can use it somehow..

this time we will make a gridview item
activity_main.xml

you can change the numcolumns as you desire..
And then go to your MainActivity.java and paste this code.
MainActivity.java

import java.util.ArrayList;
import java.util.List;

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.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridView = (GridView)findViewById

(R.id.gridview);
        gridView.setAdapter(new MyAdapter(this));
      
        gridView.setOnItemClickListener(new 

OnItemClickListener()
        {

   @Override
   public void onItemClick(AdapterView 

parent, View view,
     int position, long id) 

{
    
   
   }
        });
        
        
        
    }

    
    
    private class MyAdapter extends BaseAdapter
    {
     
  
     
        private List items = new ArrayList();
        private LayoutInflater inflater;

        public MyAdapter(Context context)
        {
            inflater = LayoutInflater.from(context);

            items.add(new Item("Image 1", 

R.drawable.tarpaulin));
            items.add(new Item("Image 2", 

R.drawable.nature2));
            items.add(new Item("Image 3", 

R.drawable.churchlogo));
            items.add(new Item("Image 4", 

R.drawable.nature3));
            items.add(new Item("Image 5", R.drawable.tree2));
        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public Object getItem(int i)
        {
            return items.get(i);
        }

        
        
        
      
        
        
        
        @Override
        public long getItemId(int i)
        {
            return items.get(i).drawableId;
        }

        @Override
        public View getView(int i, View view, ViewGroup 

viewGroup)
        {
            View v = view;
            ImageView picture;
            TextView name;

            if(v == null)
            {
               v = inflater.inflate(R.layout.gridview_item, 

viewGroup, false);
               v.setTag(R.id.picture, v.findViewById

(R.id.picture));
               v.setTag(R.id.text, v.findViewById(R.id.text));
            }

            picture = (ImageView)v.getTag(R.id.picture);
            name = (TextView)v.getTag(R.id.text);

            Item item = (Item)getItem(i);

            picture.setImageResource(item.drawableId);
            name.setText(item.name);

            return v;
        }

        private class Item
        {
            final String name;
            final int drawableId;

            Item(String name, int drawableId)
            {
                this.name = name;
                this.drawableId = drawableId;
            }
        }
    }






}

Note: you will provide your own picture...

//provide your own picture!
            items.add(new Item("Image 1", 

R.drawable.tarpaulin));
            items.add(new Item("Image 2", 

R.drawable.nature2));
            items.add(new Item("Image 3", 

R.drawable.churchlogo));
            items.add(new Item("Image 4", 

R.drawable.nature3));
            items.add(new Item("Image 5", R.drawable.tree2));

Now run it on emulator or on your real device...
Thank you,
Regards,
Doni

You may also like: Play sound when clicking gridview