CODEWITHSUNDEEP
androidandroid-edittext
Maurice
Maurice

Reputation: 6433

Android Labels or Bubbles in EditText

enter image description hereCan someone please point me in the right direction how to do those bubbles or labels in the EditText something like those you see when you want to compose something in Stream for Google+ when you add a circle or contact? The Rectangle is an auto complete edittext.

Upvotes: 54

Views: 23998

Answers (8)

RafalManka
RafalManka

Reputation: 366

I decided to give something back to the community and created library that is aimed to solve this exact problem You have. The library along with example project is availeable on GitHub: https://github.com/RafalManka/BubbleEditText

Upvotes: -1

Marshall Weir
Marshall Weir

Reputation: 463

I built TokenAutoComplete on github to solve a similar problem and it should work for you as well. Here's a basic implementation of a demo app:

public class ContactsCompletionView extends TokenCompleteTextView {
    public ContactsCompletionView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected View getViewForObject(Object object) {
        Person p = (Person)object;

        LayoutInflater l = (LayoutInflater)getContext().getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        LinearLayout view = (LinearLayout)l.inflate(R.layout.contact_token, (ViewGroup)ContactsCompletionView.this.getParent(), false);
        ((TextView)view.findViewById(R.id.name)).setText(p.getEmail());

        return view;
    }

    @Override
    protected Object defaultObject(String completionText) {
        //Stupid simple example of guessing if we have an email or not
        int index = completionText.indexOf('@');
        if (index == -1) {
            return new Person(completionText, completionText.replace(" ", "") + "@example.com");
        } else {
            return new Person(completionText.substring(0, index), completionText);
        }
    }
}

Layout code for contact_token (you can use any kind of layout here or could throw an ImageView in if you want images in the token)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content">

    <TextView android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/token_background"
        android:padding="5dp"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

</LinearLayout>

Token backgound drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#ffafafaf" />
    <corners
        android:topLeftRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomRightRadius="5dp" />
</shape>

Person object code

public class Person implements Serializable {
    private String name;
    private String email;

    public Person(String n, String e) { name = n; email = e; }

    public String getName() { return name; }
    public String getEmail() { return email; }

    @Override
    public String toString() { return name; }
}

Sample activity

public class TokenActivity extends Activity {
    ContactsCompletionView completionView;
    Person[] people;
    ArrayAdapter<Person> adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        people = new Person[]{
                new Person("Marshall Weir", "[email protected]"),
                new Person("Margaret Smith", "[email protected]"),
                new Person("Max Jordan", "[email protected]"),
                new Person("Meg Peterson", "[email protected]"),
                new Person("Amanda Johnson", "[email protected]"),
                new Person("Terry Anderson", "[email protected]")
        };

        adapter = new ArrayAdapter<Person>(this, android.R.layout.simple_list_item_1, people);

        completionView = (ContactsCompletionView)findViewById(R.id.searchView);
        completionView.setAdapter(adapter);
    }
}

Layout code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.tokenautocomplete.ContactsCompletionView
        android:id="@+id/searchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

Upvotes: 8

Etienne Lawlor
Etienne Lawlor

Reputation: 6687

I solved this HERE Contact Bubble EditText

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 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);

}

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;
}

Upvotes: 4

Steve Pomeroy
Steve Pomeroy

Reputation: 10129

You can do this by creating a subclass of android.text.style.DynamicDrawableSpan. ImageSpan is an example of this: it replaces a span (range) of text with an image.

This example will put an a star in an edit field, replacing the text "test". Create an EditText in your layout with the id of "text" and put this in onCreate() (or wherever):

    EditText mText = (EditText) findViewById(R.id.text);
    final Editable e = mText.getEditableText();
    final SpannableStringBuilder sb = new SpannableStringBuilder();
    sb.append("test");
    sb.setSpan(new ImageSpan(this, android.R.drawable.btn_star), 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    e.append(sb);

I didn't see any classes that looked like they could wrap normal text in a drawable, but that could be pretty easily solved by overriding the getDrawable() method and rendering the text yourself.

Upvotes: 4

Kiran Babu
Kiran Babu

Reputation: 1893

I think it use setCompoundDrawables() method to insert that picture inside edit text

Upvotes: 0

Macarse
Macarse

Reputation: 93143

What you are showing is the same behavior as the SMS stock application. Search for the code here to see how it's done.

EDIT:

The code should be in platform_packages_apps_mms. Take a look at the RecipientsEditor class.

Upvotes: 18

Jordi Coscolla
Jordi Coscolla

Reputation: 1066

To set the circle icon in the left of the EditText you can change the leftDrawable.

You can do it on the layout xml file android:drawableRight="@drawable/search_icon" or programmatically using the setCompoundDrawablesWithIntrinsicBounds function.

If you also want to give the bubble style, you must change the backgroud drawable by a 9-patch that have the style. here you have a tutorial for a 9-patch bubble for google maps.

Hope it helped! :)

Upvotes: 0

brianestey
brianestey

Reputation: 8302

If you mean the hints, you can add the simply with:

android:hint="@string/myHint"

This will put the grey label in the EditText when it is empty.

Upvotes: 0

Related Questions