Tutorial: Android Percent Support Library per il layout delle nostre applicazioni Android

La libreria di supporto del sistema Android è stata recentemente arricchita di un nuovo ramo, la Percent Support Library, che l’ha dotata di un qualcosa che è sempre stato richiesto a gran voce: il dimensionamento delle componenti visuali in percentuale nelle applicazioni Android, proprio come si è abituati a fare nei layout web.

In questo articolo, vedremo la novità al lavoro in un esempio pratico, ma per poterla gustare al meglio facciamo prima un pò di preambolo.

Un pò di background: layout e dimensioni

Quando progettiamo un’interfaccia utente in un’app Android sappiamo che la prima cosa da fare è scegliere quale layout le si addice meglio. Un layout – tanto per ricordare il concetto – è il modo in cui viene gestita la disposizione fisica degli elementi visuali. I più comuni ma non gli unici che esistono nello sviluppo Android sono:

il LinearLayout che dispone gli elementi “linearmente”, da sinistra a destra o dall’alto in basso a seconda che abbia un orientamento orizzontale o verticale;
il RelativeLayout, il più flessibile, rende ogni elemento “flottante” e non ci resta che stabilire i rapporti di posizionamento tra il singolo elemento ed il suo contenitore o tra un elemento e l’altro;
il FrameLayout destinato a contenere un singolo componente, spesso il segnaposto di un Fragment.

Ciò che accomuna tutti gli elementi grafici in Android – siano essi layout che altri tipi di View – sono i parametri layout_width e layout_height che, rispettivamente, definiscono il modo in cui un componente si estende in larghezza e altezza. Tali dimensioni vanno espresse possibilmente con le costanti wrap_content e match_parent o, quando necessario, con delle dimensioni esplicite in dp, il pixel “virtuale” che si adatta alla densità dello schermo.

Ciò che mancava era un dimensionamento “ufficiale” in percentuale ossia la possibilità di dichiarare: “questo elemento deve essere largo il 30% del suo contenitore”. In alternativa, si poteva fare qualcosa di simile con l’attributo layout_weight che assegnava un peso agli elementi o con un dimensionamento dinamico in Java.

Per sopperire a questa necessità, come detto nell’introduzione, è stata integrata la libreria di supporto con il ramo Percent il quale ha portato con sè due nuovi layout, PercentRelativeLayout e PercentFrameLayout, nonchè gli strumenti necessari per crearne di propri.

Integrare la Percent Support Library

Aggiungerla al proprio progetto Android Studio è molto agevole grazie a Gradle. E’ sufficiente inserire nel nodo dependencies del file build.gradle del modulo la seguente riga:

com.android.support:percent:23.1.0

senza dimenticarsi di sincronizzare il progetto con il pulsante “Sync Project with Gradle Files” .

Quando Gradle avrà terminato il suo lavoro di aggiornamento le nuove funzionalità saranno disponibili.

L’esempio

L’esempio che tratteremo sarà molto semplice ma mostrerà rapidamente in cosa consiste la novità.

La figura seguente mostra un’interfaccia piuttosto elementare in cui due TextView indicano la larghezza e l’altezza in pixel del display (misurate con quanto offre la classe DisplayMetrics) e due pulsanti modellati con le nuove dimensioni in percentuale: uno largo il 50% del contenitore ed uno l’80.

Questo il layout formattato in XML:

<android.support.percent.PercentRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".MainActivity">

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/dimensioni">
            <TableRow>
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Larghezza (pixel)"/>
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:id="@+id/txt_larghezzapx"/>
            </TableRow>
            <TableRow>
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Altezza (pixel)"/>
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:id="@+id/txt_altezzapx"/>
            </TableRow>

        </TableLayout>

        <Button
            app:layout_widthPercent="50%"
            android:layout_height="wrap_content"
            android:text="Larghezza 50%"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/dimensioni"
            android:layout_marginTop="20dp"
            android:id="@+id/button50"
            android:onClick="showDimension"/>

        <Button
            app:layout_widthPercent="80%"
            android:layout_height="wrap_content"
            android:text="Larghezza 80%"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/button50"
            android:layout_marginTop="20dp"
            android:onClick="showDimension"/>


    </android.support.percent.PercentRelativeLayout>

Impieghiamo il nuovo PercentRelativeLayout all’interno del quale siamo messi in condizione di usare dimensionamenti in percentuale. Lo abbiamo fatto impostando a 50% e 80% gli attributi layout_widthPercent presenti in entrambi i pulsanti in sostituzione del classico layout_width. Quest’ultimo, come ben sappiamo, è obbligatorio in qualunque componente, insieme a layout_heigth, tanto che, nella scrittura del codice, Android Studio ne segnala la mancanza permettendo tuttavia di portare a termine il build dell’applicazione con successo.

Entrambi i pulsanti, al click, provocheranno l’invocazione del metodo showDimension presente nella MainActivity il quale non farà altro che mostrare in una SnackBar la dimensione effettiva del pulsante che, a seconda dei casi, sarà proprio il 50% o l’80% della larghezza del display.

La figura seguente mostra l’istante immediatamente successivo alla pressione del pulsante con etichetta “Larghezza 80%” il quale è largo l’80% di 480.

Nella visualizzazione landscape il valore che prima era l’altezza ora rappresenta la larghezza ma il funzionamento è il medesimo. Premendo il pulsante “Larghezza 50%” il messaggio nella Snackbar ci dimostra che è largo la metà di 800 px.

Quello che segue è il codice dell’Activity che risulta nel complesso molto semplice: nell’onCreate vengono inizializzate le TextView e la Toolbar mentre il metodo showDimension non fa altro che dirci quanto il pulsante toccato è largo.

public class MainActivity extends AppCompatActivity {

    private DisplayMetrics metrics;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);

        TextView txt= (TextView) findViewById(R.id.txt_larghezzapx);
        txt.setText(Integer.toString(metrics.widthPixels));

        txt= (TextView) findViewById(R.id.txt_altezzapx);
        txt.setText(Integer.toString(metrics.heightPixels));

    }

    public void showDimension(View v)
    {
        Snackbar.make(v, "Larghezza del pulsante: "+v.getWidth()+" px", 
                   Snackbar.LENGTH_LONG).show();
    }

}

Altri aspetti

Oltre a quello che abbiamo visto si possono impostare altri aspetti: l’altezza con layout_heightPercent ma anche tutti i margini possibili a seconda che parliamo di PercentFrameLayout o PercentRelativeLayout. La versione 23.1 della libreria di supporto ha aggiunto anche l’attributo layout_aspectRatio che permette di impostare un rapporto fisso tra le due grandezze (larghezza o altezza) così che una di esse sia dichiarata esplicitamente e l’altra ne sia tratta di conseguenza.

Chiunque abbia programmato in Android sinora non può non aver notato la mancanza di una soluzione simile nell’ambito dei layout pertanto sperimentarla è d’obbligo e, come si è visto, basta approntare velocemente alcuni pulsanti per valutarne l’efficacia.

Alla prossima!