Contact Bubble Edittext

Contact Bubble EditText

Thanks @chrish for all the help. So here is how i did it:

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()+1), sb.length()-1,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
to_input.setText(sb);

public TextView createContactTextView(String text){
  //creating textview dynamically
  TextView tv = new TextView(this);
  tv.setText(text);
  tv.setTextSize(20);
  tv.setBackgroundResource(R.drawable.oval);
  tv.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_clear_search_api_holo_light, 0);
  return tv;
}

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 do I hide of Bubble cursor on EditText?

It's called text select handle.

There is a tricky way to hide it: replace with an 0px transparent drawable in your style.xml.

drawable/zero_px_transparent.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
     <size android:height="0dp" android:width="0dp"/>
 </shape>

And modify your style.xml:

<style name="CustomTheme" parent="@android:style/Theme.Holo.Light">
     <item name="android:textSelectHandleLeft">@drawable/zero_px_transparent</item>
     <item name="android:textSelectHandleRight">@drawable/zero_px_transparent</item>
     <item name="android:textSelectHandle">@drawable/zero_px_transparent</item>
</style>

Turn Words Inside an EditText Into a Contact Icon

They are called chips.

Here are some libraries that might do the trick:
https://github.com/DoodleScheduling/android-material-chips
https://github.com/klinker41/android-chips

How to change EditText bubble color (under cursor) in android?

Change the color in your res/values/styles.xml. The bubble uses colorAccent:

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
    <!-- Other theme overrides here -->
    <item name="colorAccent">@color/Gray2</item>
</style>

In the above <item name="colorAccent">@color/Gray2</item> is the line where you put the color you want for your bubble.

How to change color of the bubble (under cursor) on EditText (programmatically)?

You will need to use reflection to tint the select handles (bubbles). I wrote the following class this morning:

Example usage:

try {
  EditTextTint.applyColor(editText, Color.CYAN);
} catch (EditTextTint.EditTextTintError e) {
  e.printStackTrace();
}

EditTextTint.java:

import android.content.res.Resources;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.support.annotation.ColorInt;
import android.support.annotation.NonNull;
import android.widget.EditText;
import android.widget.TextView;
import java.lang.reflect.Field;

/**
 * Tint the cursor and select handles of an {@link EditText} programmatically.
 */
public class EditTextTint {

  /**
   * Set the cursor and handle colors for an {@link EditText} programmatically.
   *
   * @param editText
   *     The {@link EditText} to tint
   * @param color
   *     The color to apply for the cursor and select handles
   * @throws EditTextTintError
   *     If an error occured while attempting to tint the view.
   */
  public static void applyColor(@NonNull EditText editText, @ColorInt int color) throws EditTextTintError {
    EditTextTint editTextTint = new Builder(editText)
        .setCursorColor(color)
        .setSelectHandleLeftColor(color)
        .setSelectHandleRightColor(color)
        .setSelectHandleMiddleColor(color)
        .build();
    editTextTint.apply();
  }

  private final EditText editText;
  private final Integer cursorColor;
  private final Integer selectHandleLeftColor;
  private final Integer selectHandleRightColor;
  private final Integer selectHandleMiddleColor;

  private EditTextTint(Builder builder) {
    editText = builder.editText;
    cursorColor = builder.cursorColor;
    selectHandleLeftColor = builder.selectHandleLeftColor;
    selectHandleRightColor = builder.selectHandleRightColor;
    selectHandleMiddleColor = builder.selectHandleMiddleColor;
  }

  /**
   * Sets the color for the cursor and handles on the {@link EditText editText}.
   *
   * @throws EditTextTintError
   *     if an error occurs while tinting the view.
   */
  public void apply() throws EditTextTintError {
    try {
      Resources res = editText.getContext().getResources();

      // Get the editor
      Field field = TextView.class.getDeclaredField("mEditor");
      field.setAccessible(true);
      Object editor = field.get(editText);

      if (cursorColor != null) {
        // Get the cursor drawable, tint it, and set it on the TextView Editor
        field = TextView.class.getDeclaredField("mCursorDrawableRes");
        field.setAccessible(true);
        int cursorDrawableRes = field.getInt(editText);
        Drawable cursorDrawable = res.getDrawable(cursorDrawableRes).mutate();
        cursorDrawable.setColorFilter(cursorColor, PorterDuff.Mode.SRC_IN);
        Drawable[] drawables = {cursorDrawable, cursorDrawable};
        field = editor.getClass().getDeclaredField("mCursorDrawable");
        field.setAccessible(true);
        field.set(editor, drawables);
      }

      String[] resFieldNames = {"mTextSelectHandleLeftRes", "mTextSelectHandleRightRes", "mTextSelectHandleRes"};
      String[] drawableFieldNames = {"mSelectHandleLeft", "mSelectHandleRight", "mSelectHandleCenter"};
      Integer[] colors = {selectHandleLeftColor, selectHandleRightColor, selectHandleMiddleColor};

      for (int i = 0; i < resFieldNames.length; i++) {
        Integer color = colors[i];
        if (color == null) {
          continue;
        }

        String resFieldName = resFieldNames[i];
        String drawableFieldName = drawableFieldNames[i];

        field = TextView.class.getDeclaredField(resFieldName);
        field.setAccessible(true);
        int selectHandleRes = field.getInt(editText);

        Drawable selectHandleDrawable = res.getDrawable(selectHandleRes).mutate();
        selectHandleDrawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);

        field = editor.getClass().getDeclaredField(drawableFieldName);
        field.setAccessible(true);
        field.set(editor, selectHandleDrawable);
      }
    } catch (Exception e) {
      throw new EditTextTintError("Error applying tint to " + editText, e);
    }
  }

  public static class Builder {

    final EditText editText;
    Integer cursorColor;
    Integer selectHandleLeftColor;
    Integer selectHandleRightColor;
    Integer selectHandleMiddleColor;

    public Builder(@NonNull EditText editText) {
      this.editText = editText;
    }

    public Builder setCursorColor(@ColorInt int cursorColor) {
      this.cursorColor = cursorColor;
      return this;
    }

    public Builder setSelectHandleLeftColor(@ColorInt int selectHandleLeftColor) {
      this.selectHandleLeftColor = selectHandleLeftColor;
      return this;
    }

    public Builder setSelectHandleRightColor(@ColorInt int selectHandleRightColor) {
      this.selectHandleRightColor = selectHandleRightColor;
      return this;
    }

    public Builder setSelectHandleMiddleColor(@ColorInt int selectHandleMiddleColor) {
      this.selectHandleMiddleColor = selectHandleMiddleColor;
      return this;
    }

    public EditTextTint build() {
      return new EditTextTint(this);
    }

  }

  public static class EditTextTintError extends Exception {

    public EditTextTintError(String message, Throwable cause) {
      super(message, cause);
    }
  }

}

Note: This should work from Jelly Bean to Nougat. However, since it uses reflection to get and set private fields this may break in future releases of Android or if a manufacturer has made changes to EditText.

How to change color of the bubble (under cursor) on EditText in Flutter

You may use the textSelectionHandleColor property.

Theme(
          data: Theme.of(context).copyWith(
            textSelectionHandleColor: Colors.green, 
          ),
          child: TextField(),
        );

Android EditText Gmail like to field

This technique -- referred to as "chips" -- is discussed by Roman Nurik in a Google+ post. He, in turn, points to Macarse's answer here on StackOverflow. They, in turn, point to the implementation of this UI that you see in the stock messaging client.

---

Related Topics