I'm currently loading a list of remote images from a directory. I'd like to have the user be able to select one, and then draw over the image with his fingers, and then save it. (Eventually, to replace the existing image in the directory with the modified one)
I'd love some pointers in the right direction with this one.
Thanks!
Start by studying the fingerpaint.java in the samples under the graphics folder.
You should override the onDraw method of your view.
screen_drawing_room.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rlid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout //set background for the bottom layout set image here.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
android:orientation="vertical"
android:weightSum="1.0" >
<LinearLayout
android:id="@+id/view_drawing_pad"//your drawing pad on foreground
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</LinearLayout>
</LinearLayout>
</RelativeLayout
In your activities onCreate()
Drawing View mDrawingView=new DrawingView(this);
setContentView(R.layout.screen_drawing_room);
LinearLayout mDrawingPad=(LinearLayout)findViewById(R.id.view_drawing_pad);
mDrawingPad.addView(mDrawingView);
DrawingView.java
Define your DrawingView. The below can be used for freehand drawing. Modify the same to draw lines, texts and fill color( closed area).
You should add a color picker and set the color to the paint object to allow users to choose the paint color.
For flood Fill see the accepted answer in the link android using flood fill algorithm getting out of memory exception.
class DrawingView extends View
{
Paint mPaint;
//MaskFilter mEmboss;
//MaskFilter mBlur;
Bitmap mBitmap;
Canvas mCanvas;
Path mPath;
Paint mBitmapPaint;
public DrawingView(Context context) {
super(context);
// TODO Auto-generated constructor stub
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(0xFFFF0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(20);
mPath = new Path();
mBitmapPaint = new Paint();
mBitmapPaint.setColor(Color.RED);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
}
@Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
super.draw(canvas);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touch_start(float x, float y) {
//mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
}
private void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
}
}
private void touch_up() {
mPath.lineTo(mX, mY);
// commit the path to our offscreen
mCanvas.drawPath(mPath, mPaint);
//mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));
// kill this so we don't double draw
mPath.reset();
// mPath= new Path();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break;
}
return true;
}
}
}
Your Drawing view is set. Study the fingerpaint.java from the sample on sdk umder the graphics folder.
Resulting sanpshot. What you see in the background is a image. On the foreground i draw hi. I have draw lines to the corner. If you can make out it is red.
Draw lines which looks like border. Set Stroke width for the paint to whatever you like. Similarly you can draw lines where you want by changing the x1,y1 and x2,y2 co-ordinates.
Display display = ( (Activity) mcontext).getWindowManager().getDefaultDisplay();
float w = display.getWidth();
float h = display.getHeight();
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawLine(0, 0, w, 0,mBitmapPaint);
canvas.drawLine(0, 0, 0, h,mBitmapPaint);
canvas.drawLine(w,h,w,0,mBitmapPaint);
canvas.drawLine(w, h, 0,h , mBitmapPaint);
To save
AlertDialog.Builder editalert = new AlertDialog.Builder(DrawingRoomScreen.this);
editalert.setTitle("Please Enter the name with which you want to Save");
final EditText input = new EditText(DrawingRoomScreen.this); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT);
input.setLayoutParams(lp);
editalert.setView(input);
editalert.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
content.setDrawingCacheEnabled(true);
String name= input.getText().toString();
Bitmap bitmap = mDrawingPad.getDrawingCache();//root view
String path = Environment.getExternalStorageDirectory().getAbsolutePath();
File file = new File("/sdcard/"+name+".png");
try
{
if(!file.exists())
{
file.createNewFile();
}
FileOutputStream ostream = new FileOutputStream(file);
bitmap.compress(CompressFormat.PNG, 10, ostream);
System.out.println("saving......................................................"+path);
ostream.close();
//content.invalidate();
}
catch (Exception e)
{
e.printStackTrace();
}finally
{
}
}
});
editalert.show();
To get image from gallery
File fp;
Drawable d;
public void setImagefrmGallery()
{
// To open up a gallery browser
Intent intent = new Intent();
intent.setType("image/*");
intent.setAction(Intent.ACTION_GET_CONTENT);
startActivityForResult(Intent.createChooser(intent, "Select Picture"),1);
// To handle when an image is selected from the browser, add the following to your Activity
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == RESULT_OK) {
if (requestCode == 1) {
// currImageURI is the global variable I�m using to hold the content:// URI of the image
Uri currImageURI = data.getData();
System.out.println("Hello======="+getRealPathFromURI(currImageURI));
String s= getRealPathFromURI(currImageURI);
File file = new File(s);
if (file.exists()) {
fp=file.getAbsolutePath();
d = Drawable.createFromPath(file.getAbsolutePath());
mDrawingPad.setBackgroundDrawable(d);
}
else
{
System.out.println("File Not Found");
}
}
}
}
// And to convert the image URI to the direct file system path of the image file
public String getRealPathFromURI(Uri contentUri) {
// can post image
String [] proj={MediaStore.Images.Media.DATA};
Cursor cursor = managedQuery( contentUri,
proj, // Which columns to return
null, // WHERE clause; which rows to return (all rows)
null, // WHERE clause selection arguments (none)
null); // Order-by clause (ascending by name)
int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
cursor.moveToFirst();
return cursor.getString(column_index);
}
