Emoticon/Smiley Selector

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Emoticon/Smiley Selector

Postby 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.

Image

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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TableLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:layout_width="fill_parent"
  5. android:layout_height="wrap_content"
  6. android:stretchColumns="1"
  7. >
  8.  
  9. <TableRow>
  10.  
  11.     <ImageView
  12.    android:id = "@+id/icon_smiley"
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:paddingRight = "10dip"
  16.         android:layout_gravity = "center">
  17.     </ImageView>
  18.      
  19.   <TextView
  20.  android:id = "@+id/text_smiley_label"
  21.  android:textSize = "22sp"
  22.  android:textColor="#FF000000"
  23.  android:layout_width= "fill_parent"
  24.  android:layout_height="wrap_content"
  25.  android:paddingTop="20dip"
  26.  android:paddingBottom="20dip">
  27.   </TextView>
  28.  
  29.   <TextView
  30.  android:id = "@+id/text_smiley_shortcut"
  31.  android:textSize = "22sp"
  32.  android:paddingRight="10dip"
  33.  android:textColor="#FF000000"
  34.  android:layout_width= "fill_parent"
  35.  android:layout_height="wrap_content"
  36.  android:paddingTop="20dip"
  37.  android:paddingBottom="20dip">
  38.   </TextView>    
  39.  
  40. </TableRow>
  41. </TableLayout>
  42.  
  43.  
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
  1. //create the arrays for the rows
  2.  
  3.         private final int[] _intSmileyEmoticons = new int[] {                   R.drawable.emo_im_happy,R.drawable.emo_im_sad,R.drawable.emo_im_winking,
  4.                 R.drawable.emo_im_tongue_sticking_out,R.drawable.emo_im_surprised,R.drawable.emo_im_kissing,
  5.                 R.drawable.emo_im_yelling,R.drawable.emo_im_cool,R.drawable.emo_im_money_mouth,
  6.                 R.drawable.emo_im_foot_in_mouth,R.drawable.emo_im_embarrassed,R.drawable.emo_im_angel,
  7.                 R.drawable.emo_im_undecided,R.drawable.emo_im_crying,R.drawable.emo_im_lips_are_sealed,
  8.                 R.drawable.emo_im_laughing,R.drawable.emo_im_wtf        };
  9.  
  10.         private final String[] _strEmoticonLabels = new String[] { "Happy", "Sad", "Winking", "Tongue sticking out",
  11.                 "Surprised", "Kissing", "Yelling", "Cool", "Money Mouth", "Foot in mouth", "Embarrased", "Angel",
  12.                 "Undecided", "Crying", "Lips are sealed", "Laughing", "Confused" };
  13.  
  14.         private final String[] _strShortcuts = new String[] {
  15.                 ":-)",":-(",";-)",":-P","=-O",":-*",":O","B-)",
  16.                 ":-$",":-!",":-[","O:-)",":-\\", ":'(",":-X",":-D",
  17.                 "o_O" };
  18.  
Parsed in 0.037 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
  1.                 // create the menu by creating an AlertDialog
  2.                 Builder builder = new AlertDialog.Builder(this);
  3.                 builder.setTitle("Insert Smiley");
  4.                
  5.                  // create the rows of the smiley list
  6.                 List<Map<String,Object>> objRows = new ArrayList<Map<String,Object>>();
  7.                         for (int i = 0; i < _intSmileyEmoticons.length; i++) {
  8.                         objRows.add(createIconDetailListItemMap(_intSmileyEmoticons[i],                        _strEmoticonLabels[i],_strShortcuts[i]));
  9.                         }
  10.                        
  11.                         // set up SimpleAdapter for icon_detail_list_item
  12.                        // need a key item list, its sorta like a hashtable
  13.  
  14.                         String[] strKeys = new String[] { "icon", "label" , "shortcut"};
  15.                         int[] intViewIds = new int[] { R.id.icon_smiley,  R.id.text_smiley_label, R.id.text_smiley_shortcut};
  16.                         SimpleAdapter objEmoticonList = new SimpleAdapter(this, objRows,R.layout.emoticon_list_item, strKeys, intViewIds);
  17.                 builder.setAdapter(objEmoticonList , this);
  18.                 builder.show();
  19.  
  20.  
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
  1.  public Map<String, Object> createIconDetailListItemMap(int intIcon,
  2.                         CharSequence strLabel, CharSequence strShortcut) {
  3.                 Map<String, Object> objRow = new HashMap<String, Object>();
  4.                 objRow.put("icon", intIcon);
  5.                 objRow.put("label", strLabel);
  6.                 objRow.put("shortcut", strShortcut);
  7.                 return objRow;
  8.         }
  9.  
Parsed in 0.035 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
  1. // Implemented the functions
  2. ... Activity implements android.content.DialogInterface.OnClickListener ...
  3.  
  4. // OnClickMethod that responds to dialog interface clicks
  5.  
  6.         public void onClick(DialogInterface objDialogInterface, int intListPosition) {
  7.                        
  8.                 // ---- make new message with emoticon ----
  9.                 int intPosition = _tbxEditMessage.getSelectionStart();
  10.                // do actions with the selected emoticon
  11.                 Log.d("Emoticon/Smiley Selector", "you clicked emoticon listitem #" +  intPosition);
  12.         }
  13.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


And thats it!
User avatar
DMacATTACK
Experienced Developer
Experienced Developer
 
Posts: 58
Joined: Thu Dec 31, 2009 6:31 pm
Location: Canada

Top

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 7 guests