Android tích hợp biểu tượng cảm xúc vào bàn phím cho app của bạn

Biểu tượng cảm xúc 😛 là cách tuyệt vời để thể hiện cảm xúc của chúng ta, giúp chúng ta đưa ra những suy nghĩ mà những người không cùng ngôn ngữ với chúng ta vẫn có thể hiểu được, ngay cả trẻ em cũng có thể hiểu được. Bất kỳ ứng dụng mạng xã hội phổ biến nào cũng cung cấp cho bạn một bộ biểu tượng cảm xúc và bạn sử dụng chúng rất nhiều môĩ khi trò chuyện. Điều quan trọng là phải có chúng trong các ứng dụng của bạn. Hệ điều hành Android có thể hiển thị Biểu tượng cảm xúc trên các Text fields.
Bài viết này hướng dẫn cách tích hợp bàn phím emojis vào ứng dụng của bạn một cách dễ dàng với nhiều tùy chọn tùy chỉnh sử dụng thư viện SuperNova-Emoji.

1.Tích hợp đơn giản

Dưới đây là cú pháp đơn giản để tích hợp Emojis Keyboard.

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

Có 4 tham số cần truyền vào là context, rootView, EmojiconEditText và ImageView. Thông thường, việc bố trí bố cục gốc dưới dạng RootView là lựa chọn tốt nhất để hiển thị Emojis Keyboard nằm trên tất cả các view. EmojiconEditText là EditText có nhiều thuộc tính tùy chỉnh để bật hiển thị biểu tượng cảm xúc. Và tham số cuối cùng mà ImageView sẽ sử dụng để chuyển đổi giữa bàn phím thông thường và bàn phím Emojis.
Nếu bạn muốn sử dụng nó trong layout xml, chúng ta sẽ sử dụng EmojiconEditText thay vì EditText bình thường.

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

Và EmojiconTextView thay vì 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"/>

Bàn phím Emojis sẽ có dạng như sau

2. Thay đổi biểu tượng Toggle mặc định

Để chuyển đổi giữa bàn phím mặc định và bàn phím Emojicon, bạn có thể gọi phương thức setIconsIds (), truyền vào 2 tham số: id icon cho bàn phím mặc định và id icon cho bàn phím Emojicon.

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

3. Sử dụng Emojis mặc định của thiết bị

SuperNove-Emoji cho phép bạn sử dụng biểu tượng cảm xúc của device, bạn cần set giá trị boolean của 2 hàm setUseSystemEmoji() và setUseSystemDefault() bằng true trong mỗi EmojiconTextView và EmojiconEditText bạn sử dụng.

emojIcon.setUseSystemEmoji(true);
textView.setUseSystemDefault(true);
emojiconEditText.setUseSystemDefault(true);

Hoặc set trong xml:

emojicon:emojiconUseSystemDefault="true"

4. Thay đổi kích thước Emojis

Bạn có thể thay đổi kích thước của Emojis như sau: Thay đổi trong java code:

textView.setEmojiconSize(30);

Thay đổi trong file xml

emojicon:emojiconSize="28sp"

5. Detect khi bàn phím được hiển thị hoặc đóng

SuperNova-Emoji cho phép detect khi người dùng mở bàn phím hoặc đóng nó để thực hiện một số thao tác nếu cần như hiển thị một số chế độ xem khi bàn phím mở và ẩn bàn phím khi bàn phím đóng. Sử dụng code dưới đây.

emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override
            public void onKeyboardOpen() {
                Log.i("Keyboard","open");
            }
 
            @Override
            public void onKeyboardClose() {
                Log.i("Keyboard","close");
            }
        });

6. Đổi màu Bàn phím Emoji để đồng bộ với app theme

Bạn có thể đặt ba màu cho bàn phímEmoji bằng cách truyền vào 3 tham số icons color, tabs color và background color.

EmojIconActions emojIcon= new EmojIconActions(this, rootView, emojiconEditText, emojiImageView,
"#F44336","#e8e8e8","#f4f4f4");
emojIcon.ShowEmojIcon();

7. Tạo ứng dụng demo

  1. Tạo một new project
  2. Add thư viện supernova emoji bằng cách mở file build.gradle và cấu hình như sau:
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'
}
  1. Add đoạn code bên dưới vào file activity_main.xml. Ở đây, tôi sử dụng emojiconEditText, emojiconTextView và ImageView.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:emojicon="http://schemas.android.com/apk/res-auto"
    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" />
</RelativeLayout>
  1. Bây giờ mở file MainActivity.java và thực hiện các thay đổi như bên dưới.
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;
 
public class 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
    protected void 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);
            }
        });
    }
}

Giờ thì run app vào xem thành quả nào ^^

Nguồn https://www.androidhive.info/2016/11/android-integrate-emojis-keyboard-app/?fbclid=IwAR19EblGLWJHou5Rx1nvyJgYuSbzfO7gYRhI3GljiHPRlgUwtTwng-G6o7I

Link download sourcecode: http://download.androidhive.info/download?code=jt20HIsF3zePWfYUb5pFcs71J830VXoKW8pDtvrUP7UaLbBZgHySaCPqnvkNtSrLsIKfC3771bt1GR%2Fic7er2y%2FntC%2FCKbioAIU9obuOAWzsBFecflFpbfOuw%3D%3D8MT5JNZQYN0K7uFNQ9mRi3hzuMR30z8YsHO