Use ImageView with a GridView to set number of images displayed in the rows and columns

Question

I want to layout an 8x8 grid of images, actually just 40x40px icons, within a GridView layout using the ImageView class.

I have tried playing around with the setLayoutParams and the setScaleType methods of the ImageView class but have not been able to achieve the desired affect. Here is what I have, but I am experimenting with only a 3x3 grid of small icons until I get the hang of it.

Main Acitvity:

package com.topherwilso.ropasci;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gv = (GridView) findViewById(R.id.gridview);
        gv.setAdapter(new ImageAdapter(getApplicationContext()));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

And my ImageAdapter class:

package com.topherwilso.ropasci;

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

public class ImageAdapter extends BaseAdapter {

    int[] images = {
            R.drawable.one, R.drawable.two,
            R.drawable.three, R.drawable.four,
            R.drawable.five, R.drawable.six,
            R.drawable.seven, R.drawable.eight,
            R.drawable.nine
    };
    private Context context;

    public ImageAdapter(Context applicationContext){
        context=applicationContext;
    }

    @Override
    public int getCount() {
        //Number of data elements to be displayed
        return images.length;
    }

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

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView iv;
        if(convertView != null){
            iv = (ImageView) convertView;
        }
        else{
            iv = new ImageView(context);
            iv.setLayoutParams(new GridView.LayoutParams(120, 120));
            iv.setScaleType(ScaleType.CENTER);
            iv.setPadding(0, 0, 0, 0);
        }
        iv.setImageResource(images[position]);
        return iv;
    }

}

This is what is looks like now,

What I have now

This is what I would like,

enter image description here

http://stackoverflow.com/questions/7298731/when-to-call-activity-context-or-application-context. Use activity context — Raghunandan, Apr 20 '13 at 06:40
Thanks for the article I get what they are saying but I don't know how to implement it in my code. I tried "iv = new ImageView(MainActivity.getActivityContext());", "iv = new ImageView(MaintActivity);", "iv = new ImageView(this);" but nothing works. — ChrisWilson4, Apr 20 '13 at 07:16
the above link is for getting to know when to use getApplicationContext() and when to use activity context. It has nothing to do with your gridview images. — Raghunandan, Apr 20 '13 at 07:18
Is the image getting displayed properly in the imageview. For a better understanding can you post a screen shot? — Raghunandan, Apr 20 '13 at 07:27

Raghunandan · Accepted Answer · 2013-04-20T08:01:25.890

Try the below

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/gridview"
android:padding="40dp"
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
android:columnWidth="0dp"
android:numColumns="3" // set the number of columns to 3
android:verticalSpacing="20dp"
android:horizontalSpacing="20dp" 
android:gravity="center"
/>

http://developer.android.com/guide/topics/ui/layout/gridview.html

http://developer.android.com/reference/android/widget/GridView.html

Specifying the number of rows is not possible. You can use TableLayout instead of gridview if the above does not work. In your case you have 9 icons so setting column number to 3 should work.

For TableLayout

http://developer.android.com/reference/android/widget/TableLayout.html

Wow, thanks. Feel stupid sometimes, I had put numColumns to auto. — ChrisWilson4, Apr 20 '13 at 08:12

Use ImageView with a GridView to set number of images displayed in the rows and columns

1 Answers1