T#013 – Sfruttiamo le Shape Drawable nelle nostre applicazioni Android


Nel post di oggi vediamo un metodo per abbellire le nostre applicazioni Android anche senza bisogno di essere dei “maghi di photoshop”. Il metodo usato è anche un ottimo rimedio per non aver problemi dovuti alle diverse risoluzioni supportate da Android.

Nell’esempio che vediamo oggi vogliamo mostrare un testo con uno sfondo colorato. Per fare la stessa cosa su una pagina web probabilmente avremmo usato un css o un’immagine di sfondo in casi complessi. La stessa cosa la possiamo ottenere anche in un layout di Android, vediamo come.

Colore di sfondo

Iniziamo con il modo più semplice per ottenere un testo con uno sfondo: l’attributo android:background di TextView. Se scriviamo il codice di un colore dentro questo attributo otteniamo un colore di sfondo:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent"
	android:background="#CCC">
	<TextView android:layout_centerInParent="true" android:id="@+id/text1"
		android:layout_width="wrap_content" android:layout_height="wrap_content"
		android:text="devAPP" android:textSize="64sp"
		android:background="#FFa8c600" android:textColor="#FFF"
		android:padding="10dip" />
</RelativeLayout>

Il colore è espresso in formato ARGB, i primi due caratteri sono la trasparenza (FF indica non trasparente), i restanti 6 caratteri sono il classico formato RGB utilizzato un po’ ovunque. Quando definiamo un colore possiamo usare anche il formato RGB, sia a 6 caratteri che a 3. Per esempio abbiamo usato il formato RGB a tre caratteri per impostare lo sfondo del layout più esterno.

Il risultato finale di questo esempio è il seguente:



Shape drawable

L’esempio visto è fin troppo semplice, come possiamo fare se volessimo mettere un gradiente come sfondo e un bordo all’immagine? Possiamo usare un’immagine di sfondo e impostarla nell’attributo android:background, ma come facciamo a farla ridimensionare in base a quanto è lungo il testo? E come gestiamo le varie risoluzioni di Android? E il cambio di orientation?

Per evitare tutti questi problemi usiamo uno shape drawable, creiamo nella directory res/drawable un file xml (per esempio background.xml) con il seguente contenuto:

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>

Abbiamo appena definito un’immagine in un file xml! In pratica abbiamo impostato:

  • la forma da usare tramite l’attributo shape (in questo caso un rettangolo)
  • il colore e lo spessore del bordo all’interno del tag stroke
  • il raggio del bordo arrotondato all’interno del tag radius
  • l’immagine di sfondo all’interno del tag gradient, nel caso in cui volessimo usare un colore unito possiamo usare solid

Per usare questa immagine nel layout usiamo sempre lo stesso attributo, in questo esempio lo valorizziamo usando @drawable/background:

1
android:background="@drawable/background"

Nel layout non ci sono differenze rispetto a usare una immagine (png o jpg) come sfondo. Se cancellassimo il file xml e aggiungessimo un’immagine background.png l’esempio funzionerebbe senza dover cambiare nulla nel layout.

Il risultato finale è questo:



Il vantaggio nell’aver usato un’immagine definita in un xml rispetto a una classica immagine è evidente: l’immagine si adatta automaticamente alle varie risoluzioni e non ci sono problemi legati alla lunghezza della stringa, pensa a tutto Android!

Questo è solo un piccolo esempio di tutto quello che si può fare con gli shape drawable, tutti i tag e gli attributi utilizzabili sono spiegati in dettaglio sul sito ufficiale di Android.

By Fabio Collini

Da agosto 2009 sono un freelance android developer, ho rilasciato due applicazioni nell'Android Market: Apps Organizer e Folder Organizer. Presso OmniaGroup ricopro il ruolo di Tech Leader nell'ambito di un progetto di rich internet application che utilizza JSF, JPA(EclipseLink) ed EJB3.

7 comments

  1. Usare le shape è fondamentale ma purtroppo a volte le shape più complicate diventano impossibile ricrearle in Android. Se ci fosse un tool integrato in ADT non sarebbe male…

  2. Ciao! Una domanda al volo: ma se volessi definire diverse Shape nella mia app devo ogni volta creare un file .xml oppure posso metterle tutte in uno stesso file come per le stringhe ed i colori? E in caso, come faccio a richiamare le differenti Shape?
    Grazie mille!!!

  3. Ciao, non ho mai provato ma secondo me devi fare un file per ogni shape. Come dici anche te altrimenti non ci sarebbe modo di richiamarli

  4. se volessi fare uno shape x il buttone normale e uno per il pressed (come funziona quello btn default)

    come dovrei fare?

Comments are closed.