GridView Auto resized images in Android Example

Hi,

   This is an Example for Gridview with auto resized images with Textview in Android

1. First create a xml layout with Gridview and setting a stretch mode to stretch column width and set spacing to 0 and set the no of columns to 0 This is an Main Activity layout

activity_main.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="0dp"
        android:horizontalSpacing="0dp"
        android:gravity="center"
        android:stretchMode="columnWidth"
        android:numColumns="auto_fit" >
    </GridView>

</FrameLayout>

2. Create an another layout for grid item textview using squareimageview class and set the scale type to center crop. Now xml name is grid_item.xml.

grid_item.xml:

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.socialnetwork.squareimageview
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        />
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="#55000000"
        />
</FrameLayout>

3.Now create the custom class extends ImageView calling it in squareimageview.java


squareimageview.java:


package com.example.socialnetwork;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class squareimageview extends ImageView
{


public squareimageview(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public squareimageview(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}


public squareimageview(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(),getMeasuredWidth());

}

}


4.Create a adapter to handle the list,the adapter is defined in an inner class (no need to create a new class file). Let's call it MyAdapter and make it extend the BaseAdapter class.

MainActivity.java:

package com.example.socialnetwork;

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

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

GridView gd;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gd=(GridView)findViewById(R.id.gridView1);
gd.setAdapter(new MyAdapter(this));

}

public class MyAdapter extends BaseAdapter
{

private List<Item> items=new ArrayList<Item>();
private LayoutInflater inflator;

public MyAdapter(Context context) {
// TODO Auto-generated constructor stub
inflator=LayoutInflater.from(context);
items.add(new Item("Facebook",R.drawable.fb));
items.add(new Item("Twitter",R.drawable.twitter));
items.add(new Item("Linkedin",R.drawable.linkedin));
items.add(new Item("Google+",R.drawable.google));
items.add(new Item("Youtube",R.drawable.rss));
items.add(new Item("Myspace", R.drawable.fb));

}

@Override
public int getCount() {
// TODO Auto-generated method stub
return items.size();
}

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
// TODO Auto-generated method stub
View v=convertView;
ImageView img1;
TextView txt1;
if(v==null)
{
v=inflator.inflate(R.layout.grid_item,parent,false);
v.setTag(R.id.picture,v.findViewById(R.id.picture));
v.setTag(R.id.text,findViewById(R.id.text));

}

   img1=(ImageView)v.findViewById(R.id.picture);
   txt1=(TextView)v.findViewById(R.id.text);
 
   Item item=(Item)getItem(position);
 
   img1.setImageResource(item.drawableId);
   txt1.setText(item.name);
       
return v;
}

}

private class Item
{
final String name;
final int drawableId;

Item(String name,int drawableId)
{
  this.name=name;
  this.drawableId=drawableId;

}
}


}

5.Run the Application and Here the output is like this