add a circle style

app/src/main/java/com/andrognito/patternlockdemo/MainActivity.java

@@ -70,6 +70,9 @@ protected void onCreate(Bundle savedInstanceState) {
         mPatternLockView.setInputEnabled(true);
         mPatternLockView.addPatternLockListener(mPatternLockViewListener);
 
+        mPatternLockView.setCircleRadius((int) getResources().getDimension(R.dimen.pattern_lock_dot_circle_size));
+        mPatternLockView.setShowCircleEnable(true);
+
         RxPatternLockView.patternComplete(mPatternLockView)
                 .subscribe(new Consumer<PatternLockCompleteEvent>() {
                     @Override

patternlockview/src/main/java/com/andrognito/patternlockview/PatternLockView.java

@@ -126,6 +126,27 @@ public class PatternLockView extends View {
     private int mDotAnimationDuration;
     private int mPathEndAnimationDuration;
 
+    private int mCircleRadius = 0;               // Radius of the circle
+    private boolean mShowCircleEnable = false;   // enable draw a circle
+
+    public int getCircleRadius() {
+        return mCircleRadius;
+    }
+
+    public void setCircleRadius(int circleRadius) {
+        mCircleRadius = circleRadius;
+        initView();
+        invalidate();
+    }
+
+    public boolean isShowCircleEnable() {
+        return mShowCircleEnable;
+    }
+
+    public void setShowCircleEnable(boolean showCircleEnable) {
+        mShowCircleEnable = showCircleEnable;
+    }
+
     private Paint mDotPaint;
     private Paint mPathPaint;
 
@@ -192,6 +213,10 @@ public PatternLockView(Context context, AttributeSet attrs) {
                     DEFAULT_DOT_ANIMATION_DURATION);
             mPathEndAnimationDuration = typedArray.getInt(R.styleable.PatternLockView_pathEndAnimationDuration,
                     DEFAULT_PATH_END_ANIMATION_DURATION);
+            mCircleRadius = (int) typedArray.getDimension(R.styleable.PatternLockView_circleRadius,
+                    ResourceUtils.getDimensionInPx(getContext(), R.dimen.pattern_lock_dot_circle_size));
+            mShowCircleEnable = typedArray.getBoolean(R.styleable.PatternLockView_showCircleEnable,
+                    false);
         } finally {
             typedArray.recycle();
         }
@@ -361,6 +386,9 @@ protected void onDraw(Canvas canvas) {
                     }
                     canvas.drawPath(currentPath, mPathPaint);
                 }
+                // Draw a circle outside the dot
+                if (isShowCircleEnable())
+                    canvas.drawCircle(centerX, centerY, mCircleRadius, mPathPaint);
                 lastX = centerX;
                 lastY = centerY;
             }
@@ -375,6 +403,9 @@ protected void onDraw(Canvas canvas) {
                 mPathPaint.setAlpha((int) (calculateLastSegmentAlpha(
                         mInProgressX, mInProgressY, lastX, lastY) * 255f));
                 canvas.drawPath(currentPath, mPathPaint);
+                // Draw a circle outside the dot
+                if (isShowCircleEnable())
+                    canvas.drawCircle(lastX, lastY, mCircleRadius, mPathPaint);
             }
         }
     }

patternlockview/src/main/res/values/attrs.xml

@@ -16,5 +16,7 @@
         <attr name="wrongStateColor" format="color"/>
         <attr name="dotAnimationDuration" format="integer"/>
         <attr name="pathEndAnimationDuration" format="integer"/>
+        <attr name="circleRadius" format="dimension"/>
+        <attr name="showCircleEnable" format="boolean"/>
     </declare-styleable>
 </resources>

patternlockview/src/main/res/values/dimens.xml

@@ -3,4 +3,5 @@
     <dimen name="pattern_lock_path_width">3dp</dimen>
     <dimen name="pattern_lock_dot_size">10dp</dimen>
     <dimen name="pattern_lock_dot_selected_size">24dp</dimen>
+    <dimen name="pattern_lock_dot_circle_size">20dp</dimen>
 </resources>