DevCorner: miglioriamo la ListView con poche righe!

Roberto Orgiu
Roberto Orgiu
DevCorner: miglioriamo la ListView con poche righe!

Conosciamo tutti l'importanza della ListView nella gestione di contenuti e sappiamo anche quanto sia difficile ottenere un insieme di elementi che sia, oltre che funzionale, anche graficamente appagante: proprio per questo motivo, sulla scia di un post pubblicato da Android Developers qualche tempo fa, vi proponiamo un semplice trucco per migliorare l'appeal di questo componente.

Partiamo quindi da una situazione abbastanza tipica, come quella di un'Activity che mostra una serie di elementi, occupando l'intera schermata.

before

Come possiamo notare, ci sono almeno due dettagli che stonano, in questo esempio: in primis, sembra che la ListView sia tagliata in mezzo alla NavBar ed alla Status Bar, dando un effetto artificioso e poco preciso. In secondo luogo (anche se non si nota particolarmente dalla GIF qui sopra), la scrollbar è posta lungo il bordo verde chiaro a destra degli elementi, in modo da coprirlo.

Vediamo quindi come possiamo risolvere il primo di questi problemi: la soluzione, decisamente semplice, consiste nell'aggiungere clipToPadding agli attributi della ListView, durante la sua dichiarazione all'interno del layout, impostandone il valore a false, in modo che, durante lo scroll, il padding sparisca insieme agli elementi.

Per risolvere invece il problema della scrollbar, attuiamo una soluzione analoga che, tramite l'attributo scrollbarStyle, si occupa di spostare la barra di scorrimento al di fuori dell'overlay.

Nel nostro layout avremo quindi qualcosa di simile a questo:

<ListView
...
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"/>

Il risultato dell'aggiunta di queste due semplici linee è sicuramente un tocco minimo, ma che porta comunque un netto miglioramento all'estetica della nostra Activity

after

Se volete dare un'occhiata ai sorgenti completi, fate un salto sul thread ufficiale del nostro forum, dove troverete il link al repository relativo a questo DevCorner.