MiguelC MiguelC - 1 year ago 71
Android Question

Make popup of the key pressed in a customized keyboard

I'm using keyboardview to have my own keyboard.

Works fine, but I cannot do the effect of enlarging the key pressed, as does the Android keyboard

zoom image

These are the parts that use

<android.inputmethodservice.KeyboardView
android:id="@+id/keyboardview"
style="@style/Widget.KeyboardView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:shadowRadius="0"
android:visibility="visible" />


.

<style name="Widget.KeyboardView" parent="android:Widget.KeyboardView">
<item name="android:background">@drawable/naranja</item>
<item name="android:keyBackground">@drawable/naranja</item>
<item name="android:keyTextSize">40sp</item>
<item name="android:keyTextColor">#d35400</item>
<item name="android:keyPreviewLayout">@layout/keyboard_popup_keyboard</item>
<item name="android:keyPreviewOffset">12dp</item>
<item name="android:keyPreviewHeight">80dp</item>
<item name="android:popupLayout">@layout/keyboard_popup_keyboard</item>
</style>


.

XML/popup:

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
android:keyWidth="10%p"
android:keyHeight="10%p">
</Keyboard>


Rows

<Key
android:codes="81"
android:keyEdgeFlags="left"
android:keyLabel="Q"
android:popupCharacters="Q"
android:popupKeyboard="@xml/popup" />

etc...


I've tried with onKey method, also from the XML. But without success.

Answer Source

For just showing the enlarged previews, KeyboardView should be doing it by default. You don't want to set a popupKeyboard value as this is for a special mini keyboard that shows on long presses.

I assume you were following this tutorial. Take note of these lines in section 3.3:

// Do not show the preview balloons
mKeyboardView.setPreviewEnabled(false);

Instead set this to true.

Complete Solution

In your activity's layout:

<android.inputmethodservice.KeyboardView
    android:id="@+id/keyboardview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:keyPreviewOffset="12dp"
    android:keyPreviewLayout="@layout/kbpreview"
    android:visibility="visible" />

The important properties here are keyPreviewLayout, keyPreviewOffset and keyPreviewHeight.

layout/kbpreview.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:gb="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:background="@color/red"
    android:textSize="30dp" />

xml/kb.xml

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
    android:keyWidth="12.50%p"
    android:keyHeight="10%p" >

    <Row>
        <Key android:codes="55"    android:keyLabel="7" android:keyEdgeFlags="left" />
        <Key android:codes="56"    android:keyLabel="8" />
        <Key android:codes="57"    android:keyLabel="9" />
        <Key android:codes="65"    android:keyLabel="A" android:horizontalGap="6.25%p" />
        <Key android:codes="66"    android:keyLabel="B" />
        <Key android:codes="55006" android:keyLabel="CLR" android:keyEdgeFlags="right"/>
    </Row>

    <!-- and whatever else... -->

</Keyboard>

In your activity code

    Keyboard mKeyboard = new Keyboard(this, R.xml.kb);

    // Lookup the KeyboardView
    KeyboardView mKeyboardView = (KeyboardView) findViewById(R.id.keyboardview);

    // Attach the keyboard to the view
    mKeyboardView.setKeyboard(mKeyboard);

    // Key listener required
    mKeyboardView.setOnKeyboardActionListener(myListener);

Result

with the '5' key pressed:

enter image description here

You may also find it useful to check out the KeyboardView source code.