Draw Menu In Grid View

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.

 

 

 

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:

 

 

 

Output โ€“The final output:

Leave a Comment:

7 comments
Rahul says August 30, 2011

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?

Reply
Rahul says August 30, 2011

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,
};
}

Reply
Marcel Toeltl says December 31, 2011

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

Reply
James says February 19, 2012

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!

Reply
Arvind says June 16, 2012

Thank you. Just the thing I was looking for!! ๐Ÿ™‚

Reply
Keshav says June 23, 2012

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

Reply
Oliver says July 24, 2012

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

Reply
Add Your Reply