Custom gridview/Grid View with icons/Grid View in Android/ Grid View with image

Custom gridview/Grid View with icons/Grid View in Android/ Grid View with image

Grid View with icons can be done using Base Adapter. Before start coding, collect some images and copy it into the resource folder. 

• Create a new project
• In the main . xml file, add the grid view

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

<GridView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/gridview"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:columnWidth="90dp"

    android:numColumns="auto_fit"

    android:verticalSpacing="10dp"

    android:horizontalSpacing="10dp"

    android:stretchMode="columnWidth"

    android:gravity="center"

/>

In the activity, create an object of grid view as we did in previous example. (Grid View with text). Then

gridview.setAdapter(new ImageAdapter(this));

  

ImageAdapter class extends BaseAdapter

public class ImageAdapter extends BaseAdapter {

 getItem(int) should return the actual object at the specified position in the adapter

    public Object getItem(int position) {

        return null;

    }

Likewise, getItemId(int) should return the row id of the item, but it's not needed here.

    public Object getItem(int position) {

       return null;

   }

getView() creates a new View for each image added to the ImageAdapter. When this is called, a View is passed in, which is normally a recycled object (at least after this has been called once), so there's a check to see if the object is null. If it is null, an ImageView is instantiated and configured with desired properties for the image presentation:

setLayoutParams(ViewGroup.LayoutParams) sets the height and width for the View—this ensures that, no matter the size of the drawable, each image is resized and cropped to fit in these dimensions, as appropriate.

setScaleType(ImageView.ScaleType) declares that images should be cropped toward the center (if necessary).

setPadding(int, int, int, int) defines the padding for all sides. (Note that, if the images have different aspect-ratios, then less padding will cause for more cropping of the image if it does not match the dimensions given to the ImageView.)

If the View passed to getView() is not null, then the local ImageView is initialized with the recycled View object.

At the end of the getView() method, the position integer passed into the method is used to select an image from themThumbIds array, which is set as the image resource for the ImageView.

public View getView(int position, View convertView, ViewGroup parent) {


        ImageView imageView;


           imageView = new ImageView(mContext);


            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));

            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

            imageView.setPadding(8, 8, 8, 8);

      

        imageView.setImageResource(mThumbIds[position]);

        return imageView;

    }

Entire code



main.xml



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

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

HelloGridView.java

public void HelloGridView extends Activity

{

     public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter());
      gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
        }
    });
}

public class ImageAdapter extends BaseAdapter {
   
    public int getCount() {
        return mThumbIds.length;
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return 0;
    }
    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
     
            imageView = new ImageView(getApplicationContext());
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
            imageView.setImageResource(mThumbIds[position]);
             return imageView;
    }
    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_8, R.drawable.sample_9,
            R.drawable.sample_10, R.drawable.sample_11,
            R.drawable.sample_12, R.drawable.sample_13,
            R.drawable.sample_14, R.drawable.sample_15,
            R.drawable.sample_16, R.drawable.sample_17,
            R.drawable.sample_18, R.drawable.sample_19,
            R.drawable.sample_20, R.drawable.sample_21
    };
}

}

Result







See More

GridView with icon and text
Custom Listview 
Custom Spinner
Tab View