Contacto Bubble EditText

Question

Estoy tratando de crear burbujas de contacto en el MultiAutoCompleteTextView de forma similar a cómo se implementa en la aplicación de Google+. Debajo hay una captura de pantalla:

.

me han tratado de extender la clase DynamicDrawableSpan con el fin de obtener una dibujable spannable en el fondo de un fragmento de texto

public class BubbleSpan extends DynamicDrawableSpan { 
    private Context c; 

    public BubbleSpan(Context context) { 
    super(); 
    c = context; 
    } 

    @Override 
    public Drawable getDrawable() { 
    Resources res = c.getResources(); 
    Drawable d = res.getDrawable(R.drawable.oval); 
    d.setBounds(0, 0, 100, 20); 
    return d; 
    } 
} 

Donde mi oval.xml estirable por lo que se define como:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <solid android:color="#352765"/> 
    <padding android:left="7dp" android:top="7dp" 
    android:right="7dp" android:bottom="7dp" /> 
    <corners android:radius="6dp" /> 
</shape> 

En mi clase de actividad que tiene el MulitAutoCompleteTextView, que establecer el lapso de la burbuja de este modo:

final Editable e = tv.getEditableText(); 
final SpannableStringBuilder sb = new SpannableStringBuilder(); 
sb.append("some sample text"); 
sb.setSpan(new BubbleSpan(getApplicationContext()), 0, 6, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
e.append(sb); 

Sin embargo, en lugar de la forma ovalada que se muestra detrás de los primeros 6 caracteres en la cadena, los caracteres no son visibles y no hay un dibujo ovalado en el fondo.

si cambio el método de BubbleSpan getDrawable() para utilizar un .png en lugar de una forma estirable:

public Drawable getDrawable() { 
    Resources res = c.getResources(); 
    Drawable d = res.getDrawable(android.R.drawable.bottom_bar); 
    d.setBounds(0, 0, 100, 20); 
    return d; 
} 

Entonces el .png se mostrará, pero los caracteres de la cadena que son una parte de la span no aparecerá. ¿Cómo puedo hacerlo para que los caracteres del tramo se muestren en primer plano, mientras tanto, se visualiza un dibujable de forma personalizada en el fondo?

Intenté utilizar también un ImageSpan en lugar de crear subclases DynamicDrawableSpan pero no tuve éxito.

Answer 1

Gracias @chrish por toda la ayuda.Así que aquí está cómo lo hice:

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

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

} 

Answer 2

Aquí es una solución completa para usted

//creating textview dynamicalyy 
TextView textView=new TextView(context); 
textview.setText("Lauren amos"); 
textview.setbackgroundResource(r.color.urovalshape); 
textView.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.icon_cross, 0); 


BitmapDrawable dd = (BitmapDrawable) SmsUtil.getDrawableFromTExtView(textView); 
edittext.settext(addSmily(dd)); 

//convert image to spannableString 
public SpannableStringBuilder addSmily(Drawable dd) { 
dd.setBounds(0, 0, dd.getIntrinsicWidth(),dd.getIntrinsicHeight()); 
SpannableStringBuilder builder = new SpannableStringBuilder(); 
builder.append(":-)"); 
builder.setSpan(new ImageSpan(dd), builder.length() - ":-)".length(),builder.length(),Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 

return builder; 
} 

    //convert view to drawable 
    public static Object getDrawableFromTExtView(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.getWidth(), view.getHeight(), 
      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); 

} 

Aquí está el archivo completo del proyecto, si alguno de ustedes desea utilizar Spannble

Answer 3

Tengo una biblioteca que hace lo que usted está buscando con:

• defecto o completamente personalizable (incluso se puede utilizar su propio diseño)
• apoyo de varias líneas
• Haga clic oyente

Have a look here

Aquí una guía de inicio rápido:

Añadir ChipView a su disposición o crear mediante programación:

<com.plumillonforge.android.chipview.ChipView 
    android:id="@+id/chipview" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" /> 

Init con una lista de datos que se extienden Viruta abstracta y un oyente clic (si lo desea):

List<Chip> chipList = new ArrayList<>(); 
chipList.add(new Tag("Lorem")); 
chipList.add(new Tag("Ipsum dolor")); 
chipList.add(new Tag("Sit amet")); 
chipList.add(new Tag("Consectetur")); 
chipList.add(new Tag("adipiscing elit")); 
ChipView chipDefault = (ChipView) findViewById(R.id.chipview); 
chipDefault.setChipList(chipList); 
chipDefault.setOnChipClickListener(new OnChipClickListener() { 
     @Override 
     public void onChipClick(Chip chip) { 
      // Action here ! 
     } 
    }); 

ChipView defecto aparece así:

pero se puede personalizar a su gusto a partir general a nivel de chip:

Esto no es un MultiAutocomplete pero que puede llegar a imitar (yo en realidad estoy usando el estilo)