Basic support for composing emoji
Moxie Marlinspike
12 years ago
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 669 B |
|
After Width: | Height: | Size: 669 B |
|
After Width: | Height: | Size: 772 B |
|
After Width: | Height: | Size: 772 B |
|
After Width: | Height: | Size: 759 B |
|
After Width: | Height: | Size: 697 B |
|
After Width: | Height: | Size: 697 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<item android:state_pressed="true"
|
||||
android:drawable="@android:color/transparent" />
|
||||
|
||||
<item android:state_focused="true"
|
||||
android:drawable="@android:color/transparent" />
|
||||
|
||||
<item android:drawable="@android:color/transparent" />
|
||||
|
||||
</selector>
|
||||
@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:orientation="vertical"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent">
|
||||
|
||||
<android.support.v4.view.ViewPager
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:id="@+id/emoji_pager"
|
||||
android:visibility="visible"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:minHeight="100dip">
|
||||
|
||||
<android.support.v4.view.PagerTabStrip
|
||||
android:id="@+id/emoji_tab_strip"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="top"
|
||||
android:background="#33b5e5"
|
||||
android:textColor="#fff"
|
||||
android:paddingTop="3dp"
|
||||
android:paddingBottom="3dp"
|
||||
android:paddingLeft="32dip"
|
||||
android:paddingRight="32dip"/>
|
||||
|
||||
</android.support.v4.view.ViewPager>
|
||||
|
||||
</FrameLayout>
|
||||
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent">
|
||||
|
||||
<GridView android:id="@+id/emoji"
|
||||
android:visibility="visible"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:stretchMode="columnWidth"
|
||||
android:columnWidth="40dp"
|
||||
android:numColumns="auto_fit"
|
||||
android:verticalSpacing="10dp"
|
||||
android:horizontalSpacing="10dp"
|
||||
android:scrollbarFadeDuration="0"
|
||||
android:fadeScrollbars="false"
|
||||
android:gravity="center"/>
|
||||
|
||||
</FrameLayout>
|
||||
@ -0,0 +1,184 @@
|
||||
package org.thoughtcrime.securesms.components;
|
||||
|
||||
import android.content.Context;
|
||||
import android.graphics.Color;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.support.v4.view.PagerAdapter;
|
||||
import android.support.v4.view.PagerTabStrip;
|
||||
import android.support.v4.view.ViewPager;
|
||||
import android.text.SpannableString;
|
||||
import android.text.Spanned;
|
||||
import android.text.style.ImageSpan;
|
||||
import android.util.AttributeSet;
|
||||
import android.view.LayoutInflater;
|
||||
import android.view.View;
|
||||
import android.view.ViewGroup;
|
||||
import android.widget.AdapterView;
|
||||
import android.widget.BaseAdapter;
|
||||
import android.widget.EditText;
|
||||
import android.widget.FrameLayout;
|
||||
import android.widget.GridView;
|
||||
import android.widget.ImageView;
|
||||
import android.widget.TextView;
|
||||
|
||||
import org.thoughtcrime.securesms.R;
|
||||
import org.thoughtcrime.securesms.util.Emoji;
|
||||
|
||||
import java.io.IOException;
|
||||
|
||||
public class EmojiDrawer extends FrameLayout {
|
||||
|
||||
private FrameLayout emojiGridLayout;
|
||||
private FrameLayout recentEmojiGridLayout;
|
||||
|
||||
private EditText composeText;
|
||||
|
||||
public EmojiDrawer(Context context) {
|
||||
super(context);
|
||||
initialize();
|
||||
}
|
||||
|
||||
public EmojiDrawer(Context context, AttributeSet attrs) {
|
||||
super(context, attrs);
|
||||
initialize();
|
||||
}
|
||||
|
||||
public EmojiDrawer(Context context, AttributeSet attrs, int defStyle) {
|
||||
super(context, attrs, defStyle);
|
||||
initialize();
|
||||
}
|
||||
|
||||
public void setComposeEditText(EditText composeText) {
|
||||
this.composeText = composeText;
|
||||
}
|
||||
|
||||
public boolean isOpen() {
|
||||
return getVisibility() == View.VISIBLE;
|
||||
}
|
||||
|
||||
private void initialize() {
|
||||
LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
|
||||
inflater.inflate(R.layout.emoji_drawer, this, true);
|
||||
|
||||
ViewPager pager = (ViewPager ) findViewById(R.id.emoji_pager );
|
||||
PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.emoji_tab_strip);
|
||||
this.emojiGridLayout = (FrameLayout) inflater.inflate(R.layout.emoji_grid_layout, null);
|
||||
this.recentEmojiGridLayout = (FrameLayout) inflater.inflate(R.layout.emoji_grid_layout, null);
|
||||
GridView emojiGrid = (GridView) emojiGridLayout.findViewById(R.id.emoji);
|
||||
GridView recentEmojiGrid = (GridView) recentEmojiGridLayout.findViewById(R.id.emoji);
|
||||
|
||||
pagerTabStrip.setBackgroundColor(Color.parseColor("#ff333333"));
|
||||
pagerTabStrip.setTextSpacing(1);
|
||||
pager.setBackgroundColor(Color.parseColor("#ff333333"));
|
||||
emojiGrid.setAdapter(new AllEmojiGridAdapter());
|
||||
emojiGrid.setOnItemClickListener(new EmojiClickListener());
|
||||
pager.setAdapter(new EmojiPagerAdapter());
|
||||
pager.setCurrentItem(1);
|
||||
}
|
||||
|
||||
private class EmojiClickListener implements AdapterView.OnItemClickListener {
|
||||
@Override
|
||||
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
|
||||
int start = composeText.getSelectionStart();
|
||||
int end = composeText.getSelectionEnd ();
|
||||
String emoji = Emoji.EMOJI_ASSET_CODE_MAP.get(Emoji.EMOJI_ASSETS.get(position));
|
||||
|
||||
composeText.getText().replace(Math.min(start, end), Math.max(start, end),
|
||||
emoji, 0, emoji.length());
|
||||
|
||||
composeText.setText(Emoji.emojify(getContext(), composeText.getText().toString()),
|
||||
TextView.BufferType.SPANNABLE);
|
||||
|
||||
composeText.setSelection(end+2);
|
||||
}
|
||||
}
|
||||
|
||||
private class AllEmojiGridAdapter extends BaseAdapter {
|
||||
|
||||
@Override
|
||||
public int getCount() {
|
||||
return Emoji.EMOJI_ASSETS.size();
|
||||
}
|
||||
|
||||
@Override
|
||||
public Object getItem(int position) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@Override
|
||||
public long getItemId(int position) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
@Override
|
||||
public View getView(int position, View convertView, ViewGroup parent) {
|
||||
try {
|
||||
String asset = Emoji.EMOJI_ASSETS.get(position);
|
||||
Drawable drawable = Drawable.createFromStream(getContext().getAssets().open(asset + ".png"), null);
|
||||
|
||||
if (convertView != null && convertView instanceof ImageView) {
|
||||
((ImageView)convertView).setImageDrawable(drawable);
|
||||
return convertView;
|
||||
} else {
|
||||
ImageView imageView = new ImageView(getContext());
|
||||
imageView.setImageDrawable(drawable);
|
||||
return imageView;
|
||||
}
|
||||
} catch (IOException ioe) {
|
||||
throw new AssertionError(ioe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private class EmojiPagerAdapter extends PagerAdapter {
|
||||
|
||||
@Override
|
||||
public int getCount() {
|
||||
return 2;
|
||||
}
|
||||
|
||||
@Override
|
||||
public CharSequence getPageTitle(int position) {
|
||||
switch (position) {
|
||||
case 0:
|
||||
SpannableString recent = new SpannableString(" Recent ");
|
||||
ImageSpan recentImage = new ImageSpan(getContext(), R.drawable.ic_emoji_recent_light,
|
||||
ImageSpan.ALIGN_BASELINE);
|
||||
|
||||
recent.setSpan(recentImage, 1, recent.length()-1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
|
||||
|
||||
return recent;
|
||||
case 1:
|
||||
SpannableString emoji = new SpannableString(" Emoji ");
|
||||
ImageSpan emojiImage = new ImageSpan(getContext(), R.drawable.ic_emoji_light,
|
||||
ImageSpan.ALIGN_BASELINE);
|
||||
|
||||
emoji.setSpan(emojiImage, 1, emoji.length()-1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
|
||||
|
||||
return emoji;
|
||||
default:
|
||||
throw new AssertionError("Bad position!");
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public boolean isViewFromObject(View view, Object o) {
|
||||
return view == o;
|
||||
}
|
||||
|
||||
public Object instantiateItem(ViewGroup container, int position) {
|
||||
View view;
|
||||
|
||||
switch (position) {
|
||||
case 0: view = recentEmojiGridLayout; break;
|
||||
case 1: view = emojiGridLayout; break;
|
||||
default: throw new AssertionError("Too many positions!");
|
||||
}
|
||||
|
||||
container.addView(view, 0);
|
||||
|
||||
return view;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,76 @@
|
||||
package org.thoughtcrime.securesms.components;
|
||||
|
||||
|
||||
import android.content.Context;
|
||||
import android.content.res.TypedArray;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.util.AttributeSet;
|
||||
import android.view.View;
|
||||
import android.widget.ImageButton;
|
||||
|
||||
import org.thoughtcrime.securesms.R;
|
||||
|
||||
public class EmojiToggle extends ImageButton {
|
||||
|
||||
private Drawable emojiToggle;
|
||||
private Drawable imeToggle;
|
||||
private OnClickListener listener;
|
||||
|
||||
public EmojiToggle(Context context) {
|
||||
super(context);
|
||||
initialize();
|
||||
}
|
||||
|
||||
public EmojiToggle(Context context, AttributeSet attrs) {
|
||||
super(context, attrs);
|
||||
initialize();
|
||||
}
|
||||
|
||||
public EmojiToggle(Context context, AttributeSet attrs, int defStyle) {
|
||||
super(context, attrs, defStyle);
|
||||
initialize();
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setOnClickListener(OnClickListener listener) {
|
||||
this.listener = listener;
|
||||
}
|
||||
|
||||
public void toggle() {
|
||||
if (getDrawable() == emojiToggle) {
|
||||
setImageDrawable(imeToggle);
|
||||
} else {
|
||||
setImageDrawable(emojiToggle);
|
||||
}
|
||||
}
|
||||
|
||||
private void initialize() {
|
||||
initializeResources();
|
||||
initializeListeners();
|
||||
}
|
||||
|
||||
private void initializeResources() {
|
||||
int attributes[] = new int[] {R.attr.conversation_emoji_toggle,
|
||||
R.attr.conversation_keyboard_toggle};
|
||||
|
||||
TypedArray drawables = getContext().obtainStyledAttributes(attributes);
|
||||
this.emojiToggle = drawables.getDrawable(0);
|
||||
this.imeToggle = drawables.getDrawable(1);
|
||||
|
||||
drawables.recycle();
|
||||
|
||||
setImageDrawable(this.emojiToggle);
|
||||
}
|
||||
|
||||
private void initializeListeners() {
|
||||
super.setOnClickListener(new OnClickListener() {
|
||||
@Override
|
||||
public void onClick(View v) {
|
||||
toggle();
|
||||
|
||||
if (listener != null)
|
||||
listener.onClick(v);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,176 @@
|
||||
package org.thoughtcrime.securesms.util;
|
||||
|
||||
import android.content.Context;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.text.Spannable;
|
||||
import android.text.SpannableString;
|
||||
import android.text.style.ImageSpan;
|
||||
import android.util.Log;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
import java.util.regex.Matcher;
|
||||
import java.util.regex.Pattern;
|
||||
|
||||
public class Emoji {
|
||||
|
||||
public static final HashMap<String, String> EMOJI_ASSET_CODE_MAP = new HashMap<String, String>();
|
||||
public static final HashMap<Pattern, String> EMOJI_CODE_ASSET_MAP = new HashMap<Pattern, String>();
|
||||
|
||||
public static final ArrayList<String> EMOJI_ASSETS = new ArrayList<String>() {{
|
||||
add("1f601");
|
||||
add("1f602");
|
||||
add("1f603");
|
||||
add("1f604");
|
||||
add("1f605");
|
||||
add("1f606");
|
||||
add("1f609");
|
||||
add("1f60a");
|
||||
add("1f60b");
|
||||
add("1f60c");
|
||||
add("1f60d");
|
||||
add("1f60f");
|
||||
add("1f612");
|
||||
add("1f613");
|
||||
add("1f614");
|
||||
add("1f616");
|
||||
add("1f618");
|
||||
add("1f61a");
|
||||
add("1f61c");
|
||||
add("1f61d");
|
||||
add("1f61e");
|
||||
add("1f620");
|
||||
add("1f621");
|
||||
add("1f622");
|
||||
add("1f623");
|
||||
add("1f624");
|
||||
add("1f625");
|
||||
add("1f628");
|
||||
add("1f629");
|
||||
add("1f62a");
|
||||
add("1f62b");
|
||||
add("1f62d");
|
||||
add("1f630");
|
||||
add("1f631");
|
||||
add("1f632");
|
||||
add("1f633");
|
||||
add("1f635");
|
||||
add("1f637");
|
||||
|
||||
add("1f638");
|
||||
add("1f639");
|
||||
add("1f63a");
|
||||
add("1f63b");
|
||||
add("1f63c");
|
||||
add("1f63d");
|
||||
add("1f63e");
|
||||
add("1f63f");
|
||||
add("1f640");
|
||||
add("1f645");
|
||||
add("1f646");
|
||||
add("1f647");
|
||||
add("1f648");
|
||||
add("1f649");
|
||||
add("1f64a");
|
||||
add("1f64b");
|
||||
add("1f64c");
|
||||
add("1f64d");
|
||||
add("1f64e");
|
||||
add("1f64f");
|
||||
}};
|
||||
|
||||
public static ArrayList<String> EMOJI_CODES = new ArrayList<String>() {{
|
||||
add("\ud83d\ude01");
|
||||
add("\ud83d\ude02");
|
||||
add("\ud83d\ude03");
|
||||
add("\ud83d\ude04");
|
||||
add("\ud83d\ude05");
|
||||
add("\ud83d\ude06");
|
||||
add("\ud83d\ude09");
|
||||
add("\ud83d\ude0a");
|
||||
add("\ud83d\ude0b");
|
||||
add("\ud83d\ude0c");
|
||||
add("\ud83d\ude0d");
|
||||
add("\ud83d\ude0f");
|
||||
add("\ud83d\ude12");
|
||||
add("\ud83d\ude13");
|
||||
add("\ud83d\ude14");
|
||||
add("\ud83d\ude16");
|
||||
add("\ud83d\ude18");
|
||||
add("\ud83d\ude1a");
|
||||
add("\ud83d\ude1c");
|
||||
add("\ud83d\ude1d");
|
||||
add("\ud83d\ude1e");
|
||||
add("\ud83d\ude20");
|
||||
add("\ud83d\ude21");
|
||||
add("\ud83d\ude22");
|
||||
add("\ud83d\ude23");
|
||||
add("\ud83d\ude24");
|
||||
add("\ud83d\ude25");
|
||||
add("\ud83d\ude28");
|
||||
add("\ud83d\ude29");
|
||||
add("\ud83d\ude2a");
|
||||
add("\ud83d\ude2b");
|
||||
add("\ud83d\ude2d");
|
||||
add("\ud83d\ude30");
|
||||
add("\ud83d\ude31");
|
||||
add("\ud83d\ude32");
|
||||
add("\ud83d\ude33");
|
||||
add("\ud83d\ude35");
|
||||
add("\ud83d\ude37");
|
||||
|
||||
add("\ud83d\ude38");
|
||||
add("\ud83d\ude39");
|
||||
add("\ud83d\ude3a");
|
||||
add("\ud83d\ude3b");
|
||||
add("\ud83d\ude3c");
|
||||
add("\ud83d\ude3d");
|
||||
add("\ud83d\ude3e");
|
||||
add("\ud83d\ude3f");
|
||||
add("\ud83d\ude40");
|
||||
add("\ud83d\ude45");
|
||||
add("\ud83d\ude46");
|
||||
add("\ud83d\ude47");
|
||||
add("\ud83d\ude48");
|
||||
add("\ud83d\ude49");
|
||||
add("\ud83d\ude4a");
|
||||
add("\ud83d\ude4b");
|
||||
add("\ud83d\ude4c");
|
||||
add("\ud83d\ude4d");
|
||||
add("\ud83d\ude4e");
|
||||
add("\ud83d\ude4f");
|
||||
}};
|
||||
|
||||
static {
|
||||
for (int i=0;i<EMOJI_ASSETS.size();i++) {
|
||||
EMOJI_ASSET_CODE_MAP.put(EMOJI_ASSETS.get(i), EMOJI_CODES.get(i));
|
||||
EMOJI_CODE_ASSET_MAP.put(Pattern.compile(EMOJI_CODES.get(i)), EMOJI_ASSETS.get(i));
|
||||
}
|
||||
}
|
||||
|
||||
public static Spannable emojify(Context context, String text) {
|
||||
try {
|
||||
Spannable spannable = new SpannableString(text);
|
||||
|
||||
for (Map.Entry<Pattern, String> entry : EMOJI_CODE_ASSET_MAP.entrySet()) {
|
||||
Matcher matcher = entry.getKey().matcher(spannable);
|
||||
|
||||
while (matcher.find()) {
|
||||
Drawable asset = Drawable.createFromStream(context.getAssets().open(entry.getValue() + ".png"), null);
|
||||
asset.setBounds(0, 0, asset.getIntrinsicWidth(), asset.getIntrinsicHeight());
|
||||
|
||||
ImageSpan imageSpan = new ImageSpan(asset, ImageSpan.ALIGN_BASELINE);
|
||||
Log.w("Emoji", "Replacing text with: " + imageSpan);
|
||||
spannable.setSpan(imageSpan,matcher.start(), matcher.end(),
|
||||
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
|
||||
}
|
||||
}
|
||||
|
||||
return spannable;
|
||||
} catch (IOException e) {
|
||||
throw new AssertionError(e);
|
||||
}
|
||||
}
|
||||
}
|
||||