Android custom numeric keyboard

Question

I want to add numeric keyboard like the one in vault application

I don't know how to call it and how can I find in google ?

Answer 1

1. Use TableLayout to create the numeric keyboard layout.
2. Bind View.OnClickListener on each custom key view to response user input.
3. In responses, append or delete text to that password field which implements by EditText.You can use append() or setText() to control what will be filled in the password field.

I write a custom view for reusing in anywhere, here is the code:

KeyboardView.java

public class KeyboardView extends FrameLayout implements View.OnClickListener {      private EditText mPasswordField;      public KeyboardView(Context context) {         super(context);         init();     }      public KeyboardView(Context context, AttributeSet attrs) {         super(context, attrs);         init();     }      public KeyboardView(Context context, AttributeSet attrs, int defStyleAttr) {         super(context, attrs, defStyleAttr);         init();     }      private void init() {         inflate(getContext(), R.layout.keyboard, this);         initViews();     }      private void initViews() {         mPasswordField = $(R.id.password_field);         $(R.id.t9_key_0).setOnClickListener(this);         $(R.id.t9_key_1).setOnClickListener(this);         $(R.id.t9_key_2).setOnClickListener(this);         $(R.id.t9_key_3).setOnClickListener(this);         $(R.id.t9_key_4).setOnClickListener(this);         $(R.id.t9_key_5).setOnClickListener(this);         $(R.id.t9_key_6).setOnClickListener(this);         $(R.id.t9_key_7).setOnClickListener(this);         $(R.id.t9_key_8).setOnClickListener(this);         $(R.id.t9_key_9).setOnClickListener(this);         $(R.id.t9_key_clear).setOnClickListener(this);         $(R.id.t9_key_backspace).setOnClickListener(this);     }      @Override     public void onClick(View v) {         // handle number button click         if (v.getTag() != null && "number_button".equals(v.getTag())) {             mPasswordField.append(((TextView) v).getText());             return;         }         switch (v.getId()) {             case R.id.t9_key_clear: { // handle clear button                 mPasswordField.setText(null);             }             break;             case R.id.t9_key_backspace: { // handle backspace button                 // delete one character                 Editable editable = mPasswordField.getText();                 int charCount = editable.length();                 if (charCount > 0) {                     editable.delete(charCount - 1, charCount);                 }             }             break;         }     }      public String getInputText() {         return mPasswordField.getText().toString();     }      protected <T extends View> T $(@IdRes int id) {         return (T) super.findViewById(id);     } } 

layout keyboard.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="vertical"     android:padding="8dp">      <EditText         android:id="@+id/password_field"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_marginBottom="8dp"         android:background="#eeeeee"         android:enabled="false"         android:minHeight="48dp"         android:paddingLeft="8dp"         android:paddingRight="8dp"         android:singleLine="true"         android:textAppearance="?android:attr/textAppearanceMedium"/>      <TableLayout         android:id="@+id/keyboard"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="@android:color/white"         android:divider="@drawable/keyboard_divider"         android:orientation="vertical"         android:showDividers="beginning|middle|end">          <TableRow style="@style/keyboard_row">              <TextView                 android:id="@+id/t9_key_1"                 style="@style/keyboard_number_button"                 android:text="@string/number_one"/>              <TextView                 android:id="@+id/t9_key_2"                 style="@style/keyboard_number_button"                 android:text="@string/number_two"/>              <TextView                 android:id="@+id/t9_key_3"                 style="@style/keyboard_number_button"                 android:text="@string/number_three"/>         </TableRow>          <TableRow style="@style/keyboard_row">              <TextView                 android:id="@+id/t9_key_4"                 style="@style/keyboard_number_button"                 android:text="@string/number_four"/>              <TextView                 android:id="@+id/t9_key_5"                 style="@style/keyboard_number_button"                 android:text="@string/number_five"/>              <TextView                 android:id="@+id/t9_key_6"                 style="@style/keyboard_number_button"                 android:text="@string/number_six"/>         </TableRow>          <TableRow style="@style/keyboard_row">              <TextView                 android:id="@+id/t9_key_7"                 style="@style/keyboard_number_button"                 android:text="@string/number_seven"/>              <TextView                 android:id="@+id/t9_key_8"                 style="@style/keyboard_number_button"                 android:text="@string/number_eight"/>              <TextView                 android:id="@+id/t9_key_9"                 style="@style/keyboard_number_button"                 android:text="@string/number_nine"/>         </TableRow>          <TableRow style="@style/keyboard_row">              <TextView                 android:id="@+id/t9_key_clear"                 style="@style/keyboard_button"                 android:text="@string/btn_clear"                 android:textAppearance="?android:attr/textAppearanceMedium"/>              <TextView                 android:id="@+id/t9_key_0"                 style="@style/keyboard_number_button"                 android:text="@string/number_zero"/>              <TextView                 android:id="@+id/t9_key_backspace"                 style="@style/keyboard_button"                 android:text="@string/btn_backspace"                 android:textAppearance="?android:attr/textAppearanceMedium"/>         </TableRow>     </TableLayout> </LinearLayout> 

style.xml

<style name="keyboard_row">     <item name="android:layout_width">match_parent</item>     <item name="android:layout_height">wrap_content</item>     <item name="android:divider">@drawable/keyboard_divider</item>     <item name="android:gravity">center</item>     <item name="android:showDividers">beginning|middle|end</item> </style>  <style name="keyboard_button">     <item name="android:layout_width">0dp</item>     <item name="android:layout_height">match_parent</item>     <item name="android:layout_weight">1</item>     <item name="android:paddingTop">12dp</item>     <item name="android:paddingBottom">12dp</item>     <item name="android:clickable">true</item>     <item name="android:gravity">center</item>     <item name="android:scaleType">centerInside</item>     <item name="android:background">@drawable/keyboard_button_bg</item>     <item name="android:textAppearance">?android:attr/textAppearanceLarge</item> </style>  <style name="keyboard_number_button" parent="keyboard_button">     <item name="android:tag">number_button</item> </style> 

drawable keyboard_button_bg.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_shortAnimTime">     <item android:state_pressed="true">         <shape>             <solid android:color="#dddddd"/>         </shape>     </item>     <item android:state_pressed="false">         <shape>             <solid android:color="@android:color/transparent"/>         </shape>     </item> </selector>  

drawable keyboard_divider.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <solid android:color="#dddddd"/>     <size         android:width="1px"         android:height="1px"/> </shape> 

strings.xml

<string name="number_zero">0</string> <string name="number_one">1</string> <string name="number_two">2</string> <string name="number_three">3</string> <string name="number_four">4</string> <string name="number_five">5</string> <string name="number_six">6</string> <string name="number_seven">7</string> <string name="number_eight">8</string> <string name="number_nine">9</string> <string name="btn_clear">Clear</string> <string name="btn_backspace">Back</string> 

Use the custom KeyboardView in your layout :

<com.xxx.yyy.KeyboardView     android:layout_width="match_parent"     android:layout_height="wrap_content"/> 

---

Old answer:

The keyboard layout code looks like this:

<?xml version="1.0" encoding="utf-8"?>  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/anti_theft_t9_grid"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:background="@color/white_grey"     android:divider="@android:color/darker_gray"     android:orientation="vertical"     android:showDividers="middle|beginning|end" >  <TableRow     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:divider="@android:color/darker_gray"     android:gravity="center"     android:showDividers="middle" >      <TextView         android:id="@+id/anti_theft_t9_key_1"         style="@style/anti_theft_t9_key"         android:text="@string/number_one"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_2"         style="@style/anti_theft_t9_key"         android:text="@string/number_two"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_3"         style="@style/anti_theft_t9_key"         android:text="@string/number_three"         android:textIsSelectable="false" /> </TableRow>  <TableRow     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:divider="@android:color/darker_gray"     android:gravity="center"     android:showDividers="middle" >      <TextView         android:id="@+id/anti_theft_t9_key_4"         style="@style/anti_theft_t9_key"         android:text="@string/number_four"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_5"         style="@style/anti_theft_t9_key"         android:text="@string/number_five"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_6"         style="@style/anti_theft_t9_key"         android:text="@string/number_six"         android:textIsSelectable="false" /> </TableRow>  <TableRow     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:divider="@android:color/darker_gray"     android:gravity="center"     android:showDividers="middle" >      <TextView         android:id="@+id/anti_theft_t9_key_7"         style="@style/anti_theft_t9_key"         android:text="@string/number_seven"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_8"         style="@style/anti_theft_t9_key"         android:text="@string/number_eight"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_9"         style="@style/anti_theft_t9_key"         android:text="@string/number_nine"         android:textIsSelectable="false" /> </TableRow>  <TableRow     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:divider="@android:color/darker_gray"     android:gravity="center"     android:showDividers="middle" >      <TextView         android:id="@+id/anti_theft_t9_key_clear"         style="@style/anti_theft_t9_key"         android:text="@string/anti_theft_keyboard_clear"         android:textAppearance="?android:attr/textAppearanceMedium"         android:textIsSelectable="false" />      <TextView         android:id="@+id/anti_theft_t9_key_0"         style="@style/anti_theft_t9_key"         android:text="@string/number_zero"         android:textIsSelectable="false" />      <ImageView         android:id="@+id/anti_theft_t9_key_backspace"         style="@style/anti_theft_t9_key"         android:contentDescription="@string/app_name_for_anti_theft"         android:src="@drawable/anti_theft_keyboard_backspace"         android:textIsSelectable="false" /> </TableRow>  </TableLayout> 

Each key style:

<style name="anti_theft_t9_key">     <item name="android:layout_width">0dp</item>     <item name="android:layout_height">wrap_content</item>     <item name="android:layout_weight">1</item>     <item name="android:paddingTop">@dimen/anti_theft_t9_key_paddingTop</item>     <item name="android:paddingBottom">@dimen/anti_theft_t9_key_paddingBottom</item>     <item name="android:clickable">true</item>     <item name="android:gravity">center</item>     <item name="android:scaleType">centerInside</item>     <item name="android:background">@drawable/anti_theft_btn_blue_bg</item>     <item name="android:textAppearance">?android:attr/textAppearanceLarge</item> </style> 

Responses of each key:

private EditText mEtPassword ;  private void setViews(){     // find view references...     // set OnClickListener to each key view... }  private void onT9KeyClicked(int key) {     switch (key) {     case R.id.anti_theft_t9_key_0:         mEtPassword.append("0");         break;     case R.id.anti_theft_t9_key_1:         mEtPassword.append("1");         break;     case R.id.anti_theft_t9_key_2:         mEtPassword.append("2");         break;     case R.id.anti_theft_t9_key_3:         mEtPassword.append("3");         break;     case R.id.anti_theft_t9_key_4:         mEtPassword.append("4");         break;     case R.id.anti_theft_t9_key_5:         mEtPassword.append("5");         break;     case R.id.anti_theft_t9_key_6:         mEtPassword.append("6");         break;     case R.id.anti_theft_t9_key_7:         mEtPassword.append("7");         break;     case R.id.anti_theft_t9_key_8:         mEtPassword.append("8");         break;     case R.id.anti_theft_t9_key_9:         mEtPassword.append("9");         break;     case R.id.anti_theft_t9_key_backspace: {         // delete one character         String passwordStr = mEtPassword.getText().toString();         if (passwordStr.length() > 0) {             String newPasswordStr = new StringBuilder(passwordStr)                     .deleteCharAt(passwordStr.length() - 1).toString();             mEtPassword.setText(newPasswordStr);         }     }         break;     case R.id.anti_theft_t9_key_clear:         // clear password field         mEtPassword.setText(null);         break;     } }