Quando si mostrano dati in una ListView o RecyclerView, è attualmente di uso comune accompagnare ognuna di esse con un’icona all’estrema sinistra che, in molti casi, consiste in lettere incluse in un cerchio colorato. Queste lettere spesso rappresentano semplicemente l’iniziale del testo che segue e la loro realizzazione con gli strumenti che Android nativamente fornisce non è molto complicata: esiste però una libreria che rende ancora più semplice questo lavoro ed in questo post ve la presentiamo.

Risponde al nome di MaterialLetterIcon ed è sufficiente la seguente direttiva Gradle inserita tra le dipendenze per averla a disposizione:

compile 'com.github.ivbaranov:materiallettericon:0.2.2'

L’immagine mostra un esempio di quanto possiamo realizzare molto velocemente:

Ad esempio, costruiamo il layout dell’Activity con una ListView

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

e collochiamo il widget della libreria in un altro layout che modella la singola riga:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <com.github.ivbaranov.mli.MaterialLetterIcon
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerVertical="true"
        android:id="@+id/icon"
        android:layout_marginRight="16dp"/>

    <TextView android:id="@+id/contact"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/icon"
        android:textSize="20sp"/>

</RelativeLayout>

Il codice Java dell’onCreate modellerà l’interfaccia inserendo dati in un ArrayAdapter collegato alla ListView e valorizzando la MaterialLetterIcon con la prima lettera della stringa:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView l= (ListView) findViewById(R.id.listview);
        ArrayAdapter<String> adapter=
                new ArrayAdapter<String>(this, R.layout.row_layout, R.id.contact, new ArrayList<String>())
                {
                    int[] colors=
                            new int[]{
                                    R.color.green,
                                    R.color.orange,
                                    R.color.indigo
                            };
                    @NonNull
                    @Override
                    public View getView(int position, View convertView, ViewGroup parent) {
                        View v=super.getView(position, convertView, parent);
                        MaterialLetterIcon letterIcon= 
                            (MaterialLetterIcon) v.findViewById(R.id.icon);
                        String contact=getItem(position);
                        letterIcon.setLetter(contact.substring(0,1));
                        letterIcon.setShapeColor(ContextCompat.getColor(MainActivity.this, colors[position%colors.length]));
                        return v;
                    }
                };

        l.setAdapter(adapter);

        adapter.add("Rossi Gianluca");
        adapter.add("Bianchi Enrico");
        adapter.add("Verdi Luciana");
        adapter.add("Rossi Anna");
        adapter.add("Neri Gianluca");
        adapter.add("Gialli Silvia");
        adapter.add("Verdi Simone");
    }

Per quanto riguarda i colori, abbiamo creato alcune risorse e, a giro, ne viene usato uno per colorare lo sfondo dell’icona: ovviamente, si possono scegliere politiche più fantasiose.

Le icone possono essere utilizzate anche esclusivamente con codice Java come si vede nell’esempio fornito nell’hompage del progetto:

MaterialLetterIcon icon = new MaterialLetterIcon.Builder(context) //
            .shapeColor(getResources().getColor(R.color.circle_color))
            .setShapeType(SHAPE.CIRCLE)
            .letter("S")
            .letterColor(getResources().getColor(R.color.letter_color))
            .letterSize(26)
            .lettersNumber(1)
            .letterTypeface(yourTypeface)
            .initials(false)
            .initialsNumber(2)
            .create();

Si possono inoltre personalizzare in ogni aspetto – dai colori, al numero di lettere mostrate fino alla forma dell’icona stessa – seguendo le istruzioni fornite dallo sviluppatore: ogni caratteristica sarà assegnabile con un proprio metodo setter.

Provate questa libreria e diteci cosa ne pensate. Alla prossima!