This tutorial will guide you to use EmojIcon keyboard in your app like WhatsApp by using a library code. This is a very easy tutorial to integrated EmojIcon keyboard.
Step 1- Set library project in your application
To set library project as a module project in your application, you have to download this project from below URL.
Download URL: https://www.dropbox.com/s/2c9p8oyib71jbx3/EmojIcon.zip?dl=0
After downloading this library project unzip this file at any location and open your application in android studio. Use below points to debug your library project in your application.
1- Open your project in Android studio
2- Go to File > Import Module and import the library as a module
3- Go to File > Project Structure > Modules
4- Locate your main project module, click on it.
5- Click on the more on the right green "+" button > Module dependency
6- Choose you library project and then click Ok
Now you library project has been setup and puts one below the line in your main application build.gradle file within dependencies braces.
compile project(':lib')
Sync your application. Now your app is ready to integrated emojicon next procedure .
Step 2- Crete an XML file activity_main.XML
In this file, we could not specify basic TextView and EditText to show and type words and emojicon. we have to replace TextView with EmojiconTextView and EditText with EmojiconEditText. A Complete code is below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:emojicon="http://schemas.android.com/apk/res-auto"
android:id="@+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<github.ankushsachdeva.emojicon.EmojiconTextView
android:id="@+id/emoji_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="10dp"
android:layout_marginBottom="20dp"
android:layout_above="@+id/emoji_btn"
emojicon:emojiconSize="28sp"
/>
<ImageView
android:id="@+id/emoji_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="@drawable/smiley"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="@+id/submit_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="@drawable/ic_action_send_now"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<github.ankushsachdeva.emojicon.EmojiconEditText
android:id="@+id/emojicon_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@id/emoji_btn"
android:layout_toLeftOf="@id/submit_btn"
emojicon:emojiconSize="28sp" />
</RelativeLayout>
Note:- Download required images from attachment.
Step 3- Create MainActivity.java file
Finally, we have created an activity to implemented complete code.
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.ImageView;
import android.widget.PopupWindow;
import github.ankushsachdeva.emojicon.EmojiconEditText;
import github.ankushsachdeva.emojicon.EmojiconGridView;
import github.ankushsachdeva.emojicon.EmojiconTextView;
import github.ankushsachdeva.emojicon.EmojiconsPopup;
import github.ankushsachdeva.emojicon.emoji.Emojicon;
public class MainActivity extends AppCompatActivity {
private EmojiconEditText emojiconEditText;
private EmojiconTextView emojiconTextView;
private EmojiconsPopup popup;
private View rootView;
private ImageView emojiButton;
private ImageView submitButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.content_main);
// initialze UI's id
emojiconEditText = (EmojiconEditText) findViewById(R.id.emojicon_edit_text);
emojiconTextView=(EmojiconTextView)findViewById(R.id.emoji_text_view);
rootView = findViewById(R.id.root_view);
emojiButton = (ImageView) findViewById(R.id.emoji_btn);
submitButton = (ImageView) findViewById(R.id.submit_btn);
doEmojIconStuff();
// To toggle between text keyboard and emoji keyboard keyboard(Popup)
emojiButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//If popup is not showing => emoji keyboard is not visible, we need to show it
if(!popup.isShowing()){
//If keyboard is visible, simply show the emoji popup
if(popup.isKeyBoardOpen()){
popup.showAtBottom();
changeEmojiKeyboardIcon(emojiButton, R.drawable.ic_action_keyboard);
}
//else, open the text keyboard first and immediately after that show the emoji popup
else{
emojiconEditText.setFocusableInTouchMode(true);
emojiconEditText.requestFocus();
popup.showAtBottomPending();
final InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
inputMethodManager.showSoftInput(emojiconEditText, InputMethodManager.SHOW_IMPLICIT);
changeEmojiKeyboardIcon(emojiButton, R.drawable.ic_action_keyboard);
}
}
//If popup is showing, simply dismiss it to show the undelying text keyboard
else{
popup.dismiss();
}
}
});
//On submit, add the edittext text to listview and clear the edittext
submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String newText = emojiconEditText.getText().toString();
emojiconEditText.getText().clear();
emojiconTextView.setText(newText);
}
});
}
private void changeEmojiKeyboardIcon(ImageView iconToBeChanged, int drawableResourceId){
iconToBeChanged.setImageResource(drawableResourceId);
}
// This function has all stuffs related to emojiicon
private void doEmojIconStuff(){
// Give the topmost view of your activity layout hierarchy. This will be used to measure soft keyboard height
popup = new EmojiconsPopup(rootView, this);
//Will automatically set size according to the soft keyboard size
popup.setSizeForSoftKeyboard();
//If the emoji popup is dismissed, change emojiButton to smiley icon
popup.setOnDismissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
changeEmojiKeyboardIcon(emojiButton, R.drawable.smiley);
}
});
//If the text keyboard closes, also dismiss the emoji popup
popup.setOnSoftKeyboardOpenCloseListener(new EmojiconsPopup.OnSoftKeyboardOpenCloseListener() {
@Override
public void onKeyboardOpen(int keyBoardHeight) {
}
@Override
public void onKeyboardClose() {
if (popup.isShowing())
popup.dismiss();
}
});
//On emoji clicked, add it to edittext
popup.setOnEmojiconClickedListener(new EmojiconGridView.OnEmojiconClickedListener() {
@Override
public void onEmojiconClicked(Emojicon emojicon) {
if (emojiconEditText == null || emojicon == null) {
return;
}
int start = emojiconEditText.getSelectionStart();
int end = emojiconEditText.getSelectionEnd();
if (start < 0) {
emojiconEditText.append(emojicon.getEmoji());
} else {
emojiconEditText.getText().replace(Math.min(start, end),
Math.max(start, end), emojicon.getEmoji(), 0,
emojicon.getEmoji().length());
}
}
});
//On backspace clicked, emulate the KEYCODE_DEL key event
popup.setOnEmojiconBackspaceClickedListener(new EmojiconsPopup.OnEmojiconBackspaceClickedListener() {
@Override
public void onEmojiconBackspaceClicked(View v) {
KeyEvent event = new KeyEvent(
0, 0, 0, KeyEvent.KEYCODE_DEL, 0, 0, 0, 0, KeyEvent.KEYCODE_ENDCALL);
emojiconEditText.dispatchKeyEvent(event);
}
});
}
}
0 Comment(s)