13

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.

enter image description here

EDIT:

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

enter image description here

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

Thanks :)

sagarpatidar
  • 1,532
  • 1
  • 16
  • 19

2 Answers2

6

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.

MAB
  • 953
  • 7
  • 14
  • I am not using keyboard view. I created my own keypad using views. But to create an awesome experience with key presses I wanted to implemented such overlay sorta thing with normal views press. Thanks – sagarpatidar May 19 '15 at 10:12
  • I don't get what you mean by using views! Can you add more details on how you're creating your custom keybord? Normally you'd have to create an xml keybord with rows and keys, an xml layout for the keyboard, and an another for the preview. – MAB May 19 '15 at 13:28
  • MAB, more details added. – sagarpatidar May 22 '15 at 07:25
1

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.

suitianshi
  • 3,300
  • 1
  • 17
  • 34