Cómo agregar la opción de emoji en mi aplicación de chat de Android

1. Integración simple

A continuación se muestra la sintaxis de una integración simple para Emojis Keyboard. El constructor EmojiIconActions acepta cuatro parámetros, Context , RootView , EmojiconEditText e ImageView . Por lo general, pasar el diseño principal como RootView es la mejor opción para mostrar el teclado Emojis sobre todas las vistas. EmojiconEditText es un EditText con más atributos personalizados para permitir la representación de emojis. Y el último parámetro que utilizará ImageView para cambiar entre el teclado normal y el teclado emojis.

Para mostrar emojis en TextView usaremos EmojiconTextView, que también es TextView con más atributos personalizados para habilitar la representación de emojis

• ¿Cuáles son las principales aplicaciones de VoIP en Android (que funcionan a través de 3G y wifi)?
• ¿Hay ejemplos de aplicaciones móviles-sociales muy exitosas dirigidas a un público principalmente masculino?
• ¿Cuál sería mejor para mi sitio web de Magento, una aplicación nativa, una aplicación híbrida o HTML 5?
• ¿Hay alguna aplicación en Play Store para grabar nuestra huella digital en nuestro teléfono para que podamos verla en la galería utilizando el sensor de huellas digitales de una Nota 4?
• ¿Cuál es el mejor corrector de plagio, tanto gratuito como de pago?

EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText,

emojiImageView);

emojIcon.ShowEmojIcon();

Si desea usarlo en diseño xml, usaremos EmojiconEditText en lugar del EditText normal.

<hani.momanii.supernova_emoji_library.Helper.EmojiconEditText

android:id="@+id/emojicon_edit_text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

emojicon:emojiconSize="28sp" />

Y EmojiconTextView en lugar de TextView

<hani.momanii.supernova_emoji_library.Helper.EmojiconTextView

android:id="@+id/emojicon_text_view"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

emojicon:emojiconSize="28sp"/>

2. Cambie el icono de alternar predeterminado

Para cambiar entre el teclado normal y el teclado de emojis, puede llamar al método setIconsIds () que toma dos parámetros, ID de icono de teclado e ID de icono de smiley .

emojIcon.setIconsIds(R.drawable.ic_action_keyboard,R.drawable.smiley);

3. Uso de Emojis predeterminados del dispositivo

SuperNove-Emoji le permite usar emojis de dispositivo de una manera simple, necesita establecer el valor booleano de los métodos setUseSystemEmoji () y setUseSystemDefault () como TRUE en cada EmojiconTextView y EmojiconEditText que usa para mostrar los emojis.

emojIcon.setUseSystemEmoji(true);

textView.setUseSystemDefault(true);

emojiconEditText.setUseSystemDefault(true);

Atributo Xml:

emojicon:emojiconUseSystemDefault="true"

4. Cambiar el tamaño de los emojis

Para cambiar el tamaño de los Emojis, debe cambiar el tamaño del texto configurando el valor del método setEmojiconSize () .

textView.setEmojiconSize(30);

Código XML

emojicon:emojiconSize="28sp"

5. Detectar cuando el teclado se abrió o cerró

SuperNova-Emoji le permite detectar cuándo el usuario abre el teclado o lo cierra para realizar algunas acciones si es necesario, como mostrar algunas vistas cuando el teclado se abre y ocultarlo cuando se cierra el teclado. Use el siguiente bloque de código para lograr esto.

emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {

@Override

public void onKeyboardOpen() {

Log.i("Keyboard","open");

}

@Override

public void onKeyboardClose() {

Log.i("Keyboard","close");

}

});

6. Cambiar los colores del teclado Emoji para que coincida con el tema de su aplicación

Puede configurar tres colores para el teclado de emojis agregando tres parámetros al constructor en el que se presionan el color de los iconos de pestañas, el color de las pestañas y el color de fondo. Utilizaremos el mismo constructor anterior con el valor de colores.

EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, emojiImageView,

"#F44336","#e8e8e8","#f4f4f4");

emojIcon.ShowEmojIcon();

7. Crear una aplicación de muestra

Ahora crearemos una aplicación simple que integre los emojis para comprenderla en una aplicación real.

1) En Android Studio, vaya a Archivo ⇒ Nuevo proyecto y complete todos los detalles necesarios para crear un nuevo proyecto.

2) Abra build.gradle y agregue la biblioteca de supernovas emoji. También debe agregar su repositorio maven.

repositories {

maven { url " https://dl.bintray.com/hani-moma… "}

}

dependencies {

.

.

.

// Supernova Emoji

compile 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2'

}

3) Abra el archivo de diseño su actividad principal activity_main.xml y agregue el siguiente código. Aquí puede ver que he agregado emojiconEditText , emojiconTextView y ImageView .

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=" http://schemas.android.com/apk/r… "

xmlns:emojicon=" http://schemas.android.com/apk/r… "

xmlns:tools=" http://schemas.android.com/tools "

android:id="@+id/root_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="info.androidhive.emojis.MainActivity">

<ImageView

android:id="@+id/emoji_btn"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:padding="4dp"

android:src="@drawable/ic_insert_emoticon_black_24dp" />

<ImageView

android:id="@+id/submit_btn"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:padding="4dp"

android:src="@android:drawable/ic_menu_send" />

<hani.momanii.supernova_emoji_library.Helper.EmojiconEditText

android:id="@+id/emojicon_edit_text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_toLeftOf="@id/submit_btn"

android:layout_toRightOf="@id/emoji_btn"

emojicon:emojiconSize="28sp" />

<CheckBox

android:id="@+id/use_system_default"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true"

android:checked="false"

android:text="Use System Default?" />

<hani.momanii.supernova_emoji_library.Helper.EmojiconTextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:layout_marginTop="26dp"

android:text="Hello Emojis!"

android:textAppearance="@style/TextAppearance.AppCompat.Large"

android:textColor="#000000"

emojicon:emojiconSize="45sp"

emojicon:emojiconUseSystemDefault="true" />

4) Ahora abra MainActivity.java y realice los cambios como se menciona a continuación. Esta actividad muestra los diferentes escenarios de implementación del SuperNova-Emoji como se explicó anteriormente.

MainActivity.java

package info.androidhive.emojis;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.view.View;

import android.widget.CheckBox;

import android.widget.CompoundButton;

import android.widget.ImageView;

import hani.momanii.supernova_emoji_library.Actions.EmojIconActions;

import hani.momanii.supernova_emoji_library.Helper.EmojiconEditText;

import hani.momanii.supernova_emoji_library.Helper.EmojiconTextView;

class public MainActivity extends AppCompatActivity {

private static final String TAG = MainActivity.class.getSimpleName();

CheckBox mCheckBox;

EmojiconEditText emojiconEditText;

EmojiconTextView textView;

ImageView emojiImageView;

ImageView submitButton;

View rootView;

EmojIconActions emojIcon;

@Override

void protected onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

rootView = findViewById(R.id.root_view);

emojiImageView = (ImageView) findViewById(R.id.emoji_btn);

submitButton = (ImageView) findViewById(R.id.submit_btn);

mCheckBox = (CheckBox) findViewById(R.id.use_system_default);

emojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text);

textView = (EmojiconTextView) findViewById(R.id.textView);

emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiImageView);

emojIcon.ShowEmojIcon();

emojIcon.setIconsIds(R.drawable.ic_action_keyboard, R.drawable.smiley);

emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {

@Override

public void onKeyboardOpen() {

Log.e(TAG, "Keyboard opened!");

}

@Override

public void onKeyboardClose() {

Log.e(TAG, "Keyboard closed");

}

});

mCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton compoundButton, boolean b) {

emojIcon.setUseSystemEmoji(b);

textView.setUseSystemDefault(b);

}

});

submitButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String newText = emojiconEditText.getText().toString();

textView.setText(newText);

}

});

}

}

Ejecute y pruebe la aplicación.