How to Integrate Emojis in an Android App?

08 Sep, 2020
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.
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;    }}
android
Android
How To
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.