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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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>

chevron_right


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.

newLayout

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

text_view_emoji.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

newClass

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



EmojiApplication.java

filter_none

edit
close

play_arrow

link
brightness_4
code

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());
    }
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

    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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
    }
}

chevron_right


Output: Run on Emulator


Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.