How Add and delete the Contact Bubbles properly in

Question

i am struggling alot with adding the Bubbles to to field like in gmail or facebook messanger. please look into this picture below..

So for the implementation of above picture i did some work using this sample project they have given code for the implementation but i need to divide the each Bubbles with space that means i used space tokenizer. then its works fine but my problem is if i am keep on adding the contacts in the to field generally in gmail to field is moving up and listview of contacts list showing completely. but in my case listview is not showing after adding the max contacts and also if i add big length of contacts name automatically it is adding multiple Bubbles for that name. and one more problem is in 2.2 version mobile i am unable to see the cursor between or after the contact Bubble. Manually i need to click on contact Bubbles . I found the some news from this link but I am unable to import the complete code from this https://android.googlesource.com/platform/frameworks/ex/+/refs/heads/master/chips. so many dependences are there and all the projects are importing. Please let me know any solution for the above problem. If any sample also please post here..

Answer 1

I open-sourced our solution TokenAutoComplete on github. Mine has been tested back to 2.2. I designed my code to allow pretty simple implementations and customizations. I'm not sure if this quite answers your question, but it might be a better starting point than the chips source code.

Here's an example implementation using my library:

Subclass TokenCompleteTextView

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", "[e-mail]"),
                new Person("Margaret Smith", "[e-mail]"),
                new Person("Max Jordan", "[e-mail]"),
                new Person("Meg Peterson", "[e-mail]"),
                new Person("Amanda Johnson", "[e-mail]"),
                new Person("Terry Anderson", "[e-mail]")
        };

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

        completionView = (ContactsCompletionView)findViewById(R.id.searchView);
        completionView.setAdapter(adapter);
        completionView.setPrefix("To: ");
    }
}

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>