Sorry for the not technical question.
I am researching to understand how can I implement a very common feature in android apps where the user can crop a part of an image. This is usually performed using a square window hovering above the shadowed image. A good example is with choosing profile image in the linkedin app. Does anyone know or have good example of how to do it?
Thanks in advance.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="camera.test.demo"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="8" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".SimpleCameraGalleryDemo"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
2. Activity Code:
-
package camera.test.demo;
import android.app.Activity;
import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class SimpleCameraGalleryDemo extends Activity {
private static final int PICK_FROM_CAMERA = 1;
private static final int PICK_FROM_GALLERY = 2;
ImageView imgview;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imgview = (ImageView) findViewById(R.id.imageView1);
Button buttonCamera = (Button) findViewById(R.id.btn_take_camera);
Button buttonGallery = (Button) findViewById(R.id.btn_select_gallery);
buttonCamera.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// call android default camera
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
intent.putExtra(MediaStore.EXTRA_OUTPUT,
MediaStore.Images.Media.EXTERNAL_CONTENT_URI.toString());
// ******** code for crop image
intent.putExtra("crop", "true");
intent.putExtra("aspectX", 0);
intent.putExtra("aspectY", 0);
intent.putExtra("outputX", 200);
intent.putExtra("outputY", 150);
try {
intent.putExtra("return-data", true);
startActivityForResult(intent, PICK_FROM_CAMERA);
} catch (ActivityNotFoundException e) {
// Do nothing for now
}
}
});
buttonGallery.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent intent = new Intent();
// call android default gallery
intent.setType("image/*");
intent.setAction(Intent.ACTION_GET_CONTENT);
// ******** code for crop image
intent.putExtra("crop", "true");
intent.putExtra("aspectX", 0);
intent.putExtra("aspectY", 0);
intent.putExtra("outputX", 200);
intent.putExtra("outputY", 150);
try {
intent.putExtra("return-data", true);
startActivityForResult(Intent.createChooser(intent,
"Complete action using"), PICK_FROM_GALLERY);
} catch (ActivityNotFoundException e) {
// Do nothing for now
}
}
});
}
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == PICK_FROM_CAMERA) {
Bundle extras = data.getExtras();
if (extras != null) {
Bitmap photo = extras.getParcelable("data");
imgview.setImageBitmap(photo);
}
}
if (requestCode == PICK_FROM_GALLERY) {
Bundle extras2 = data.getExtras();
if (extras2 != null) {
Bitmap photo = extras2.getParcelable("data");
imgview.setImageBitmap(photo);
}
}
}
}
3. Main.xml
<?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" >
<TextView
android:id="@+id/textViewAddCard"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Take Image"
android:textSize="16dp"
android:layout_gravity="center"
android:gravity="center"
android:typeface="sans"/>
<Button
android:id="@+id/btn_take_camera"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Take From Camera"
android:layout_marginTop="5dp"
android:layout_gravity="center"
android:typeface="sans"/>
<Button
android:id="@+id/btn_select_gallery"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Select from Gallery"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:typeface="sans" />
<ImageView
android:id="@+id/imageView1"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Try the sample method below. Not only you can cut a rectangle but ANY SHAPE from any place in the bitmap you want.
You can cut a Micky mouse from the center of bitmap also.
The below method is cutting a rectangular bitmap to have pointed triangle on the left side of bitmap. like whatsapp do for thumbnails of images shared in chat.
Anything drawn from the Paint with setXfermode(new PoterDuffXfermode(Mode.CLEAR)) will clear the pixels from bitmap.
Try it out.. Hope this helps :)
private Bitmap cropAndGivePointedShape(Bitmap originalBitmap)
{
Bitmap bmOverlay = Bitmap.createBitmap(originalBitmap.getWidth(),
originalBitmap.getHeight(),
Bitmap.Config.ARGB_8888);
Paint p = new Paint();
p.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(originalBitmap, 0, 0, null);
canvas.drawRect(0, 0, 20, 20, p);
Point a = new Point(0, 20);
Point b = new Point(20, 20);
Point c = new Point(0, 40);
Path path = new Path();
path.setFillType(FillType.EVEN_ODD);
path.lineTo(b.x, b.y);
path.lineTo(c.x, c.y);
path.lineTo(a.x, a.y);
path.close();
canvas.drawPath(path, p);
a = new Point(0, 40);
b = new Point(0, 60);
c = new Point(20, 60);
path = new Path();
path.setFillType(FillType.EVEN_ODD);
path.lineTo(b.x, b.y);
path.lineTo(c.x, c.y);
path.lineTo(a.x, a.y);
path.close();
canvas.drawPath(path, p);
canvas.drawRect(0, 60, 20, originalBitmap.getHeight(), p);
return bmOverlay;
}
Try this library:
https://github.com/biokys/cropimage
For a square:
intent.putExtra(CropImage.ASPECT_X, 2);
intent.putExtra(CropImage.ASPECT_Y, 2);
For a rectangle:
intent.putExtra(CropImage.ASPECT_X, 3);
intent.putExtra(CropImage.ASPECT_Y, 2);
