Emoji popup has not the right size

Question

I implemented this emoji keyboard: https://github.com/ankushsachdeva/emojicon

But now it looks like this:

On the right side, you can see that the popup just doesn'fit right. It doesn't wholly cover the keyboard. There is still some blue from the keyboard on the left, right and on the bottom. Maybe even a little bit on the top.

I think there is a mistake in the EmojiconsPopup.java

/**
     * Call this function to resize the emoji popup according to your soft keyboard size
     */
    public void setSizeForSoftKeyboard(){
        rootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                Rect r = new Rect();
                rootView.getWindowVisibleDisplayFrame(r);

                int screenHeight = getUsableScreenHeight();
                int heightDifference = screenHeight - (r.bottom - r.top);
                int resourceId = mContext.getResources()
                        .getIdentifier("status_bar_height", "dimen", "android");
                if (resourceId > 0) {
                    heightDifference -= mContext.getResources().getDimensionPixelSize(resourceId);
                }
                if (heightDifference > 100) {
                    keyBoardHeight = heightDifference;
                    setSize(LayoutParams.MATCH_PARENT, keyBoardHeight);
                    if(isOpened == false){
                        if(onSoftKeyboardOpenCloseListener != null)
                            onSoftKeyboardOpenCloseListener.onKeyboardOpen(keyBoardHeight);
                    }
                    isOpened = true;
                    if(pendingOpen){
                        showAtBottom();
                        pendingOpen = false;
                    }
                }
                else{
                    isOpened = false;
                    if(onSoftKeyboardOpenCloseListener != null)
                        onSoftKeyboardOpenCloseListener.onKeyboardClose();
                }
            }
        });
    }

Am I the only one with this problem? Someone already fixed that? Thanks!

EDIT: emojicons.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#a16b37"
    android:layout_width="match_parent"
                android:layout_height="match_parent">
    <LinearLayout
            android:id="@+id/emojis_tab"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:layout_alignParentTop="true"
            android:orientation="horizontal">
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="center"
                android:id="@+id/emojis_tab_0_recents"
                android:src="@drawable/ic_emoji_recent_light"/>
        <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#382209"/>
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="center"
                android:id="@+id/emojis_tab_1_people"
                android:src="@drawable/ic_emoji_people_light"/>
        <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#382209"/>
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="center"
                android:id="@+id/emojis_tab_2_nature"
                android:src="@drawable/ic_emoji_nature_light"/>
        <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#382209"/>
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="center"
                android:id="@+id/emojis_tab_3_objects"
                android:src="@drawable/ic_emoji_objects_light"/>
        <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#382209"/>
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="center"
                android:id="@+id/emojis_tab_4_cars"
                android:src="@drawable/ic_emoji_places_light"/>
        <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#382209"/>
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="center"
                android:id="@+id/emojis_tab_5_punctuation"
                android:src="@drawable/ic_emoji_symbols_light"/>
        <View
                android:layout_width="1px"
                android:layout_height="match_parent"
                android:background="#382209"/>
        <ImageButton
                android:background="@null"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:id="@+id/emojis_backspace"
                android:src="@drawable/sym_keyboard_delete_holo_dark"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:layout_below="@id/emojis_tab"
        android:id="@+id/emojis_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_below="@id/emojis_tab"
        android:background="#382209"/>
</RelativeLayout>

Are you sure that this is a sizing problem? Which background are you using for your PopUpWindow? Please share the xml layout that you are using for the PopUpWindowd plus all the related resources/backgrounds/colors. I suspect some padding.. — bonnyz, Mar 17 '16 at 14:50
Ok, nothing wrong with the layout. Maybe it's something related to the method `getWindowVisibleDisplayFrame()`. Take a look here: http://stackoverflow.com/questions/7659652/getwindowvisibledisplayframe-gives-different-values-in-android-2-2-2-3-but-n — bonnyz, Mar 17 '16 at 15:22
@bonnyz: isn't there just an error for versions < 2.33? My minSDK is 16. — progNewbie, Mar 17 '16 at 15:34
Another thing, I noticed that shadowy border around the PopUpWindow. I would also check if it might by a PopUpWindow style/theme issue (style name should be Widget.PopupWindow). — bonnyz, Mar 17 '16 at 15:48

bonnyz · Accepted Answer · 2016-03-17T16:05:20.130

I almost sure that the problem here is the shadow-border around your PopUpWindow.

You can try to change the EmojiconsPopup constructor and remove the background:

    public EmojiconsPopup(View rootView, Context mContext){
        super(mContext);
        this.mContext = mContext;
        this.rootView = rootView;
        View customView = createCustomView();
        setContentView(customView);
        setSoftInputMode(LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
        //default size 
        setSize((int) mContext.getResources().getDimension(R.dimen.keyboard_height), LayoutParams.MATCH_PARENT);

        //>>>>>> REMOVE BACKGROUND <<<<<<
        setBackgroundDrawable(new ColorDrawable(0));
    }

The key part here is using:

setBackgroundDrawable(new ColorDrawable(0));

to remove the background from the popup.

Wow, you are a genius. Thank you very much it works! I will give you the bounty when I am allowed to. (in 19 hours) — progNewbie, Mar 17 '16 at 16:12

Emoji popup has not the right size

1 Answers1