Draw menu in grid view

7


This is a sample activity which shows how to draw a menu in grid icon veiw.

Underlying Algorithm:

Basic description of algorithm in step by step form:
1.) Create a Project ScrollView.
2.) Put the following code snippet in res/layout/main.xml.

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/myGrid"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:padding="10dp"
    android:verticalSpacing="10dp"
    
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:columnWidth="60dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

3.) Run the application.

Steps to Create:

1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. GridViewMenu. Enter following information:
Project name: GridViewMenu
Build Target: Google APIs
Application name: GridViewMenu
Package name: com.sample. GridViewMenu
Create Activity: GridViewMenu

On Clicking Finish GridViewMenu code structure is generated with the necessary Android Packages being imported along with GridViewMenu.java. GridViewMenu class will look like following:

package com.sample.GridViewMenu;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
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.Toast;

public class GridViewMenu extends Activity {
   @Override
   public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	GridView g = (GridView) findViewById(R.id.myGrid);
	g.setAdapter(new ImageAdapter(this));
	g.setOnItemClickListener(new OnItemClickListener() {
           public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
	      Toast.makeText(GridViewMenu.this, "" + position, Toast.LENGTH_SHORT).show();
           }
	});
   }
   public class ImageAdapter extends BaseAdapter {
	public ImageAdapter(Context c) {
		mContext = c;
	}
	public int getCount() {
		return mThumbIds.length;
	}
	public Object getItem(int position) {
		return position;
	}
	public long getItemId(int position) {
		return position;
	}
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imageView;
		if (convertView == null) {
		   imageView = new ImageView(mContext);
		   imageView.setLayoutParams(new GridView.LayoutParams(45, 45));
		   imageView.setAdjustViewBounds(false);
		   imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
		   imageView.setPadding(8, 8, 8, 8);
		} else {
		   imageView = (ImageView) convertView;
		}
		imageView.setImageResource(mThumbIds[position]);
		return imageView;
	}
	private Context mContext;
	private Integer[] mThumbIds = {
		R.drawable.icon, R.drawable.icon,
		R.drawable.icon, R.drawable.icon,
		R.drawable.icon, R.drawable.icon,
		R.drawable.icon, R.drawable.icon,
		R.drawable.icon, R.drawable.icon,
		R.drawable.icon, R.drawable.icon,
		R.drawable.icon, R.drawable.icon,
	};
    }
}

Output –The final output:

Did you enjoy this article?
Share
the
Love
Get Free Updates

7 Responses

  1. Rahul says:

    Can we design the grid view in the main.xml file itself and just write the general code used in HelloWorld.? I couldn’t understand the code.. Why is the class ImageAdapter created ? if we do it the way I mentioned above, then would it be required?

  2. Rahul says:

    Can you please explain this code?

    public void onItemClick(AdapterView parent, View v, int position, long id) {
    Toast.makeText(GridViewMenu.this, “” + position, Toast.LENGTH_SHORT).show();
    }
    });
    }
    public class ImageAdapter extends BaseAdapter {
    public ImageAdapter(Context c) {
    mContext = c;
    }
    public int getCount() {
    return mThumbIds.length;
    }
    public Object getItem(int position) {
    return position;
    }
    public long getItemId(int position) {
    return position;
    }
    public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) {
    imageView = new ImageView(mContext);
    imageView.setLayoutParams(new GridView.LayoutParams(45, 45));
    imageView.setAdjustViewBounds(false);
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setPadding(8, 8, 8, 8);
    } else {
    imageView = (ImageView) convertView;
    }
    imageView.setImageResource(mThumbIds[position]);
    return imageView;
    }
    private Context mContext;
    private Integer[] mThumbIds = {
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    };
    }

  3. Marcel Toeltl says:

    Can you tell me how to display some little text below the icons? Thank you.
    Regards

  4. James says:

    Hey there,
    I have deployed the code you mentioned but when we are passing the `GridViewMenu.this` to the `makeText` method it says that GridViewMenu can not be resolved to a type!

  5. Arvind says:

    Thank you. Just the thing I was looking for!! :)

  6. Keshav says:

    Hey nice post.. how can we add text below the images we add in the gridview? Thanx..

  7. Oliver says:

    In my eclipse it shows an error, mThumbIds – cannot be resolved to a variable, why it’s so?
    p.s. im new in andorid

Leave a Reply


nine + 8 =

Proudly designed by Theme Junkie.