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 ?

visit for an examplehttps://github.com/rciovati/Android-KeyboardView-Example — Jitesh Upadhyay, Feb 19 '14 at 05:51

Riki · Accepted Answer · 2016-06-03T14:20:19.923

Use TableLayout to create the numeric keyboard layout.
Bind View.OnClickListener on each custom key view to response user input.
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;
    }
}

Did you implement the strings,drawables,dimens and colors what I had not posted here?Or can you show some code snippet?I don't know what the problem you were facing. — Riki, Feb 20 '14 at 00:59
I'd like to propose a lazy suggestion. Set onClick(View v) to all of the keys. Then check if this key is text view (if v instanceof TextView) and to append the text just use mTextView.append(((TextView) v).getText()); This way you don't need to write the same line multiple times. — dephinera, Sep 14 '15 at 14:10
Awesome answer! How do I implement this so that I can use it for multiple activities? — Nii Laryea, May 28 '16 at 14:16
@NiiLaryea Create a new custom view, inflate layout from xml to the new view in constructor, then find and set each view, add some public methods to expose to external invoke which can get some useful data. Finally reuse this view in anywhere. — Riki, May 30 '16 at 06:55
@NiiLaryea I write a custom view for you, please check the updated answer. — Riki, Jun 03 '16 at 14:21
How can we access the password_field textview in SomeActivity.java which has layout file SomeLayout.xml containing KeyboardView? I just want to get the number entered by keyboard and use it further. — impossible, Jun 26 '16 at 18:54
@ArewegoodQ I have defined a method named `getInputText()` which return the text of password field. Or you can define your own method which return the password_field TextView instance. — Riki, Jun 27 '16 at 00:58
this doesn't work for me. Copied the code 1:1 and edited my manifest, but it never shows up. also android studio tells me that I am not allowed to put this into my manifest. — keinabel, Dec 05 '16 at 01:48
How do you bind a hardware keyboard number input with this. So that if we tap a number key it will start showing on the edittextview — Ismail Iqbal, Oct 01 '18 at 12:20

score -1 · Answer 2 · answered Mar 15 '20 at 06:03

-1

There is an open source library solving your exact problem on github: clamnumpad

answered Mar 15 '20 at 06:03

Frederick Nyawaya

2,285
1
15
19

score -2 · Answer 3 · answered Feb 19 '14 at 06:28

-2

You can set inputType of the EditText to number for this.

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number" >
        <requestFocus />
    </EditText>

And if you want to set password field as well, use numberPassword

answered Feb 19 '14 at 06:28

Keya

859
3
9
17

Yes,But I want to customize the look of keyboard. – Zaw Myo Htet Feb 19 '14 at 06:35
1

For that, you will need to write your own keyboard layout as AvatarQing has suggested in answer. Write drawables for colors, backgrounds as you like. Inflate the layout and set it to the KeyboardView. Please refer this [question](http://stackoverflow.com/questions/18224520/how-to-set-different-background-of-keys-for-android-custom-keyboard). Hope this helps. Let me know if you need details. – Keya Feb 19 '14 at 07:31
not showing as per question asked, opens default numeric keypad – Ananta Prasad Jul 29 '19 at 06:33

Android custom numeric keyboard

3 Answers3

Old answer:

Linked