Android’de Emoji Klavyesi Entegre Etme

Bir çok sosyal medya uygulamasında farklı dillere sahip olan insanların, çocukların dahi duygu ve düşüncelerini kolayca karşı tarafa aktarmak için kullandıkları emojiler aynı zamanda WhatsApp, Facebook, Twitter vb uygulamalarda iletişimi eğlenceli hale getirende simgelerdir.

Bu makalede, SuperNova-Emoji kütüphanesini kullanarak, Android uygulamanıza emoji klavyesini birçok farklı özelleştirme seçeneğini kolayca nasıl entegre edebileceğinizi bahsedeceğim.

1-Basit Şekilde Entegrasyon

Emoji klavyesinin ilk öncelikle nasıl kolay bir şekilde kullanabileceğimizi aşağıdaki kodlardan inceleyebilirsiniz. Context, RootView, EmojiconEditText ve ImageView parametlerine sahip olan  EmojiIconActions adındaki sınıf kullanmalıyız. RootView parametresi, klavyenin gösterileceği alanı belirlemek için kullanılır. EmojiconEditText, emoji oluşturmayı etkinleştirmek için  özel niteliklere sahip bir EditText’tir.  Son parametresi olan ImageView, normal klavye ve emoji klavyesi arasında geçiş yapmak için kullanılacaktır.

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

Klasik EditText yerine EmojiconEditText kullanmak isterseniz aşağıdaki xml i yazabilirsiniz.

1
2
3
4
5
<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" />

TextView elementi yerine EmojiconTextView kullanmak isterseniz aşağıdaki xml i yazabilirsiniz.

1
2
3
4
5
<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"/>

2- Default Toogle Icon’u Değiştirme

Normal klavye ve emoji klavye arasında geçiş yaparken kullanıcıya görünen iconu değiştirmek istersek, iki parametre alan setIconsIds () metodunu kullanabiliriz.

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

3- Cihazdaki Default Emojileri Kullanma

SuperNova-Emoji, cihaz emojisini basit yolla kullanmanıza izin verir.Bunun  bazı metodlara true değeri vermemiz gerekir.

1
2
3
emojIcon.setUseSystemEmoji(true);
textView.setUseSystemDefault(true);

emojiconEditText.setUseSystemDefault(true);

Son olarak  xml de EmojiconTextView aşağıdaki özelliği eklemeliyiz.

1
emojicon:emojiconUseSystemDefault="true"

4-Emojilerin Boyutunu Değiştirme

Emojilerin boyutunu değiştirmek için, setEmojiconSize yöntemine ve EmojiconTextView’in emojiconSize özelliğine değer atamanız gerekir.
1
textView.setEmojiconSize(30);

Xml code
1
emojicon:emojiconSize="28sp"

5-Klavye Açılıp veya Kapandığını Algılama

SuperNova-Emoji, kullanıcının klavyeyi ne zaman açtığını algılamanıza veya kapatmanız gerektiğinde bazı işlemler gerçekleştirmenize olanak tanır. Klavye kapandığında, açıldığında veya gizlendiğinde kullanıcıya bazı görünümler sunmanız için kullanabilirsiniz. Bunu başarmak için aşağıdaki kod blogunu kullanın.

1
2
3
4
5
6
7
8
9
10
11
emojIcon.setKeyboardListener(new EmojIconActions.KeyboardListener() {
            @Override
            public void onKeyboardOpen() {
                Log.i("Keyboard","open");
            }
            @Override
            public void onKeyboardClose() {
                Log.i("Keyboard","close");
            }
        });

6- Emoji Klavyenin Renklerini Değiştirme

EmojIconActions sınıfına, tabs icon’ların rengi, tabs rengi ve arka plan rengi olmak üzere üç parametre ekleyerek emoji klavyesinin renklerini ayarlayabilirsiniz.
1
2
3

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

emojIcon.ShowEmojIcon();

7- Android Proje Oluşturup, Emoji Klavyesini Uygulamak

Dilerseniz aşağıda vermiş olduğum Kod İndir resmine tıklayarak github’a yüklemiş olduğum projeyi indirip, inceleyebilirsiniz.

download

Kendinizin projeyi oluşturarak uygulamak isterseniz yapmanız gereken adımlar şu şekildedir:

  1. Android Studio ide’sinde yeni bir proje oluşturalım.
  2. Oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek  Supernova Emoji kütüphanesini yüklüyoruz.Son olarak maven reposuna hani-momani urlsini eklemeliyiz.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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'
    }
  3. Res/layout dizinindeki activity_main.xml dosyasını açıp, aşağıdaki kodu eklemelisiniz.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <?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>
  4. Şimdi MainActivity.java dosyasını açın ve aşağıda belirtildiği gibi değişiklikleri yapın. Bu etkinlik, yukarıda açıklandığı gibi SuperNova-Emoji uygulamasının farklı senaryolarını göstermektedir.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    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);
                }
            });
        }
    }

Uygulamamızı çalıştırdığımızda böle bir sonuç elde etmiş olduk.

Kaynak

1- https://smality.com/androidde-emoji-klavyesi-entegre-etme/