Pattern Password for the device is one of the necessities to keep our device private and protected. Nowadays in most apps, we get to see this password applied in many applications such as Mutual Funds or Stock Market apps to keep our financial details private. In this article, we are going to see how to implement pattern passwords in our Android app. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Applications of Pattern Password
- Use to protect our private details and personal information in an Android app.
- It becomes very convenient to use pattern passwords instead of pins.
- It works as an app Lock to our app on our device.
Attributes of Pattern Password
Attributes | Description |
---|---|
layout_width | To display the width of the dots. |
layout_height | To display the height of the dots. |
correctStateColor | To display Dots color. |
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add dependency of Pattern Password library in build.gradle file
Then Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.
implementation ‘com.andrognito.patternlockview:patternlockview:1.0.0’
now click on Sync now it will sync your all files in build.gradle().
Step 3: Create a Loading Screen in your activity_main.xml file
Navigate to the app > res > layout to open the activity_main.xml file. Below is the code for the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
<!--Text view for giving loading-->
< TextView
android:id = "@+id/textView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:text = "Loading...." />
</ RelativeLayout >
|
Step 4: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.os.Handler;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Handler handler = new Handler();
handler.postDelayed( new Runnable() {
@Override
public void run() {
// loading is given
SharedPreferences sharedPreferences = getSharedPreferences( "PREFS" , 0 );
String password = sharedPreferences.getString( "password" , "0" );
if (password.equals( "0" )) {
// Intent to navigate to Create Password Screen
Intent intent = new Intent(getApplicationContext(), CreatePasswordActivity. class );
startActivity(intent);
finish();
} else {
// Intent to navigate to Input Password Screen
Intent intent = new Intent(getApplicationContext(), InputPasswordActivity. class );
startActivity(intent);
finish();
}
}
}, 2000 );
}
} |
Step 5: Create a new empty Activity and name it as CreatePasswordActivity
Go to the app > java > Your app’s package name > right-click > New > Activity > Empty Activity and name the activity as CreatePasswordActivity.
Working with the activity_create_password.xml file:
Go to the activity_create_password.xml file and refer to the following code. Below is the code for the activity_create_password.xml file. In this file, you will show dots to create a pattern password as given below.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent" >
<!--Dots to create pattern pass word-->
< com.andrognito.patternlockview.PatternLockView
android:id = "@+id/pattern_lock_view"
android:layout_width = "300dp"
android:layout_height = "300dp"
android:layout_centerInParent = "true"
app:correctStateColor = "@color/purple_200"
app:normalStateColor = "@color/purple_200"
app:wrongStateColor = "@color/teal_700" />
<!--Text View to display title-->
< TextView
android:id = "@+id/textView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerHorizontal = "true"
android:layout_marginTop = "10dp"
android:text = "Create Password"
android:textSize = "30dp"
android:textStyle = "bold" />
</ RelativeLayout >
|
Working with the CreatePasswordActivity.java file:
Go to the CreatePasswordActivity.java file and refer to the following code. Below is the code for the CreatePasswordActivity.java file. Comments are added inside the code to understand the code in more detail.
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.andrognito.patternlockview.PatternLockView;
import com.andrognito.patternlockview.listener.PatternLockViewListener;
import com.andrognito.patternlockview.utils.PatternLockUtils;
import java.util.List;
public class CreatePasswordActivity extends AppCompatActivity {
// Initialize pattern lock view
PatternLockView mPatternLockView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_create_password);
mPatternLockView = (PatternLockView) findViewById(R.id.pattern_lock_view);
mPatternLockView.addPatternLockListener( new PatternLockViewListener() {
@Override
public void onStarted() {
}
@Override
public void onProgress(List<PatternLockView.Dot> progressPattern) {
}
@Override
public void onComplete(List<PatternLockView.Dot> pattern) {
// Shared Preferences to save state
SharedPreferences sharedPreferences = getSharedPreferences( "PREFS" , 0 );
SharedPreferences.Editor editor = sharedPreferences.edit();
editor.putString( "password" , PatternLockUtils.patternToString(mPatternLockView, pattern));
editor.apply();
// Intent to navigate to home screen when password added is true
Intent intent = new Intent(getApplicationContext(), ProgramActivity. class );
startActivity(intent);
finish();
}
@Override
public void onCleared() {
}
});
}
} |
Step 6: Similarly Create a new empty Activity and name it as InputPasswordActivity
Go to the app > java > Your app’s package name > right-click > New > Activity > Empty Activity and name the activity as InputPasswordActivity.
Working with the activity_Input_Password.xml file:
Go to the activity_Input_Password.xml file and refer to the following code. Below is the code for the activity_Input_Password.xml file. In this file, you will draw your pattern to navigate to the home screen when the user opened the app for the second time after installing.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent" >
<!--Dots to input password-->
< com.andrognito.patternlockview.PatternLockView
android:id = "@+id/pattern_lock_view"
android:layout_width = "300dp"
android:layout_height = "300dp"
android:layout_centerInParent = "true"
app:correctStateColor = "@color/purple_200"
app:normalStateColor = "@color/purple_200"
app:wrongStateColor = "@color/teal_700" />
<!--Text View to display title-->
< TextView
android:id = "@+id/textView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerHorizontal = "true"
android:layout_marginTop = "10dp"
android:text = "Input Password"
android:textSize = "30dp"
android:textStyle = "bold" />
</ RelativeLayout >
|
Working with the InputPasswordActivity.java file:
Go to the InputPasswordActivity.java file and refer to the following code. Below is the code for the InputPasswordActivity.java file. Comments are added inside the code to understand the code in more detail.
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.andrognito.patternlockview.PatternLockView;
import com.andrognito.patternlockview.listener.PatternLockViewListener;
import com.andrognito.patternlockview.utils.PatternLockUtils;
import java.util.List;
public class InputPasswordActivity extends AppCompatActivity {
PatternLockView mPatternLockView;
String password;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_input_password);
// shared preference when user comes second time to the app
SharedPreferences sharedPreferences = getSharedPreferences( "PREFS" , 0 );
password = sharedPreferences.getString( "password" , "0" );
mPatternLockView = (PatternLockView) findViewById(R.id.pattern_lock_view);
mPatternLockView.addPatternLockListener( new PatternLockViewListener() {
@Override
public void onStarted() {
}
@Override
public void onProgress(List<PatternLockView.Dot> progressPattern) {
}
@Override
public void onComplete(List<PatternLockView.Dot> pattern) {
// if drawn pattern is equal to created pattern you will navigate to home screen
if (password.equals(PatternLockUtils.patternToString(mPatternLockView, pattern))) {
Intent intent = new Intent(getApplicationContext(), ProgramActivity. class );
startActivity(intent);
finish();
} else {
// other wise you will get error wrong password
Toast.makeText(InputPasswordActivity. this , "Wrong Password" , Toast.LENGTH_SHORT).show();
mPatternLockView.clearPattern();
}
}
@Override
public void onCleared() {
}
});
}
} |
Step 7: Similarly, Create a new empty Activity and name it as ProgramActivity
Go to the app > java > Your app’s package name > right-click > New > Activity > Empty Activity and name the activity as ProgramActivity.
Working with the activity_program.xml file:
Go to the activity_program.xml file and refer to the following code. Below is the code for the activity_program.xml file. In this file, we will create Home Screen to navigate the user to the main screen. Where you will get to see the text message.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent" >
<!--Text Message to display-->
< TextView
android:id = "@+id/textView2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:text = "Welcome to Geeks to Geeks"
android:textSize = "20dp"
tools:layout_editor_absoluteX = "163dp"
tools:layout_editor_absoluteY = "334dp" />
</ RelativeLayout >
|
Now click on the run option it will take some time to build Gradle. After that, you will get output on your device as given below.