Making GoSmsPro/Evernote like EditText

The first thing that user notes in your app is User Interface(how it looks) and of course it matters . Keeping those things on my mind I tried to implement EditText with TextView with some pleasing background which itself tells the user that it can be touched and when get touched it will be deleted. Something like this

Yes,I am exactly talking about what GoSmsPro or Evernote app has done before for better user experience.Recently, I implemented this kind of UI in my app Sms Scheduler which you can find in Google play. Here are the steps how you can implement in your app.

Create a TextView Dynamically

public TextView createContactTextView(String text){
  TextView tv = new TextView(this);
  tv.setText(text);
  tv.setTextSize(20);
  tv.setBackgroundResource(R.color.bubble);
  tv.setCompoundDrawablesWithIntrinsicBounds(0, 0,android.R.drawable.presence_offline, 0);
  return tv;
}

where bubble is xml file which should be in res/color folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <stroke android:width="1dp" android:color="#A6B0B8" />
	<gradient android:startColor="#E5E5E6"
		android:endColor="#B4B6B7"
		android:angle="-270"/>
	<corners  android:bottomRightRadius="10dp" 
            android:bottomLeftRadius="10dp"
            android:topLeftRadius="10dp" 
            android:topRightRadius="10dp"></corners>
</shape>

Convert TextView to drawable

public static Object convertViewToDrawable(View view) {
  int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
  view.measure(spec, spec);
  view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
  Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(),
            Bitmap.Config.ARGB_8888);
  Canvas c = new Canvas(b);
  c.translate(-view.getScrollX(), -view.getScrollY());
  view.draw(c);
  view.setDrawingCacheEnabled(true);
  Bitmap cacheBmp = view.getDrawingCache();
  Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
  view.destroyDrawingCache();
  return new BitmapDrawable(viewBmp);

}

How to make bubble clickable

you have to add few lines of code before setting it on edit-text. Beside Image Span you also have to set clickable Span something like this

 ClickableSpan clickSpan = new ClickableSpan() {

			@Override
			public void onClick(View view) { 
				Log.v("clicked", view.getClass().getSimpleName());

				int i = ((EditText) view).getSelectionStart();
				int j = ((EditText) view).getSelectionEnd();
				phoneNum.getText().replace(Math.min(i, j ),
						Math.max(i, j ), "", 0, "".length());
				
			}

		};
		sb.setSpan(clickSpan, sb.length() - contactname.length(),
				sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Note: you have to set MovementMethod to LinkMovementMethod for ClickableSpan to work something like this

to_input.setMovementMethod(LinkMovementMethod.getInstance());

finally you implement like this

final SpannableStringBuilder sb = new SpannableStringBuilder();
TextView tv = createContactTextView(contactName);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(),bd.getIntrinsicHeight());

sb.append(contactName + ",");
sb.setSpan(new ImageSpan(bd), sb.length()-(contactName.length()), sb.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
to_input.setMovementMethod(LinkMovementMethod.getInstance());
sb.setSpan(clickSpan, sb.length() - contactname.length(),
				sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
to_input.setText(sb);

The final output look like

If you find difficult to implement the concept,I have pushed the source code in github
enjoy with android 🙂

Advertisements

24 thoughts on “Making GoSmsPro/Evernote like EditText

  1. Pingback: Android making edit text like go sms pro or making clickable image span « Life,Love,God,Health,Wealth,Happiness

  2. Good stuff – really helpful! One possible improvement is that I don’t think much of the code in convertViewToDrawable is necessary. I think you just need the following

    int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    view.measure(spec, spec);
    view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

    view.setDrawingCacheEnabled(true);
    return new BitmapDrawable(view.getDrawingCache());

      • i didn’t get you. what you mean, resetting drop down list? you mean you want to remove the contact from dropdown list after sending message to that contact? can you explain lil more?

  3. ok i will do that. I need your help again!if i enter a number in my autocomplete and not a name,then when i prees comma”,” the number will show in my autocomplete with she shape …but how can i get this number?and if i put many numbers how can i get all this numbers ?thank u!:)

    • just Single line solve your problem
      String comma_seperated_number=edittext.getText().toString();
      Now you can split string like this
      String [] numbers = comma_seperated_number.split(“,”);
      Now number has all the number that you have in EditText.
      cheers

  4. I’ve got all the numbers now, but i need when i press comma “,” get the number written in my autocomplete and put it in a textview…(i’m using your multiautocomplete class and i need to keep the number inside a shape)thank you again

    • you can’t help me anymore?or what?pl really i need your help i’m in bad situation in my work.and this is the last thing i need so really i need your help!!!Thank you

      • was really busy on my side too. Bdw its very easy. you can check comma press in TextWatcher define in the CustomMultiAutoCompleteTextView . when user press comma you should get enter number by method getText()and set to your TextView.

  5. That Great,
    I follow your code, but when I run on android sdk version < 11, the Image was duplicate. It mean that 2 "sadsadad with x image" was appeared. Could you please give me some advices sir.
    Thanks,

  6. Thanks for sharing this tutorial…This is exactly what I was looking for….However, my project will be completed if you give some idea about deleting the whole span along with the “,” when backspace is pressed…??

  7. Hi Krishna! How to set contacts names more than one for once from checkbox list view. For example I select Marry, John, Michael click button “Ok” and then it shows in editText with separate backgrounds!!! Sorry for bad English.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s