How to draw view on top of soft keyboard like WhatsApp?

android view android-softkeyboard
and_dev picture and_dev · Apr 17, 2013 · Viewed 22.9k times · Source

I want to know how it's possible to add View on top of Keyboard like WhatsApp and Hangout. In chat screen, they insert emoticons view on top of the opened soft keyboard.

sample image

Does anyone know how to achieve this behavior?

Answer

Chirag Jain picture Chirag Jain · May 13, 2013

Well, I have created a sample keyboard for chatting here...

Here, I use popup window for showing popup window and height of popup is calculated dynamically by height of keyboard

// Initially defining default height of keyboard which is equal to 230 dip
        final float popUpheight = getResources().getDimension(
                R.dimen.keyboard_height);
        changeKeyboardHeight((int) popUpheight);

// Creating a pop window for emoticons keyboard
    popupWindow = new PopupWindow(popUpView, LayoutParams.MATCH_PARENT,
            (int) keyboardHeight, false);

and height is calculated using this function :

/**
 * Checking keyboard height and keyboard visibility
 */
int previousHeightDiffrence = 0;
private void checkKeyboardHeight(final View parentLayout) {

    parentLayout.getViewTreeObserver().addOnGlobalLayoutListener(
            new ViewTreeObserver.OnGlobalLayoutListener() {

                @Override
                public void onGlobalLayout() {

                    Rect r = new Rect();
                    parentLayout.getWindowVisibleDisplayFrame(r);

                    int screenHeight = parentLayout.getRootView()
                            .getHeight();
                    int heightDifference = screenHeight - (r.bottom);

                    if (previousHeightDiffrence - heightDifference > 50) {                          
                        popupWindow.dismiss();
                    }

                    previousHeightDiffrence = heightDifference;
                    if (heightDifference > 100) {

                        isKeyBoardVisible = true;
                        changeKeyboardHeight(heightDifference);

                    } else {

                        isKeyBoardVisible = false;

                    }

                }
            });

}

Using all these stuff i am able to make a perfect overlapping keyboard....

then i inflate popup window with viewpager and gridview for emoticons.

Also, i use spannable string for showing these emoticons in listview and chat window

Related questions

How to resize AlertDialog on the Keyboard display

I have a AlertDialog box with approximately 10 controls (text and TextView) on it. These controls are in a ScrollView with AlertDialog, plus I got 2 buttons positive and negative. The issue I have is when the soft keyboard pops up the …

Read More
Get root view from current activity

I know how to get the root view with View.getRootView(). I am also able to get the view from a button's onClick event where the argument is a View. But how can I get the view in an activity?

Read More
How to set background color of a View

I'm trying to set the background color of a View (in this case a Button). I use this code: // set the background to green v.setBackgroundColor(0x0000FF00 ); v.invalidate(); It causes the Button to disappear from the screen. What …

Read More