Android simple lock screen with an external library

    Sometimes, in a high security application, it has a lock screen. Only when the correct password entered here, we can continue to use the application. Designing a lock screen in Android is not quite hard, but if you are a...lazy developer, you can use an external library to make it, by searching on the Internet, you can find out a lot of libraries to resolved this problem.
    In this post, I will introduce one of them: PinLockView which able to help you build a lock screen quickly.
DEMO VIDEO:

Importing library

    In order to use it, please add this dependency to your app/build.gradle file:

dependencies {
    // other dependencies here

    compile 'com.andrognito.pinlockview:pinlockview:1.0.1'
}

    Syncing gradle and start coding!

Building the lock-activity

    There are 2 objects in this library which we will use:

•  PinLockView: a subclass of RecyclerView (can be scrolled in small device screen), which represents a numeric lock view which can used to taken numbers as input. 
•  IndicatorDots: it represents a set of indicator dots which when attached with PinLockView which can be used to indicate the current length of the input.

    Make a simple layout for the lock-activity like this:

activity_lock.xml

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

    <ImageView
        android:id="@+id/profile_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/profile_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/profile_image"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="36dp"
        android:fontFamily="sans-serif-thin"
        android:gravity="center"
        android:maxLines="1"
        android:text="Please Unlock first"
        android:textColor="@color/white"
        android:textSize="24sp" />

    <com.andrognito.pinlockview.IndicatorDots
        android:id="@+id/indicator_dots"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/profile_name"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/activity_horizontal_margin" />

    <com.andrognito.pinlockview.PinLockView
        android:id="@+id/pin_lock_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/indicator_dots"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        app:keypadButtonSize="72dp"
        app:keypadShowDeleteButton="true"
        app:keypadTextColor="@android:color/holo_green_dark"
        app:keypadTextSize="14dp" />

</RelativeLayout>

    For more xml atrributes of the PinLockView, you can view the Theming part of this library on Github.
     In the programmatically code, the PinLockView has a callback listener to handling user input(PinLockListener) with 3 methods:

•  onComplete(): called when the complete pin is entered, depends on the pin length set by the user. 
• onEmpty(): called when the pin is empty after manual deletion. 
• onPinChange(): called when a key press on the PinLockView.

    And the full code for this activity:

LockActivity.java

package info.devexchanges.applockscreen;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;

import com.andrognito.pinlockview.IndicatorDots;
import com.andrognito.pinlockview.PinLockListener;
import com.andrognito.pinlockview.PinLockView;

public class LockActivity extends AppCompatActivity {

    private PinLockView mPinLockView;
    private IndicatorDots mIndicatorDots;
    private final static String TAG = LockActivity.class.getSimpleName();
    private final static String TRUE_CODE = "123456";

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_lock);

        mPinLockView = (PinLockView) findViewById(R.id.pin_lock_view);
        mIndicatorDots = (IndicatorDots) findViewById(R.id.indicator_dots);

        //attach lock view with dot indicator
        mPinLockView.attachIndicatorDots(mIndicatorDots);

        //set lock code length
        mPinLockView.setPinLength(6);

        //set listener for lock code change
        mPinLockView.setPinLockListener(new PinLockListener() {
            @Override
            public void onComplete(String pin) {
                Log.d(TAG, "lock code: " + pin);

                //User input true code
                if (pin.equals(TRUE_CODE)) {
                    Intent intent = new Intent(LockActivity.this, MainActivity.class);
                    intent.putExtra("code", pin);
                    startActivity(intent);
                    finish();
                } else {
                    Toast.makeText(LockActivity.this, "Failed code, try again!", Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void onEmpty() {
                Log.d(TAG, "lock code is empty!");
            }

            @Override
            public void onPinChange(int pinLength, String intermediatePin) {
                Log.d(TAG, "Pin changed, new length " + pinLength + " with intermediate pin " + intermediatePin);
            }
        });
    }
}

The main activity of application

    As you can see at the code above, after putting a true lock code, user will be redirect to the main activity:

MainActivity.java

package info.devexchanges.applockscreen;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        TextView textView = (TextView) findViewById(R.id.text);
        String code = getIntent().getStringExtra("code");
        textView.setText(String.format("The true code is: %s", code));
    }
}

    And main activity layout (for simple, it only contains a TextView which show the code entered in the lock screen):

activity_main.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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
</RelativeLayout>

    In order to make a good looking lock screen, please use a full screen theme for the lock activity, the styles resource and AndroidManifest.xml will be like this:

styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="@style/Theme.AppCompat.Light">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

</resources>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.devexchanges.applockscreen">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".LockActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity"
            android:label="@string/app_name"/>
    </application>

</manifest>

    Running application, we have this output:

    When user input a wrong code:

    And user input the correct code:

Conclusions and Reference

    I also had a post about the lock screen here (which make it myself), you can take a glance. Through this post, I hope you can build a lock screen for your app quickly by a simple external library. More details about it, please go to the library page on @Github!

Author : Hong Thai

Share