Skip to main content

Android Pattern Lock




Android Pattern Lock – Add Pattern Lock View to Your App





androidmenisfet.xml






//-------


<application>


android:theme="@style/Fullscreen">




</application>




//--------






FullScreen:




//-----------style.xml--------




<style name="Fullscreen" parent="AppTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>




//-----------






dependencies


{




compile 'io.paperdb:paperdb:2.0'compile 'com.andrognito.patternlockview:patternlockview:1.0.0'


}








///--------activity_patternlockview.xml----------------




<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="np.com.sitalmandal.shopchart.PatternLockViewActivity">

    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="24sp"        android:text="Set Pattern"        android:layout_gravity="center_horizontal"        />

    <LinearLayout        android:orientation="vertical"        android:background="#333639"        android:layout_width="match_parent"        android:layout_height="wrap_content">


    <com.andrognito.patternlockview.PatternLockView        android:id="@+id/patternView"        android:layout_width="match_parent"        android:layout_height="300dp"        android:background="@android:color/background_dark"/>

    </LinearLayout>
    
    <Button        android:id="@+id/btnSetPattern"        android:text="Set Pattern"        android:layout_width="match_parent"        android:layout_height="wrap_content" />
</LinearLayout>
















///--------pattern_screen.xml----------------


<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.andrognito.patternlockview.PatternLockView        android:id="@+id/patternView"        app:correctStateColor="@color/colorCorrectLine"        app:normalStateColor="@color/colorNormalLine"        app:wrongStateColor="@color/colorWrongLine"        android:layout_width="match_parent"        android:layout_height="300dp"        android:background="@android:color/background_dark"/>

</RelativeLayout>


///------------------------










PatternLockViewActivity.java






public class PatternLockViewActivity extends AppCompatActivity {


    PatternLockView patternLockView;
    String save_pattern_key = "pattern_code";
    String final_pattern = "";

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Paper.init(this);

     final String save_pattern = Paper.book().read(save_pattern_key);

        if(save_pattern!=null && !save_pattern.equals("null"))
       {
    setContentView(R.layout.pattern_screen);
    patternLockView = (PatternLockView) findViewById(R.id.patternView);
    patternLockView.addPatternLockListener(new PatternLockViewListener() {
        @Override        public void onStarted() {

        }

        @Override        public void onProgress(List progressPattern) {

        }

        @Override        public void onComplete(List<PatternLockView.Dot> pattern) {

            final_pattern = PatternLockUtils.patternToString(patternLockView, pattern);
            if(final_pattern.equals(save_pattern))
                Toast.makeText(PatternLockViewActivity.this, "password correct", Toast.LENGTH_SHORT).show();
        else            Toast.makeText(PatternLockViewActivity.this,"Password incorrect", Toast.LENGTH_SHORT).show();
        }

        @Override        public void onCleared() {

        }
    });

    }

else {
            setContentView(R.layout.activity_patternlockview);
            patternLockView = (PatternLockView) findViewById(R.id.patternView);


            patternLockView.addPatternLockListener(new PatternLockViewListener() {
                @Override                public void onStarted() {

                }

                @Override                public void onProgress(List<PatternLockView.Dot> progressPattern) {

                }

                @Override                public void onComplete(List<PatternLockView.Dot> pattern) {
                final_pattern = PatternLockUtils.patternToString(patternLockView,pattern);
                }

                @Override                public void onCleared() {

                }
            });


            Button btnSetup = (Button)findViewById(R.id.btnSetPattern);
            btnSetup.setOnClickListener(new View.OnClickListener() {
                @Override                public void onClick(View v) {

                    Paper.book().write(save_pattern_key,final_pattern);
                    Toast.makeText(PatternLockViewActivity.this, "Save pattern ok", Toast.LENGTH_SHORT).show();
                    finish();
                }
            });

        }

       /* patternLockView = findViewById(R.id.patternView);        patternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);        patternLockView.setViewMode(PatternLockView.PatternViewMode.WRONG);*/
    }





}


































Hi and welcome to another tutorial from Codingdemos, in this tutorial you will learn how to add pattern lock view inside your app. You can use this method as a way to provide some sort of authentication inside your app. For example you can use pattern lock view to validate the user before allowing him/her proceed to purchase something.








Pattern lock android tutorial




By the end of this tutorial, you will have an app that looks like this. (Large preview)







In this tutorial you will be using a 3rd party library called (PatternLockView) which will help you to add this functionality in your app.



You will build an app that utilize this pattern lock view library to validate whether the user have swiped his/her finger on the correct dots, which will then show a success Android Toast message. Otherwise will show a red line which indicate the dots which was swiped by the user were wrong.





In this tutorial we will be using the following:


    – Android studio version 3.0.1
    – Android emulator Nexus 5X with API 26
    – Minimum SDK API 16





1- Open up Android Studio and open any project that you have in your computer.








android studio welcome screen




Create new Android Studio project or open existing project. (Large preview)



2- Open up build.gradle (module:app) and add the library in the dependencies.



implementation 'com.andrognito.patternlockview:patternlockview:1.0.0'




3- Next you need to open up build.gradle (Project) and add Jcenter because this library is available through it.



allprojects {
    repositories {
        google()
        jcenter()
    }
}




4- Now sync your project by clicking on Sync Now.








Android studio sync project




Android studio sync project. (Large preview)



5- Open up colors.xml file to change the colors of the main app.



< color name="colorPrimary">#E91E63< /color>
< color name="colorPrimaryDark">#C2185B< /color>
< color name="colorAccent">#536DFE< /color>




6- Build and run the app to see the new colors.








Android Pattern Lock




New colors for the app. (Large preview)



7- Next open up activity_main.xml file and add the following pattern lock view code.



< com.andrognito.patternlockview.PatternLockView
    android:id="@+id/patternView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />




8- If you build and run the app you will not see anything, unless if you look closely then you will see some dots.








Android Pattern Lock1




Android pattern lock dots. (Large preview)



9- To fix that, you can change the background color of lock view.



< com.andrognito.patternlockview.PatternLockView
    android:id="@+id/patternView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/background_dark"/>




10- Build and run the app to see the changes.








Android Pattern Lock View




Android pattern lock view with dots. (Large preview)



11- Now open up MainActivity.java file to reference pattern lock view that was added inside activity_main.xml file.



PatternLockView patternLockView = findViewById(R.id.patternView);




12- Next you will use lock view pattern listener called AddPatternLockListener.



patternLockView.addPatternLockListener(new PatternLockViewListener() {
            @Override
            public void onStarted() {

            }

            @Override
            public void onProgress(List progressPattern) {

            }

            @Override
            public void onComplete(List pattern) {
                
            }

            @Override
            public void onCleared() {

            }
        });




Using AddPatternLockListener will help you keep track of when the user have started the swipe gesture, the current swipe progress, swipe completion and finally when swipe gesture is cleared.



13- You will be working mostly inside onComplete override method. You can know which dots the user had swiped over by using PatternLockUtils.patternToString and this will translate into a readable string format.



@Override
            public void onComplete(List pattern) {

                Log.d(getClass().getName(), "Pattern complete: " +
                        PatternLockUtils.patternToString(patternLockView, pattern));
                
            }




14- Build and run the app and when you swipe over the dots, you will see the output result inside Android Studio Logcat.








Android pattern lock view result




Android pattern lock view result. (Large preview)








Android pattern lock view result




Android pattern lock view result. (Large preview)



15- Now that you know how to get the actual values of the swiped dots, you can now customize that more to do some user validation to make sure that the user have actually swiped on the correct dots, otherwise show Android Toast error message.



if(PatternLockUtils.patternToString(patternLockView, pattern).equalsIgnoreCase("123")){
                    Toast.makeText(MainActivity.this, "Welcome back, CodingDemos", Toast.LENGTH_LONG).show();
                }else{
                    Toast.makeText(MainActivity.this, "Incorrect password", Toast.LENGTH_LONG).show();
                }




16- Build and run the app to see the result.








Android pattern lock view




Android pattern lock view. (Large preview)



How to change color line for pattern lock view



You probably interested in showing different colors when the user swipe on the correct and incorrect dots 🙂



17- Open up colors.xml file and past the following colors.



< color name="colorCorrectLine">#008000< /color>
< color name="colorNormalLine">#FFFF< /color>
< color name="colorWrongLine">#FF0000< /color>




18- Next open up activity_main.xml file and past the following code inside pattern lock view.



app:correctStateColor="@color/colorCorrectLine"
app:normalStateColor="@color/colorNormalLine"
app:wrongStateColor="@color/colorWrongLine"




Here you’ve referenced the colors which were added inside colors.xml and used them in pattern lock view.



19- You can use the following code to show the correct color line.



patternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);




20- You can show wrong color line using the following code.



patternLockView.setViewMode(PatternLockView.PatternViewMode.WRONG);




21- Finally open up MainActivity.java file and modify pattern lock view onComplete override method to include the following code.



@Override
            public void onComplete(List pattern) {

                Log.d(getClass().getName(), "Pattern complete: " +
                        PatternLockUtils.patternToString(patternLockView, pattern));
                if(PatternLockUtils.patternToString(patternLockView, pattern).equalsIgnoreCase("123")){
                    patternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);
                    Toast.makeText(MainActivity.this, "Welcome back, CodingDemos", Toast.LENGTH_LONG).show();
                }else{
                    patternLockView.setViewMode(PatternLockView.PatternViewMode.WRONG);
                    Toast.makeText(MainActivity.this, "Incorrect password", Toast.LENGTH_LONG).show();
                }
            }




22- Build and run the app to see the result.








Android pattern lock view




Android pattern lock view with different color lines. (Large preview)



How to change number of dots for pattern lock view



Let’s say you have a requirement which you need to show 4 dots instead of 9 inside pattern lock view, and you are wondering if it’s possible to do that 🤔. Sure you can and here is how.



23- Open up activity_main.xml file and modify pattern lock view to include the following code.



app:dotCount="2"




Using app:dotCount will allow you change the number of dots in row and column.



24- Build and run the app to see the changes.








Android pattern lock view




Android pattern lock view showing less dots. (Large preview)



How to change the size of dots for Android pattern lock



You can customize the dots size whether in normal state or selected state.



25- Open up activity_main.xml and add the following code inside pattern lock view.



app:dotNormalSize="18dp"




You use that app:dotNormalSize to change the size of the dot in normal state and here you set the size of the dot as (18dp).



You can change the the size of dot in selected state by adding the following code.



app:dotSelectedSize="20dp"




Here you’ve set the size of the dot to (20dp).



26- Build and run the app to see the result.








Android pattern lock view




Android pattern lock view with bigger size dots. (Large preview)



How to change line thickness for Android pattern lock



You can increase the line thickness by using app:pathWidth.



27- Open up activity_main.xml and add that code inside lock view pattern.



app:pathWidth="20dp"




28- Now build and run the app.








Android pattern lock view




Android pattern lock view with increased thickness line. (Large preview)



29- Here is the full code for activity_main.xml file.



< ?xml version="1.0" encoding="utf-8"?>
< LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context="com.codingdemos.codingdemos.MainActivity">

  < com.andrognito.patternlockview.PatternLockView
    android:id="@+id/patternView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/background_dark"
    app:correctStateColor="@color/colorCorrectLine"
    app:dotCount="2"
    app:dotNormalSize="18dp"
    app:dotSelectedSize="20dp"
    app:normalStateColor="@color/colorNormalLine"
    app:pathWidth="8dp"
    app:wrongStateColor="@color/colorWrongLine" />

< /LinearLayout>




30- Here is the full code for MainActivity.java file.



package com.codingdemos.codingdemos;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;

import com.andrognito.patternlockview.PatternLockView;
import com.andrognito.patternlockview.listener.PatternLockViewListener;
import com.andrognito.patternlockview.utils.PatternLockUtils;

import java.util.List;

public class MainActivity extends AppCompatActivity {

    PatternLockView patternLockView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        patternLockView = findViewById(R.id.patternView);

        patternLockView.addPatternLockListener(new PatternLockViewListener() {
            @Override
            public void onStarted() {

            }

            @Override
            public void onProgress(List progressPattern) {

            }

            @Override
            public void onComplete(List pattern) {

                Log.d(getClass().getName(), "Pattern complete: " +
                        PatternLockUtils.patternToString(patternLockView, pattern));
                if (PatternLockUtils.patternToString(patternLockView, pattern).equalsIgnoreCase("123")) {
                    patternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);
                    Toast.makeText(MainActivity.this, "Welcome back, CodingDemos", Toast.LENGTH_LONG).show();
                } else {
                    patternLockView.setViewMode(PatternLockView.PatternViewMode.WRONG);
                    Toast.makeText(MainActivity.this, "Incorrect password", Toast.LENGTH_LONG).show();
                }
            }

            @Override
            public void onCleared() {

            }
        });
    }
}




31- I hope you find this tutorial helpful and if you have any question please post them in the comment below.















































Comments











Post a Comment



















Popular posts from this blog





















web2apk




























 http://web2apk.com/create.aspx         Create App   Intro   About   Changes   MalWare ?   Contact   Privacy          Useful Links  Bluetooth Mini Keyboards Android Mini PC Reset Android         URL  App Title  Icon      or    




















Post a Comment









Read more






























how to retrieve image from sqlite database in android and display in listview




























          Android platform provides several ways to store data in our application.   1. SQLite database   2. SharedPreferences etc         For our post, we will only work with SQLite database.   First and foremost, we need to understand what an SQLite database is?   SQLite database  is an open source SQL database that stores data to a text file on a device. It executes SQL Commands to perform a set of functions, that is, create, read, update and delete operations.     On my previous post, I showed how to  store data in SQLite database from edit text, retrieve and populate it in a listview . For this post, I will show the SQLite CRUD operations with images from gallery and text from EditText.     We need to understand this; images are stored in SQLite database as BLOB data type.   A BLOB is a large binary object that can hold a variable amount of data.    Note, we can only store images in the database as BLOB data type. We need to convert our image path to a bitmap then to bytes.   Also




















1 comment









Read more





























Android Bar Chart Using MpAndroidChart Library Tutorial




























  https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/       Android Bar Chart Using MpAndroidChart Library Tutorial       Objective              In this tutorial we learn how to implement Bar Chart using MpAndroidChart Library in your Android App.                                    Download Source Code                                        Step 1     Contents   ·        1  Introduction   ·        2  Creating Bar chart   o    2.1  Create a new Project   o    2.2  Adding library in Project   o    2.3  Create Layout   o    2.4  To Plot Bar Chart   §   2.4.1  Initialize the graph id   §   2.4.2  Creating a Dataset   §   2.4.3  Defining X-axis labels   §   2.4.4  Set the data   §   2.4.5  Add the description to the chart   §   2.4.6  Run your App   §   2.4.7  Set the color   §   2.4.8  Adding Animations   o    2.5  To plot grouped bar chart   §   2.5.1  Creating Dataset   o    2.6  Get the best of Android plus exclusive deals and freebies in your inbox!   




















2 comments









Read more