How to add smilies or emojis in EditText in Android

Please follow and like us:

smilies or emojis in edittext in android example

Learn how to set smilies or emojis in EditText in Android. Here I have put the simple demo of adding smilies or emojis via keyboard in EditText and see its  result. Let’s explore the simple example of adding smilies or emojis in EditText in Android…

How to add smilies or emojis in EditText in Android

 

Download: Smilies or Emojis in EditText in Android

Add following things for Emojis library in your blank project
First Download the source code and add all drawable files. then also add “emojis” folder’s java files

Create the keyboard view for emojis

emojicons.xml file

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:background="@drawable/keyboard_background_holo"
                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="#888888"/>
        <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="#888888"/>
        <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="#888888"/>
        <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="#888888"/>
        <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="#888888"/>
        <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="#888888"/>
        <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="#8f8f8f"/>
</RelativeLayout>

emojicon_grid.xml file

<?xml version="1.0" encoding="utf-8"?>

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Emoji_GridView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:cacheColorHint="@android:color/transparent"
    android:columnWidth="40dip"
    android:horizontalSpacing="0dip"
    android:numColumns="auto_fit"
    android:scrollbars="vertical"
    android:verticalSpacing="0dip" />

emojicon_item.xml file

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:emojicon="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    <com.nkdroid.android.emojis.keyboard.emoji.EmojiconTextView
            android:layout_gravity="center"
            android:id="@+id/emojicon_icon"
            android:layout_width="36dip"
            android:layout_height="36dip"
            emojicon:emojiconSize="30dip"
            android:focusable="false" 
        	android:focusableInTouchMode="false"
            android:gravity="center"/>
</FrameLayout>

activity_main.xml contains EditText for input emojis from keyboard

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:emojicon="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ImageView 
        android:id="@+id/emoji_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:src="@drawable/smiley"
        />

	<com.nkdroid.android.emojis.keyboard.emoji.EmojiconEditText
        android:id="@+id/emojicon_edit_text"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        emojicon:emojiconSize="28sp" />

        <ImageView
            android:id="@+id/submit_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:src="@drawable/ic_action_send_now"
            />

    </LinearLayout>

    <TextView
        android:id="@+id/txtEmojis"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

MainActivity.java file contains logic for setting emojis in EditText and show it in screen.

package com.nkdroid.android.emojis.keyboard;


import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.inputmethod.InputMethodManager;
import android.widget.ImageView;
import android.widget.PopupWindow.OnDismissListener;
import android.widget.TextView;
import android.widget.Toast;

import com.nkdroid.android.emojis.keyboard.emoji.Emojicon;
import com.nkdroid.android.emojis.keyboard.emoji.EmojiconEditText;
import com.nkdroid.android.emojis.keyboard.emoji.EmojiconGridView;
import com.nkdroid.android.emojis.keyboard.emoji.EmojiconsPopup;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final EmojiconEditText emojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text);
        final View rootView = findViewById(R.id.root_view);
        final ImageView emojiButton = (ImageView) findViewById(R.id.emoji_btn);
        final ImageView submitButton = (ImageView) findViewById(R.id.submit_btn);
        final TextView txtEmojis = (TextView) findViewById(R.id.txtEmojis);

        // Give the topmost view of your activity layout hierarchy. This will be used to measure soft keyboard height
        final EmojiconsPopup popup = new EmojiconsPopup(rootView, this);

        //Will automatically set size according to the soft keyboard size
        popup.setSizeForSoftKeyboard();

        //If the emoji popup is dismissed, change emojiButton to smiley icon
        popup.setOnDismissListener(new OnDismissListener() {

            @Override
            public void onDismiss() {
                changeEmojiKeyboardIcon(emojiButton, R.drawable.smiley);
            }
        });

        //If the text keyboard closes, also dismiss the emoji popup
        popup.setOnSoftKeyboardOpenCloseListener(new EmojiconsPopup.OnSoftKeyboardOpenCloseListener() {

            @Override
            public void onKeyboardOpen(int keyBoardHeight) {

            }

            @Override
            public void onKeyboardClose() {
                if (popup.isShowing())
                    popup.dismiss();
            }
        });

        //On emoji clicked, add it to edittext
        popup.setOnEmojiconClickedListener(new EmojiconGridView.OnEmojiconClickedListener() {

            @Override
            public void onEmojiconClicked(Emojicon emojicon) {
                if (emojiconEditText == null || emojicon == null) {
                    return;
                }

                int start = emojiconEditText.getSelectionStart();
                int end = emojiconEditText.getSelectionEnd();
                if (start < 0) {
                    emojiconEditText.append(emojicon.getEmoji());
                } else {
                    emojiconEditText.getText().replace(Math.min(start, end),
                            Math.max(start, end), emojicon.getEmoji(), 0,
                            emojicon.getEmoji().length());
                }
            }
        });

        //On backspace clicked, emulate the KEYCODE_DEL key event
        popup.setOnEmojiconBackspaceClickedListener(new EmojiconsPopup.OnEmojiconBackspaceClickedListener() {

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

        // To toggle between text keyboard and emoji keyboard keyboard(Popup)
        emojiButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {

                //If popup is not showing => emoji keyboard is not visible, we need to show it
                if (!popup.isShowing()) {

                    //If keyboard is visible, simply show the emoji popup
                    if (popup.isKeyBoardOpen()) {
                        popup.showAtBottom();
                        changeEmojiKeyboardIcon(emojiButton, R.drawable.ic_action_keyboard);
                    }

                    //else, open the text keyboard first and immediately after that show the emoji popup
                    else {
                        emojiconEditText.setFocusableInTouchMode(true);
                        emojiconEditText.requestFocus();
                        popup.showAtBottomPending();
                        final InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                        inputMethodManager.showSoftInput(emojiconEditText, InputMethodManager.SHOW_IMPLICIT);
                        changeEmojiKeyboardIcon(emojiButton, R.drawable.ic_action_keyboard);
                    }
                }

                //If popup is showing, simply dismiss it to show the undelying text keyboard
                else {
                    popup.dismiss();
                }
            }
        });

        //On submit, add the edittext text to listview and clear the edittext
        submitButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                String newText = emojiconEditText.getText().toString();
                txtEmojis.setText(newText);
                Toast.makeText(MainActivity.this, newText + "", Toast.LENGTH_SHORT).show();
                emojiconEditText.getText().clear();


            }
        });
    }

    private void changeEmojiKeyboardIcon(ImageView iconToBeChanged, int drawableResourceId) {
        iconToBeChanged.setImageResource(drawableResourceId);
    }

}

 

Download: Smilies or Emojis in EditText in Android

How To Set Imojies or smilies in EditText in Android Example

Hope you like our simple solution for setting Smilies or Emojis in EditText in Android Example.

 

 

 

nirav kalola