You might have seen lots of signature pad libraries available for android to capture or draw signatures. So, Today in this tutorial we will create our own signature pad without using any third-party library and with minimum coding.
The signature pad will have two buttons one for clearing the canvas and another for saving the captured signature. The source code will be available on Github. So you can further modify the code.
Let’s Build
To create the signature pad view we need to create a custom class and extend it with the VIew class.
public class SignaturePadView extends ViewNow we will create an interface and declare a few methods inside that.
public interface ISignaturePad {
void clear();
void save();
void setAntiAlias(boolean value);
boolean getAntiAlias();
void setStrokeThickness(float value);
float getStrokeThickness();
void setStrokeColor(int color);
int getStrokeColor();
}Let’s implement the ISignaturePad interface in our class and implement all the interface methods.
public class SignaturePadView extends View implements ISignaturePadNow generate all four constructors of the view class.
public SignaturePadView(Context context) {
super(context);
}
public SignaturePadView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
getAndSetAttributes(context,attrs);
init();
}
public SignaturePadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
getAndSetAttributes(context,attrs);
init();
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public SignaturePadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
getAndSetAttributes(context,attrs);
init();
}Let’s use our custom view in our layout file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:signature="http://schemas.android.com/apk/res/com.test.signaturepad"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
>
<com.test.signaturepad.SignaturePadView
signature:strokeColor="@color/black"
signature:strokeThickness="8"
signature:antiAlias="true"
android:layout_above="@+id/action_btn_layout"
android:textAlignment="center"
android:id="@+id/signaturePad"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/action_btn_layout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="10dp"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="4dp"
android:layout_marginStart="4dp"
android:layout_weight="1"
android:text="Save"
android:id="@+id/save"
android:background="@color/teal_700"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:background="@color/teal_700"
android:textColor="@color/white"
android:text="Clear"
android:id="@+id/clear"
android:layout_marginStart="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>create custom XML attributes for our custom view.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SignaturePadView">
<attr name="strokeColor" format="color"/>
<attr name="strokeThickness" format="integer"/>
<attr name="antiAlias" format="boolean" />
</declare-styleable>
</resources>MainActivity.java
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button save;
private Button clear;
private SignaturePadView signaturePadView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
signaturePadView = findViewById(R.id.signaturePad);
save = findViewById(R.id.save);
clear = findViewById(R.id.clear);
}
@Override
protected void onStart() {
super.onStart();
save.setOnClickListener(this);
clear.setOnClickListener(this);
}
@Override
protected void onStop() {
super.onStop();
save.setOnClickListener(null);
clear.setOnClickListener(null);
}
@Override
public void onClick(View v) {
switch (v.getId())
{
case R.id.save:
signaturePadView.save();
break;
case R.id.clear:
signaturePadView.clear();
break;
}
}
}SignaturePadView.java
private void init()
{
paint = new Paint();
paint.setColor(strokeColor);
paint.setAntiAlias(antialias);
paint.setStrokeWidth(strokeThickness);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStyle(Paint.Style.STROKE);
path = new Path();
}The above method will be called from all the constructors. It initializes the paint and path object.
private void getAndSetAttributes(Context context,AttributeSet attrs)
{
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SignaturePadView,0,0);
strokeColor = typedArray.getColor(R.styleable.SignaturePadView_strokeColor,context.getResources().getColor(R.color.black));
antialias = typedArray.getBoolean(R.styleable.SignaturePadView_antiAlias,false);
strokeThickness = typedArray.getInteger(R.styleable.SignaturePadView_strokeThickness,4);
}The following method is responsible for fetching the value that is passed from the layout file. All the attributes that we pass from the XML layout file get populated in AttributeSet.
@Override
public boolean onTouchEvent(MotionEvent event) {
rawX = event.getX();
rawY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
path.moveTo(rawX, rawY);
break;
case MotionEvent.ACTION_MOVE:
path.lineTo(rawX, rawY);
break;
case MotionEvent.ACTION_UP:
path.lineTo(rawX, rawY);
canvas.drawPath(path, paint);
//path.reset();
break;
default:
return false;
}
invalidate();
return true;
}Whenever we touch screen the ACTION_DOWN event gets fired. So in the action_down event, we are calling path.moveTo(rawX, rawY); where rawX and rawY are the coordinates where you tap on the screen.
Similarly when your finger the ACTION_MOVE event gets fired and path.lineTo(rawX, rawY); statement gets executed and it starts drawing a line from the initial point to the point when ACTION_UP gets called.
rawX – X-Coordinate
rawY – Y-Coordinate
ACTION_DOWN – When you touch your finger on the screen
ACTION_UP – When you lift your finger
ACTION_MOVE – When you move your finger
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
this.canvas.drawPath(path,paint);
}
@Override
public void clear()
{
path.reset();
invalidate();
}
When we click on the clear button the canvas will get reset.
In the next tutorial, we will complete the rest of the functionality.
You can also checkout my other android tutorials.