Hiii Everyone, In this tutorial, I share how to capture digital signature using android canvas and also save the signature in image format for further usage. The most important component we have used to capture the signature is an android canvas. And in this tutorial, I share a PaintView and create a painting in android.
Android Canvas Tutorial – Capture Digital Signature and PaintView and Save
In this article, I am sharing to create paint on the image it’s very easy to implement just follow these simple step and implement it.
https://www.youtube.com/watch?v=oAfiCInXPB8
Step 1: First one to Start Android Studio
Step 2 : Seconds step to Create a New Project Project ClickOn ==> File ==> NEW ==> New Project
Step 3: After create on your project open your java file and XML file and you can just copy the code and paste on your file and run your project.
Step 4: Open your Main XML file activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.caprispine.caprispinestaff.Fregment.Body_Fornt">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dp"
android:textColor="@color/black"
android:text="Please mark any pain , stiffness and weakness on the body by choosing the colors."/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:paddingTop="15dp"
android:orientation="vertical">
<TextView
android:id="@+id/RedColor"
android:layout_width="40dp"
android:layout_height="40dp"
android:gravity="bottom"
android:layout_margin="5dp"
android:background="@drawable/red_dot"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textStyle="bold"
android:text=" Pain "/>
<TextView
android:id="@+id/BlueColor"
android:layout_width="40dp"
android:layout_height="40dp"
android:gravity="bottom"
android:layout_margin="5dp"
android:background="@drawable/blue_dot"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textStyle="bold"
android:text="Stiffness"/>
<TextView
android:id="@+id/GreenColor"
android:layout_width="40dp"
android:layout_height="40dp"
android:gravity="bottom"
android:layout_margin="5dp"
android:background="@drawable/green"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textStyle="bold"
android:text="Weakness"/>
</LinearLayout>
<LinearLayout
android:id="@+id/llCanvas"
android:layout_width="match_parent"
android:background="@drawable/edit_text"
android:layout_height="match_parent"
android:layout_weight="1"
android:padding="10dp"
android:layout_marginRight="10dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="@+id/btnReset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:layout_marginRight="10dp"
android:text="Reset"
android:textStyle="bold" />
<Button
android:id="@+id/btnSave"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:onClick="onClick"
android:text="Submit"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
In XML file u can be used for design layout Android Canvas Tutorial – Capture Digital Signature and PaintView and Save
Step 5:- Open Your Java Class MainActivity.java and add these code.
public class MainActivity extends ActionBarActivity {
private final static String TAG = "Main";
private PaintView mPaintView;
private LinearLayout mLlCanvas;
TextView RedDot,GreenDot,BlueDot;
Button SaveBtn,ClearBtn ;
String Front_Image="";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_your_sign);
mLlCanvas = (LinearLayout)findViewById(R.id.llCanvas);
mPaintView = new PaintView(getActivity(), null);
mLlCanvas.addView(mPaintView, 0);
mPaintView.requestFocus();
SaveBtn=(Button)findViewById(R.id.btnSave);
SaveBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
savingFile();
Add_Front();
}
});
ClearBtn=(Button)findViewById(R.id.btnReset);
ClearBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPaintView.clear();
}
});
RedDot=(TextView)findViewById(R.id.RedColor);
RedDot.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPaintView.setPathColor(Color.RED);
}
});
GreenDot=(TextView)findViewById(R.id.GreenColor);
GreenDot.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPaintView.setPathColor(Color.GREEN);
}
});
BlueDot=(TextView)findViewById(R.id.BlueColor);
BlueDot.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mPaintView.setPathColor(Color.BLUE);
}
});
}
//saving drawed file to SD card
private void savingFile() {
File sdCard = Environment.getExternalStorageDirectory();
File folder = new File(sdCard.getAbsolutePath() + "/MyFiles");
boolean success = false;
if (!folder.exists()) {
success = folder.mkdirs();
Log.i(TAG, " " + success);
}
File file = new File(folder, "BodyFront.png");
if (!file.exists()) {
try {
success = file.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
}
FileOutputStream ostream = null;
try {
ostream = new FileOutputStream(file);
Bitmap well = mPaintView.getBitmap();
Bitmap save = Bitmap.createBitmap(320, 480, Bitmap.Config.ARGB_8888);
Paint paint = new Paint();
paint.setColor(Color.WHITE);
Canvas now = new Canvas(save);
now.drawRect(new Rect(0, 0, 320, 480), paint);
now.drawBitmap(well, new Rect(0, 0, well.getWidth(), well.getHeight()), new Rect(0, 0, 320, 480), null);
save.compress(Bitmap.CompressFormat.PNG, 100, ostream);
BitMapToString(save);
Toast.makeText(getActivity(), "File saved", Toast.LENGTH_SHORT).show();
} catch (NullPointerException e) {
e.printStackTrace();
Toast.makeText(getActivity(), "Null error",
Toast.LENGTH_SHORT).show();
}
catch (FileNotFoundException e) {
e.printStackTrace();
Toast.makeText(getActivity(), "File error", Toast.LENGTH_SHORT).show();
}
}
public String BitMapToString(Bitmap userImage1) {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
userImage1.compress(Bitmap.CompressFormat.PNG, 60, baos);
byte[] b = baos.toByteArray();
Front_Image = Base64.encodeToString(b, Base64.DEFAULT);
return Front_Image;
}
In this java class, u can create a Paint view for your painting App and implement it.
Step: 6 Create a Java Class PaintView.java file and Add these code.
public class PaintView extends View {
private Bitmap bitmap;
private Canvas canvas;
private Path path;
private Paint bitmapPaint;
private Paint paint;
public PaintView(Context context, AttributeSet attrs) {
super(context, attrs);
path = new Path();
bitmapPaint = new Paint(Paint.DITHER_FLAG);
paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(4);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.body1) //-->here load your image
.copy(Bitmap.Config.ARGB_8888, true);
canvas = new Canvas(bitmap);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, bitmapPaint);
canvas.drawPath(path, paint);
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touchStart(float x, float y) {
path.reset();
path.moveTo(x, y);
mX = x;
mY = y;
}
private void touchMove(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
path.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
}
}
private void touchUp() {
path.lineTo(mX, mY);
// commit the path to our offscreen
canvas.drawPath(path, paint);
// kill this so we don't double draw
path.reset();
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touchStart(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touchMove(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touchUp();
invalidate();
break;
}
return true;
}
public Bitmap getBitmap() {
this.setDrawingCacheEnabled(true);
this.buildDrawingCache();
Bitmap bmp = Bitmap.createBitmap(this.getDrawingCache());
this.setDrawingCacheEnabled(false);
return bmp;
}
//Clear screen
public void clear() {
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.body1) //-->here load your image
.copy(Bitmap.Config.ARGB_8888, true);
canvas = new Canvas(bitmap);
invalidate();
System.gc();
}
/**
* change path color here
*/
public void setPathColor(int color) {
paint.setColor(color);
}
}
complete these run app and show results test your results.
https://www.youtube.com/watch?v=LlDta9UlHXQ
add a comment