Android Labels or Bubbles in EditText

Question

Can someone point me in the right direction how to make these bubbles or labels in EditText, something like the ones you see when you want to create something in Stream for Google+ when you add a circle or contact? A rectangle is an automatic full text.

Answer 1

What you show is the same behavior as the SMS stock app. Find the code here to find out how.

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 too . Here is the basic implementation of the demo application:

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 (here you can use any kind of layout or you can embed ImageView if you want images in a 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 Return Hole

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

Activity Example

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

Layout format

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

Answer 3

You can do this by subclassing android.text.style.DynamicDrawableSpan . ImageSpan is an example of this: it replaces the range (range) of text with an image.

In this example, an asterisk will be placed in the edit box, replacing the text "test". Create an EditText in your layout with the identifier "text" and put it in onCreate() (or anywhere):

  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 did not see classes that looked as if they could wrap normal text in drawable, but this is pretty easy to solve by overriding the getDrawable() method and making the text itself.

Answer 4

I decided it 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; } 

Answer 5

If you mean hints, you can add simply:

 android:hint="@string/myHint" 

This will mark the gray mark in the EditText when it is empty.

Answer 6

To set the circle icon on the left side of the EditText , you can change the leftDrawable .

You can do this in the android:drawableRight="@drawable/search_icon" layout XML file android:drawableRight="@drawable/search_icon" or programmatically using the setCompoundDrawablesWithIntrinsicBounds function.

If you also want to create a bubble style, you must change the return line, which can be cut with 9-patch , which have a style. here you have a tutorial for the 9-patch bubble for google maps.

Hope this helps! :)

Answer 7

I think it uses the setCompoundDrawables () method to insert this image inside the edit text

Answer 8

I decided to return something to the community and created a library that aims to solve this exact problem. The library along with a sample project is available for GitHub: https://github.com/RafalManka/BubbleEditText