Android Emoji 호환성 높이기👆

EmojiCompat을 사용한 누락된 Emoji(☐) 없애기

Photo by iabzd on Unsplash

이모지(Emoji)를 사용하면 글의 이해를 도우면서 내용의 재미를 높일 수 있습니다. 최근에는 SNS나 광고 메일에서도 자주 보이는데, 이러한 이모지가 IT 회사마다 사용 가능한 이모지가 조금씩 다르고 그림체도 다릅니다. 그래서 가끔 ☐ 를 인터넷에서 우연히 볼 수 있습니다.

(좌) EmojiCompat을 사용하지 않았을 때 (우) 사용했을 때

테스트 한 핸드폰 기종은 갤럭시S7 edge입니다. 위에 보이는 것 말고도 누락된 이모지가 많습니다. 이처럼 안드로이드 버전이 올라갈수록 추가되는 이모지가 많아지는 반면, 업데이트 지원이 끝난 핸드폰은 누락된 이모지가 늘어갑니다. 하지만 EmojiCompat 을 사용하면 지원이 끝난 핸드폰도 최신 이모지를 대응할 수 있습니다.

EmojiCompat 지원 라이브러리는 Android 4.4(API 레벨 19) 이상을 실행하는 기기에서 이전 버전과 호환되는 그림 이모티콘 지원을 구현하는 클래스를 제공합니다. 번들 또는 다운로드 가능한 글꼴로 EmojiCompat을 구성할 수 있습니다.

EmojiCompat 을 구성하는 방법은 두 가지가 있습니다.

• 다운로드 가능한 글꼴 구성
• 번들 글꼴 구성

다운로드 가능한 글꼴 구성

1. 지원 라이브러리 종속성 추가

implementation "com.android.support:support-emoji:28.0.0"
// androidx
implementation 'androidx.emoji:emoji:1.1.0'

2. 다운로드 가능한 글꼴 구성 초기화

글꼴을 다운로드 해야합니다. 디자인 뷰에서 TextView의 Attributes 창의 fontFamily를 눌러 More Fonts 를 클릭합니다.

Noto_Sans를 검색하여 설치를 하면 됩니다. (그림은 이미 설치 되어있어서 OK버튼이 활성화 되있지 않습니다)

• noto_sans.xml
• font_certs.xml
• preloaded_fonts.xml

위 3개의 파일이 추가 됩니다. 글꼴이 추가 되었다면 아래와 같이 코드를 작성해 주시면 됩니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val fontRequest = FontRequest(
        "com.google.android.gms.fonts",
        "com.google.android.gms",
        "Noto Color Emoji Compat",
        R.array.com_google_android_gms_fonts_certs)

    val config = FontRequestEmojiCompatConfig(this, fontRequest)
    EmojiCompat.init(config)
}

레이아웃 XML의 EmojiCompat 위젯을 사용합니다. AppCompat을 사용하고 있다면 AppCompat과 함께 EmojiCompat 위젯 사용 섹션을 참조하세요.

<android.support.text.emoji.widget.EmojiTextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <android.support.text.emoji.widget.EmojiEditText
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <android.support.text.emoji.widget.EmojiButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

확인하면 누락되었던 이모지가 추가 된 것을 확인하실 수 있습니다.

번들 글꼴 구성

번들 글꼴 구성은 다운로드 가능한 글꼴 구성보다 설정하기 쉽지만, 용량이 많이 나갑니다. (6.5MB라고 합니다.)

1. 지원 라이브러리 종속성 추가

implementation "com.android.support:support-emoji-bundled:$version"
// androidx
implementation 'androidx.emoji:emoji-bundled:1.1.0'

2. 번들 글꼴을 사용하여 EmojiCompat 구성

override fun onCreate() {
            super.onCreate()
            val config = BundledEmojiCompatConfig(this)
            EmojiCompat.init(config)
        }

구성옵션

EmojiCompat.Config 설정

2, 3번은 이모지가 교체 된 부분을 알 수 있습니다. (디버깅)

1. setReplaceAll() : 시스템이 표시 불가능한 이모티콘만을 교체하는 것이 아닌 전부 교체합니다. (통일감)
2. .setEmojiSpanIndicatorEnabled() EmojiCompat이 이모지를 EmojiSpan으로 대체했는지 여부를 나타냅니다. true로 설정하면 EmojiCompat은 EmojiSpan의 배경을 그립니다.
3. .setEmojiSpanIndicatorColor() EmojiSpan을 나타내는 색상을 설정합니다. 기본값은 GREEN입니다.

val config = FontRequestEmojiCompatConfig(...)
            .setReplaceAll(true)
            .setEmojiSpanIndicatorEnabled(true)
            .setEmojiSpanIndicatorColor(Color.GREEN)

참고자료

안드로이드 - Downloadable Font에 대해서 알아보기

그림 이모티콘 호환성 | Android 개발자 | Android Developers

Pluu Dev - [번역] DroidKaigi 2018 ~ Support Library의 Downloadable Font와 EmojiCompat을 대응하는 앱을 만들자

android/user-interface-samples

Downloadable Fonts | Android 개발자 | Android Developers