T#021 – Modificare la grafica di un Button nelle applicazioni Android

In un altro post abbiamo parlato di come sfruttare le shape drawable per customizzare lo sfondo di una View di Android. Le shape drawable sono uno strumento molto potente in mano agli sviluppatori, permettono di creare applicazioni senza impazzire troppo con le varie risoluzioni e densità dei diversi display disponibili. Ma in alcuni casi non basta usare le shape drawable, abbiamo infatti bisogno di più flessibilità, vediamo di cosa si tratta.

Riprendiamo la shape drawable creata nel nostro articolo precedente. Nella directory drawable creiamo un file background_normal.xml contenente il seguente codice:

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
		android:shape="rectangle">
	<stroke android:width="2dp" android:color="#99e78b24" />
	<corners android:radius="4dp" />
	<gradient android:startColor="#FFa8c600" android:endColor="#80c1e325"
		android:angle="270" />
</shape>

In questo modo abbiamo creato una “immagine” con un bordo con angoli arrotondati e uno sfondo con un gradiente. Usiamo questo drawable come sfondo di un Button all’interno del layout della activity principale:

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:gravity="center">
	<Button android:layout_width="wrap_content" android:padding="20dip"
		android:layout_height="wrap_content" android:text="Go"
		android:background="@drawable/background_normal" android:onClick="go" />
</LinearLayout>

Abbiamo aggiunto anche un listener sull’evento onClick del button e quindi deve essere presente un metodo go nell’activity che usa questo layout. Il risultato è il seguente:

Sembra tutto ok, ma che succede se clicchiamo sul button?

Ovviamente parte il listener associato ma non c’è il cambio di colore classico dei button. In pratica l’utente non riceve nessun feedback alla pressione del button. Ci vorrebbe un modo per poter associare un drawable diverso al button quando è in stato “pressed”, ovvero quando l’utente ha il dito sul button. Vediamo come fare.

Per prima cosa creiamo un altro sfondo che sfrutteremo per dare la sensazione all’utente di un tasto premuto. Creiamo un nuovo file background_pressed.xml contenente un drawable con angoli arrotondati, ma con sfondo uniforme e dello stesso colore del bordo del drawable creato in precedenza:

1
2
3
4
5
6

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
		android:shape="rectangle">
	<corners android:radius="4dp" />
	<solid android:color="#99e78b24"/>
</shape>

Adesso manca solo un modo per poter associare drawable diversi a seconda dello stato del nostro button (o di una view generica di Android). Questo modo esiste ed è lo StateListDrawable. In pratica creiamo un nuovo file background.xml con un tag selector come root del file e tanti tag item quanti sono gli stati che vogliamo gestire:

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="true" android:drawable="@drawable/background_pressed"/>
	<item android:drawable="@drawable/background_normal" />
</selector>

In questo file abbiamo usato solo due tag item per gestire lo stato pressed e una configurazione di default che viene usata quando nessuna delle precedenti corrisponde. I vari item sono valutati nell’ordine in cui sono inseriti nel file xml, il primo che corrisponde viene usato. Gli stati utilizzabili sono i seguenti:

• android:state_pressed
• android:state_focused
• android:state_selected
• android:state_checkable
• android:state_checked
• android:state_enabled
• android:state_window_focused

Tutti i dettagli sono disponibili nel sito ufficiale di Android.

Specificando come sfondo del button @drawable/background abbiamo ottenuto l’effetto che cercavamo: se l’utente farà tap sul nostro button, lo stato cambierà in state_pressed e di conseguenza verrà mostrato lo sfondo associato:

Conclusioni

I sorgenti del progetto Eclipse sono disponibili per il download, se volete personalizzare i drawable per cambiare i colori fate pure, le mie capacità grafiche sono abbastanza scarse.. 😛

Le drawable sono, secondo me, una delle componenti maggiormente riuscite nel framework di Android. Anche in questo esempio possiamo notare che nel layout abbiamo un semplice riferimento adun drawable. Sta a noi decidere cosa è realmente quel drawable, potrà essere una semplice immagine, così come una shape drawable, o una state list drawable o ancora una 9-patch drawable, che vedremo nei prossimi articoli.