Android — Creare un progetto con Jetpack Compose e Data Binding Parte 1

In questo tutorial vedremo le basi di Android Compose e il Data Binding.

Nella applicazione finale avremo un semplice counter che verrà aggiornato utilizzando due bottoni.

Che cos’è Jetpack Compose?

Jetpack Compose è un toolkit per poter creare dell UI moderne.
Esso va a sostituire il linguaggio xml come strumento per creare i componenti grafici.

L’idea riprende la struttura del linguaggio Dart che viene utilizzato per creare applicazioni Cross Platform in Flutter e oltre a Google anche Apple ha introdotto con SwiftUI una struttura del linguaggio molto simile.

Quali sono i benefici?

Ogni componente grafico viene descritto come un @Composable (in Flutter si chiamano Widget).
Di base sono dei metodi al cui interno descriviamo il nostro componente con le sue varie caratteristiche.

In questo modo riusciamo ad avere un componente riutilizzabile al massimo anche in altri progetti facendo semplicemente un copia e incolla.

Confronto con il layout xml

Per descrivere un testo usando l’xml dobbiamo scrivere ad esempio:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />

Utilizando Jetpack Compose avremo invece:

Text("Reset")

Come puoi vedere il codice con Jetpack Compose è decisamente più corto e semplice.

Riutilizzo del codice xml e Jetpack Compose

Usando l’xml possiamo usare il tag <include> per includere il layout del file hello_world.xml che conteneva il codice descritto nel esempio precedente.

<androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is an old layout" />

        <include
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            layout="@layout/hello_world" />

    </androidx.appcompat.widget.LinearLayoutCompat>

In Jetpack Compose abbiamo invece questo codice.

Column() {
  Text("This is the new layout")
  helloWorldText()
}

Dove helloWorldText() contiene il codice che abbiamo descritto prima dichiarandolo dentro ad una funzione @Composable.

@Composable
fun helloWorldText(){
    Text("Reset")
}

Anche in questo caso possiamo vedere come sia facile usare Jetpack Compose per riutilizzare il codice.

Che cos’è il DataBinding?

Il DataBinding è una libreria che ci permette di collegare i componenti della UI del nostro layout alle variabili.

Quali sono i benefici?

Quando cambiamo il valore di una variabile collegata alla UI, possiamo vedere il nuovo valore senza aggiornare programmaticamente il valore sul componente.

In questo esempio abbiamo creato una variabile counter mutabile collegata ad un componente Text (riga 5).
Sotto al Text abbiamo aggiunto un Button che al click aumenterà il valore della variabile counter e il cambiamento lo vedremo direttamente sul componente Text.

Lo State in funzioni Composable

Lo State è lo stato di una funzione Composable che ha delle variabili mutabili e che quindi può mutare nel tempo.

Nel esempio precedente abbiamo dichiarato una funziona Composable Stateful, quindi al suo interno viene gestito sia la visualizzazione e sia il cambio dello stato (e quindi del valore di una variabile).
Il problema è che questa funzione diventa poco riutilizzabile visto che può gestire solo la variabile descritta al suo interno.

Questo va contro il principio di Android Compose che vuole rendere il codice più riutilizzabile rispetto a prima.

In questo esempio abbiamo estratto la variabile Counter e il metodo onClick del bottone facendo la logico nel metodo mutableColumn.
In questo modo abbiamo reso la funzione mutableExample Stateless e quindi più riutilizzabile.

CONGRATULAZIONI! 👏 👏 👏

In questo esempio abbiamo visto le basi di un applicazione Android Compose che utilizza il Data Binding.

Qua sotto puoi trovare la seconda parte di questo tutorial

Android — Creare un progetto con Jetpack Compose e Data Binding Parte 2

Se hai dei dubbi o dei consigli da darmi, scrivimi pure!
A presto!