PatternLockView Documentation

To use the pattern lock, follow these steps:

1. Add to XML: Place the PatternLockView in your layout file.
2. Initialize and Listen: Reference the view in your Java code and attach a PatternLockViewListener to handle pattern events like onStarted, onProgress, onComplete, and onCleared.
3. Cleanup: Use removePatternLockListener(mPatternLockViewListener) when the listener is no longer needed.

// 1. XML Layout
// <com.andrognito.patternlockview.PatternLockView
//     android:id="@+id/pattern_lock_view"
//     android:layout_width="280dp"
//     android:layout_height="280dp"/>

// 2. Java Implementation
mPatternLockView = (PatternLockView) findViewById(R.id.pattern_lock_view);
mPatternLockView.addPatternLockListener(mPatternLockViewListener);

private PatternLockViewListener mPatternLockViewListener = new PatternLockViewListener() {
    @Override
    public void onStarted() {
        Log.d(getClass().getName(), "Pattern drawing started");
    }

    @Override
    public void onProgress(List<PatternLockView.Dot> progressPattern) {
        Log.d(getClass().getName(), "Pattern progress: " +
                PatternLockUtils.patternToString(mPatternLockView, progressPattern));
    }

    @Override
    public void onComplete(List<PatternLockView.Dot> pattern) {
        Log.d(getClass().getName(), "Pattern complete: " +
                PatternLockUtils.patternToString(mPatternLockView, pattern));
    }

    @Override
    public void onCleared() {
        Log.d(getClass().getName(), "Pattern has been cleared");
    }
};

If you have included the patternlockview-reactive dependency, you can use RxPatternLockView.patternChanges(mPatternLockView) to receive a stream of PatternLockCompoundEvent objects. This allows you to handle PATTERN_STARTED, PATTERN_PROGRESS, PATTERN_COMPLETE, and PATTERN_CLEARED events reactively.

RxPatternLockView.patternChanges(mPatternLockView)
                .subscribe(new Consumer<PatternLockCompoundEvent>() {
                    @Override
                    public void accept(PatternLockCompoundEvent event) throws Exception {
                        if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_STARTED) {
                            Log.d(getClass().getName(), "Pattern drawing started");
                        } else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_PROGRESS) {
                            Log.d(getClass().getName(), "Pattern progress: " +
                                    PatternLockUtils.patternToString(mPatternLockView, event.getPattern()));
                        } else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_COMPLETE) {
                            Log.d(getClass().getName(), "Pattern complete: " +
                                    PatternLockUtils.patternToString(mPatternLockView, event.getPattern()));
                        } else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_CLEARED) {
                            Log.d(getClass().getName(), "Pattern has been cleared");
                        }
                    }
                });

Use the following methods on a PatternLockView instance to control its state and appearance in Java code:

mPatternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);       // Set the current viee more 
mPatternLockView.setInStealthMode(true);                                     // Set the pattern in stealth mode (pattern drawing is hidden)
mPatternLockView.setTactileFeedbackEnabled(true);                            // Enables vibration feedback when the pattern is drawn
mPatternLockView.setInputEnabled(false);                                     // Disables any input from the pattern lock view completely

mPatternLockView.setDotCount(3);
mPatternLockView.setDotNormalSize((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_dot_size));
mPatternLockView.setDotSelectedSize((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_dot_selected_size));
mPatternLockView.setPathWidth((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_path_width));
mPatternLockView.setAspectRatioEnabled(true);
mPatternLockView.setAspectRatio(PatternLockView.AspectRatio.ASPECT_RATIO_HEIGHT_BIAS); 
mPatternLockView.setNormalStateColor(ResourceUtils.getColor(this, R.color.white));
mPatternLockView.setCorrectStateColor(ResourceUtils.getColor(this, R.color.primary));
mPatternLockView.setWrongStateColor(ResourceUtils.getColor(this, R.color.pomegranate));
mPatternLockView.setDotAnimationDuration(150);
mPatternLockView.setPathEndAnimationDuration(100);

You can customize the appearance and behavior of the PatternLockView directly in your XML layout using the following attributes:

app:dotCount="3"                                        // Change the no.of dots in a row (or column)
app:dotNormalSize="12dp"                                // Change the size of the dots in normal state
app:dotSelectedSize="24dp"                              // Change the size of the dots in selected state
app:pathWidth="4dp"                                     // Change the width of the path
app:aspectRatioEnabled="true"                           // Set if the view should respect custom aspect ratio
app:aspectRatio="square"                                // Set between "square", "width_bias", "height_bias"
app:normalStateColor="@color/white"                     // Set the color of the pattern view in normal state
app:correctStateColor="@color/primary"                  // Set the color of the pattern view in correct state
app:wrongStateColor="@color/pomegranate"                 // Set the color of the pattern view in error state     
app:dotAnimationDuration="200"                          // Change the duration of the animating dots
app:pathEndAnimationDuration="100"                      // Change the duration of the path end animaiton