Android Labels or Bubbles in EditText

Question

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

Answer 1

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.

Answer 2

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>