Integrando Emojis em aplicações android

Emojis vem sendo utilizados para representar várias expressões que utilizamos no dia a dia, o que você acha de integrar essa funcionalidade ao seu app?

O primeiro passo é criar um novo projeto no Android Studio, para isso clique em arquivo -> novo projeto.  Dê um nome a sua aplicação e a seguir escolha Empty Activity como activity inicial e aguarde o carregamento do projeto.

Utilizaremos a biblioteca Super Nova Emoji para abilitar os emojis em nossa aplicação, para isso adicione as seguintes linhas no arquivo build.gradle:

repositories{
    maven { url "https://dl.bintray.com/hani-momanii/maven"}
}

dependencies {
    // Supernova Emoji    compile 'hani.momanii.supernova_emoji_library:supernova-emoji-library:0.0.2'
}

Será pedido para atualizar o gradle com as dependências que adicionamos, após esta atualização podemos ir para o layout da nossa aplicação onde adicionaremos um campo para receber textos e emoticons. Para isso abra o arquivo de layout activity_main.xml  que se encontra dentro da pasta res e adicione o seguinte código:

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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="br.com.spacerocket.emoji.MainActivity">

    <ImageView
        android:id="@+id/submit_btn"
        android:layout_width="50dp"
        android:layout_height="45dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:padding="4dp"
        android:src="@android:drawable/ic_menu_send" />

    
    <hani.momanii.supernova_emoji_library.Helper.EmojiconTextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="169dp"
        android:text=""
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="#000000"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/emojiconEditText"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/submit_btn"
        android:layout_toRightOf="@+id/emoji_btn"
         />

    <ImageView
        android:id="@+id/emoji_btn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:padding="4dp"
        android:src="@drawable/ic_menu_insert_emoticon"
        android:layout_alignTop="@+id/emojiconEditText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />



</RelativeLayout>

O próximo passo é modificar o arquivo MainActivity.java onde adicionaremos a lógica de negócio para quando clicarmos no botão de enviar a mensagem o texto atualizar na tela com o emoticon escolhido, para isso adicione o seguinte código:

package br.com.spacerocket.emoji;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import hani.momanii.supernova_emoji_library.Actions.EmojIconActions;
import hani.momanii.supernova_emoji_library.Helper.EmojiconEditText;
import hani.momanii.supernova_emoji_library.Helper.EmojiconTextView;

public class MainActivity extends AppCompatActivity {

    //Our variables to represent the elements on xml file and enable emojIcons
    private EmojiconEditText emojiconEditText;
    private EmojiconTextView emojiconTextView;
    ImageView emojiImageView, submitButton;
    View rootView;
    EmojIconActions emojIcon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //init the elements
        rootView = findViewById(R.id.activity_main);
        emojiconEditText = (EmojiconEditText) findViewById(R.id.emojiconEditText);
        emojiconTextView = (EmojiconTextView) findViewById(R.id.textView);
        submitButton = (ImageView) findViewById(R.id.submit_btn);
        emojiImageView = (ImageView) findViewById(R.id.emoji_btn);
        //init the emojicon icon
        emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiImageView);
        emojIcon.ShowEmojIcon();
        emojIcon.setIconsIds(R.drawable.ic_action_keyboard, R.drawable.smiley);
        //listen the send button click
        submitButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //change the text to emoji or text
                String text = emojiconEditText.getText().toString();
                emojiconTextView.setText(text);
            }
        });
    }
}

Após rodar o app verá o seguinte resultado:

Baseado em: http://bit.ly/AndroidHive
Código fonte: http://bit.ly/TurimLabEmoji

Lembrando que as imagens para representar os icones se encontram no link do código fonte acima. Até a próxima!