Pattern lock screen on Android using custom view
This is my first article about using custom view. In this article, we’ll write customizable pattern lock view and use in an application. Everyone using android has experienced the pattern lock screen. Pattern lock helps secure devices such as mobile phones or tablets. It is preferred by many users against PIN codes or text passwords. It looks like below;
Creating pattern password scenario has two stages. First we need to connect at least 4 dots. Then apply this pattern again on the second screen. These two patterns must be same. Finally, our pattern password is ready to use.
Adding Dot View
We create DotView class extends from AppCompatImageView. This class helps us customize the dots. Also each dot has a key like number, alphabetic or any string value. After pattern drawn these keys combined.
And create Dot data class for holding some information about a dot.
Adding Pattern Lock View
Define Custom Attributes
Can you want to specify your view in the XML ? If your answer is yes, you must define custom attributes for your view in a <declare-styleable> resource element. It’s customary to put these resources into a res/values/attrs.xml file. Generally, the name of the resource element same as the name of the your view.
Before begin to create PatternLockView class, let’s look some terms and methods.
1- Canvas
When we want to draw something on Android view, we use a canvas object. Thus, we can draw 2D graphics such as shapes (rectangle, arcs, paths styled etc.), styled text.
2- Paint
When creating a custom view class, we can think ourselves as painter. One of the painter tools is a brush. Through Paint class we have a brush. This class has some properties like color, style etc.
3- Overriding onDraw
The onDraw method provides us the Canvas object that we can make some drawing. We invoke invalidate (UI thread) or postInvalidate ( non-UI thread) methods then the onDraw will be called.
4- Overriding onTouchEvent
The onTouchEvent method provides us the MotionEvent object. The object is used to catch movement (mouse, pen, finger, trackball) events. This object returns action codes such as ACTION_DOWN, ACTION_UP and ACTION_MOVE etc. For example, when the user first touches the screen, the onTouchEvent method gives a MotionEvent object with ACTION_DOWN code.
Anymore let’s start get our hands dirty step-by-step
Step 1: Create a class called by PatternLockView extends from LinearLayout.
Step 2: In init block, obtain styled attributes, set view properties and add dots for 3x3 matrix view. For obtain this matrix view, we create a drawPatternView method.
We have to call setWillNotDraw(false), to make the onDraw of your subclass of ViewGroup being called.
This method with parameters helps us creating rows and columns. createRow method add linear layout as view to parent. The other method createColumn create DotView and add it to created the row.
Step 3: Override the onDraw as follows
Let’s look into this method closely;
After our class called init block, it trigger this method. Also when every invalidate function invoked then onDraw will be called. Our the matrix is prepared in init block by drawPatternView function. Anymore, we can connect dots with lines.
The addInitialData takes the position points, indexes, and key of each dot. Thus, we will be able to access information about the dots.
The updateViewState method with state parameter update the color of the marked dots as follows.
Last our important method drawLine helps drawing line on canvas. Firstly, it connect marked dots with drawing line. After that, it draw line from last marked dot to every touched points.
The output is as follows.
Step 4: Override the onTouchEvent to catch movement events
Lets we handle this method’s action codes with rules;
1- MotionEvent.ACTION_DOWN
When the user first touches the screen, the method gives a this code with touched location points. We have to touch any dots so we can start draw line.
2- MotionEvent.ACTION_UP
When the user leave touches, we take this code. On stage 1, we have to connect at least 4 dots. In this case, we can update our state as Success. On stage 2, two passwords have to match for Success state. Otherwise, our state always is Error.
3- MotionEvent.ACTION_MOVE
When we move our finger over the screen, callback is return it. If our state is STARTED and marked dot list size is not equal to maxCount, we can invoke invalidate function.
Here is the output for success state of stage 1.
Finally, we add PatternLockView to our xml as follows.
Checkout the complete code gist at the link.
If you want to know more about creating a custom view, here is the documentation.
Thank you for reading. You can find this example on github link below.
Happy Coding :)
