Images (smilies) in a TextView in a ListView

Question

So I've been searching a long time for this, trying out a lot of stuff, but it doesn't seem to work... I've recently started programming for Android, and I'm making a chat-application for a website.

Now I've come to a point where I want to add smileys/emoticons to the application, and by searching I found these websites: http://blog.stylingandroid.com/archives/177 http://www.coderanch.com/t/488673/Android/Mobile/styling-items-ListView

My code:

private void updateList()
{
    ListView list = this.getListView();

    if(!parsedData.isEmpty())
    {
        ArrayAdapter<String> adapter = new MyAdapter(this, R.layout.list_item, parsedData);

    list.setAdapter(adapter);
    list.setTextFilterEnabled(true);
    }
}

class MyAdapter extends ArrayAdapter<String>
{
    ArrayList<String> mStrings;
    LayoutInflater mInflater; 

    public MyAdapter(Context context, int textViewResourceId, ArrayList<String> parsedData)
    {
        super(context, textViewResourceId, parsedData);
        mStrings = parsedData;
        mInflater = (LayoutInflater) HopeloosChatActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        if (convertView == null)
        {
            convertView = mInflater.inflate(R.layout.main, null, false);  
        }

        TextView text = (TextView)convertView.findViewById(R.id.TextView);
        SpannableStringBuilder ssb = new SpannableStringBuilder("Test  ");
        Bitmap emoticon = BitmapFactory.decodeResource( getResources(), R.drawable.icon);
        ssb.setSpan(new ImageSpan(emoticon), 5, 6, Spannable.SPAN_INCLUSIVE_INCLUSIVE); 
        text.setText(ssb, BufferType.SPANNABLE);

        return convertView;
    }
}

I do use setContentView(R.layout.main); in the OnCreate()-method

My main.xml contains the ListView part:

<ListView android:id="@android:id/list" android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" />

And list_item.xml contains the TextView:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/TextView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:textSize="16sp"
android:autoLink="web"
android:linksClickable="true" >
</Textview>

When I run my code, I get a Nullpointer because text is null, and I'm kinda stuck. Could anyone point me in the right direction or help me a bit?

Thanks in advance!

I am doing something similar HERE!!! http://stackoverflow.com/questions/16768930/implementations-of-emoji-emoticon-view-keyboard-layouts — Etienne Lawlor, May 27 '13 at 16:56

score 1 · Answer 1 · answered Aug 04 '12 at 05:29

First take one hash map like below:

private static final HashMap<String, Integer> emoticons = new HashMap<String, Integer>();
static {
  emoticons.put(":)", R.drawable.smilie1);}

secondly, write function to convert smiley text to image

// Get image for each text smiles
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;
    }

Thirdly, when you send text,red all text and if it contains ":)" then call function like below

chattext.(getSmiledText(getApplicationContext(),":)"));

Hope it helps! Let me know if you have any doubts.

Thanks for your answer, but it worked immediatly when I just changed the view part. I'm still going to use this tho! Also I'm implementing Emoji's, so I'd have to put like 800+ smileys in the hashmap :P — Tregan, Aug 04 '12 at 08:53

Cat · Accepted Answer · 2012-08-04T01:15:13.127

0

You are inflating convertView using R.layout.main:

convertView = mInflater.inflate(R.layout.main, null, false);

This isn't right; you're inflating your ListView's layout each time. Use this instead:

convertView = mInflater.inflate(R.layout.list_item, null, false);

~~Additionally, your TextView should be wrapped in a layout, or convertView may be the TextView itself, and findViewById(...) won't work on it.~~ Actually, thanks to @Jens, this crossed-out text doesn't apply; using findViewById on the same object you're looking for will still work.

edited Aug 04 '12 at 01:15

answered Aug 04 '12 at 00:46

Cat

66,919
24
133
141

1

Yeah, he already checks `if (convertView == null)` before creating a new one. – Cat Aug 04 '12 at 01:09
The only thing Eric is wrong about is the `findViewById(..)` bit - it works just fine if invoked on a `View` that has the requested id - it will just return **itself**. – Jens Aug 04 '12 at 01:13
@Jens Ah, good to know. I wasn't sure of that (I always wrap in layouts) so I just wanted to make sure the OP didn't make that mistake. I'll correct my post. – Cat Aug 04 '12 at 01:14
You should always avoid adding pointless layouts (i.e. ViewGroup:s) if you can - hell, in most cases your "main" layout can be a big old `` - unless you are messing with size of the layout (i.e. not `match_parent` or a specific background). – Jens Aug 04 '12 at 01:16
Thanks a lot Eric, how could I have missed that haha :P – Tregan Aug 04 '12 at 08:46

Images (smilies) in a TextView in a ListView

2 Answers2