In this post, I will introduce one of them: PinLockView which able to help you build a lock screen quickly.
DEMO VIDEO:
Importing library
app/build.gradle file:
dependencies {
// other dependencies here
compile 'com.andrognito.pinlockview:pinlockview:1.0.1'
}
Building the lock-activity
-
PinLockView: a subclass ofRecyclerView(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 withPinLockViewwhich can be used to indicate the current length of the input.
activity_lock.xml
For more xml atrributes of the <?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>
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 thePinLockView.
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
MainActivity.java
And main activity layout (for simple, it only contains a 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));
}
}
TextView which show the code entered in the lock screen):
activity_main.xml
In order to make a good looking lock screen, please use a full screen theme for the lock activity, the styles resource and <?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>
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
Running application, we have this output:
<?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>
