Emoji View

Features

• There are 845 emoji characters.
• EmojiView: used for selecting and entering emoji characters in specified one category.
• EmojiViewEx: used for selecting and entering emoji characters in all category.
• EmojiEditView & EmojiTextView: used for editing and showing texts with emoji respectively. (Native EditView and TextView could also be used for showing emoji characters.)
• Emoji characters are encoded in corresponding Unicode.
• A lighter library contains only people category.

EmojiView

• The process of resources loading is lazy.
• The number of rows and columns could be customized.
• Navigator dots on the bottom and the color could be customized.

EmojiViewEx

• Customize border color and the height of category tab.

Instruction

Import library in Eclipse

Eclipse is supported before release 1.3.

Import libray using Gradle

From jCenter

dependencies {
    compile 'com.zhaohg.emojiview:emoji-view:1.0.0'
}

Local build

dependencies {
    compile project(':emoji-view')
}

Layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    <!-- Use the following line for Eclipse -->
    xmlns:emoji="http://schemas.android.com/apk/res/com.zhaohg.emojiviewdemo"
    <!-- Use the following line for Gradle -->
    xmlns:emoji="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="fill">

    <zhaohg.emojiview.EmojiEditText
        android:id="@+id/emojiEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >
        <requestFocus />
    </zhaohg.emojiview.EmojiEditText>
    
    <zhaohg.emojiview.EmojiViewEx
        android:id="@+id/emojiView"
        android:layout_width="match_parent"
        android:layout_height="190dp"
        android:background="#EEEEEE"
        emoji:indicatorDotsColor="#222222"
        emoji:categoryHeight="40dp"/>

</LinearLayout>

Set EditText

EditText editText = (EditText) this.findViewById(R.id.emojiEditText);
EmojiView emojiView = (EmojiViewEx) this.findViewById(R.id.emojiView);
emojiView.setEditText(editText);

Use native EditText and TextView

For EditText overload the onTextChanged method:

@Override
protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
    this.setupEmoji(start, lengthAfter);
}

private void setupEmoji(int start, int length) {
	EmojiSetup.setupEmoji(this.getContext(), this.getText(), (int)this.getTextSize(), start, length);
}

For TextView overload the setText method:

@Override
public void setText(CharSequence text, BufferType type) {
    SpannableStringBuilder builder = new SpannableStringBuilder(text);
    EmojiSetup.setupEmoji(this.getContext(), builder, (int) this.getTextSize());
	super.setText(builder, type);
}

Acknowledgements

• http://apps.timwhitlock.info/emoji/tables/unicode
• http://www.iemoji.com/
• http://www.emoji-cheat-sheet.com/