how to auto resize images in gridview in android app?

Question

I've implemented gridview for my application. But the images are not auto resized.

Exact requirement: If I put only 2 images in grid view those two images should cover overall the screen in any device with any width and height.

my code:

GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));
  }

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return mThumbIds[position];
    }

    public long getItemId(int position) {
        return 0;
    }

    public ImageAdapter(Context c) {
        mContext = c;
    }

      public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    private Integer[] mThumbIds = { R.drawable.mine, R.drawable.mine1,
            R.drawable.mine2, R.drawable.mine4, R.drawable.mine5,
            R.drawable.mine10, R.drawable.mine11, R.drawable.mine12,
            R.drawable.mine21, R.drawable.mine22, R.drawable.mine23,
            R.drawable.mine24,

    };
   }

    }

my corresponding XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<GridView
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="3"
    android:columnWidth="90dp"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" >
</GridView>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingBottom="5dp"
    android:paddingLeft="9dp"
    android:paddingRight="9dp"
    android:paddingTop="5dp" >
</LinearLayout>

   </LinearLayout>

Answer 1

Don't you have to use a custom adapter first to customize your grid?

Answer 2

Your custom adapter will look like this:

class ImageAdapter extends BaseAdapter {

    private Context mContext;

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

    @Override
    public int getCount() {
        return mCursor.getCount();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    // Convert DP to PX
    // Source: http://stackoverflow.com/a/8490361
    public int dpToPx(int dps) {
        final float scale = getResources().getDisplayMetrics().density;
        int pixels = (int) (dps * scale + 0.5f);

        return pixels;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        int imageID = 0;

        // Want the width/height of the items
        // to be 120dp
        int wPixel = dpToPx(120);
        int hPixel = dpToPx(120);

        // Move cursor to current position
        mCursor.moveToPosition(position);
        // Get the current value for the requested column
        imageID = mCursor.getInt(columnIndex);

        if (convertView == null) {
            // If convertView is null then inflate the appropriate layout file
            convertView = LayoutInflater.from(mContext).inflate(R.layout.conversation_item, null);
        }
        else {

        }

        imageView = (ImageView) convertView.findViewById(R.id.imageView);

        // Set height and width constraints for the image view
        imageView.setLayoutParams(new LinearLayout.LayoutParams(wPixel, hPixel));

        // Set the content of the image based on the provided URI
        imageView.setImageURI(
                Uri.withAppendedPath(MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI, "" + imageID)
        );

        // Image should be cropped towards the center
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

        // Set Padding for images
        imageView.setPadding(8, 8, 8, 8);

        // Crop the image to fit within its padding
        imageView.setCropToPadding(true);

        return convertView;
    }
}

And the implementation of this adapter in your main activity:

    protected Cursor mCursor;
protected int columnIndex;
protected GridView mGridView;
protected ImageAdapter mAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_conversations);

    // Get all the images on phone

    String[] projection = {
            MediaStore.Images.Thumbnails._ID,
            MediaStore.Images.Thumbnails.IMAGE_ID
    };

    mCursor = getContentResolver().query(
            MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI,
            projection,
            null,
            null,
            MediaStore.Images.Thumbnails.IMAGE_ID + " DESC"
    );

    columnIndex = mCursor.getColumnIndexOrThrow(projection[0]);

    // Get the GridView layout
    mGridView = (GridView) findViewById(R.id.gridView);
    mAdapter = new ImageAdapter(this);
    mGridView.setAdapter(mAdapter);
}