Jetpack: DataBinding - Primeros pasos

DataBinding es una librería de Jetpack, que nos permite enlazar los componentes de la UI con los conjuntos de datos para tu aplicación, reduciendo el código y las posibilidades de error al enlazar componentes de las vistas a través de programación.

Ventajas de utilizar DataBinding

• Se elimina el uso del método findViewById(), por lo que no existirán errores en tiempo de ejecución por una referencia no existente.

• Mantiene el código más limpio ya que se enlaza la información en el XML de las vistas.

• Los datos se actualizan automáticamente ya que provee clases y métodos que observan los cambios efectuados en ellos.

• Se reduce la cantidad de llamadas a los métodos que controlan la UI cuando existe un cambio en los datos.

Te mostraremos cómo implementarlo con un proyecto nuevo creado en Android Studio para la explicación. También puedes encontrarlo en GitHub, encontrarás en enlace al final del artículo.

Creando proyecto nuevo en Android Studio

Comenzemos creando un nuevo proyecto haciendo clic en New Proyect

Seleccionaremos la opción No Activity y damos clic en Next

Llenamos la información para el nombre del proyecto con DataBindingPrimerosPasos, el nombre del paquete y el directorio donde guardaremos el proyecto. Para este ejemplo utilizaremos Kotlin y el API v30. Damos clic en Finish y esperamos a que se construya el proyecto.

¿Cómo utilizar DataBinding?

En todas tus aplicaciones de Android (o al menos la mayoría), es recomendable utilizar la última versión de gradle. Para poder utilizar dataBinding, la versión de gradle debe de ser 1.5.0 o mayor.

Ahora debemos de activarlo en nuestro archivo build.gradle en el módulo de la aplicación como se muestra en el siguiente ejemplo:

Agregamos el siguiente fragmento de instrucciones dentro de android

                            
    android {
        …
        buildFeatures {
            dataBinding true
        }
    }
                            

Construímos el proyecto y con esto es suficiente para empezar a utilizarlo.

Crear una nueva Activity con un TextView

Comenzaremos por crear una nueva Activity en nuestro proyecto. El proceso para crearla es clic derecho en app -> New -> Activity -> Empty Activity

La nombramos como MainActivity y Android Studio nos autocompleta el nombre del archivo xml como activity_main.xml y damos clic en Finish.

Primeros pasos con DataBinding

La forma habitual de enlazar una vista de nuestro xml llamado activity_main.xml y nuestra clase MainActivity.kt sin utilizar DataBinding es utilizando el método findViewById(). Veamos cómo lo hacemos a través de DataBinding.

Primero debemos agregar en el archivo activity_main.xml las etiquetas <layout> al inicio y al fin de todo el archivo y mover las anotaciones xmlns dentro de <layout>, también agregaremos un TextView dentro del ConstraintLayout para mostrar un texto, como se muestra en el siguiente ejemplo:

    <layout 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">
 
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
                                    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:textSize="24sp" />
                                    
        </androidx.constraintlayout.widget.ConstraintLayout>
 
    </layout>         
                                

Cuando anidamos el contenido entre las etiquetas <layout> y </layout> en nuestro archivo xml, se generará una clase automáticamente basada en el nombre de nuestro archivo en notación Pascal y agregando el sufijo Binding. Por lo que para nuestro archivo llamado activiy_main.xml, se generará una clase llamada ActivityMainBinding, que contendrá toda la información y propiedades declaradas en el archivo activity_main.xml. Retomaremos esto más adelante.

Ahora agregaremos a nuestro xml un par de expresiones que harán funcionar DataBinding, debajo de nuestra etiqueta layout agregaremos un nodo <data> como se muestra en el ejemplo:

    <data>
        <variable name="greeting" type="String"/>
    </data>       
                                

Este nodo data, generará en nuestra clase ActivityMainBinding una variable a la que podremos asignarle un valor desde código y DataBinding hará el resto para enlazarlo. Aquí definimos una variable llamada greeting, de tipo String. Para mostrar ese valor en nuestro TextView, agregaremos en la propiedad android:text la siguiente expresión:

    <TextView android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          …
          android:text="@{greeting}" />
                                

Las expresiones de DataBinding usan la sintaxis @{} y dentro de las llaves la variable definida dentro del nodo data, en este caso, llamada greeting.

Enlazando xml con nuestra MainActivity.kt

Como mencionamos anteriormente, se generó una clase llamada ActivityMainBinding automáticamente al momento de colocar las etiquetas <layout> en nuestro xml. Ahora hay que enlazar nuestra MainActivity con ella para poder acceder a las propiedades de nuestro archivo activity_main.xml.

Dentro del método onCreate() crearemos una variable de tipo ActivityMainBinding de la siguiente manera:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    
        val binding : ActivityMainBinding = DataBindingUtil.setContentView(
                this, R.layout.activity_main)
    }    
                                

Con esta instrucción, estaremos enlazando la actividad actual con el activity_main.xml. ¿Y ahora cómo le envío un valor a la vista?

Enviando valores a través de DataBinding

Nuestra variable binding ya cuenta con una referencia de las propiedades existentes en activity_main.xml, por lo que basta con acceder a sus atributos y asignar en la variable greeting (que fue la que anteriormente definimos dentro del nodo <data>) como se muestra en el siguiente ejemplo:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    
        val binding : ActivityMainBinding = DataBindingUtil.setContentView(
                this, R.layout.activity_main)

        binding.greeting = "Hola DataBinding"
    }    
                                

Probando la aplicación

Finalmente verificamos que en nuestro archivo AndroidManifest.xml exista la sección <intent-filter> en nuestro MainActivity para ejecutarla al iniciar nuestra aplicación. Si en la creación del Activity no seleccionaste la casilla Launcher Activity este paso es necesario.

    <activity
        android:name=".MainActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
}    
                            

Ejecutando en nuestro dispositivo Android

Ya sea que pruebes la aplicación en un emulador o en un dispositivo físico, veremos el siguiente resultado:

Puntos a tomar en cuenta

Como habrás notado, en ningún momento utilizamos el método findViewById() para enviarle un valor a nuestro TextView, realmente ni siquiera fue necesario agregarle un id al TextView. Tampoco hemos usado algún método como setText() para mandar un valor a la vista.

La clase generada ActivityMainBinding cuenta con la definición de las propiedades del archivo xml desde el cual fue generada. Esta clase se genera en automático cuando habilitamos DataBinding dentro del bloque buildFeatures en nuestro build.gradle y colocamos las etiquetas <layout> al inicio y al fin de nuestro layout.xml.

La clase generada ActivityMainBinding cuenta con la definición de las propiedades del archivo xml desde el cual fue generada. Esta clase se genera en automático cuando habilitamos DataBinding dentro del bloque buildFeatures en nuestro build.gradle y colocamos las etiquetas <layout> al inicio y al fin de nuestro activity_main.xml.

El nodo <data> cuenta con las variables y los tipos que serán utilizados y que la clase generada (ActivityMainBinding) tendrá como propiedades.

Conclusión

DataBinding es una utilería perteneciente a Jetpack que facilita el mantenimiento y el acceso a los elementos definidos en los archivos xml.

Hemos utilizado DataBinding en nuestra MainActivity para mandar un valor a nuestra vista a un campo TextView de manera sencilla sin utilizar findViewById().

Todo el código de este ejercicio lo puedes encontrar en nuestro repositorio de GitHub

Referencias

Documentación Oficial de Jetpack / DataBinding: Enlace

No olvides visitar nuestra cuenta de Instagram @codigazosit

Date una vuelta por el sitio, hay muchos temas interesantes que te gustarán.

¡Muchas gracias por tu visita!