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