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