How to Integrate Emojis in an Android App?

Emojis certainly make the app more interesting and fun to interact with. In this article, let’s learn how to add Emojis in our own Android App by creating a simple application that looks like a messaging app.

Why do we need Emojis?

• It makes the app look more user-friendly and fun.
• If the app features used for building communication, emojis certainly help to express a user’s feelings.
• It may be used to ask feedback of an app from the user.

Approach

Step 1: Create a new Android Studio project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add the following dependency to build.gradle(:app)

In order to use emojis in the app, add its dependency to build.gradle(:app) file. Add any one of the three dependencies: 

implementation ‘com.vanniktech:emoji-google:0.6.0’

implementation ‘com.vanniktech:emoji-ios:0.6.0’

implementation ‘com.vanniktech:emoji-twitter:0.6.0’

Each dependency signifies the emoji set we are importing. That is, either from ios, or Google, or Twitter. 

Step 3: Working with activity_main.xml file 

In this example, make the app look like a chat app. For this, use two Buttons. One to add emojis and one to send the message. Add also an EditText where the user will type the message. This is how the activity_main.xml looks like:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#43a047"
    android:padding="8dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/llTextViews"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@id/etEmoji"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
    </LinearLayout>

    <com.vanniktech.emoji.EmojiEditText
        android:id="@+id/etEmoji"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Say something to GeeksForGeeks..."
        app:emojiSize="30sp"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/btnEmojis"
        app:layout_constraintStart_toStartOf="parent"/>

    <Button
        android:id="@+id/btnEmojis"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Emojis"
        app:layout_constraintEnd_toStartOf="@id/btnSend"
        app:layout_constraintTop_toTopOf="@id/etEmoji"
        app:layout_constraintBottom_toBottomOf="@id/etEmoji"/>

    <Button
        android:id="@+id/btnSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/etEmoji"
        app:layout_constraintBottom_toBottomOf="@id/etEmoji"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Create a layout file called text_view_emoji.xml

Create a layout to define how the emoji should look like. Its main purpose is to define the size of the emoji. It will also display the messages which we send. Create a new layout by clicking: app ->res -> layout(right-click) -> New -> Layout Resource File.

Name this as text_view_emoji. This is how the text_view_emoji.xml looks like:

text_view_emoji.xml

<?xml version="1.0" encoding="utf-8"?>
<com.vanniktech.emoji.EmojiTextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_marginBottom="16dp"
    app:emojiSize="30sp"
    android:textSize="30sp"
    android:textColor="@android:color/white"/>

Step 5: Create a class called EmojiApplication

Depending on which emoji set the user wants to have, set up the corresponding providing here. By setting up the EmojiManager here, make sure that the user can use them anywhere in the app. To create a new class, click on: File -> New -> Java Class.

Name this as EmojiApplication. This is how the EmojiApplication.java looks like:

EmojiApplication.java

import android.app.Application;

import com.vanniktech.emoji.EmojiManager;
import com.vanniktech.emoji.google.GoogleEmojiProvider;

public class EmojiApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        EmojiManager.install(new GoogleEmojiProvider());
    }
}

Note: Do not forget to add this new class in the AndroidManifest.xml file. This is how the AndroidManifest.xml looks like after adding:

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.emojigfg">

    <application
        android:name=".EmojiApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 6: Working with the MainActivity.java file

Here, write a function to inflate the EmojiTextView. The LayoutInfalter is used to convert a View or a ViewGroup written in XML to a View in Java which can use in the code. Also, set the onCreate() function here. After all these changes, this is how the MainActivity.java looks like:

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import com.vanniktech.emoji.EmojiPopup;
import com.vanniktech.emoji.EmojiTextView;

public class MainActivity extends AppCompatActivity {
    EditText etEmoji;
    LinearLayout llTextViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        etEmoji=findViewById(R.id.etEmoji);
        llTextViews=findViewById(R.id.llTextViews);

        final EmojiPopup popup = EmojiPopup.Builder
                .fromRootView(findViewById(R.id.rootView)).build(etEmoji);

        Button btnEmojis=findViewById(R.id.btnEmojis);
        btnEmojis.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                popup.toggle();
            }
        });

        Button btnSend=findViewById(R.id.btnSend);
        btnSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                llTextViews.addView(getEmojiTextView());
                etEmoji.getText().clear();
            }
        });
    }

    private EmojiTextView getEmojiTextView() {
        EmojiTextView tvEmoji = (EmojiTextView) LayoutInflater
                .from(getApplicationContext())
                .inflate(R.layout.text_view_emoji, llTextViews,false);
        tvEmoji.setText(etEmoji.getText().toString());
        return tvEmoji;
    }
}

Output: Run on Emulator