Android SDK: creare bottoni personalizzati

 Tutti noi sappiamo cosa sia un bottone e quale sia la sua utilità in un'applicazione ma bisogna ammettere che, nonostante ognuno di noi segua le linee guida di Google per il design delle proprie creazioni, molte volte la grafica del componente stock stride un pochino rispetto al resto del software.

Ovviamente, Android ci da la possibilità di modificare la grafica dei componenti e vediamo quindi che creare un bottone come quello in figura è possibile, oltre che facile da realizzare.

Per prima cosa, nel nostro progetto, dobbiamo creare un file XML dentro alla cartella Drawable (a meno che non ne vogliamo uno diverso per ogni layout, ma il procedimento sarebbe lo stesso, semplicemente includendo lo stesso file in tutte le cartelle che iniziano con Drawable e modificandone poi il contenuto) che, nel nostro esempio è btn1.xml.

Dentro questo file dobbiamo creare una forma, che sarà poi lo sfondo del nostro bottone, usando le regole che l'SDK di Android ci mette a disposizione.

Nel nostro esempio, il codice che abbiamo usato è questo:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<corners
android:radius="15dp"/>

<padding
android:left="7dp"
android:right="7dp"
android:top="7dp"
android:bottom="7dp"/>

<gradient
android:endColor="#FF9b9b9b"
android:startColor="#FFFFFFFF"
android:type="linear"
android:angle="270"/>
</shape>

Guardandolo attentamente, notiamo come, alla quarta riga, specifichiamo il tipo di forma, che nel nostro caso è un rettangolo, ma avremmo potuto scegliere anche tra ovale, linea e anello, che però poco si adattavano ad un bottone. Proseguendo, notiamo i vari parametri come il raggio di curvatura dell'angolo (sezione corners), lo spazio che la scritta deve lasciare dal bordo (padding) e infine il gradiente.

Fatto questo, andiamo nel nostro layout principale ed inseriamo un bottone, ricordandoci di dargli un ID (ci servirà per cambiare il font) e clicchiamoci sopra con il pulsante destro del mouse; a questo punto, scegliamo la voce Other Properties, seguendo poi All By Name e cercando Background.

A questo punto, sotto la voce Drawable, troviamo il nome del nostro file senza estensione (btn1): selezioniamolo e diamo l'OK. Lo sfondo per il bottone ora appare nel nostro layout.

Occupiamoci ora del carattere: troviamo un font di nostro gradimento (nel nostro esempio abbiamo usato il font arkitech_light.ttf) e copiamo il file TTF nella cartella Assets e aggiorniamo il progetto. A questo punto, non ci resta che spostarci nell'Activity che caricherà il nostro layout e andare a cercare il bottone, impostandogli il Typeface che abbiamo scelto.

Typeface btnFont = Typeface.createFromAsset(getAssets(), "arkitech_light.ttf");
Button btn1 = (Button) findViewById(R.id.btn1);
btn1.setTypeface(btnFont);

Come per ogni tutorial, trovate tutte le risorse nell'apposito thread del nostro forum, inclusi APK e sorgenti completi.

Ringraziamo Erika per la sua consulenza grafica e la bozza.