Emoticon/Smiley Selector

DMacATTACK · by **DMacATTACK** » Sat Jan 15, 2011 1:24 am

Hey all,
Time for a real tutorial in this section. While developing an app I ran into the problem where I wanted to insert an Emoticon/Smiley

into my text similar to how the messaging app works.

I found the best way is to generate a ListView with all the data. We notice that each row is comprised of an icon, a description and its equivalent key-combination. So we create some xml for the row.
called emoticon_list_item.xml . I like to use tables, and you can change the padding how you see fit.

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
>
 
<TableRow>
 
    <ImageView
    android:id = "@+id/icon_smiley"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight = "10dip"
        android:layout_gravity = "center">
    </ImageView>
      
  <TextView
  android:id = "@+id/text_smiley_label"
  android:textSize = "22sp"
  android:textColor="#FF000000"
  android:layout_width= "fill_parent"
  android:layout_height="wrap_content"
  android:paddingTop="20dip"
  android:paddingBottom="20dip">
  </TextView>
  
  <TextView
  android:id = "@+id/text_smiley_shortcut"
  android:textSize = "22sp"
  android:paddingRight="10dip"
  android:textColor="#FF000000"
  android:layout_width= "fill_parent"
  android:layout_height="wrap_content"
  android:paddingTop="20dip"
  android:paddingBottom="20dip">
  </TextView>     
 
</TableRow>
</TableLayout>
 
 
Parsed in 0.004 seconds,  using GeSHi 1.0.8.4

So this means we're going to need the image resources of the emoticons, instead of print-screening them or whatever, you can get the emoticons from your own SDK. Theres a few folders they exist in, this is one:

C:\Program Files\android-sdk-windows\platforms\android-5\data\res\drawable-hdpi
They are called:

emo_im_happy
emo_im_sad
emo_im_winking,
emo_im_tongue_sticking_out
emo_im_surprised
emo_im_kissing,
emo_im_yelling
emo_im_cool
emo_im_money_mouth,
emo_im_foot_in_mouth
emo_im_angel
emo_im_undecided
emo_im_crying
emo_im_lips_are_sealed
emo_im_laughing
emo_im_wtf

Ordinarily you can reference them from this folder using R.android.drawable.emo_im_happy, but they're not public so you you need to copy them to your drawables folder.

Weirdly enough this is 16 emoticons, but there's 17 in the messaging application's "Add Smiley". We're missing the embarrassed emoticon. For whatever reason its not in the same folder, Its actually in :
C:\Program Files\android-sdk-windows\platforms\android-5\data\res\drawable
and its called:

emo_im_embarrassed

You may have to scale it up to the same size as your other drawables. You can actually notice this too in the Messaging application, the embarrassed emoticon is fuzzy. Weird eh?

Moving onto the code.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

//create the arrays for the rows
 
        private final int[] _intSmileyEmoticons = new int[] {                   R.drawable.emo_im_happy,R.drawable.emo_im_sad,R.drawable.emo_im_winking, 
                R.drawable.emo_im_tongue_sticking_out,R.drawable.emo_im_surprised,R.drawable.emo_im_kissing,
                R.drawable.emo_im_yelling,R.drawable.emo_im_cool,R.drawable.emo_im_money_mouth,
                R.drawable.emo_im_foot_in_mouth,R.drawable.emo_im_embarrassed,R.drawable.emo_im_angel,
                R.drawable.emo_im_undecided,R.drawable.emo_im_crying,R.drawable.emo_im_lips_are_sealed,
                R.drawable.emo_im_laughing,R.drawable.emo_im_wtf        };
 
        private final String[] _strEmoticonLabels = new String[] { "Happy", "Sad", "Winking", "Tongue sticking out", 
                "Surprised", "Kissing", "Yelling", "Cool", "Money Mouth", "Foot in mouth", "Embarrased", "Angel",
                "Undecided", "Crying", "Lips are sealed", "Laughing", "Confused" };
 
        private final String[] _strShortcuts = new String[] {
                ":-)",":-(",";-)",":-P","=-O",":-*",":O","B-)",
                ":-$",":-!",":-[","O:-)",":-\\", ":'(",":-X",":-D",
                "o_O" };
 
Parsed in 0.036 seconds,  using GeSHi 1.0.8.4

On some button event or whatever (one that you wish to launch the emoticon selector)

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

                // create the menu by creating an AlertDialog
                Builder builder = new AlertDialog.Builder(this);
                builder.setTitle("Insert Smiley");
                
                 // create the rows of the smiley list
                List<Map<String,Object>> objRows = new ArrayList<Map<String,Object>>();
                        for (int i = 0; i < _intSmileyEmoticons.length; i++) {
                        objRows.add(createIconDetailListItemMap(_intSmileyEmoticons[i],                        _strEmoticonLabels[i],_strShortcuts[i]));
                        }
                        
                        // set up SimpleAdapter for icon_detail_list_item
                       // need a key item list, its sorta like a hashtable
 
                        String[] strKeys = new String[] { "icon", "label" , "shortcut"};
                        int[] intViewIds = new int[] { R.id.icon_smiley,  R.id.text_smiley_label, R.id.text_smiley_shortcut};
                        SimpleAdapter objEmoticonList = new SimpleAdapter(this, objRows,R.layout.emoticon_list_item, strKeys, intViewIds);
                builder.setAdapter(objEmoticonList , this);
                builder.show();
 
 
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

This used a function I created called createIconDetailListItemMap, which is:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 public Map<String, Object> createIconDetailListItemMap(int intIcon,
                        CharSequence strLabel, CharSequence strShortcut) {
                Map<String, Object> objRow = new HashMap<String, Object>();
                objRow.put("icon", intIcon);
                objRow.put("label", strLabel);
                objRow.put("shortcut", strShortcut);
                return objRow;
        }
 
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

So by now the dialog will pop up and look how we want it, so next we need to implement some kind of click listener. You can put it in when creating the Dialog, but I like to implement it in the class.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

// Implemented the functions
... Activity implements android.content.DialogInterface.OnClickListener ...
 
// OnClickMethod that responds to dialog interface clicks
 
        public void onClick(DialogInterface objDialogInterface, int intListPosition) {
                        
                // ---- make new message with emoticon ----
                int intPosition = _tbxEditMessage.getSelectionStart();
               // do actions with the selected emoticon
                Log.d("Emoticon/Smiley Selector", "you clicked emoticon listitem #" +  intPosition);
        } 
 
Parsed in 0.035 seconds,  using GeSHi 1.0.8.4

And thats it!

Emoticon/Smiley Selector

Emoticon/Smiley Selector

Who is online