Primeros pasos con Android Data Binding

Android Data Binding

Primeros pasos con Android Data Binding

En este tutorial sobre los Primeros pasos con Android Data Binding, te enseñaremos a dejar de usar el método findViewById , que de seguro conoces

TextView mTvName = (TextView) findViewById(R.id.tvName);

Si eres un Android Developer ya sea que estés aprendiendo o si ya eres todo un Ninja de seguros conoces el método findViewById y por lo tanto habrás tenido que escribir N veces la sentencia anterior por cada uno de los componentes UI que necesitas manipular en un Activity.

Pues con Android Data Binding dejaras de usarla, con lo cual no solo escribirás menos código sino que también lograras construir aplicaciones donde el flujo de datos entre el Layout y la Activity es mucho más eficiente y dinámico, te animas a aprender algo nuevo hoy?

Android Data Binding

Para quitarnos de encima el uso de la sentencia antes mencionada y hacer que durante la compilación de nuestra aplicación el Android Studios (version 1.5 o superior) se encargue de generar dicha sentencia por nosotros, debemos implementar lo necesario para lograr el UI Data Binding o Mapeo de datos entre lo que es el UI Widget que definimos dentro del layout que define la interfaz gráfica de la aplicación y el correspondiente atributo en nuestra actividad o fragmento desde la cual podemos controlar dicho UI Widget (Componente UI).

El termino UI Data Binding, se define como un patrón de desarrollo de software que busca simplificar el desarrollo de aplicaciones GUI (Graphic User Interface). En este patrón se mapea un elemento de la interfaz gráfica con una propiedad de un modelo de datos de manera que cuando el valor cambie en el modelo este se refleje de forma dinámica en la interfaz gráfica y viceversa.

Aplicación sin Android Data Binding.

Cuando desarrollamos en Android de seguro ya conocerás como enlazamos los componentes UI con propiedades dentro de la actividad, veamos esto rápidamente. Imaginemos que tenemos una aplicación sencilla que consta solo de un layout con dos TextView:

  • Un TextView cuyo Id es “name” y contiene un nombre de persona o empresa.
  • Un TextView cuyo Id es “descrip” y contiene la descripción de esa persona o empresa.

A continuación presentamos la estructura del layout antes descrito el cual se implemento en el fichero de nombre activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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"
    tools:context="com.expocodetech.ectdatabinding.MainActivity">

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/name_txt" />

    <TextView
        android:id="@+id/descrip"
        android:layout_below="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/descrip_txt"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:lines="6"/>
</RelativeLayout>

También en el fichero res/values/strings.xml, vamos a agregar los siguientes textos (puedes sustituir los textos con los que desees).

<resources>
    <string name="app_name">ECTDataBinding</string>
    <string name="name_txt">ExpoCode Tech</string>
    <string name="descrip_txt">ExpoCode Tech es Asesoría y Formación online. Nuestro objetivo es
        proveerte de la información actualizada en el desarrollo de aplicaciones Web y Mobile.
    </string>
    <string name="name_jex_txt">Javier Exposito</string>
    <string name="descrip_jex_txt">Desarrollador con más de 10 años de experiencia en el desarrollo
        de aplicaciones Empresariales, Web y Mobile y cuyo objetivo es promover el conocimiento
        tecnológico a todos los que desean aprender algo nuevo cad día.
    </string>
</resources>

Ahora para conectar los 2 TextView del layout activity_main.xml, nos vamos a la actividad MainActivity.java y en el método onCreate implementamos el siguiente trozo de código:

public class MainActivity extends AppCompatActivity {

    //Declaramos las propiedades miembros que representan a los TextView en el
    //activity_main
    private TextView mTvName, mTvDescrip;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //Definimos el layout activity_main como layout a manejar con esta Activity
        setContentView(R.layout.activity_main);

        //Conectamos el TextView name con la propiedad mTvName y seteamos el valor del texto
        mTvName = (TextView) findViewById(R.id.name);
        mTvName.setText(getString(R.string.name_txt));

        //Conectamos el TextView descrip con la propiedad mTvDescrip y seteamos el valor del texto
        mTvDescrip = (TextView) findViewById(R.id.descrip);
        mTvDescrip.setText(getString(R.string.descrip_txt));
    }
}

Como se puede ver por cada uno de los componentes UI que queremos controlar debemos declarar una propiedad y luego instanciar esa propiedad haciendo uso del método findViewById.

Una vez instanciada la propiedad podemos manipular sus atributos, como por ejemplo el texto del TextView llamando al método setText.

Como puedes ver son muchas sentencias y/o pasos para lograr acceder a las propiedades de un componente UI y si tenemos multiples TextViews o combinaciones de TextViews, EditText, Checkbox, RadioButtons y demás componentes UI que podemos insertar en un Layout de Android pues se complica e incrementan las lineas de código dentro de nuestra Activity.

Pues esto lo podemos simplificar haciendo uso de Data Binding, veamos en el siguiente apartado como lograrlo.

Aplicación con Android Data Binding.

El Android Data Binding se puede implementar de varias formas, incluso existen varias librerías que persiguen este patron de desarrollo, sin embargo desde la version 1.5 de Android Studios esta funcionalidad ya viene incluida y sencillamente se activa agregando el siguiente parámetro dentro del nodo android del fichero build.gradle del modulo app.

android {
    ...
    dataBinding {
        enabled = true
    }
    ...
}

Con este parámetro le decimos al compilador que se deben considerar ciertos procesos adicionales para encontrar y mapear las vistas o views (componentes UI como el TextView) que nos interesan dentro de cada Activity que maneje la aplicación.

Una vez que indiquemos el parámetro dataBinding.enabled y sincronicemos el proyecto debemos encerrar el layout que maneja nuestra Activity dentro de un tag raíz llamado layout, con el cual lograremos indicar al compilador que debe considerar esos procesos adicionales antes mencionados para encontrar y mapear los respectivos componentes UI.

Luego dentro del nuevo tag padre y bajo el mismo nivel jerárquico del layout que define la interfaz UI (en nuestro caso el RelativeLayout), debemos declara un nodo data. Sobre este nodo data hablaremos en la parte 2 de este tutorial, así que no olvides suscribirte para que te avisemos cuando este publicada.

Entonces, según lo descrito anteriormente el layout definido en el fichero activity_main.xml quedaría de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data></data>
    <RelativeLayout
        android:id="@+id/activity_main"
        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">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/name_txt" />

        <TextView
            android:id="@+id/descrip"
            android:layout_below="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/descrip_txt"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:lines="6"/>
    </RelativeLayout>
</layout>

Luego en el método onCreate del MainActivity, en vez de escribir todo el código que escribimos en el apartado anterior:

//Definimos el layout activity_main como layout a manejar con esta Activity
setContentView(R.layout.activity_main);

//Conectamos el TextView name con la propiedad mTvName y seteamos el valor del texto
mTvName = (TextView) findViewById(R.id.name);
mTvName.setText(getString(R.string.name_txt));

//Conectamos el TextView descrip con la propiedad mTvDescrip y seteamos el valor del texto
mTvDescrip = (TextView) findViewById(R.id.descrip);
mTvDescrip.setText(getString(R.string.descrip_txt));

Lo sustituimos por el siguiente código (prestar atención a los comentarios):

//Mapeamos el Layout activity_main a una instancia de la clase 
//la cual genere automáticamente Android Studios a partir del layout R.layout.activity_main
ActivityMainBinding binding =
      DataBindingUtil.setContentView(this, R.layout.activity_main);
//Una ves instanciada la clase ActivityMainBinding podemos acceder a los componentes UI
//y por consiguiente podemos manipular sus propiedades
binding.name.setText(getString(R.string.name_txt));
binding.descrip.setText(getString(R.string.descrip_txt));

Conclusión

Como puedes ver con el Data Binding de Android dejamos de usar el método findViewById para conectar el componente UI del layout con la lógica de la aplicación en el Activity y a cambio Android Studio genera una clase en nuestro caso la clase se llama ActivityMainBinding, porque el layout a partir del cual se genera se llama activity_main.xml.

Y es por medio de esta nueva clase ActivityMainBinding, que accedemos a los componentes UI pudiendo entonces manipular sus propiedades.

Si te ha gustado este articulo te invitamos a compartirlo en las redes sociales para que otros tambien se beneficien de este conocimiento y si tienes alguna duda o deseas que escribamos sobre algún tema en especifico no olvides dejar tu comentario al respecto.

Happy Coding!

A %d blogueros les gusta esto: