Emoji Only Text Entry on Android

Android supports a number of different text input types. If you create a text field in which someone is intended to enter a phone number, address, email address, you can set the text input type on the text field to have the keyboard automatically restrict what characters it presents to the user.

<EditText android:inputType="phone" />

I was working on something for which I needed to ensure that the user selected an emoji. Unfortunately, there’s not an input type to restrict a user to emoji. How do I ensure taht the user can only enter emoji? I could implement my own keyboard that only displays emoji, but for the time being I do not what to implement such a thing for the application that I’m building. There are a number of different possible solutions for this. The one I chose was to make a custom text input field and an InputFilter for it.

Making a custom field may sound like a lot of work, but it isn’t. The custom field itself is primary declarations with only a single line of initialization code that applies the filter. The real work is done in the filter itself. For a custom InputFilter, make a class that derives from InputFilter. There is a single method on the class to define named filter.

The filter method receives the text sequence that is going to be assigned to the text field. If we want to allow the field value to be assigned to the text field, the function can return null. If there is a character of which I don’t approve, I’ll return an empty string which will clear the text field. If I wanted to replace a character, I could return a string in which I had performed the replacement. The value returned by this function will be applied to the text field.

In my implementation for this function, I step through each character in the string (passed as a CharSequence, a String is a type of CharSequence) and check the class of each character. If the character is not of acceptable class, then I return an empty string to clear the text field. For your purposes, you may want to strip characters out and return the resulting string.

The function Character::getType will return the character type or class. To ensure that the character is an emoji, I check to see if the type value equals to Character::SURROGATE or Character::OTHER_SYMBOL.

private class EmojiFilter : InputFilter {

    override fun filter(
        source: CharSequence?,
        start: Int,
        end: Int,
        dest: Spanned?,
        dstart: Int,
        dend: Int
    ): CharSequence? {
        for( i in start .. end-1) {
            var type = Character.getType(source!!.get(i)).toByte()
            if(type != Character.SURROGATE && type != Character.OTHER_SYMBOL) {
                return "xx";
            }
        }
        return null;
    }
}

Now that the filter class is defined, I can create my custom text field. It has next to no code within it.

public class FilteredEditText : androidx.appcompat.widget.AppCompatEditText {

    constructor(context:Context, attrs: AttributeSet?, defStyle:Int):super(context,attrs,defStyle)
    {
    }

    constructor(context:Context, attrs: AttributeSet?):super(context,attrs)
    {
    }

    constructor(context:Context) : super(context) {
    }

    init{
        filters = arrayOf(EmojiFilter())
    }

}

Great, we have out custom class! Now how do we use it in a layout? We can use it in the layout by declaring a view with the fully qualified name.

    <net.j2i.emojidiary.FilteredEditText
        android:text="😀"
/>

And that’s it. While Android doesn’t give the option of showing only the Emoji characters, with this in place I’m assured that a user will only be able to enter Emoji characters.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.