Wednesday, June 20, 2012

Android: Bigger image for first item of the gridview

Say you want layout like below:

I start to implement with following XML , activity, adapter:



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

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:numColumns="5" >
        </GridView>

</LinearLayout>



package demo.grid.view;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Bundle;
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 DemoGridViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        GridView gridView = (GridView)findViewById(R.id.gridView1);
        gridView.setAdapter(new GridViewAdaptor());
    }
 
    class GridViewAdaptor extends BaseAdapter{

@Override
public int getCount() {
return 50;
}

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

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

@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
ImageView imageView;
if(arg1==null){
imageView = new ImageView(DemoGridViewActivity.this){
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
}
};
}else{
imageView = (ImageView) arg1;
}

imageView.setLayoutParams(new GridView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
imageView.setBackgroundColor(Color.BLUE);
imageView.setScaleType(ScaleType.FIT_XY);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
switch(arg0){
case 0:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.RED);
return imageView;
case 1:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, bitmap.getWidth()/2, 0, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.GREEN);
return imageView;
case 5:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, 0, bitmap.getHeight()/2, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.YELLOW);
return imageView;
case 6:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, bitmap.getWidth()/2, bitmap.getHeight()/2, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.MAGENTA);
return imageView;
default:
imageView.setImageResource(R.drawable.ic_launcher);
return imageView;
}
}
   
    }
}



Now this issue is how to work with a list of object and translate it into this grid view. Following translation needed to be done for adapter:

@Override
public int getCount() {
return integers.size()+3;
}


switch(arg0){
case 0:
imageView.setTag(integers.get(0));

case 1:
imageView.setTag(integers.get(0));
case 5:
imageView.setTag(integers.get(0));

case 6:
imageView.setTag(integers.get(0));
default:
if(arg0>1 && arg0<=4){
imageView.setTag(integers.get(arg0-1));
}else{
imageView.setTag(integers.get(arg0-3));
}
}

full code is here:

package demo.grid.view;

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

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
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 DemoGridViewActivity extends Activity {
    /** Called when the activity is first created. */


List integers = new ArrayList();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
     
        for(int i = 0 ; i < 50 ; i++){
        integers.add(i);
        }
     
        GridView gridView = (GridView)findViewById(R.id.gridView1);
        gridView.setAdapter(new GridViewAdaptor());
    }
 
    class GridViewAdaptor extends BaseAdapter{

@Override
public int getCount() {
return integers.size()+3;
}

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

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

@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
ImageView imageView;
if(arg1==null){
imageView = new ImageView(DemoGridViewActivity.this){
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setTextSize(36);
canvas.drawText(getTag().toString(), getWidth()/2, getHeight()/2, paint);
}
};
}else{
imageView = (ImageView) arg1;
}

imageView.setLayoutParams(new GridView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
imageView.setBackgroundColor(Color.BLUE);
imageView.setScaleType(ScaleType.FIT_XY);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
switch(arg0){
case 0:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.RED);
imageView.setTag(integers.get(0));
return imageView;
case 1:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, bitmap.getWidth()/2, 0, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.GREEN);
imageView.setTag(integers.get(0));
return imageView;
case 5:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, 0, bitmap.getHeight()/2, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.YELLOW);
imageView.setTag(integers.get(0));
return imageView;
case 6:
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, bitmap.getWidth()/2, bitmap.getHeight()/2, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.MAGENTA);
imageView.setTag(integers.get(0));
return imageView;
default:
if(arg0>1 && arg0<=4){
imageView.setTag(integers.get(arg0-1));
}else{
imageView.setTag(integers.get(arg0-3));
}

imageView.setImageResource(R.drawable.ic_launcher);
return imageView;
}
}
   
    }
}



finally this code for loading images from device sdcard and display in the gridview:





package demo.grid.view;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.AsyncTask;
import android.os.Bundle;
import android.provider.MediaStore;
import android.provider.MediaStore.Images.Thumbnails;
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 DemoGridViewActivity extends Activity {
    private static final int START_PROGRESS = 10;
List mBitmaps = new ArrayList();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        AsyncTask asyncTask = new AsyncTask(){
        @Override
        protected void onPreExecute() {
        showDialog(START_PROGRESS);
        super.onPreExecute();
        }
@Override
protected Void doInBackground(Void... params) {
Cursor query = getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, new String[]{MediaStore.Images.Media._ID}, null, null, null);
if(query!=null && query.moveToFirst()){
do{
int columnIndex = query.getColumnIndex(MediaStore.Images.Media._ID);
long origId = query.getLong(columnIndex);
mBitmaps.add(MediaStore.Images.Thumbnails.getThumbnail(getContentResolver(), origId, Thumbnails.MICRO_KIND, null));
}while(query.moveToNext());
query.close();
}
return null;
}
@Override
protected void onPostExecute(Void result) {
removeDialog(START_PROGRESS);
       GridView gridView = (GridView)findViewById(R.id.gridView1);
       gridView.setAdapter(new GridViewAdaptor());
super.onPostExecute(result);
}
        };
        asyncTask.execute();
    }
    @Override
    protected Dialog onCreateDialog(int id, Bundle args) {
    return new ProgressDialog(this);
    }
    class GridViewAdaptor extends BaseAdapter{
@Override
public int getCount() {
return mBitmaps.size()+3;
}
@Override
public Object getItem(int arg0) {
return arg0;
}
@Override
public long getItemId(int arg0) {
return arg0;
}
@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
ImageView imageView;
if(arg1==null){
imageView = new ImageView(DemoGridViewActivity.this){
@Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
}
};
}else{
imageView = (ImageView) arg1;
}
imageView.setLayoutParams(new GridView.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
imageView.setBackgroundColor(Color.BLUE);
imageView.setScaleType(ScaleType.FIT_XY);

Bitmap bitmap;
switch(arg0){
case 0:
imageView.setPadding(10, 10, 0, 0);
bitmap = mBitmaps.get(0);
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.RED);
return imageView;
case 1:
imageView.setPadding(0, 10, 10, 0);
bitmap = mBitmaps.get(0);
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, bitmap.getWidth()/2, 0, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.GREEN);
return imageView;
case 5:
imageView.setPadding(10, 0, 0, 10);
bitmap = mBitmaps.get(0);
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, 0, bitmap.getHeight()/2, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.YELLOW);
return imageView;
case 6:
imageView.setPadding(0, 0, 10, 10);
bitmap = mBitmaps.get(0);
imageView.setImageBitmap(Bitmap.createBitmap(bitmap, bitmap.getWidth()/2, bitmap.getHeight()/2, bitmap.getWidth()/2, bitmap.getHeight()/2));
imageView.setBackgroundColor(Color.MAGENTA);
return imageView;
default:
if(arg0>1 && arg0<=4){
bitmap = mBitmaps.get(arg0-1);
}else{
bitmap = mBitmaps.get(arg0-3);
}
imageView.setPadding(10, 10, 10, 10);
imageView.setImageBitmap(bitmap);
return imageView;
}
}
    }
}



here you have sample code: source code

please check this post for more update: http://sudarnimalan.blogspot.sg/2012/06/android-bigger-image-for-any-of-image.html

1 comment:

Unknown said...

You are great but this is very very hard to do. This shouldnt be this hard. I do want to do this but I cannot deal with such a big code.