¿Cómo integrar emojis en una aplicación de Android?

Los emojis ciertamente hacen que la aplicación sea más interesante y divertida para interactuar. En este artículo, aprendamos cómo agregar emojis en nuestra propia aplicación de Android creando una aplicación simple que parece una aplicación de mensajería.

¿Por qué necesitamos emojis?

• Hace que la aplicación se vea más fácil de usar y divertida.
• Si las características de la aplicación se utilizan para generar comunicación, los emojis ciertamente ayudan a expresar los sentimientos de un usuario.
• Se puede usar para pedir comentarios sobre una aplicación al usuario.

Acercarse

Paso 1: crea un nuevo proyecto de Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la siguiente dependencia a build.gradle(:app)

Para usar emojis en la aplicación, agregue su dependencia al archivo build.gradle(:app) . Agregue cualquiera de las tres dependencias: 

implementación ‘com.vanniktech:emoji-google:0.6.0’

implementación ‘com.vanniktech:emoji-ios:0.6.0’

implementación ‘com.vanniktech:emoji-twitter:0.6.0’

Cada dependencia significa el conjunto de emoji que estamos importando. Es decir, ya sea desde ios , o Google , o Twitter . 

Paso 3: trabajar con el archivo activity_main.xml 

En este ejemplo, haga que la aplicación parezca una aplicación de chat. Para ello, utilice dos botones . Uno para agregar emojis y otro para enviar el mensaje. Agregue también un EditText donde el usuario escribirá el mensaje. Así es como se ve el archivo 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>

Paso 4: Cree un archivo de diseño llamado text_view_emoji.xml

Cree un diseño para definir cómo debe verse el emoji. Su objetivo principal es definir el tamaño del emoji. También mostrará los mensajes que enviamos. Cree un nuevo diseño haciendo clic en: aplicación -> res -> diseño (clic derecho) -> Nuevo -> Archivo de recursos de diseño.

Nombre esto como text_view_emoji . Así es como se ve 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"/>

Paso 5: crea una clase llamada EmojiApplication

Según el conjunto de emoji que el usuario quiera tener, configure la provisión correspondiente aquí. Al configurar EmojiManager aquí, asegúrese de que el usuario pueda usarlos en cualquier parte de la aplicación. Para crear una nueva clase, haga clic en: Archivo -> Nuevo -> Clase Java .

Nombre esto como EmojiApplication . Así es como se ve 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());
    }
}

Nota: No olvide agregar esta nueva clase en el archivo AndroidManifest.xml . Así es como se ve AndroidManifest.xml después de agregar:

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

Paso 6: trabajar con el archivo MainActivity.java

Aquí, escriba una función para inflar EmojiTextView . El LayoutInfalter se usa para convertir una vista o un grupo de vistas escrito en XML en una vista en Java que se puede usar en el código. Además, establezca la función aquí. Después de todos estos cambios, así es como luce 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;
    }
}

Salida: ejecutar en el emulador