Chips

chips

Según la documentación de Google sobre Material Design.

Los chips son usados para representar entidades complejas en pequeños bloques, como puede ser un contacto. Pueden contener una imagen, un titulo y una breve descripción.

Su uso mas común es invocarlos e insertarlos en campos de texto (generalmente en el campo to:). Cuando se comienza a escribir se muestra un listado con información de diferentes contactos y se selecciona una.

contact chips

¿Cómo se añade?

I. Clona el proyecto chips de los repositorios Open Source de Google.

git clone https://android.googlesource.com/platform/frameworks/opt/chips  

II. Importa un nuevo módulo en Android Studio con la opción del menú New/import module, eligiendo la ruta donde el proyecto fué clonado.

III. Compila el nuevo módulo como dependencia en tu módulo de aplicación app.

dependencies {  
    compile project(':chips')
}

IV. Añade a tu archivo gradle del nuevo modulo las últimas versiones de las librerías de soporte annotations y v4.

dependencies {  
    compile 'com.android.support:support-annotations:X.X.X'
    compile 'com.android.support:support-v4:X.X.X'
    // X.X.X es la última versión disponible
}

V. Declara tu RecipientEditTextView dentro de cualquier archivo layout.

<com.android.ex.chips.RecipientEditTextView  
    android:id="@+id/example_retv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Example" 
    />

VI. Obtén la referencia del RecipientEditTextView y añade el Tokenizer que es usado para distinguir substrings.

RecipientEditTextView myRetv =  
    (RecipientEditTextView) findViewById(R.id.example_retv);

myRetv.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());

myRetv.setAdapter(new BaseRecipientAdapter(this));  

NOTA: Puedes ver mas en la documentación de Android Developers. También añade el Adapter encargado de tratar la información.

¿Cómo modificar el estilo?

I. Modifica el estilo de los chips del RecipientEditTextView, modificando sus atributos.

<com.android.ex.chips.RecipientEditTextView  
    android:id="@+id/email_retv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email adress"
    android:minHeight="58dp"
    app:avatarPosition="end"
    app:selectedChipBackgroundColor="#FF4081"
    app:unselectedChipBackgroundColor="#FF4081"
    app:selectedChipTextColor="#FFF"
    app:unselectedChipTextColor="#FFF" 
    />

II. Edita chips_dropdown_background que se encuentra en la paquete drawable del modulo chips para hacer cambios sobre la dropdown list que muestra la query con los contactos.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/chips_dropdown_background_activated"
          android:state_activated="true"/>
    <item android:drawable="@color/chips_dropdown_background_pressed"
          android:state_pressed="true"/>
    <item android:drawable="@android:color/white"/>

</selector>  

III. Cambia los colores de los textos mostrados en la dropdown list editando el chips_dropdown_text que se encuentra en el paquete color del modulo chips.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_activated="true" android:color="#FE4080"/>
    <item android:color="#955097"/>

</selector>  

IV. Finalmente, edita la hoja de estilos del modulo chips, styles.xml de algunos otros atributos.

<resources xmlns:tools="http://schemas.android.com/tools">  
    <style name="RecipientEditTextViewBase"
        parent="@android:attr/autoCompleteTextViewStyle">
        ...
    </style>

    <style name="RecipientEditTextView"
         parent="@style/RecipientEditTextViewBase">
        ...
    </style>

    <style name="ChipAutocompleteWrapperStyle">
        ...
    </style>

    <style name="ChipAutocompleteDividerStyle">
        ...
    </style>

    <style name="ChipTextViewLayoutStyle">
        ...
    </style>

    <style name="ChipTitleStyle">
        ...
    </style>

    <style name="ChipSubtitleStyle">
        ...
    </style>

    <style name="ChipIconBaseStyle">
        ...
    </style>