How to make a custom grid with images in android ?

Question

I want to make a custom grid with images that we usually see for gallery in android phones

I have been searching it for couple of hours. But no luck favours and finally I am making an attempt to ask question here. Can someone please suggest me how to achieve this kind of gridview. Or do I need to follow any other approach?

Answer 1

See the code for the main.xml and griditem.xml we have to just set rotation on imageview and margin according to the rotation we have set.

Important Note

If your min SDK version is 11 than use property android:rotation="20" bcz it is available since API Level 11 so if you want to run it lower version than use the code of rotation describe in adapter class

Suppose I have fixed and ImageView size 100dp*100dp and If I set Rotation by

android:rotation="20" 

than obviouslly our images will cut down from bottom and top in grid view so set it's margin according to the rotation.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 >
<GridView
    android:id="@+id/gridView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit">
</GridView>
</RelativeLayout>

griditem.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#000">
<RelativeLayout 
   android:layout_width="match_parent"
   android:layout_height="150dp">
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="30dp"
    android:src="@drawable/image1" />
<ImageView
    android:id="@+id/imageView2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="40dp"
    android:layout_marginTop="20dp"
    android:src="@drawable/image2" />
<ImageView
    android:id="@+id/imageView3"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="50dp"
    android:layout_marginTop="20dp"
    android:src="@drawable/image3" />
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Large Text"
    android:textStyle="bold"
    android:textColor="#fff"
     />
</RelativeLayout>
</RelativeLayout>

MainActivity

 import android.annotation.TargetApi;
 import android.app.Activity;
 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.Matrix;
 import android.os.Build;
 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;


 @TargetApi(Build.VERSION_CODES.HONEYCOMB)
 public class MainActivity extends Activity{
String[] logtag=new String[]{"Log.e","Log.d","Log.i"};
GridView gv;
GridAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    gv=(GridView)findViewById(R.id.gridView1);
    adapter=new GridAdapter(this);
    gv.setAdapter(adapter);


}
class GridAdapter extends BaseAdapter{
    LayoutInflater lf;
    Context context;

    public  GridAdapter(MainActivity activity) {
        // TODO Auto-generated method stub
        context=activity;
        lf=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return logtag.length;
    }

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder viewHolder;
        if(convertView==null){
            viewHolder=new ViewHolder();
            convertView=lf.inflate(R.layout.griditem, null);
            viewHolder.image1=(ImageView)convertView.findViewById(R.id.imageView1);
            viewHolder.image2=(ImageView)convertView.findViewById(R.id.imageView2);
            viewHolder.image3=(ImageView)convertView.findViewById(R.id.imageView3);
            viewHolder.text=(TextView)convertView.findViewById(R.id.textView1);
            convertView.setTag(viewHolder);
        }else{
            viewHolder=(ViewHolder) convertView.getTag();
        }
        if(android.os.Build.VERSION.SDK_INT < 11){
        RotateBitmap(viewHolder.image1,R.drawable.image1);
        RotateBitmap(viewHolder.image2,R.drawable.image2);
        RotateBitmap(viewHolder.image3,R.drawable.image3);
        }else{
            viewHolder.image1.setRotation(20);
            viewHolder.image2.setRotation(20);
            viewHolder.image3.setRotation(20);
        }
        viewHolder.text.setText(logtag[position]);
        return convertView;
    }
    class ViewHolder{
        ImageView image1;
        ImageView image2;
        ImageView image3;
        TextView text;
    }
    public void RotateBitmap(ImageView imageView, int imageid){
        Bitmap myImg = BitmapFactory.decodeResource(getResources(),imageid);
        Matrix matrix = new Matrix();
        matrix.postRotate(20);
        Bitmap rotated = Bitmap.createBitmap(myImg, 0, 0, myImg.getWidth(), myImg.getHeight(),matrix, true);
        imageView.setImageBitmap(rotated);
    }
}
}

Answer 2

Create a FrameLayout with 3 ImageViewfor grid Item. Then use the following code in your BaseAdapter class to rotate the ImageView's.

Matrix matrix=new Matrix();
imageView.setScaleType(ScaleType.MATRIX);   //required
matrix.postRotate((float) angle, pivX, pivY);
imagView.setImageMatrix(matrix);

Add necessary margins to separate the ImageView

Answer 3

Take a look at the ImageBlock class located in the source code of the Android ImageGallery project. These ImageBlocks are managed and placed into GridViewSpecials.

Answer 4

You can can use following code to rotate images from center point

Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, targetHeight, config);
Canvas canvas = new Canvas(targetBitmap);
Matrix matrix = new Matrix();
matrix.setRotate(mRotation,source.getWidth()/2,source.getHeight()/2);
canvas.drawBitmap(source, matrix, new Paint());