ImageSpan on EditText (smileys). With SwiftKey Keyboard doesnt work

Question

I am doing a simple chat application and i want to show smileys on edittext while writing the message.

I have this to identify wich characters will be subsituted by an Image throught an ImageSpan (this is called only when an smileys character is inserted on EditText):

for (index = start; index < start+num_chars; index++) {
        if (index + 1 > editable.length())
            continue;  
          if(emoticons.containsKey(editable.subSequence(index, index + 1).toString())){
            int length=1; 

            Drawable drawable = context.getResources().getDrawable(emoticons.get(editable.subSequence(index, index + 1).toString()));
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();


            int size=Utils.GetDipsFromPixel(context, (int)(textSize*1.3));

            Drawable d = new BitmapDrawable(Bitmap.createScaledBitmap(bitmap, size, size, true));
            int dWidth = d.getIntrinsicWidth();
            int dHeight = d.getIntrinsicHeight();

            d.setBounds(0 , -dHeight, dWidth, 0);
            ImageSpan span;
            span = new ImageSpan(d,ImageSpan.ALIGN_BASELINE);
            editable.setSpan(span, index, index + length,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

            index += length - 1;
          }

      }

I am using SPAN_EXCLUSIVE_EXCLUSIVE tag to set the span, but i have problems with swiftkey keyboard because when i insert an smiley in the edittext, everything i write just after the imageSpan it keeps below the image (like SPAN_EXCLUSIVE_INCLUSIVE). With the Android default keyboard i havent this problem.

I only want whatsapp application same behaviour whit smileys on EditText.

Any suggestions? Any change i have to do to my code?

EDIT: "editable" variable is passed to the method. It is txtMessage.getText() value where txtMessage is an EditText.

Thanks!

EDIT: Only Span one portion of code! This works good in multiline! I think the problem was in using Drawable->Bitmap->ResizedBitmap->Drawable.

public static final HashMap<String, Integer> emoticons = new HashMap();
static {
    emoticons.put("\ue415", R.drawable.e415);
    emoticons.put("\ue056", R.drawable.e056);
    emoticons.put("\ue057", R.drawable.e057);
...
public static Spannable getSmiledText(Context context, Spannable editable,
        int start, int num_chars, float textSize) {

    int index;
    for (index = start; index < start + num_chars; index++) {
        if (index + 1 > editable.length())
            continue;
        if (EmojiLayout.emoticons.containsKey(editable.subSequence(index,
                index + 1).toString())) {
            int length = 1;

            Bitmap smiley = BitmapFactory.decodeResource(context.getResources(), ((Integer) EmojiLayout.emoticons.get(editable.subSequence(index,
                    index + 1).toString())));
            int size = Utils.GetDipsFromPixel(context,
            (int) (textSize * 1.37));

            Bitmap scaledbmp=Bitmap.createScaledBitmap(
                    smiley, size, size, false);
            ImageSpan span;
            span = new ImageSpan(scaledbmp);
            Log.d("EmojiLayout", "Index: " + String.valueOf(index) + "To: "
                    + String.valueOf(index + length));
            editable.setSpan(span, index, index + length,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            index += length - 1;
        }
    }
    return editable;
}

mail this defect to the developer and see what they say.. – Ron Jul 24 '12 at 17:57 — Ron, Jul 24 '12 at 17:57

score 13 · Accepted Answer · answered Jul 31 '12 at 06:48

Use this one ::

    public static CharSequence addSmileySpans(Context ch, CharSequence your_recieved_message)
{
    //smilyRegexMap = new HashMap<Integer, String>();

private static final HashMap<String, Integer> smilyRegexMap = new HashMap<String, Integer>();
smilyRegexMap.put( ">:-\\(" , R.drawable.fb_grumpy);
        smilyRegexMap.put( ">:\\(" , R.drawable.fb_grumpy);
        smilyRegexMap.put( ">:-O" , R.drawable.fb_upset);
        smilyRegexMap.put( ":-\\)" , R.drawable.fb_smile);
        smilyRegexMap.put( ":\\)",R.drawable.fb_smile);
        smilyRegexMap.put( ":-\\]" , R.drawable.fb_smile);
        smilyRegexMap.put( ":-\\(", R.drawable.fb_frown);




    System.out.println("==In Spannable Function..........");
    SpannableStringBuilder builder = new SpannableStringBuilder(your_recieved_message);

    System.out.println("==================Size of Smily  : "+ smilyRegexMap.size());

    @SuppressWarnings("rawtypes")
    Iterator it = smilyRegexMap.entrySet().iterator();
    while (it.hasNext()) {
        @SuppressWarnings("rawtypes")
        Map.Entry pairs = (Map.Entry) it.next();




        Pattern mPattern = Pattern.compile((String) pairs.getKey(),Pattern.CASE_INSENSITIVE);
        Matcher matcher = mPattern.matcher(your_recieved_message);

        while (matcher.find()) {

                Bitmap smiley = BitmapFactory.decodeResource(ch.getResources(), ((Integer) pairs.getValue()));
                Object[] spans = builder.getSpans(matcher.start(), matcher.end(), ImageSpan.class);
                if (spans == null || spans.length == 0) {
                    builder.setSpan(new ImageSpan(smiley), matcher.start(), matcher.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
        }
    }
    return builder;
}

Yeeessss!!!! I have same problem with Swiftkey but with this method you have solved other problem with word wraps on listview items with smileys!!!! Now i only have to improve scroll speed because i have 470 smileys! Any suggestion to improve scroll speed? — Igor, Jul 31 '12 at 22:12
I'Have edited your code to only span a portion of the string. I've posted it in first message — Igor, Jul 31 '12 at 22:39
i am using Dialog view for Display Smileys.. i have put new Answer with images and Code. May be this Help you... — Gautam Vasoya, Aug 01 '12 at 10:24

score 4 · Answer 2 · edited May 23 '17 at 11:53

You have just to build a Spannable text using ImageSpan and then setText the Spannable to TextView or EditText as CommonsWare suggested in this post. You can also try to use A-IV's solution:

private static final HashMap<String, Integer> emoticons = new HashMap();
    static {
        emoticons.put(":*", R.drawable.emo_im_kiss);
        emoticons.put(":-D", R.drawable.emo_im_glad);
        emoticons.put(":)", R.drawable.emo_im_happy);
        emoticons.put(":-(", R.drawable.emo_im_sad);
        ...
    }

    public static Spannable getSmiledText(Context context, String text) {

    SpannableStringBuilder builder = new SpannableStringBuilder(text);
    int index;

    for (index = 0; index < builder.length(); index++) {
        for (Entry<String, Integer> entry : emoticons.entrySet()) {
            int length = entry.getKey().length();
            if (index + length > builder.length())
                continue;
            if (builder.subSequence(index, index + length).toString().equals(entry.getKey())) {
                builder.setSpan(new ImageSpan(context, entry.getValue()), index, index + length,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                index += length - 1;
                break;
            }
    }
    }
    return builder;
    }

I have tried this solution but my problem is that i do it every time I insert a smiley on EditText and I only whant to change the new inserted smiley character. I have to pass to the method the txtMessage.getText() (Spannable) so i can change only the new character. THe method you send is inneficient if i have to check all characters everytime i insert an smiley. — Igor, Jul 16 '12 at 08:26
I have tried to set the ImageSpan to a SpannableStringBuilder and the result is the same... WIth SwiftKey Keyboard i cant write just after the ImageSpan because all characters are hidden by the ImageSpan.... :-( — Igor, Jul 16 '12 at 15:32

score 0 · Answer 3 · answered Jul 21 '14 at 04:57

Try this way,hope this will help you to solve your problem.

    private static LinkedHashMap<String,Integer> emojisHashMap;

    public static LinkedHashMap<String, Integer> getEmojisHashMap() {
        if (emojisHashMap == null || emojisHashMap.size() == 0) {
            emojisHashMap = new LinkedHashMap<String, Integer>();

            emojisHashMap.put(":=q", R.drawable.smiley1);
            emojisHashMap.put(":=w", R.drawable.smiley2);
            emojisHashMap.put(":=e", R.drawable.smiley3);
            emojisHashMap.put(":=r", R.drawable.smiley4);

            return emojisHashMap;
        } else {
            return emojisHashMap;
        }

    }

    public Spannable getSmiledText(CharSequence text) {
        SpannableStringBuilder builder;

        try {
            builder = (SpannableStringBuilder) text;
        }catch (Exception e){
            builder = new SpannableStringBuilder(text);
        }
        if (getEmojisHashMap().size() > 0) {
            int index;
            for (index = 0; index < builder.length(); index++) {
                if (Character.toString(builder.charAt(index)).equals(":")) {
                    for (Map.Entry<String, Integer> entry : getEmojisHashMap().entrySet()) {
                        int length = entry.getKey().length();
                        if (index + length > builder.length())
                            continue;
                        if (builder.subSequence(index, index + length).toString().equals(entry.getKey())) {
                            builder.setSpan(new ImageSpan(getContext(), entry.getValue()), index, index + length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                            index += length - 1;
                            break;
                        }
                    }
                }
            }
        }
        return builder;
    }

score -1 · Answer 4 · answered Aug 01 '12 at 10:42

In XML File Of Smileys put Image Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#dddddd"
    android:padding="10dp" >

    <ImageButton
        android:id="@+id/btn_smile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_smile" />

    <ImageButton
        android:id="@+id/btn_kiss"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_kiss" />

    <ImageButton
        android:id="@+id/btn_wink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_wink" />

    <ImageButton
        android:id="@+id/btn_cry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_cry" />

    <ImageButton
        android:id="@+id/btn_grumpy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_grumpy" />

    <ImageButton
        android:id="@+id/btn_upset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_upset" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#dddddd"
    android:padding="10dp" >

    <ImageButton
        android:id="@+id/btn_frown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_frown" />

    <ImageButton
        android:id="@+id/btn_tougn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_tounge" />

    <ImageButton
        android:id="@+id/btn_grin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_grin" />

    <ImageButton
        android:id="@+id/btn_gasp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_gasp" />

    <ImageButton
        android:id="@+id/btn_glasses"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_glasses" />

    <ImageButton
        android:id="@+id/btn_unsure"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_unsure" />
</LinearLayout>
</LinearLayout>

//========================================================

In Dialog Class put this code

    private class SmileyMenu extends Dialog implements android.view.View.OnClickListener{

    private Chat cht;
    Context con;
    public String MyStatus1="";
    public SmileyMenu(Chat cht) {
        super(cht);
        this.con = cht;
        this.cht = cht;
    }



    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();


        setTitle("Select Smileys :");

        setContentView(R.layout.smily_menu);

        ImageButton btnSmile = (ImageButton)findViewById(R.id.btn_smile);
        ImageButton btnkiss = (ImageButton)findViewById(R.id.btn_kiss);
        ImageButton btnwink = (ImageButton)findViewById(R.id.btn_wink);
        ImageButton btncry = (ImageButton)findViewById(R.id.btn_cry);
        ImageButton btngrupy = (ImageButton)findViewById(R.id.btn_grumpy);
        ImageButton btnupset = (ImageButton)findViewById(R.id.btn_upset);
        ImageButton btnfrown = (ImageButton)findViewById(R.id.btn_frown);
        ImageButton btngrin = (ImageButton)findViewById(R.id.btn_grin);
        ImageButton btngasp = (ImageButton)findViewById(R.id.btn_gasp);
        ImageButton btnglass = (ImageButton)findViewById(R.id.btn_glasses);
        ImageButton btnunsure = (ImageButton)findViewById(R.id.btn_unsure);
        ImageButton btndevil = (ImageButton)findViewById(R.id.btn_devil);
        ImageButton btnheart = (ImageButton)findViewById(R.id.btn_heart);
        ImageButton btnpacman = (ImageButton)findViewById(R.id.btn_pacman);
        ImageButton btn42 = (ImageButton)findViewById(R.id.btn_42);


        btnSmile.setOnClickListener(this);
        btnkiss.setOnClickListener(this);
        btnwink.setOnClickListener(this);
        btncry.setOnClickListener(this);
        btngrupy.setOnClickListener(this);
        btnupset.setOnClickListener(this);
        btnfrown.setOnClickListener(this);
        btngrin.setOnClickListener(this);
        btngasp.setOnClickListener(this);
        btnglass.setOnClickListener(this);
        btnunsure.setOnClickListener(this);
        btndevil.setOnClickListener(this);
        btnheart.setOnClickListener(this);
        btnpacman.setOnClickListener(this);
        btn42.setOnClickListener(this);




    }



    @Override
    public void onClick(View v) {


        switch (v.getId()) {

        case R.id.btn_smile:
            cht.setMyText(":-)");
            break;

        case R.id.btn_kiss:
            cht.setMyText(":-*");
            break;

        case R.id.btn_wink:
            cht.setMyText(";-)");
            break;

        case R.id.btn_cry:
            cht.setMyText(":'(");
            break;

        case R.id.btn_grumpy:
            cht.setMyText(">:-(");
            break;

        case R.id.btn_upset:
            cht.setMyText(">:-O");
            break;

        case R.id.btn_frown:
            cht.setMyText(":-(");
            break;

        case R.id.btn_tougn:
            cht.setMyText(":-p");
            break;

        case R.id.btn_grin:
            cht.setMyText(":-D");
            break;

        case R.id.btn_gasp:
            cht.setMyText(":-O");
            break;

        case R.id.btn_glasses:
            cht.setMyText("8-)");
            break;

        case R.id.btn_unsure:
            cht.setMyText(":-/");
            break;

        case R.id.btn_devil:
            cht.setMyText("3:-)");
            break;

        case R.id.btn_heart:
            cht.setMyText("<3");
            break;

        case R.id.btn_pacman:
            cht.setMyText(":v");
            break;

        case R.id.btn_42:
            cht.setMyText(":42:");
            break;

        default:
            Toast.makeText(con, "Sorryyyyyy", Toast.LENGTH_SHORT).show();
            break;
        }

        dismiss();
    }
}

//==================

Image of When Click button for smiley menu at runtime

enter image description here

=====================================================

Try this May be Help for You.. Best luck..

My question was about to improve speed on message listview, because list adapter must find smileys every time a message is displayed. I have implemented some kind of cache but user can change font size on application configuration and i recalculate the smiley sizes so they have same height as text. Thanks anyway! — Igor, Aug 01 '12 at 12:16

ImageSpan on EditText (smileys). With SwiftKey Keyboard doesnt work

4 Answers4

In XML File Of Smileys put Image Button

Linked