Default pin lock screen layout

Question

I want to provide lock screen, so every time user opens my app, he will be forced to enter pin. So I am looking for Android's default pin lock layout (as shown on image), which should work from Android 4.0. Can you tell me where to find layout of this or how to implement it properly?

Answer 1

I git below project from github and little changed it to provide a GUI like your image : https://github.com/chinloong/Android-PinView

so create a project and in mainActivity insert this codes:

public class PinEntryView extends Activity {

String userEntered;
String userPin="8888";

final int PIN_LENGTH = 4;
boolean keyPadLockedFlag = false;
Context appContext;

TextView titleView;

TextView pinBox0;
TextView pinBox1;
TextView pinBox2;
TextView pinBox3;



TextView statusView;

Button button0;
Button button1;
Button button2;
Button button3;
Button button4;
Button button5;
Button button6;
Button button7;
Button button8;
Button button9;
Button button10;
Button buttonExit;
Button buttonDelete;
EditText passwordInput;
ImageView backSpace;

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

    appContext = this;
    userEntered = "";


    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
    WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.main_layout);

    //Typeface xpressive=Typeface.createFromAsset(getAssets(), "fonts/XpressiveBold.ttf");

    statusView = (TextView) findViewById(R.id.statusview);
    passwordInput = (EditText) findViewById(R.id.editText);
    backSpace = (ImageView) findViewById(R.id.imageView);
    buttonExit = (Button) findViewById(R.id.buttonExit);
    backSpace.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            passwordInput.setText(passwordInput.getText().toString().substring(0,passwordInput.getText().toString().length()-2));
        }
    });
    buttonExit.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {

            //Exit app
            Intent i = new Intent();
            i.setAction(Intent.ACTION_MAIN);
            i.addCategory(Intent.CATEGORY_HOME);
            appContext.startActivity(i); 
            finish();

        }

        }
    );
    //buttonExit.setTypeface(xpressive);


    buttonDelete = (Button) findViewById(R.id.buttonDeleteBack);
    buttonDelete.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {

            if (keyPadLockedFlag == true)
            {
                return;
            }

            if (userEntered.length()>0)
            {
                userEntered = userEntered.substring(0,userEntered.length()-1);
                passwordInput.setText("");
            }


        }

        }
    );

    titleView = (TextView)findViewById(R.id.time);
    //titleView.setTypeface(xpressive);








    View.OnClickListener pinButtonHandler = new View.OnClickListener() {
        public void onClick(View v) {

            if (keyPadLockedFlag == true)
            {
                return;
            }

            Button pressedButton = (Button)v;


            if (userEntered.length()<PIN_LENGTH)
            {
                userEntered = userEntered + pressedButton.getText();
                Log.v("PinView", "User entered="+userEntered);

                //Update pin boxes
                passwordInput.setText(passwordInput.getText().toString()+"*");
                passwordInput.setSelection(passwordInput.getText().toString().length());

                if (userEntered.length()==PIN_LENGTH)
                {
                    //Check if entered PIN is correct
                    if (userEntered.equals(userPin))
                    {
                        statusView.setTextColor(Color.GREEN);
                        statusView.setText("Correct");
                        Log.v("PinView", "Correct PIN");
                        finish();
                    }
                    else
                    {
                        statusView.setTextColor(Color.RED);
                        statusView.setText("Wrong PIN. Keypad Locked");
                        keyPadLockedFlag = true;
                        Log.v("PinView", "Wrong PIN");

                        new LockKeyPadOperation().execute("");
                    }
                }   
            }
            else
            {
                //Roll over
                passwordInput.setText("");

                userEntered = "";

                statusView.setText("");

                userEntered = userEntered + pressedButton.getText();
                Log.v("PinView", "User entered="+userEntered);

                //Update pin boxes
                passwordInput.setText("8");

            }


        }
      };


    button0 = (Button)findViewById(R.id.button0);
    //button0.setTypeface(xpressive);
    button0.setOnClickListener(pinButtonHandler);

    button1 = (Button)findViewById(R.id.button1);
    //button1.setTypeface(xpressive);
    button1.setOnClickListener(pinButtonHandler);

    button2 = (Button)findViewById(R.id.button2);
    //button2.setTypeface(xpressive);
    button2.setOnClickListener(pinButtonHandler);


    button3 = (Button)findViewById(R.id.button3);
    //button3.setTypeface(xpressive);
    button3.setOnClickListener(pinButtonHandler);

    button4 = (Button)findViewById(R.id.button4);
    //button4.setTypeface(xpressive);
    button4.setOnClickListener(pinButtonHandler);

    button5 = (Button)findViewById(R.id.button5);
    //button5.setTypeface(xpressive);
    button5.setOnClickListener(pinButtonHandler);

    button6 = (Button)findViewById(R.id.button6);
    //button6.setTypeface(xpressive);
    button6.setOnClickListener(pinButtonHandler);

    button7 = (Button)findViewById(R.id.button7);
    //button7.setTypeface(xpressive);
    button7.setOnClickListener(pinButtonHandler);

    button8 = (Button)findViewById(R.id.button8);
    //button8.setTypeface(xpressive);
    button8.setOnClickListener(pinButtonHandler);

    button9 = (Button)findViewById(R.id.button9);
    //button9.setTypeface(xpressive);
    button9.setOnClickListener(pinButtonHandler);





    buttonDelete = (Button)findViewById(R.id.buttonDeleteBack);
    //buttonDelete.setTypeface(xpressive);



}

@Override
public void onBackPressed() {
    // TODO Auto-generated method stub

    //App not allowed to go back to Parent activity until correct pin entered.
    return;
    //super.onBackPressed();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    //getMenuInflater().inflate(R.menu.activity_pin_entry_view, menu);
    return true;
}


private class LockKeyPadOperation extends AsyncTask<String, Void, String> {

    @Override
    protected String doInBackground(String... params) {
          for(int i=0;i<2;i++) {
              try {
                  Thread.sleep(1000);
              } catch (InterruptedException e) {
                  // TODO Auto-generated catch block
                  e.printStackTrace();
              }
          }

          return "Executed";
    }

    @Override
    protected void onPostExecute(String result) {
            statusView.setText("");

        //Roll over
        passwordInput.setText("");
            ;

            userEntered = "";

            keyPadLockedFlag = false;
    }

    @Override
    protected void onPreExecute() {
    }

    @Override
    protected void onProgressUpdate(Void... values) {
    }

}

}

then create main_layout.xml file and insert below xml codes:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/image_background"
 >


<ImageView
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:src="@drawable/backspace"
    android:layout_above="@+id/view"
    android:layout_marginBottom="10dp"
    android:layout_alignRight="@+id/view"
    android:id="@+id/imageView" />
<View
    android:layout_width="200dp"
    android:layout_height="1dp"
    android:background="#FFF"
    android:layout_above="@+id/numericPad"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:id="@+id/view" />

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/numericPad"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="20dip"
    android:layout_marginLeft="5dip"
    android:layout_marginRight="5dip"
    android:shrinkColumns="*"
    android:stretchColumns="*"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    >
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:id="@+id/button1"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="1"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button2"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="2"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button3"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="3"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
    </TableRow>
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:id="@+id/button4"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="4"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button5"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="5"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button6"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="6"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
    </TableRow>
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:id="@+id/button7"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="7"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button8"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="8"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button9"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="9"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
    </TableRow>
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:id="@+id/buttonExit"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Exit"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/button0"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="0"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
        <Button
            android:id="@+id/buttonDeleteBack"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Delete"
            android:textSize="25sp"
            android:textColor="#ffffff"
            android:padding="6dip"
            android:layout_margin="3dip"
            android:background="@android:color/transparent"
            >
        </Button>
    </TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"></TableRow>

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

    </TableRow>
</TableLayout>

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:ems="10"
    android:id="@+id/editText"
    android:layout_alignBottom="@+id/imageView"
    android:layout_centerHorizontal="true"
    android:background="@android:color/transparent"
       />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="Enter Password"
    android:id="@+id/statusview"
    android:layout_below="@+id/time"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="23:17"
    android:id="@+id/time"
    android:textSize="100sp"
    android:layout_marginTop="64dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

note : userPin variable is your password and you can change it.

in below bock in activity class you should insert your code that you want execute if user enter correnct password (e.g start a new activity )

if (userEntered.equals(userPin))
                {
                    statusView.setTextColor(Color.GREEN);
                    statusView.setText("Correct");
                    Log.v("PinView", "Correct PIN");
                    finish();
                }

Note: add below line to main activity node in mainfist.xml file

        android:theme="@android:style/Theme.NoTitleBar"

so your Activity node must be like :

<activity
        android:name="com.example.MainActivity"
        android:theme="@android:style/Theme.NoTitleBar"

        >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>