개요
이 튜토리얼에서는 안드로이드 앱에 이모지(Emoji) 키보드를 통합하는 방법을 단계별로 살펴봅니다. SuperNova-Emoji 오픈소스 라이브러리를 활용하면 채팅 앱에서 흔히 보는 것과 같은 이모지 선택 패널을 직접 구현하지 않고도 손쉽게 추가할 수 있으며, 이모지가 포함된 텍스트를 커스텀 위젯으로 그대로 표시할 수도 있습니다.
1단계: 새 프로젝트 생성
Android Studio에서 File → New Project 메뉴를 열고 새 프로젝트를 생성합니다. 필요한 모든 항목을 입력해 프로젝트 설정을 마무리하세요.
2단계: 레이아웃 파일 작성 (res/layout/activity_main.xml)
아래 코드를 activity_main.xml에 추가합니다. 여기서 사용되는 EmojiconEditText와 EmojiconTextView는 라이브러리가 제공하는 커스텀 뷰로, 일반 EditText·TextView 대신 사용하면 이모지가 화면에 올바르게 렌더링됩니다.
<?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">
<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" />
<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"
android:imeOptions="actionSend"
android:inputType="text"
emojicon:emojiconSize="28sp"/>
<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="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:lineSpacingExtra="17sp"
android:text="Hello Emojis !"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="#000000"
emojicon:emojiconAlignment="bottom"/>
</RelativeLayout>
3단계: MainActivity.java 작성
src/MainActivity.java에 아래 코드를 추가합니다. EmojIconActions 객체가 이모지 패널의 열고 닫힘을 관리하며, 키보드 리스너를 통해 키보드 상태 변화도 감지할 수 있습니다. 체크박스를 이용하면 시스템 기본 이모지와 라이브러리 이모지를 전환할 수 있습니다.
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;
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);
emojiButton = (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);
emojiconEditText2 = (EmojiconEditText) findViewById(R.id.emojicon_edit_text2);
textView = (EmojiconTextView) findViewById(R.id.textView);
emojIcon = new EmojIconActions(this, rootView, emojiconEditText, emojiButton);
emojIcon.ShowEmojIcon();
emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
@Override
public void onKeyboardOpen() {
Log.e("Keyboard", "open");
}
@Override
public void onKeyboardClose() {
Log.e("Keyboard", "close");
}
});
mCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
emojIcon.setUseSystemEmoji(b);
textView.setUseSystemDefault(b);
}
});
emojIcon.addEmojiconEditTextList(emojiconEditText2);
submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String newText = emojiconEditText.getText().toString();
textView.setText(newText);
}
});
}
}
4단계: 프로젝트 수준 build.gradle 설정
build.gradle(Project: Sample4) 파일의 repositories 블록에 JitPack 저장소를 추가합니다. 이 라이브러리는 JitPack을 통해 배포되기 때문에 반드시 필요한 설정입니다.
repositories {
maven { url 'https://jitpack.io' }
}5단계: 모듈 수준 build.gradle에 의존성 추가
build.gradle(Module: app)의 dependencies 블록에 아래 한 줄을 추가한 뒤, 상단에 나타나는 Sync Now를 클릭해 그레이들 동기화를 진행합니다.
implementation 'com.github.hani-momanii:SuperNova-Emoji:1.1'
6단계: AndroidManifest.xml 확인
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>
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 결과를 확인해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하세요. 실행 기기 목록에서 자신의 모바일 기기를 선택하면, 기본 화면이 아래 이미지와 같이 표시됩니다.
이모지 버튼을 누르면 하단에서 이모지 패널이 나타나고, 입력한 내용은 전송 버튼을 통해 EmojiconTextView에 출력됩니다. 체크박스를 선택하면 시스템 기본 이모지로 전환되는 것도 함께 확인할 수 있습니다.