Android Signature Capture

Question

I am working on android application. In my project I have a task regarding signature capture i.e the user should keep his/her signature on the screen of the mobile and once save button is clicked the signature has to stored in the database. I have searched and found some links but still I didn't find the exact solution. I also tried TouchPaint.java but there I didnt find the xml file for layout. Could you please suggest us with some sample code? I will be thankful to you....

Answer 1

Here is the working Java version of Has AlTaiar's C# Signature View, Took me a while to get it to work 100% correctly

public class CaptureSignatureView extends View {

    private Bitmap _Bitmap;
    private Canvas _Canvas;
    private Path _Path;
    private Paint _BitmapPaint;
    private Paint _paint;
    private float _mX;
    private float _mY;
    private float TouchTolerance = 4;
    private float LineThickness = 4;

    public CaptureSignatureView(Context context, AttributeSet attr) {
        super(context, attr);
        _Path = new Path();
        _BitmapPaint = new Paint(Paint.DITHER_FLAG);
        _paint = new Paint();
        _paint.setAntiAlias(true);
        _paint.setDither(true);
        _paint.setColor(Color.argb(255, 0, 0, 0));
        _paint.setStyle(Paint.Style.STROKE);
        _paint.setStrokeJoin(Paint.Join.ROUND);
        _paint.setStrokeCap(Paint.Cap.ROUND);
        _paint.setStrokeWidth(LineThickness);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        _Bitmap = Bitmap.createBitmap(w, (h > 0 ? h : ((View) this.getParent()).getHeight()), Bitmap.Config.ARGB_8888);
        _Canvas = new Canvas(_Bitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
        canvas.drawBitmap(_Bitmap, 0, 0, _BitmapPaint);
        canvas.drawPath(_Path, _paint);
    }

    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 >= TouchTolerance || dy >= TouchTolerance) {
            _Path.quadTo(_mX, _mY, (x + _mX) / 2, (y + _mY) / 2);
            _mX = x;
            _mY = y;
        }
    }

    private void TouchUp() {
        if (!_Path.isEmpty()) {
            _Path.lineTo(_mX, _mY);
            _Canvas.drawPath(_Path, _paint);
        } else {
            _Canvas.drawPoint(_mX, _mY, _paint);
        }

        _Path.reset();
    }

    @Override
    public boolean onTouchEvent(MotionEvent e) {
        super.onTouchEvent(e);
        float x = e.getX();
        float y = e.getY();

        switch (e.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 void ClearCanvas() {
        _Canvas.drawColor(Color.WHITE);
        invalidate();
    }

    public byte[] getBytes() {
        Bitmap b = getBitmap();

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        b.compress(Bitmap.CompressFormat.PNG, 100, baos);
        return baos.toByteArray();
    }

    public Bitmap getBitmap() {
        View v = (View) this.getParent();
        Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(b);
        v.layout(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
        v.draw(c);

        return b;
    }
}

I tried Rob Croll's suggestion, which worked good, but it is straight liney, rendering the signature not human looking. If you know what I mean :P

Here is how you append the view on an empty linear layout

LinearLayout mContent = (LinearLayout) findViewById(R.id.linearLayout);
CaptureSignatureView mSig = new CaptureSignatureView(this, null);
mContent.addView(mSig, LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);

Here is how to get the bytes or Bitmap of the Signature

byte[] signature = mSig.getBytes();
Bitmap signature = mSig.getBitmap();

Answer 2

For anyone looking for a solution you will find one at http://www.mysamplecode.com/2011/11/android-capture-signature-using-canvas.html

It actually writes the signature to file but it's easy enough to change and write to a database instead.

Answer 3

I know this is an old question, but I needed to implement my own view to capture the signature because I am using MonoForAndroid (C# not Java). So I am adding my View code in here in case somebody needs it.

using System;
using Android.Content;
using Android.Graphics;
using Android.Views;

namespace MyApp.Views
{
    public class CaptureSignatureView : View
    {
        public CaptureSignatureView(Context c, SignatureData signatureData) : base(c)
        {
            SignatureData = signatureData;
            _Path = new Path();
            _BitmapPaint = new Paint(PaintFlags.Dither);
            _paint = new Paint
            {
                AntiAlias = true,
                Dither = true,
                Color = Color.Argb(255, 0, 0, 0)
            };
            _paint.SetStyle(Paint.Style.Stroke);
            _paint.StrokeJoin = Paint.Join.Round;
            _paint.StrokeCap = Paint.Cap.Round;
            _paint.StrokeWidth = 8;
        }

        protected override void OnSizeChanged(int w, int h, int oldw, int oldh)
        {
            base.OnSizeChanged(w, h, oldw, oldh);
            _Bitmap = Bitmap.CreateBitmap(w, (h > 0 ? h : ((View)this.Parent).Height), Bitmap.Config.Argb8888);
            _Canvas = new Canvas(_Bitmap);
        }

        protected override void OnDraw(Canvas canvas)
        {
            canvas.DrawColor(Color.White);
            canvas.DrawBitmap(_Bitmap, 0, 0, _BitmapPaint);
            canvas.DrawPath(_Path, _paint);
        }

        private float _mX, _mY;
        private const float TouchTolerance = 4;

        private void TouchStart(float x, float y)
        {
            _Path.Reset();
            _Path.MoveTo(x, y);
            _mX = x;
            _mY = y;
            SignatureData.AddPoint(SignatureState.Start, (int)x, (int)y);
        }

        private void TouchMove(float x, float y)
        {
            float dx = Math.Abs(x - _mX);
            float dy = Math.Abs(y - _mY);

            if (dx >= TouchTolerance || dy >= TouchTolerance)
            {
                _Path.QuadTo(_mX, _mY, (x + _mX) / 2, (y + _mY) / 2);
                SignatureData.AddPoint(SignatureState.Move, (int)x, (int)y);
                _mX = x;
                _mY = y;
            }
        }

        private void TouchUp()
        {
            if (!_Path.IsEmpty)
            {
                _Path.LineTo(_mX, _mY);
                _Canvas.DrawPath(_Path, _paint);
            }
            else
            {
                _Canvas.DrawPoint(_mX, _mY, _paint);
            }
            SignatureData.AddPoint(SignatureState.End, (int)_mX, (int)_mY);

            _Path.Reset();
        }

        public override bool OnTouchEvent(MotionEvent e)
        {
            var x = e.GetX();
            var y = e.GetY();

            switch (e.Action)
            {
                case MotionEventActions.Down:
                    TouchStart(x, y);
                    Invalidate();
                    break;
                case MotionEventActions.Move:
                    TouchMove(x, y);
                    Invalidate();
                    break;
                case MotionEventActions.Up:
                    TouchUp();
                    Invalidate();
                    break;
            }
            return true;
        }

        public void ClearCanvas()
        {
            _Canvas.DrawColor(Color.White);
            Invalidate();
        }

        public Bitmap CanvasBitmap()
        {
            return _Bitmap;
        }

        public void Clear()
        {
            ClearCanvas();
            SignatureData = new SignatureData();
        }

        #region Implementation

        private Bitmap _Bitmap;
        private Canvas _Canvas;
        private readonly Path _Path;
        private readonly Paint _BitmapPaint;
        private readonly Paint _paint;
        public  SignatureData SignatureData;

        #endregion
    }

}

Also, I have a blog post here that goes through the details of how to capture the signature. Basically you can do it in two different ways. Either you capture the view with the signature as an image and you save that bitmap (and send it to the server maybe). Or you could just capture a two dimensional array of points and reconstruct the signature in any way you want it.

Answer 4

you probably need gesture builder.

i think this link.

http://android-developers.blogspot.com/2009/10/gestures-on-android-16.html

will be usefull to you. if you need to check the signature again.

UPDATE

are you talking about this

http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/TouchPaint.html

then this example does not use xml. it has the view as an inner class (MyView)