An Introduction to the Makemoji Keyboard

The Makemoji in-app keyboard is the core of our SDK. It is a dynamically controlled emoji keyboard with an tightly integrated text input that is backed by our CMS and Dashboard. You can create your own categories, upload emoji/gifs and track their usage along side unicode emoji.

The output of our text input is a simple HTML message, along with a plaintext version and what we called 'substitued' version, which uses a simple template system. This output can then be saved on your device, in your backend or wherever you choose.


Setup

Let's say you have a chat area of your app and you would like to use our keyboard there to let users share unique emoji in conversations. First you will want to add the component to your activity content layout. Check out styles.xml for documentation on how to theme this view.

<com.makemoji.mojilib.MojiInputLayout
       android:id="@+id/mojiInput"
       android:layout_height="wrap_content"
       android:layout_width="match_parent"
       />

In your activity during onCreate, find the view you added in your layout, and have it handle the back button when it is expanded.

    MojiInputLayout mojiInputLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mojiInputLayout = (MojiInputLayout)findViewById(R.id.mojiInput);
    }

    @Override
    public void onBackPressed(){
        if (mojiInputLayout.canHandleBack()){
            mojiInputLayout.onBackPressed();
            return;
        }
        super.onBackPressed();
    }

    @Override
        public void onMultiWindowModeChanged(boolean isInMultiWindowMode){
            super.onMultiWindowModeChanged(isInMultiWindowMode);
            mojiInputLayout.onMultiWindowModeChanged(isInMultiWindowMode);
        }


Detached Input

To hide the built in Edit Text and use your own that is somewhere else on the screen as the input target, call attatchMojiEditText(MojiEditText outsideMojiEdit) on the MojiInputLayout. Call detachMojiEditText() to restore the default behavior. Note that attatchMojiEditText requires an EditText that is an instance of MojiEditText to ensure keyboard compatibility and correct copy paste functionality.

    mojiInputLayout.attatchMojiEditText(outsideMojiEdit);
    outsideMojiEdit.setVisibility(View.VISIBLE);
    outsideMojiEdit.requestFocus();
    //...
    String html = Moji.toHtml(outsideMojiEdit.getText());//to get input as html
    mojiInputLayout.manualSaveInputToRecentsAndBackend();//to send message to analytics console and emojis to user's recent list


Sending a Message

The SendLayoutClickListener will be called when a user clicks on the send button in the text input. This should be set in onCreate.

    mojiInputLayout.setSendLayoutClickListener(new MojiInputLayout.SendClickListener() {
        @Override
        public boolean onClick(String html, Spanned spanned) {
            // send html to backend, display message
            return true;//true to clear the field, false to keep it
        }
    });

If you need to convert an html message to a platform that does not support Makemoji, you can use the plain text converter to produce a message with a human-friendly reading that converts emojis into the form [flashtagname.base62emojiid hypermojiurl]. For example, "Aliens are real [alien.gG iwanttobelieve.com]." It is recommended to store the html of the message as the canonical version, but you can also convert from plain text back to html if needed.

    mojiInputLayout.setSendLayoutClickListener(new MojiInputLayout.SendClickListener() {
        @Override
        public boolean onClick(String html, Spanned spanned) {
                String plainText = Moji.htmlToPlainText(html);
                String htmlFromPlain = Moji.plainTextToHtml(plainText);
                }});


Camera Button

The CameraButtonClickListener is called when a user taps on the camera button in the text input

    mojiInputLayout.setCameraButtonClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // handle camera click
        }
    });


Hypermoji - Emoji with a URL

To handle the display of a webpage when tapping on a Hypermoji ( an emoji with a URL link), use the HyperMojiClickListener callback.

        mojiInputLayout.setHyperMojiClickListener(new HyperMojiListener() {
            @Override
            public void onClick(String url) {
                // handle opening URL
            }
        });


Displaying Messages

There are two key methods to use when displaying messages that are necessary for animation and Hypermoji click behavior.

Moji.setText(String html,TextView tv, boolean simple) parses the HTML and places it into a TextView, beginning any Hypermoji/gif animation of the new text and ending animation of any existing text. The "simple" argument ignores any other attributes like size or font. It should usually be set to true.

Set a global HyperMojiClickListener using Moji.setDefaultHyperMojiListener(...), or one on each TextView you use, like so

    textView.setTag(R.id._makemoji_hypermoji_listener_tag_id, new HyperMojiListener() {
        @Override
        public void onClick(String url) {
            Toast.makeText(getContext(),"hypermoji clicked from adapter url " + url,Toast.LENGTH_SHORT).show();
        }
    });

You can also use the parseHtml method to cache the results of parsing html for ListView performance, like in MAdapter

Control Locked Categories

If you choose to lock some of your categories, you can control which are unlocked for the device by using the MojiUnlock class. To listen for when a user clicks a locked category in the MojiInpuLayout, set a listener.

        mojiInputLayout.setLockedCategoryClicked(new MojiUnlock.ILockedCategoryClicked() {
            @Override
            public void onClick(String name) {
                MojiUnlock.unlockCategory(name);
                mojiInputLayout.refreshCategories();
            }
        });

To customize the image overlaid onto a locked category icon, add mm_locked_foreground.xml to your drawable folder. It can look something like this

    <?xml version="1.0" encoding="utf-8"?>
    <bitmap  xmlns:android="http://schemas.android.com/apk/res/android"  android:src="@drawable/mm_placeholder"  android:alpha=".8" />