Android keypad key press overlay

Question

I am curious about how can I implement the following overlay on some button or key press as shown in following image? I am implementing custom keypad...needed this thing for the same.

EDIT:

So, I have implemented a keypad like following using a Gridview.

Now, I am trying to put some overlay (on click) as in default keyboard.

Thanks :)

Answer 1

What you're looking for is "key preview" I assume you're using KeyboardView to create your custom keyboard. You can enable the key preview by calling setPreviewEnabled(boolean previewEnabled) it should be something like that : mKeyboardView.setPreviewEnabled(true);

Edit:

I think this link will help you in your implementation and explains more in details what I was trying to.

First you create a layout for the keyboard, generally it contains only a keyboardView:

<?xml version="1.0" encoding="UTF-8"?>
    <android.inputmethodservice.KeyboardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/keyboard"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:keyPreviewLayout ="@layout/preview" />

And then you create another layout for the preview:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#ffff00"   
    android:textStyle="bold"
    android:textSize="30sp">    
</TextView>

After that you design your keyboard in your case something like that:

<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
    android:keyWidth="10%p"
    android:horizontalGap="0px"
    android:verticalGap="0px"  
    android:keyHeight="60dp">
    <Row>
        <Key android:codes="49" android:keyLabel="1" android:keyEdgeFlags="left"/>
        <Key android:codes="50" android:keyLabel="2"/>
        <Key android:codes="51" android:keyLabel="3"/>
    </Row>
    <Row>
        <Key android:codes="52" android:keyLabel="4"/>
        <Key android:codes="53" android:keyLabel="5"/>
        <Key android:codes="54" android:keyLabel="6"/>
   </Row>
   <Row>
        <Key android:codes="55" android:keyLabel="7"/>
        <Key android:codes="56" android:keyLabel="8"/>
        <Key android:codes="57" android:keyLabel="9"/>
   </Row>
</Keyboard>

Finally in your java code you inflate your keyboardView or you get it by its id if it's included in a fragment or activity layout. and you set the keyboard that you designed to it.

kv = (KeyboardView)getLayoutInflater().inflate(R.layout.keyboard, null);
keyboard = new Keyboard(this, R.xml.numeric);
kv.setKeyboard(keyboard);
kv.setOnKeyboardActionListener(this);

best of luck.

Answer 2

Use a PopupWindow for the key preview functionality(Actually I did the same thing on my last IME project).

I recommend you using a child class of KeyboardView because it offers you lots of funtions to make things eay.Each time the key is pressed, the onPressed is called back and then you know which one is pressed. And dive into the source code of KeyboardView, you can learn where to place your popupWindowfrom the class.

Just a little effort. But if your class doesn't derive from KeyboardView(like using a GridView), you will have to take more time to figure it out.Anyway, the source code is a good start.