Cách tích hợp bàn phím Emoji vào ứng dụng Android

Giới thiệu

Bài viết này hướng dẫn tích hợp bàn phím Emoji vào ứng dụng Android sử dụng thư viện phổ biến SuperNova-Emoji (hani-momanii). Thư viện cung cấp EmojiconEditText, EmojiconTextView và EmojIconActions để quản lý hiển thị/bàn phím emoji.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và tạo dự án.

Bước 2: Thêm dependency (build.gradle)

Project-level build.gradle:

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' } // Quan trọng cho SuperNova-Emoji
    }
}

App-level build.gradle:

dependencies {
    implementation 'com.github.hani-momanii:SuperNova-Emoji:1.1'
    // Hoặc bản mới hơn nếu có
}

Bước 3: Thiết kế giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:emojicon="https://schemas.android.com/apk/res-auto"
    android:id="@+id/root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <!-- Nút bật/tắt bàn phím emoji -->
    <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_emoji" />

    <!-- Nút gửi -->
    <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" />

    <!-- Ô nhập liệu có hỗ trợ emoji -->
    <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"
        android:imeOptions="actionSend"
        android:inputType="text"
        emojicon:emojiconSize="28sp" />

    <!-- Ô nhập liệu thứ 2 cũng hỗ trợ emoji -->
    <hani.momanii.supernova_emoji_library.Helper.EmojiconEditText
        android:id="@+id/emojicon_edit_text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/emojicon_edit_text"
        android:imeOptions="actionSend"
        android:inputType="text"
        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="Dùng emoji hệ thống?" />

    <!-- TextView hiển thị emoji -->
    <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:lineSpacingExtra="17sp"
        android:text="Chào Emoji ! 😀"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="#000000"
        emojicon:emojiconAlignment="bottom" />

</RelativeLayout>

Bước 4: Code logic (src/MainActivity.java)

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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 {
    CheckBox mCheckBox;
    EmojiconEditText emojiconEditText, emojiconEditText2;
    EmojiconTextView textView;
    ImageView emojiButton, 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);
        emojiButton = findViewById(R.id.emoji_btn);
        submitButton = findViewById(R.id.submit_btn);
        mCheckBox = findViewById(R.id.use_system_default);
        emojiconEditText = findViewById(R.id.emojicon_edit_text);
        emojiconEditText2 = findViewById(R.id.emojicon_edit_text2);
        textView = findViewById(R.id.textView);

        // Khởi tạo EmojIconActions
        emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiButton);
        emojIcon.ShowEmojIcon(); // Hiển thị nút emoji

        // Lắng nghe trạng thái bàn phím
        emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override public void onKeyboardOpen() { Log.e("Keyboard", "open"); }
            @Override public void onKeyboardClose() { Log.e("Keyboard", "close"); }
        });

        // Chuyển đổi emoji hệ thống / thư viện
        mCheckBox.setOnCheckedChangeListener((buttonView, isChecked) -> {
            emojIcon.setUseSystemEmoji(isChecked);
            textView.setUseSystemDefault(isChecked);
        });

        // Thêm EditText thứ 2 vào quản lý
        emojIcon.addEmojiconEditTextList(emojiconEditText2);

        // Xử lý nút gửi
        submitButton.setOnClickListener(v -> {
            String newText = emojiconEditText.getText().toString();
            textView.setText(newText);
        });
    }
}

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <application
        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>

Chạy ứng dụng

Kết nối thiết bị, nhấn Run. Nhấn nút emoji (biểu tượng mặt cười) -> bàn phím emoji hiện ra. Chọn emoji -> nhập vào EditText. Nhấn "Gửi" -> TextView hiển thị nội dung kèm emoji. CheckBox "Dùng emoji hệ thống" chuyển đổi giữa emoji thư viện và emoji gốc của hệ thống.

Các thư viện Emoji thay thế phổ biến

EmojiCompat (Khuyến nghị cho app production)

// build.gradle
implementation "androidx.emoji2:emoji2:1.2.0"
implementation "androidx.emoji2:emoji2-views:1.2.0"

// Application class
public class MyApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        EmojiCompat.init(new BundledEmojiCompatConfig(this));
    }
}

// Layout: dùng EmojiTextView, EmojiEditText thay vì TextView/EditText thường
<androidx.emoji2.widget.EmojiTextView ... />
<androidx.emoji2.widget.EmojiEditText ... />

Lưu ý

• SuperNova-Emoji không còn được maintain tích cực – cân nhắc EmojiCompat cho dự án mới
• Cần thêm drawable ic_emoji cho nút bật bàn phím
• EmojiCompat tự động download font emoji mới từ Play Services
• Test trên nhiều thiết bị vì rendering emoji khác nhau (Samsung, Pixel, Xiaomi...)