studio - Etiquetas de Android o Burbujas en EditText

missing accessibility label where min sdk 17 you should provide an android hint

Question

¿Puede alguien, por favor, indicarme en la dirección correcta cómo hacer esas burbujas o etiquetas en el texto de edición algo como las que ve cuando quiere componer algo en Stream para Google+ cuando agrega un círculo o contacto? El rectángulo es un texto de edición completamente automático.

Answer 1

Construí TokenAutoComplete en github para resolver un problema similar y debería funcionar para ti también. Aquí hay una implementación básica de una aplicación de demostración:

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

Código de diseño para contact_token (puedes usar cualquier tipo de diseño aquí o puedes lanzar un ImageView si quieres imágenes en el 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>

Código de objeto de persona

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

Actividad de muestra

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

Codigo de diseño

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

Creo que usa el método setCompoundDrawables () para insertar esa imagen dentro del texto de edición

Answer 3

Decidí devolver algo a la comunidad y creé una biblioteca que tiene como objetivo resolver este problema exacto que tiene. La biblioteca junto con el proyecto de ejemplo está disponible en GitHub: https://github.com/RafalManka/BubbleEditText

Answer 4

Lo que está mostrando es el mismo comportamiento que la aplicación de acciones de SMS. Busque el código here para ver cómo se hace.

EDITAR:

El código debe estar en platform_packages_apps_mms . Echa un vistazo a la clase RecipientsEditor .

Answer 5

Para establecer el ícono del círculo a la izquierda de EditText puede cambiar el leftDrawable .

Puede hacerlo en el archivo xml de diseño android:drawableRight="@drawable/search_icon" o mediante programación utilizando la función setCompoundDrawablesWithIntrinsicBounds .

Si también desea dar el estilo de burbuja, debe cambiar el dibujo de fondo por un 9-patch que tenga el estilo. here tienes un tutorial para una burbuja de 9 parches para google maps.

Espero que haya ayudado! :)

Answer 6

Puedes hacer esto creando una subclase de android.text.style.DynamicDrawableSpan . ImageSpan es un ejemplo de esto: reemplaza un intervalo (rango) de texto con una imagen.

Este ejemplo pondrá una estrella en un campo de edición, reemplazando el texto "prueba". Cree un EditText en su diseño con el id del "texto" y póngalo en onCreate() (o donde sea):

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

No vi ninguna clase que pareciera que pudieran envolver el texto normal en un dibujo, pero eso podría resolverse fácilmente al reemplazar el método getDrawable() y al renderizar el texto usted mismo.

Answer 7

Si te refieres a las sugerencias, puedes agregar simplemente con:

android:hint="@string/myHint"

Esto pondrá la etiqueta gris en el EditText cuando esté vacío.

Answer 8

Resolví esto AQUÍ Contacto 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;
}