Implement emojis in android keyboard with popupwindow

Question

I've developed a keyboard and now i need to add emojis to it , from other questions i've realized the best way is with popupwindow,

Here's what i've done:

  case -102:
            LayoutInflater layoutInflater
                    = (LayoutInflater)getBaseContext()
                    .getSystemService(LAYOUT_INFLATER_SERVICE);
            View popupView = layoutInflater.inflate(R.layout.emoji_view, null);
            final PopupWindow popupWindow = new PopupWindow(
                    popupView,
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    LinearLayout.LayoutParams.MATCH_PARENT);
            popupWindow.showAsDropDown(getWindow().getOwnerActivity().getCurrentFocus(),50, -30);

Unfortunatly this doesn't work , showAsDropDown needs a view as its first var , and if the keyboard is in another app i don't have a view to give him...

Is there a way to fix that ? or am i going about it all wrong and there is a better way...

all help will be appreciated!

Answer 1

Given that you are using the official SoftKeyBoard implementation as a template for your keyboard:

//Cut some pieces of the code for clarity
case -102:
    LayoutInflater layoutInflater = (LayoutInflater)getBaseContext()
        .getSystemService(LAYOUT_INFLATER_SERVICE);
    View popupView = layoutInflater.inflate(R.layout.emoji_view, null);
    PopupWindow popupWindow = new PopupWindow(popupView, MATCH_PARENT, MATCH_PARENT);
    popupWindow.showAsDropDown(mInputView);

Use the view that you have inflated for your keyboard, in the offical SoftKeyBoard and the snippet above it is called mInputView.

Answer 2

you can refer this github link for complete code

EmojiIcon

Answer 3

hi i have done same things. I have made one custom keyboard in android.

EmoticonsPagerAdapter emojiAdapter;

/**
 * Defining all components of emoticons keyboard
 */
private void enablePopUpView() {

    final ViewPager pager = (ViewPager) popUpView
            .findViewById(R.id.emoticons_pager);
    pager.setOffscreenPageLimit(3);

    final ArrayList<EmojiItem> paths = EmojiUtil.getInstance(acitiviy)
            .getAllEmojis();
    final ArrayList<EmojiItem>[] groups = new ArrayList[5];
    for (EmojiItem emoji : paths) {
        if (groups[emoji.emojiGroup] == null) {
            groups[emoji.emojiGroup] = new ArrayList<EmojiItem>();
        }
        groups[emoji.emojiGroup].add(emoji);
    }
    final ArrayList<EmojiItem> history = new ArrayList<EmojiItem>();
    ArrayList<Integer> historyIds = SettingsUtil.getHistoryItems(acitiviy);
    for (Integer his : historyIds) {
        for (EmojiItem emoji : paths) {
            if (emoji.id == his) {
                history.add(emoji);
                break;
            }
        }
    }
    history.add(paths.get(0));

    final KeyClickListener onEmojiClick = new KeyClickListener() {

        @Override
        public void keyClickedIndex(EmojiItem index) {

            int cursorPosition = editMessage.getSelectionStart();
            editMessage.getText().insert(cursorPosition, index.emojiText);
            try {
                editMessage.getText().setSpan(
                        new ImageSpan(index.emojiDrawable), cursorPosition,
                        cursorPosition + 1,
                        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            } catch (Exception e) {
            }
            if (history.get(0) != index)
                history.add(0, index);
            SettingsUtil.setHistoryItems(acitiviy, history);
            emojiAdapter.notifyDataSetChanged();
            pager.setAdapter(emojiAdapter);
        }
    };

    ((ImageButton) popUpView.findViewById(R.id.emoji2))
            .setImageDrawable(groups[0].get(0).emojiDrawable);
    ((ImageButton) popUpView.findViewById(R.id.emoji3))
            .setImageDrawable(groups[1].get(0).emojiDrawable);
    ((ImageButton) popUpView.findViewById(R.id.emoji4))
            .setImageDrawable(groups[2].get(0).emojiDrawable);
    ((ImageButton) popUpView.findViewById(R.id.emoji5))
            .setImageDrawable(groups[3].get(0).emojiDrawable);
    ((ImageButton) popUpView.findViewById(R.id.emoji6))
            .setImageDrawable(groups[4].get(0).emojiDrawable);
    popUpView.findViewById(R.id.emoji1).setOnClickListener(
            new OnClickListener() {

                @Override
                public void onClick(View v) {
                    emojiAdapter.emojis = history;
                    emojiAdapter.notifyDataSetChanged();
                    pager.setAdapter(emojiAdapter);
                }
            });
    popUpView.findViewById(R.id.emoji2).setOnClickListener(
            new OnClickListener() {

                @Override
                public void onClick(View v) {
                    emojiAdapter.emojis = groups[0];
                    emojiAdapter.notifyDataSetChanged();
                    pager.setAdapter(emojiAdapter);
                }
            });
    popUpView.findViewById(R.id.emoji3).setOnClickListener(
            new OnClickListener() {

                @Override
                public void onClick(View v) {
                    emojiAdapter.emojis = groups[1];
                    emojiAdapter.notifyDataSetChanged();
                    pager.setAdapter(emojiAdapter);
                }
            });
    popUpView.findViewById(R.id.emoji4).setOnClickListener(
            new OnClickListener() {

                @Override
                public void onClick(View v) {
                    emojiAdapter.emojis = groups[2];
                    emojiAdapter.notifyDataSetChanged();
                    pager.setAdapter(emojiAdapter);
                }
            });
    popUpView.findViewById(R.id.emoji5).setOnClickListener(
            new OnClickListener() {

                @Override
                public void onClick(View v) {
                    emojiAdapter.emojis = groups[3];
                    emojiAdapter.notifyDataSetChanged();
                    pager.setAdapter(emojiAdapter);
                }
            });
    popUpView.findViewById(R.id.emoji6).setOnClickListener(
            new OnClickListener() {

                @Override
                public void onClick(View v) {
                    emojiAdapter.emojis = groups[4];
                    emojiAdapter.notifyDataSetChanged();
                    pager.setAdapter(emojiAdapter);
                }
            });

    emojiAdapter = new EmoticonsPagerAdapter(acitiviy, groups[0],
            onEmojiClick);
    pager.setAdapter(emojiAdapter);

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

    View backSpace = (View) popUpView.findViewById(R.id.imageBackspace);
    backSpace.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            KeyEvent event = new KeyEvent(0, 0, 0, KeyEvent.KEYCODE_DEL, 0,
                    0, 0, 0, KeyEvent.KEYCODE_ENDCALL);
            editMessage.dispatchKeyEvent(event);
        }
    });

    popupWindow.setOnDismissListener(new OnDismissListener() {

        @Override
        public void onDismiss() {
            emoticonsCover.setVisibility(LinearLayout.GONE);
        }
    });

    ViewPager pagerStickers = (ViewPager) popUpView
            .findViewById(R.id.stickers_pager);
    pagerStickers.setOffscreenPageLimit(3);

}

private void showKeyboardPopup(View root, boolean attaches) {
    if (!popupWindow.isShowing()) {
        popupWindow.setHeight((int) (keyboardHeight));

        if (isKeyBoardVisible) {
            imageEmoji.setImageResource(R.drawable.emoji_kbd);
            emoticonsCover.setVisibility(LinearLayout.GONE);

        } else {
            imageEmoji.setImageResource(R.drawable.ic_down);
            emoticonsCover.setVisibility(LinearLayout.VISIBLE);
        }
        try {
            popupWindow.showAtLocation(root, Gravity.BOTTOM, 0, 0);
        } catch (Exception e) {
        }
    } else {
        imageEmoji.setImageResource(R.drawable.emoji_btn_normal);
        popupWindow.dismiss();
        return;
    }

    imageAttaches.setBackgroundColor(attaches ? 0xFF808080 : 0x00000000);
    imageEmojis.setBackgroundColor(attaches ? 0x00000000 : 0xFF808080);
    imageStickers.setBackgroundColor(0x00000000);
    layoutEmojis.setVisibility(attaches ? View.GONE : View.VISIBLE);
    layoutStickers.setVisibility(View.GONE);

}

Please checkout for more details click here.

Thanks hope this will help you.It is bit old but you can try it.