Android Tutorial - Create Keyboard For Input PIN

You arrived at this page, must be looking for a easy tutorial for create a input PIN board. Right? hehe don't take seriously.

In internet you can find much tutorial how to create a input PIN board, you can follow one of them. In this tutorial, i also try to share about how to create a board for input PIN. Perhaps this tutorial the code is not efficient, but at least, i create it structurally, with you people read this article is easy to understand.

Final Result

Let start the coding ....

1. In directory res/drawable


Download this icon DELETE and EXIT or you can use your own. After downloaded place those icon in drawable directory.

Create new xml file, give it name as non_selected_item.xml. This file used as background color of indicator digit (when no filled a digit). Paste the following code :

	<?xml version="1.0" encoding="utf-8"?>
	<shape android:dither="true"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="oval"
	android:useLevel="true">
	<size android:height="9dip"
	android:width="9dip"/>
	<solid android:color="@android:color/darker_gray"/>
	</shape>

view raw non_selected_item.xml hosted with ❤ by GitHub

Create new xml file, give it name as selected_item.xml. This file used as background color of indicator digit (when filled by a digit). Paste the following code :

	<?xml version="1.0" encoding="utf-8"?>
	<shape android:shape="oval"
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:useLevel="true"
	android:dither="true">
	<size
	android:height="9dip"
	android:width="9dip"/>
	<solid android:color="@android:color/white"/>
	</shape>

view raw selected_item.xml hosted with ❤ by GitHub

Create new xml file, give it name as press_button_white_transparant.xml. This file used as background when the digit number is pressed. Paste the following code :

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_selected="true"
	android:drawable="@android:color/darker_gray"/>
	<item android:state_pressed="true"
	android:drawable="@color/semi_white_transparant"/>
	<item android:drawable="@android:color/transparent"/>
	</selector>

view raw press_button_white_transparant.xml hosted with ❤ by GitHub

2. In directory res/values

colors.xml

	<?xml version="1.0" encoding="utf-8"?>
	<resources>
	<color name="colorPrimary">#3F51B5</color>
	<color name="colorPrimaryDark">#303F9F</color>
	<color name="colorAccent">#FF4081</color>
	<color name="semi_white_transparant">#70ffffff</color>
	</resources>

view raw colors.xml hosted with ❤ by GitHub

dimens.xml

	<resources>
	<!-- Default screen margins, per the Android Design guidelines. -->
	<dimen name="activity_horizontal_margin">16dp</dimen>
	<dimen name="activity_vertical_margin">16dp</dimen>
	<dimen name="number_keyboard">28sp</dimen>
	<dimen name="margin_pin">35dp</dimen>
	</resources>

view raw dimens.xml hosted with ❤ by GitHub

styles.xml

	<resources>
	<!-- Base application theme. -->
	<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
	<!-- Customize your theme here. -->
	<item name="colorPrimary">@color/colorPrimary</item>
	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
	<item name="colorAccent">@color/colorAccent</item>
	</style>
	<style name="keyboard_pressed">
	<item name="android:foreground">@drawable/press_button_white_transparant</item>
	</style>
	</resources>

view raw styles.xml hosted with ❤ by GitHub

strings.xml

	<resources>
	<string name="app_name">KeyboarInputPin</string>
	<string name="input_pin">INPUT PIN</string>
	<string name="desc_pin">Tutorial input 4 digits PIN\nwww.androidbie.com</string>
	<string name="msg_complete_your_pin">Please complete your PIN</string>
	<string name="msg_open_your_next_activity">Done! Open your next activity</string>
	</resources>

view raw strings.xml hosted with ❤ by GitHub

3. In directory res/layout

There is one layout that we use to create a keyboard. In this case i use activity_main.xml as the layout.  Paste the following code :

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout 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:orientation="vertical"
	android:padding="10dp"
	android:background="@android:color/holo_blue_dark"
	tools:context=".MainActivity">
	<FrameLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_gravity="right"
	android:id="@+id/frameLayout_close_keyboard"
	android:foreground="@drawable/press_button_white_transparant">
	<ImageView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:src="@drawable/ic_navigation_close"/>
	</FrameLayout>
	<LinearLayout
	android:id="@+id/linaerLayout_labelPin"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
	<TextView
	android:layout_marginTop="20dp"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/input_pin"
	android:textSize="20sp"
	android:textColor="@android:color/white"
	android:layout_gravity="center"/>
	<TextView
	android:gravity="center"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textColor="@android:color/white"
	android:text="@string/desc_pin"
	android:layout_gravity="center"
	android:layout_marginTop="8dp"
	android:textSize="15sp"/>
	<LinearLayout
	android:layout_marginRight="18dp"
	android:layout_marginTop="25dp"
	android:layout_gravity="center"
	android:layout_width="210dp"
	android:layout_height="17dp"
	android:orientation="horizontal">
	<TextView
	android:id="@+id/textView_pin1"
	android:layout_marginLeft="@dimen/margin_pin"
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/nonselected_item"/>
	<TextView
	android:id="@+id/textView_pin2"
	android:layout_marginLeft="@dimen/margin_pin"
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/nonselected_item"/>
	<TextView
	android:id="@+id/textView_pin3"
	android:layout_marginLeft="@dimen/margin_pin"
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/nonselected_item"/>
	<TextView
	android:id="@+id/textView_pin4"
	android:layout_marginLeft="@dimen/margin_pin"
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/nonselected_item"/>
	</LinearLayout>
	</LinearLayout>
	<LinearLayout
	android:layout_marginTop="25dp"
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	<LinearLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="horizontal">
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number1">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="1"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number2">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="2"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number3">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="3"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	</LinearLayout>
	<LinearLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="horizontal">
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number4">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="4"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number5">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="5"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number6">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="6"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	</LinearLayout>
	<LinearLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="horizontal">
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	style="@style/keyboard_pressed"
	android:layout_height="match_parent"
	android:id="@+id/frameLayout_number7">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="7"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	style="@style/keyboard_pressed"
	android:layout_height="match_parent"
	android:id="@+id/frameLayout_number8">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="8"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_number9">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="9"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	</LinearLayout>
	<LinearLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:orientation="horizontal">
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_deletePin">
	<ImageView
	android:layout_gravity="center"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/ic_content_backspace" />
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	style="@style/keyboard_pressed"
	android:layout_height="match_parent"
	android:id="@+id/frameLayout_number0">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="0"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="@dimen/number_keyboard"/>
	</FrameLayout>
	<FrameLayout
	android:layout_weight="1"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	style="@style/keyboard_pressed"
	android:id="@+id/frameLayout_next">
	<TextView
	android:layout_gravity="center"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:text="NEXT"
	android:gravity="center"
	android:textColor="@android:color/white"
	android:textSize="20sp"/>
	</FrameLayout>
	</LinearLayout>
	</LinearLayout>
	<TextView
	android:id="@+id/textview_your_pin"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:textColor="@android:color/white"
	android:textStyle="bold"
	android:text="Your PIN = "/>
	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

4. In your main package or in your java class, paste the following code. In this project i hosting the code in MainActivity.java

In every click on the key number, do like the following code :

mFrameNumber1.setOnClickListener(new View.OnClickListener() {
    @Override    public void onClick(View v) {
        if(mListPin.size() <=3){
            mListPin.add("1");
            conditioningPinButton();
        }else{

        }

    }
});

On code above, when number 1 is clicked/pressed, we'll save digit 1 to the list. If the list size less that 3, we can still add number to the list.

Full code of MainActivity.java :

	package com.androidbie.keyboarinputpin;
	import android.content.Intent;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.FrameLayout;
	import android.widget.TextView;
	import android.widget.Toast;
	import java.util.ArrayList;
	import java.util.List;
	public class MainActivity extends AppCompatActivity {
	private FrameLayout mFrameCloseKeyboard;
	private FrameLayout mFrameNumber1;
	private FrameLayout mFrameNumber2;
	private FrameLayout mFrameNumber3;
	private FrameLayout mFrameNumber4;
	private FrameLayout mFrameNumber5;
	private FrameLayout mFrameNumber6;
	private FrameLayout mFrameNumber7;
	private FrameLayout mFrameNumber8;
	private FrameLayout mFrameNumber9;
	private FrameLayout mFrameNumber0;
	private FrameLayout mFrameNumberDeleteSpace;
	private FrameLayout mFrameNumberNext;
	private List<String> mListPin;
	private TextView mPin1;
	private TextView mPin2;
	private TextView mPin3;
	private TextView mPin4;
	private TextView tvYourPIN;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	getSupportActionBar().hide();
	mFrameCloseKeyboard = (FrameLayout) findViewById(R.id.frameLayout_close_keyboard);
	mFrameNumber1 = (FrameLayout) findViewById(R.id.frameLayout_number1);
	mFrameNumber2 = (FrameLayout) findViewById(R.id.frameLayout_number2);
	mFrameNumber3 = (FrameLayout) findViewById(R.id.frameLayout_number3);
	mFrameNumber4 = (FrameLayout) findViewById(R.id.frameLayout_number4);
	mFrameNumber5 = (FrameLayout) findViewById(R.id.frameLayout_number5);
	mFrameNumber6 = (FrameLayout) findViewById(R.id.frameLayout_number6);
	mFrameNumber7 = (FrameLayout) findViewById(R.id.frameLayout_number7);
	mFrameNumber8 = (FrameLayout) findViewById(R.id.frameLayout_number8);
	mFrameNumber9 = (FrameLayout) findViewById(R.id.frameLayout_number9);
	mFrameNumber0 = (FrameLayout) findViewById(R.id.frameLayout_number0);
	mFrameNumberDeleteSpace = (FrameLayout) findViewById(R.id.frameLayout_deletePin);
	mFrameNumberNext = (FrameLayout) findViewById(R.id.frameLayout_next);
	tvYourPIN = (TextView) findViewById(R.id.textview_your_pin);
	mPin1 = (TextView) findViewById(R.id.textView_pin1);
	mPin2 = (TextView) findViewById(R.id.textView_pin2);
	mPin3 = (TextView) findViewById(R.id.textView_pin3);
	mPin4 = (TextView) findViewById(R.id.textView_pin4);
	mFrameCloseKeyboard.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	onBackPressed();
	}
	});
	setPin();
	}
	/**
	* this method used to save the digit clicked to list
	*/
	private void setPin(){
	mListPin = new ArrayList<>();
	mFrameNumber1.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("1");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber2.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("2");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber3.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("3");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber4.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("4");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber5.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("5");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber6.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("6");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber7.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("7");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber8.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("8");
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber9.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("9");
	//Toast.makeText(InputPinActivity.this, "Size : "+ mListPin.size(), Toast.LENGTH_LONG).show();
	conditioningPinButton();
	}else{
	}
	}
	});
	mFrameNumber0.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() <=3){
	mListPin.add("0");
	conditioningPinButton();
	}else{
	}
	}
	});
	/**
	* Delete pin one by one, after that, change the background of indicator
	*/
	mFrameNumberDeleteSpace.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size() != 0){
	mListPin.remove(mListPin.size()-1);
	if(mListPin.size()==3){
	mPin4.setBackgroundResource(R.drawable.nonselected_item);
	}else if(mListPin.size()==2){
	mPin3.setBackgroundResource(R.drawable.nonselected_item);
	}else if(mListPin.size()==1){
	mPin2.setBackgroundResource(R.drawable.nonselected_item);
	}else if(mListPin.size()==0){
	mPin1.setBackgroundResource(R.drawable.nonselected_item);
	}
	}
	}
	});
	mFrameNumberNext.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
	if(mListPin.size()<4){
	Toast.makeText(MainActivity.this, R.string.msg_complete_your_pin, Toast.LENGTH_LONG).show();
	return;
	}
	Toast.makeText(MainActivity.this, R.string.msg_open_your_next_activity, Toast.LENGTH_LONG).show();
	//print your PIN
	String yourPin = "";
	for(int i=0; i<mListPin.size(); i++){
	yourPin += mListPin.get(i);
	}
	tvYourPIN.setText("Your PIN : " + yourPin);
	}
	});
	}
	/**
	* this method used to set the background of indicator pin when has filled by a digit
	*/
	private void conditioningPinButton(){
	if(mListPin.size()==1){
	mPin1.setBackgroundResource(R.drawable.selected_item);
	}else if(mListPin.size()==2){
	mPin2.setBackgroundResource(R.drawable.selected_item);
	}else if(mListPin.size()==3){
	mPin3.setBackgroundResource(R.drawable.selected_item);
	}else if(mListPin.size()==4){
	mPin4.setBackgroundResource(R.drawable.selected_item);
	}
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

That's all about the steps how to create keyboard for input PIN. Watch the following video for the final result.