Как интегрировать эмодзи в приложение для Android?

Опубликовано: 15 Декабря, 2021

Смайлы, безусловно, делают приложение более интересным и увлекательным для взаимодействия. В этой статье давайте узнаем, как добавить эмодзи в наше собственное приложение для Android, создав простое приложение, которое выглядит как приложение для обмена сообщениями.

Зачем нам эмодзи?

Это делает приложение более удобным и увлекательным.
Если функции приложения используются для построения коммуникации, смайлы, безусловно, помогают выразить чувства пользователя.
Его можно использовать для запроса отзыва о приложении у пользователя.

Подход

Шаг 1. Создайте новый проект Android Studio

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio». Обратите внимание, что выберите Java в качестве языка программирования.

Шаг 2. Добавьте следующую зависимость в build.gradle (: app)

Чтобы использовать смайлики в приложении, добавьте его зависимость в файл build.gradle (: app). Добавьте любую из трех зависимостей:

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

Каждая зависимость обозначает набор эмодзи, который мы импортируем. То есть либо из ios , либо из Google , либо из Twitter .

Шаг 3. Работа с файлом activity_main.xml

В этом примере сделайте приложение похожим на приложение для чата. Для этого используйте две кнопки. Один для добавления смайлов и один для отправки сообщения. Добавьте также EditText, в который пользователь будет вводить сообщение. Вот как выглядит activity_main.xml:

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>

Шаг 4. Создайте файл макета с именем text_view_emoji.xml

Создайте макет, чтобы определить, как должны выглядеть смайлы. Его основная цель - определить размер смайлика. Он также будет отображать сообщения, которые мы отправляем. Создайте новый макет, щелкнув: app -> res -> layout (щелкните правой кнопкой мыши) -> New -> Layout Resource File.

Назовите это как text_view_emoji . Вот как выглядит text_view_emoji.xml:

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" /> 

Шаг 5. Создайте класс под названием EmojiApplication

В зависимости от того, какой набор смайлов хочет иметь пользователь, настройте здесь соответствующее предоставление. Настроив EmojiManager здесь, убедитесь, что пользователь может использовать их в любом месте приложения. Чтобы создать новый класс, щелкните: Файл -> Новый -> Класс Java .

Назовите это EmojiApplication . Вот как выглядит EmojiApplication.java:

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

Примечание. Не забудьте добавить этот новый класс в файл AndroidManifest.xml. Вот как выглядит AndroidManifest.xml после добавления:

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 > 

Шаг 6: Работа с файлом MainActivity.java

Здесь напишите функцию для расширения EmojiTextView . LayoutInfalter используется для преобразования View или ViewGroup написано в XML для представления на Java, которое можно использовать в коде. Также установите здесь функцию onCreate (). После всех этих изменений MainActivity.java выглядит так:

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 Java Как сделать