How to integrate Emoticons using emojicon library in Android

Udemy Generic 728x90

Objective

In this tutorial, we will learn how to integrate Emoticons using emojicon library in Android application through a simple example.

 



 

AndroidEmoticons

Emoticons are a combination of keyboard characters and symbols which represents a facial expression such as a smile or frown. In this tutorial, we will learn how to integrate Emoticons using the emojicon library in Android application.

 

Step 2

Create a New Project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

 

Step 3

Add Supporting Library

To integrate Emoticons, we need to add Emojicons library in project. So, open your build.gradle file and add emojicons library as a dependency.

dependencies {
  ....
    compile 'com.rockerhieu.emojicon:library:1.3.3'
  ....
}

 

Step 4

Create Layout

We will add Emoticons in FrameLayout. If user click on the Emoticons, it displays icons in the EditText and also display input of the EditText on TextView. Hence, we need to use EmojiconEditText and EmojiconTextView element in activity.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:emojicon="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="app.androidsmiles.MainActivity">

    <com.rockerhieu.emojicon.EmojiconTextView
        android:id="@+id/txtEmojicon"
        emojicon:emojiconAlignment="baseline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.rockerhieu.emojicon.EmojiconEditText
        android:id="@+id/editEmojicon"
        android:hint="Type emoji here"
        emojicon:emojiconSize="28sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtEmojicon"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <FrameLayout
        android:id="@+id/emojicons"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/editEmojicon"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="38dp" />

</RelativeLayout>

 

Step 5

Initialize EmojiconEditText And EmojiconTextView

To use properties of EmojiconEditText and EmojiconTextVew, we need to initialize EmojiconEditText and EmojiconTextVew in onCreate() method.

public class MainActivity extends AppCompatActivity {

    EmojiconEditText mEditEmojicon;
    EmojiconTextView mTxtEmojicon;

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

        // initialize EmojicobEditText and EmojiconTextView.
        mEditEmojicon = (EmojiconEditText) findViewById(R.id.editEmojicon);
        mTxtEmojicon = (EmojiconTextView) findViewById(R.id.txtEmojicon);
    }
}

 

Step 6

Implement Emojicons Click Listener and Emojicons Back Space Click Listener

We will implement click listener and Back Space Click Listener of Emojicons in MainActivity.java file to add and remove icons in the EditText. These listeners provide onEmojiconClicked(), onEmojiconBackspaceClicked() method to handle the Emoticons.

public class MainActivity extends AppCompatActivity implements EmojiconGridFragment.OnEmojiconClickedListener,
        EmojiconsFragment.OnEmojiconBackspaceClickedListener {

    EmojiconEditText mEditEmojicon;
    EmojiconTextView mTxtEmojicon;

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

        // initialize EmojicobEditText and EmojiconTextView.
        mEditEmojicon = (EmojiconEditText) findViewById(R.id.editEmojicon);
        mTxtEmojicon = (EmojiconTextView) findViewById(R.id.txtEmojicon);
    }

    /**
     * It called, when click on icon of Emoticons.
     * @param emojicon
     */
    @Override
    public void onEmojiconClicked(Emojicon emojicon) {

        EmojiconsFragment.input(mEditEmojicon, emojicon);
    }

    /**
     * It called, when click on backspace button of Emoticons.
     * @param view
     */
    @Override
    public void onEmojiconBackspaceClicked(View view) {

        EmojiconsFragment.backspace(mEditEmojicon);
    }
}

 

Step 7

Add Text Change Listener

We need to listen to text changes from EditText. We will call addTextChangedListener() method and pass the TextWatcher object. TextWatcher object requires to add beforeTextChanged(), afterTextChanged() and onTextChanged() to listen to text changes from EditText.

mEditEmojicon.addTextChangedListener(new TextWatcher() {

            /**
             * This notify that, within s,
             * the count characters beginning at start are about to be replaced by new text with length
             * @param s
             * @param start
             * @param count
             * @param after
             */
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            /**
             * This notify that, somewhere within s, the text has been changed.
             * @param s
             */
            @Override
            public void afterTextChanged(Editable s) {}

            /**
             * This notify that, within s, the count characters beginning at start have just
             * replaced old text that had length
             * @param s
             * @param start
             * @param before
             * @param count
             */
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                // Set text on TextView
                mTxtEmojicon.setText(s);
            }
        });

 

Step 8

Set Emoticons in Fragment

Now, we need to set Emoticons in the fragment by calling getSupportFragmentManager() method. This method returns the FragmentManager for interacting with EmojiconsFragment associated with this activity.

/**
 * Set the Emoticons in Fragment.
 * @param useSystemDefault
 */
 private void setEmojiconFragment(boolean useSystemDefault) {

     getSupportFragmentManager()
             .beginTransaction()
             .replace(R.id.emojicons, EmojiconsFragment.newInstance(useSystemDefault))
             .commit();
 }

 

Step 9

Final code

Here is the final code:

public class MainActivity extends AppCompatActivity implements EmojiconGridFragment.OnEmojiconClickedListener,
        EmojiconsFragment.OnEmojiconBackspaceClickedListener {

    EmojiconEditText mEditEmojicon;
    EmojiconTextView mTxtEmojicon;

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

        // initialize EmojicobEditText and EmojiconTextView.
        mEditEmojicon = (EmojiconEditText) findViewById(R.id.editEmojicon);
        mTxtEmojicon = (EmojiconTextView) findViewById(R.id.txtEmojicon);

        mEditEmojicon.addTextChangedListener(new TextWatcher() {

            /**
             * This notify that, within s,
             * the count characters beginning at start are about to be replaced by new text with length
             * @param s
             * @param start
             * @param count
             * @param after
             */
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            /**
             * This notify that, somewhere within s, the text has been changed.
             * @param s
             */
            @Override
            public void afterTextChanged(Editable s) {}

            /**
             * This notify that, within s, the count characters beginning at start have just
             * replaced old text that had length
             * @param s
             * @param start
             * @param before
             * @param count
             */
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

                mTxtEmojicon.setText(s);
            }
        });

        setEmojiconFragment(false);

    }

    /**
     * Set the Emoticons in Fragment.
     * @param useSystemDefault
     */
    private void setEmojiconFragment(boolean useSystemDefault) {

        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.emojicons, EmojiconsFragment.newInstance(useSystemDefault))
                .commit();
    }

    /**
     * It called, when click on icon of Emoticons.
     * @param emojicon
     */
    @Override
    public void onEmojiconClicked(Emojicon emojicon) {

        EmojiconsFragment.input(mEditEmojicon, emojicon);
    }

    /**
     * It called, when backspace button of Emoticons pressed
     * @param view
     */
    @Override
    public void onEmojiconBackspaceClicked(View view) {

        EmojiconsFragment.backspace(mEditEmojicon);
    }
}

AndroidEmoticons
 



Udemy Generic 728x90

Spread the word. Share this post!

  • vibhore aggarwal

    Thank you ..you are the best ..great ! explanation !! :D

  • Ali Sadeq

    Is it possible to modify the emojis, let’s say to custom made ones?

  • masoud

    how to impelement this in custom keyboard

  • masoud

    getSupportFragmentManager() does not work in android inputmethod service keyboard!! how to fix it?