Android Custom GridView

0

In my previous article, I showed you an example of simple GridView Example.

In this article, we will customize our view. We will continue on our previous example where we have added our favorite cartoon characters to a GridView.

We will now customize the grid view, add an image to each character.

Main Layout

Our main layout consists just of GridView.

welcome.xml:

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

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/cartoon_characters_grid_view"
    android:numColumns="auto_fit"
    android:gravity="center"
    android:stretchMode="columnWidth"
    android:columnWidth="120dp"
    android:verticalSpacing="15dp"
    android:horizontalSpacing="10dp">
    
</GridView>

Custom Adapter

Our model consists of bean called Cartoon. It holds the character’s name and the image.

Cartoon:

package com.javarticles.android;

public class Cartoon {
	private String mName;
	private int mPicRes;

	public Cartoon(String name, int picRes) {
		mName = name;
		mPicRes = picRes;
	}

	public String getName() {
		return mName;
	}

	public int getPicRes() {
		return mPicRes;
	}

}

CartoonListAdapter is our adapter. It extends ArrayAdapter.

Few points to note about the adapter:

  1. It holds the list of Cartoon objects
  2. We override getView. Here we inflate the custom grid view layout R.layout.cartoon_list_item_view.
  3. Based on the item’s position in the grid, we get the corresponding Cartoon bean
  4. Next, we set the view with the character’s name and the image

CartoonListAdapter:

package com.javarticles.android;

import java.util.List;

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

public class CartoonListAdapter extends ArrayAdapter<Cartoon> {
	private List<Cartoon> cartoonItems;
	private Context context;

	
	public CartoonListAdapter(Context context, int textViewResourceId, List<Cartoon> cartoonItems) {
		super(context, textViewResourceId, cartoonItems);
		this.context = context;
		this.cartoonItems = cartoonItems;
	}
    
	@Override
    public View getView(int position, View convertView, ViewGroup parent) {
  
        View view = convertView;
        if (view == null) {
            LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = vi.inflate(R.layout.cartoon_list_item_view, null);
        }
        
        Cartoon cartoon = cartoonItems.get(position);
        
        if (cartoon != null) {            
            // name
            TextView nameTextView = (TextView) view.findViewById(R.id.cartoon_name);
            nameTextView.setText(cartoon.getName());                       
            
            // thumb image
            ImageView imageView = (ImageView) view.findViewById(R.id.cartoon_pic);
            imageView.setImageResource(cartoon.getPicRes());  
               
        }
        
        return view;        
    }
}

Main Activity

Let’s review our main activity.

  1. In our main activity GridViewExampleActivity, we will set the parent GridView layout.
  2. We will build our model, a list of Cartoon objects
  3. Create CartoonListAdapter object and set the the GridView‘s adapter.
  4. We will also set the item listener using setOnItemClickListener
  5. We pass an object of OnItemClickListener. When we click on the character, it should display the name

GridViewExampleActivity:

package com.javarticles.android;

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

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

public class GridViewExampleActivity extends Activity {
	private GridView gridView;

	private void addToList(List<Cartoon> list, String name, int res) {
		list.add(new Cartoon(name, res));
	}

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);
		List<Cartoon> cartoonList = new ArrayList<Cartoon>();
		addToList(cartoonList, "Tintin", R.drawable.tintin_thumb);
		addToList(cartoonList, "Snowy", R.drawable.snowy_thumb);
		addToList(cartoonList, "Obelix", R.drawable.obelix_thumb);
		addToList(cartoonList, "Asterix", R.drawable.asterix_thumb);
		addToList(cartoonList, "Professor Calculus",
				R.drawable.professor_calculus_small);
		addToList(cartoonList, "Thomson & Thompson",
				R.drawable.thomson_thompson_small);
		addToList(cartoonList, "Troubadix", R.drawable.troubadix_small);
		addToList(cartoonList, "Idefix", R.drawable.idefix_small);

		gridView = (GridView) findViewById(R.id.cartoon_characters_grid_view);
		gridView.setAdapter(new CartoonListAdapter(this,
				R.layout.cartoon_list_item_view, cartoonList));

		gridView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				String cartoonName = ((TextView) view
						.findViewById(R.id.cartoon_name)).getText().toString();
				Toast.makeText(view.getContext(), cartoonName,
						Toast.LENGTH_SHORT).show();
			}

		});
	}
}

Run the application

Custom GridView

Custom GridView

Download the source code

This was an article about Android’s Custom GridView. You can download the source code here: customGridViewExample.zip

Share.

Comments are closed.